<template>
  <div class="wishlist-wrapper" ref="client">
    <div class="wishlist" :class="{filter: prompt || showConditions}" ref="home" @scroll="scrollHander()">
      <div class="tabs">
        <router-link class="tab" exact :to="{ path: '/cart' }">
          <span>全部</span>
        </router-link>
        <a class="tab active">
          <span>到货提醒</span>
        </a>
      </div>
      <div class="header">
        <div class="left">到货提醒 {{carts.length||""}}</div>
        <div class="right">
          到货提醒发送规则
          <i @click.stop="prompt=true" class="el-icon-warning-outline"></i>
        </div>
      </div>
      <div class="books" v-if="carts.length">
        <div class="book" v-for="cart in carts" :key="cart.id" @click.stop="toBook(cart.book.id)">
          <div class="content">
            <div class="cover">
              <img class="cover" :src="cart.book.cover" alt="" />
              <p>暂时无货</p>
            </div>
            <div class="info">
              <h2 class="title">
                {{cart.book.name}}
                <div class="close" @click.stop="removeCart(cart.id)">
                  <i class="el-icon-close"></i>
                </div>
              </h2>
              <span class="desc has-other" v-if="cart.hasOtherCondition" @click.stop="updateConditionState(cart)" >
                {{conditions[cart.condition]}}
                <i class="el-icon-caret-bottom"></i>
              </span>
              <div class="desc" v-else>{{conditions[cart.condition]}}</div>
              <div class="publisher">{{cart.book.publisher}}</div>
              <div class="condition">
                <div class="price">￥{{cart.book.price*cart.discount / 10 | numeral}}</div>
                <span class="discount">{{cart.discount}}折</span>
                <!-- <div class="lock">锁定</div> -->
              </div>
            </div>
          </div>
          <!-- <div class="close" @click.stop="removeCart(cart.id)">
            <i class="el-icon-close"></i>
          </div> -->
        </div>
      </div>
      <div class="footer">
        <div class="footer-wrapper">
          <div class="line"></div>
          <svg
            width="12"
            viewBox="0 0 24 24"
            fill="currentColor"
            xmlns="http://www.w3.org/2000/svg"
            class="jsx-4100974190"
          >
            <rect x="4" y="4" width="16" height="16" class="jsx-4100974190" />
          </svg>
          <div class="line"></div>
        </div>
      </div>
      <div
        class="loading"
        v-show="loading"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      ></div>
      <router-link tag="div" class="toHome" :to="{ path: '/' }">
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
          <path
            fill="none"
            stroke="#fff"
            stroke-width="1.5"
            d="M19.022 10.252v7.64a3 3 0 0 1-3 3H5.66a3 3 0 0 1-3-3v-7.676C.582 9.8.393 8.267 2.424 6.429l4.212-3.814c2.378-2.153 6.226-2.16 8.612 0L19.46 6.43c2.088 1.89 1.825 3.466-.438 3.823zM7.76 20.865h6.364v-4.327c0-1.11-.711-2.005-1.59-2.005H9.35c-.878 0-1.59.898-1.59 2.005v4.327z"
          />
        </svg>
      </router-link>
    </div>
    <v-condition v-if="showConditions" @close-conditions="showConditions =false" @refresh="reloadCart(1,carts.length)" :cart="cart"></v-condition>
    <div class="refuse-rule" v-if="prompt" @click.self.stop="prompt = false">
      <div class="content">
        <div class="content-main">
          <div class="modal-main">
            <div class="modal-header">到货提醒发送规则</div>
            <div class="modal-body">
              <div class="contents">
                <div> 每次有书上架时都会给标记过这本书「到货提醒」的用户发通知。</div>
                <ul>
                  <li>当一本书被太多人标记了「到货提醒」时，通知是无法做到同时发送给所有人的，如果在发送过程中这本书已经被买走了，就不会继续给余下的人发送了，这会导致有时候书到货了却有部分用户没收到通知的情况。</li>
                  <li>我们会用公平的轮换机制去安排每次书到货时的通知发送顺序。</li>
                </ul>
              </div>
              <div class="operation">
                <div class="agree-button" @click="prompt = false">好的</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VCondition from "@/components/condition/SelectCondition";
import { mapActions } from "vuex"
const WISHLIST_URL = "/cart/stockout";
export default {
  name: 'wishlist',
   data () {
    return {
      carts:[],
      cart:null,//修改品相的书籍
      conditions: ["品相良好", "品相中等"],
      showConditions: false,
      prompt: false, //提示弹窗
      pager: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
        pages: -1,
        lastPage: false
      },
      loading: false,
      bookScorll: null
    }
  },
  created () {
    this.refreshCart(1);
  },
  methods: {
    ...mapActions(["queryBookSkus"]),
    //刷新数据
    async refreshCart(pageNum) {
      if (this.loading) {
        return;
      }
      this.loading = true; // 显示加载图标
      let pageSize = this.pager.pageSize;
      let pages = this.pager.pages;
      // 是否是最一页
      if (this.pager.lastPage) {
        console.info("最后一页");
        this.loading = false;
        return;
      }

      pageNum = pageNum <= 0 ? 1 : pageNum;

      let data = await this.$http.get(WISHLIST_URL, {
        params: {
          pageSize,
          pageNum
        }
      });
      console.info(data.data);
      let pager = data.data;
      if (data.code === 0) {
        //有数据返回追加
        if (pager.list.length) {
          this.carts.push(...pager.list);
          let {pageNum,pageSize,pages,total,lastPage} = pager;
          this.pager = {pageNum,pageSize,pages,total,lastPage};
          this.getScorllHeight();
        }
       
      }
      this.loading = false;
      
    },
    //删除购物车商品
    async removeCart(id){
      let data = await this.$http.delete("/cart/"+id);
      if(data.code === 0){
        this.reloadCart(1,this.carts.length);
      }
    },
    //重载数据
    async reloadCart(pageNum,pageSize){
      let data = await this.$http.get(WISHLIST_URL, {
        params: {
          pageSize,
          pageNum
        }
      });
      console.info(data.data);
      let pager = data.data;
      if (data.code === 0) {
        //有数据返回追加
        if (pager.list.length) {
          this.carts = pager.list;
          let {total,lastPage} = pager;
          this.$set(this.pager,"total",total);
          this.$set(this.pager,"lastPage",lastPage);
        }
      }
      this.loading = false;
      this.getScorllHeight();
    },
    //弹出修改品相选项
    updateConditionState(cart) {
      this.showConditions = !this.showConditions;
      this.cart = cart;
      console.info(this.showConditions)
      if(this.showConditions){
        this.queryBookSkus(cart.book.id);
      }
    },
    //跳转到书籍详情
    toBook(id){
      this.$router.push({name:"book",params: {id}});
    },
    //获取滚动条高度
    getScorllHeight() {

      this.$nextTick(function() {
        let ele = this.$refs.home;
        let firstElTop = ele.offsetTop;
        console.info(firstElTop);
        //滚动条元素高度
        this.bookScorll = ele.scrollHeight;
        console.info(ele.clientHeight);
        console.info(this.$refs.client.clientHeight);

        //数据不够继续请求
        if(this.bookScorll <= this.$refs.client.clientHeight) {
          this.refreshCart(this.pager.pageNum+1);
        }
      });
    },
    //当前滚动条位置
    scrollHander() {
      
      let ele = this.$refs.home;
      console.info(ele.scrollTop);
      if (ele.scrollTop + ele.clientHeight >= this.bookScorll - 10) {
        this.refreshCart(this.pager.pageNum + 1);
      }
    },
  },
  components: {
    VCondition
  }
}
</script>

<style lang="scss" scoped>
.wishlist-wrapper{
  height: 100vh;
  overflow: hidden;
  .wishlist{
    height: 100vh;
    overflow: scroll;
    width: 100vw;
    margin-right: -10px;
    padding-right: 10px;
    .tabs {
      display: flex;
      height: 50px;
      border-bottom: 0.5px solid #f2f2f2;
      // background-color: #f2f2f2;
      .tab {
        color: #333333;
        text-decoration: none;
        flex: 1;
        display: flex;
        justify-content: center;
        &.active {
          color: #18c3aa;
          span {
            margin-bottom: 0;
            border-bottom: 3px solid #18c3aa;
          }
        }
        span {
          margin-top: 3px;
          display: flex;
          justify-content: center;
          align-items: center;
          // border-bottom: 3px solid #fff;
          margin-bottom: 3px;
        }
      }
    }

    .header {
      border-bottom: 0.5px solid #f2f2f2;
      height: 42px;
      line-height: 42px;
      display: flex;
      // align-items: center;
      padding: 0px 15px;
      font-size: 14px;
      font-weight: 300;
      .left {
        flex: 1;
      }
      .right {
        color: rgb(170, 170, 170);
        font-size: 13px;
        font-weight: 300;
        display: flex;
        align-items: center;
        el-icon-warning-outline {
          margin-left: 2px;
        }
      }
    }

    .books {
      .book {
        border-width: 0.5px;
        border-style: solid;
        border-color: rgb(242, 242, 242);
        padding: 18px 15px;
        position: relative;
        border-top: 0.5px solid rgb(242, 242, 242);
        .close {
          position: absolute;
          right: 18px;
          top: 15px;
          color:rgb(170, 170, 170); 
        }
        .content {
          flex: 1;
          display: flex;
          .cover {
            width: 60px;
            height: 90px;
            position: relative;
            font-size: 12px;
            p {
              position: absolute;
              top: 0;
              left: 0;
              bottom: 0;
              right: 0;
              color: rgb(255, 255, 255);
              background: rgba(0, 0, 0, 0.2);
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 0;
            }
          }
          .info {
            flex: 1;
            display: flex;
            flex-flow: column nowrap;
            align-items: flex-start;
            justify-content: space-between;
            margin-left: 12px;
            .title {
              width: 100%;
              margin: 0;
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              color: #333;
              font-size: 14px; 
              font-weight: normal;
            }
            .desc {
              display: inline-block;
              font-size: 12px;
              color: #666;
              margin-top: 2px;
              padding: 2px 4px;
              border: .5px solid rgb(214, 186, 140);
              border-radius: 4px;
              &.has-other{
                // border: .5px solid rgb(214, 186, 140);
                border-radius: 4px;
              }
            }
            .publisher{
              display: flex;
              justify-content: space-between;
              align-items: flex-end;
              font-size: 10px;
              color: #333;
            }
            .condition {
              display: flex;
              justify-content: space-between;
              align-items: flex-end;
              .price {
                color: #333;
              }
              .discount {
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                height: 18px;
                padding: 0 6px;
                color: rgb(214, 186, 140);
                font-weight: 400;
                border: 0.5px solid rgb(214, 186, 140);
                border-radius: 4px;
                white-space: nowrap;
                margin-left: 6px;
                margin-right: 6px;
                color: rgb(242, 129, 129);
                border-color: rgb(242, 129, 129);
                font-size: 12px;
              }
              .lock {
                font-size: 12px;
                padding: 6px 10px;
                background-color: rgb(255, 255, 255);
                color: rgb(24, 195, 170);
                white-space: nowrap;
                border: .5px solid rgb(242, 242, 242);
                border-radius: 999px;
                text-align: center;
                border-color: rgb(24, 195, 170);
              }
            }
          }
        }
      }
    }

    .footer {
      display: flex;
      justify-content: center;
      height: 19px;
      color: rgb(102, 102, 102);
      font-size: 14px;
      line-height: 19px;
      padding: 30px 0px;
      line-height: 19px;
      .footer-wrapper {
        display: flex;
        align-items: center;
        color: rgba(0, 0, 0, 0.1);
        .line {
          width: 42px;
          border-top: 0.5px solid currentcolor;
        }
        svg {
          transform: rotate(45deg);
          margin: 0px 9px;
        }
      }
    }
    .loading {
      padding-bottom: 40px;
    }
    .toHome {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      position: fixed;
      bottom: 66px;
      right: 16px;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px 0px;
      border-radius: 50%;
      background: rgba(102, 102, 102, 0.96);
    }
    &.filter{
      filter: blur(6px);
    }
  }
   .refuse-rule{
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      z-index: 2;
      background-color: rgba(0, 0, 0, .4);
      .content{
        margin-left: 30px;
        margin-right: 30px;
        display: flex;
        height: 100%;
        flex-direction: column;
        pointer-events: none;
        .content-main{
          flex-grow: 1;    
          display: flex;
          align-items: center;
          justify-content: center;        
          .modal-main{
            position: relative;
            box-sizing: border-box;
            width: 100%;
            max-width: 340px;
            background: #fff;
            border-radius: 10px;
            overflow-x: hidden;
            pointer-events: auto;  
            .modal-header {
              margin: 0 22px;
              padding: 26px 0px 16px;
              font-size: 18px;
              text-align: center;
              border-bottom: .5px solid rgb(242, 242, 242);
              // height: 28px;
            }   
            .modal-body {
              text-align: center;
              white-space: pre-wrap;
              padding: 0px;
              margin: 0px;
              .contents{
                font-size: 16px;
                font-weight: 300;
                line-height: 1.5;
                text-align: left;
                padding: 0px 22px 17px;
                ul{
                  list-style: none;
                  padding: 0px;
                  margin-top: 12px;
                  margin-bottom: 0px;
                  li{
                    padding-left: 16px;
                    position: relative;
                    margin-bottom: 0px;
                  }
                  li:before {
                    content: "";
                    box-sizing: border-box;
                    width: 5.25px;
                    height: 5.25px;
                    position: absolute;
                    left: 0px;
                    top: 9.975px;
                    border-radius: 50%;
                    background: rgb(24, 195, 170);
                    border-width: 1px;
                    border-style: solid;
                    border-color: rgb(24, 195, 170);
                    border-image: initial;
                  }
                }
              }
              .operation{
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                border-top: 1px solid rgb(247, 247, 247);
                
                .return{    
                  flex-grow: 1;
                  flex-shrink: 0;
                  flex-basis: 0px;
                  height: 54px;
                  text-align: center;
                  color: rgb(170, 170, 170);
                  font-weight: normal;
                  border-right: 1px solid rgb(247, 247, 247);
                  line-height: 54px;
                  cursor: pointer;
                }
                .agree-button{
                  flex-grow: 1;
                  flex-shrink: 0;
                  flex-basis: 0px;
                  height: 54px;
                  text-align: center;
                  color: rgb(170, 170, 170);
                  font-weight: normal;
                  color: rgb(24, 195, 170);
                  line-height: 54px;
                }
              }
            }  
          } 
        }
      }
    }
}

</style>
