<template>
  <!-- 商品收藏 -->
  <div class="con-box uc-collection">
    <!-- 导航 -->
    <div class="uc-nav">
      <div class="nav-box">
        <!-- <div class="nav-item active">
          <span class="text">商品收藏<em class="number">5</em></span>
          <i class="line"></i>
        </div>-->
        <div
          :class="['nav-item', favType == 1 ? 'active' : '']"
          @click="favType = 1"
        >
          <span class="text">
            {{$t('collection.productCollection')}}
            <em class="number">{{ prodFavNum > 0 ? prodFavNum : null }}</em>
          </span>
          <i class="line"></i>
        </div>
        <div
          :class="['nav-item', favType == 2 ? 'active' : '']"
          @click="favType = 2"
        >
          <span class="text">
            {{$t('collection.storeCollection')}}
            <em class="number">{{ shopFavNum > 0 ? shopFavNum : null }}</em>
          </span>
          <i class="line"></i>
        </div>
      </div>
    </div>
    <!-- /导航 -->
    <!-- 搜索 -->
    <div class="uc-serach">
      <div class="left">
        <div class="select-item" v-if="favType == 1">
          <span class="tit" @click="prodTypeSearch==2?2:0">{{
            prodTypeSearch === 0 ? $t('collection.allProducts') : $t('collection.failedProducts')
          }}</span>
          <div class="select">
            <span class="s-item" @click="prodTypeSearch = 0">{{$t('collection.allProducts')}}</span>
            <span class="s-item" @click="prodTypeSearch = 2">{{$t('collection.failedProducts')}}</span>
          </div>
        </div>
        <div class="action-btn">
          <a
            href="javascript:void(0);"
            class="batch"
            @click="batchManager($event)"
            >{{$t('collection.batchManagement')}}</a
          >
        </div>
        <div class="action-btn active">
          <a
            href="javascript:void(0);"
            v-if="isBatchEdit"
            class="batch"
            @click="overManager()"
            >{{$t('collection.completeManagement')}}</a
          >
          <span class="batch-box" v-if="isBatchEdit">
            <span class="check" @click="checkAll()">
              <input
                type="checkbox"
                class="checkbox default"
                :class="{ checked: checkAllData, default: !checkAllData }"
              />
              <span class="text">{{$t('collection.selectAll')}}</span>
            </span>
            <span class="cancel-collection" @click="showPopup()">
              <i class="icon"></i>
              <span class="text">{{$t('collection.cancelCollection')}}</span>
            </span>
          </span>
        </div>
      </div>
      <div class="right">
        <input
          type="text"
          class="input"
          :placeholder="favType == 1 ? $t('collection.enterProductName') : $t('collection.enterStoreuctName')"
          @keyup.enter="searchFavProdList(true)"
          v-model="prodNameSearch"
        />
        <a href="javascript:void(0)" @click="searchFavProdList(true)" class="search">{{$t('collection.Search')}}</a>
      </div>
    </div>
    <!-- /搜索 -->
    <!-- 收藏列表 -->
    <div class="goods-list">
      <div class="list-con">
        <div
          v-for="(data, index) in favType == 1 ? prodFavList : shopFavList"
          :key="index"
          :class="[
            'item',
            isBatchEdit ? 'batch-edit' : '',
            data.isCheck ? 'checked' : ''
          ]"
          @click="selectIt(favType == 1 ? data.prodId : data.shopId, index),addProdCartOrIntoShop(data)"
        >
          <!-- @click="selectIt(favType == 1 ? data.prodId : data.shopId, index),addProdCartOrIntoShop(favType == 1 ? data.prodId : data.shopId, favType == 1 ? data.status : data.shopStatus)" -->
          <div class="goods-img">
            <div v-if="favType == 1">
              <img v-if="data.pic" :src="data.pic" alt  @error="handlePicError"/>
              <img v-else src="~/assets/img/def.png" alt />
            </div>
            <div v-else>
              <img :src="data.shopLogo" >
            </div>

          </div>
          <div class="goods-msg">
            <div class="goods-name">
              {{ favType == 1 ? data.prodName : data.shopName }}
            </div>
            <div class="goods-price">
              <div class="price" v-if="favType == 1">
                ￥
                <span class="big"
                  >{{ parsePrice(data.price)[0] }}.{{
                    parsePrice(data.price)[1]
                  }}</span
                >
              </div>
            </div>
          </div>
          <div class="goods-action">
            <a
              href="javascript:void(0)"
              class="action-a a1"
            >
              <i class="icon"></i>
              {{ favType == 1 ? $t('collection.goToBuy') : $t('collection.enterStore') }}
            </a>
            <a
              href="javascript:void(0)"
              @click.stop="showPopup(favType == 1 ? data.prodId : data.shopId)"
              class="action-a a2"
            >
              <i class="icon"></i>{{$t('collection.cancelCollection')}}
            </a>
          </div>
          <div class="item-mask">
            <i class="icon"></i>
          </div>
        </div>
        <!-- 收藏的店铺或者商品 -->
      </div>
      <!-- 页码 -->
      <pagination
        v-model="current"
        :pages="pages"
        @changePage="getSearchProdPage"
      ></pagination>
      <!-- /页码 -->
    </div>
    <!-- /收藏列表 -->
    <!-- 空列表提示 -->
    <div class="empty" v-if="!prodFavList.length && favType == 1">
      <div class="img">
        <img src="~/assets/images/emptyPic/collect-empty.png" alt />
      </div>
      <div class="action">
        <div class="text">{{$t('collection.noCollection')}}</div>
        <nuxt-link to="/" class="btn">{{$t('collection.lookOther')}}</nuxt-link>
      </div>
    </div>
    <div class="empty" v-if="!shopFavList.length && favType == 2">
      <div class="img">
        <img src="~/assets/images/emptyPic/collect-empty.png" alt />
      </div>
      <div class="action">
        <div class="text">{{$t('collection.noCollection')}}</div>
        <nuxt-link to="/" class="btn">{{$t('collection.lookOther')}}</nuxt-link>
      </div>
    </div>
    <!-- /空列表提示 -->
    <!-- 提示弹窗 -->
    <div class="popup-mask" v-if="visible"></div>
    <div class="popup-box" v-if="visible">
      <div class="tit">
        <div class="text">{{$t('tips')}}</div>
        <div class="close" @click="closePopup()"></div>
      </div>
      <div class="con">
        <div class="tip">
          <div class="tip-icon warning"></div>
          <div class="tip-info">
            <div class="result">
              {{$t('collection.unbookmark1')}}{{ favType == 1 ? $t('collection.product') : $t('collection.store') }}？
            </div>
            <div class="date">
              {{$t('collection.unbookmark2')}}{{ favType == 1 ? $t('collection.product') : $t('collection.store') }}{{$t('collection.unbookmark3')}}
            </div>
            <div class="btns">
              <a href="JavaScript:;" @click="confirmCancel()" class="btn-r"
                >{{$t('determine')}}</a
              >
              <a href="JavaScript:;" class="btn-g" @click="closePopup()"
                >{{$t('cancel')}}</a
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /提示弹窗 -->
  </div>
  <!-- /商品收藏 -->
</template>

<script>
import Pagination from '~/components/pagination'
export default {
  data () {
    return {
      theData: null, // 保存上次点击查询的请求条件

      url: '/user-center/uc-collection',  // 当前页url
      prodTypeSearch: 0, // 0 全部商品 1 降价商品 2 失效商品
      prodNameSearch: null,
      current: 1,   // 当前页
      pages: 1,   // 总页数
      size: 12,
      checkAllData: false,
      // 开启批量管理
      isBatchEdit: false,
      // 单选
      isCheck: false,
      // 全选
      isAllCheck: false,
      // 1 商品收藏 2 店铺收藏
      favType: 1,
      // 商品收藏列表
      prodFavList: [],
      prodFavNum: null,
      prodInfo: null,
      // 店铺收藏类别
      shopFavList: [],
      shopFavNum: null,
      shopInfo: null,
      visible: false,  //提示弹窗
      id: 0, //商品id或店铺id
      shopIds: [],  // 取消收藏选择店铺列表
      prodIds: [],  // 取消收藏选择商品列表
    }
  },
  components: {
    Pagination
  },
  created () {

  },
  mounted () {
    // 设置网页标题
    document.title = this.$i18n.t('collection.myCollection')
    this.getFavProdNum()
    this.getFavShopNum()
    this.getFavList()
  },
  methods: {
    init (favType) {
      this.favType = favType
      this.getFavList()
    },

    /**
     * 加载默认图片
     */
    handlePicError(e){
       e.target.src=require('@/assets/img/def.png')
    },

    /**
     * 获取收藏列表
     */
    getFavList () {
      this.overManager()
      if (this.favType == 1) {
        // this.shopFavList = null
        this.getFavProdList()
      } else if (this.favType == 2) {
        // this.prodFavList = null
        this.getFavShopList()
      }
    },
    /**
     * 获取商品收藏列表
     */
    getFavProdList () {
      let params = {
        prodType: this.prodTypeSearch,
        current: this.current,
        size: this.size
      }
      this.$axios.get('/p/user/collection/page', { params }).then(({ data }) => {
        this.prodFavList = data.records
        // this.page.total = data.total
        this.pages = data.pages
        this.current = data.current
        // 给每一个列表初始化一个未选中状态
        for (let index = 0; index < data.records.length; index++) {
          this.prodFavList[index].isCheck = false
        }
      })
    },
    getSearchProdPage () {
      if (this.favType == 1) {
        this.favType = 1
        this.search()
      } else if (this.favType == 2) {
        this.favType = 2
        this.search()
      }
    },
    /**
     * 获取店铺收藏列表
     */
    getFavShopList () {
      let params = {
        current: this.current,
        size: this.size
      }
      this.$axios.get('/p/shop/collection/page', { params }).then(({ data }) => {
        this.shopFavList = data.records
        this.pages = data.pages
        this.current = data.current
        // 给每一个列表初始化一个未选中状态
        for (let index = 0; index < data.records.length; index++) {
          this.shopFavList[index].isCheck = false
        }
      })
    },
    /**
     * 获取商品收藏的数量
     */
    getFavProdNum () {
      this.$axios.get('/p/user/collection/count').then(({ data }) => {
        this.prodFavNum = data
      })
    },
    /**
     * 获取店铺收藏的数量
     */
    getFavShopNum () {
      this.$axios.get('/p/shop/collection/count').then(({ data }) => {
        this.shopFavNum = data
      })
    },
    searchFavProdList (newData=false) {
      this.current = 1
      this.search(newData)
    },
    /**
     * 搜索
     */
    search (newData=false) {
      if (this.favType == 1) {
        if (newData || !this.theData) {
          this.theData = {
            prodName: this.prodNameSearch,
            prodType: this.prodTypeSearch,
            current: this.current,
            size: this.size
          }
        } else {
          this.theData.current =this.current
          this.theData.size = this.size
          this.theData.prodType = this.prodTypeSearch
        }
        this.$axios.get('/p/user/collection/page', { params:this.theData }).then(({ data }) => {
          this.prodFavList = data.records
          this.current = data.current,
            this.pages = data.pages
          // 给每一个列表初始化一个未选中状态
          for (let index = 0; index < data.records.length; index++) {
            this.prodFavList[index].isCheck = false
          }
        })
      } else if (this.favType == 2) {
        let params = {
          shopName: this.prodNameSearch,
          current: this.current,
          size: this.size
        }
        this.$axios.get('/p/shop/collection/page', { params }).then(({ data }) => {
          this.shopFavList = data.records
          this.current = data.current,
            this.pages = data.pages
          // 给每一个列表初始化一个未选中状态
          for (let index = 0; index < data.records.length; index++) {
            this.shopFavList[index].isCheck = false
          }
        })
      }
    },
    /**
     * 去购买或者进入店铺
     */
    addProdCartOrIntoShop (data) {
      if (this.isBatchEdit) {
        return
      }
      if (this.favType == 1) {
        // 去购买
        this.toProdDetail(data)
      } else if (this.favType == 2) {
        // 进入店铺
        this.toShopDetail(data)
      }
    },
    /**
    * 跳转到商品详情页
    */
    toProdDetail (data) {
      // status -1:删除、0:商家下架、1:上架、2:违规下架、3:平台审核
      if (data.status == 1) {
        this.$router.push({ path: '/detail/' + data.prodId })
      } else {
        this.$message({
          message: this.$i18n.t('collection.notPurchase'),
          type: 'warning',
          duration: 1500
        });
      }
      // this.$router.push({ path: '/detail/' + prodId })
    },
    /**
    * 跳转到店铺页
    */
    toShopDetail (data) {
      // if (shopSts != 1) {
      //   this.$message({
      //     type: 'warning',
      //     message: shopSts == 0 ? this.$i18n.t('collection.storeReviewTips1') :  shopSts == -1 ? this.$i18n.t('collection.storeReviewTips2') : this.$i18n.t('collection.storeReviewTips3')
      //   })
      //   return
      // }
      // 未开通/已删除
      if (data.shopStatus === -1) {
        this.$message({
          type: 'warning',
          message: this.$i18n.t('collection.storeReviewTips2'),
          duration: 1000
        })
        return
      }
      // 已下线
      if (data.shopStatus === 2 || data.shopStatus === 3) {
        this.$message({
          type: 'warning',
          message: this.$i18n.t('collection.storeReviewTips3'),
          duration: 1000
        })
        return
      }
      // 停业中
      if (data.shopStatus === 0) {
        const contractStartTime = new Date(data.contractStartTime).getTime()
        const contractEndTime = new Date(data.contractEndTime).getTime()
        const today = new Date().getTime()
        // 1、店铺状态为0(停业中)时，当店铺未到签约开始时间，用户进入店铺提示：商家尚未营业
        if (today < contractStartTime) {
          this.$message({
            type: 'warning',
            message: '商家尚未营业',
            duration: 1000
          })
          return
        }
        // 2、店铺状态为0(停业中)时，当店铺超过签约有效期，用户进入店铺提示：商家已暂停未营业
        if (today > contractEndTime) {
          this.$message({
            type: 'warning',
            message: '商家已暂停营业',
            duration: 1000
          })
          return
        }
      }
      this.$router.push({ path: '/shopIndex?sid=' + data.shopId })
    },
    /**
     * 取消收藏
     */
    cancelFav () {
      // console.log(this.id)
      // 取消商品收藏
      if (this.favType == 1) {
        var prodId = this.id
        this.$axios.post('/p/user/collection/addOrCancel', prodId).then(({ data }) => {
          this.current = 1
          this.getFavProdList()
          this.getFavProdNum()
          this.overManager()
          // window.location.href = this.url // 刷新页面
          // this.$set(this.prodFavList, this.prodFavList)
        })
      } else if (this.favType == 2) {
        // 取消店铺收藏
        var shopId = this.id
        this.$axios.post('/p/shop/collection/addOrCancel', shopId).then(({ data }) => {
          this.current = 1
          this.getFavShopList()
          this.getFavShopNum()
          this.overManager()
          // window.location.href = this.url // 刷新页面
          // this.$set(this.shopFavList, this.shopFavList)
        })
      }
    },
    /**
     * 批量取消收藏
     */
    batachCancel () {
      // this.isBatchEdit = false
      if (this.favType == 1) {
        // 商品批量取消收藏
        this.$axios.post('/p/user/collection/batachCancel', this.prodIds).then(({ data }) => {
          this.current = 1
          this.getFavProdList()
          this.getFavProdNum()
          this.overManager()
          // window.location.href = this.url // 刷新页面
          // this.$set(this.prodFavList, this.prodFavList) // 刷新页面部分数据
        })
      } else if (this.favType == 2) {
        // 店铺批量取消收藏
        this.$axios.post('/p/shop/collection/batachCancel', this.shopIds).then(({ data }) => {
          this.current = 1
          this.getFavShopList()
          this.getFavShopNum()
          this.overManager()
          // window.location.href = this.url // 刷新页面
          // this.$set(this.shopFavList, this.shopFavList) // 刷新页面部分数据
        })

      }
    },
    /**
     * 确认取消收藏
     */
    confirmCancel () {
      if (this.type == 1) {
        this.cancelFav()  //取消收藏
      } else if (this.type == 2) {
        this.batachCancel()  //批量取消收藏
      }
      this.visible = false
    },
    /**
    * 提示弹窗显示
    */
    showPopup (id) {
      if (id) {
        this.id = id
        this.type = 1
        this.visible = true
      } else {
        this.type = 2
        if (this.favType == 1) {
          // 获取到批量提交的数据
          let prodIds = []
          for (let index = 0; index < this.prodFavList.length; index++) {
            if (this.prodFavList[index].isCheck) {
              prodIds.push(this.prodFavList[index].prodId)
            }
          }
          this.prodIds = prodIds
          if (prodIds.length < 1) {
            this.overManager()
            return
          } else {
            this.visible = true
          }
        } else if (this.favType == 2) {
          let shopIds = []
          for (let index = 0; index < this.shopFavList.length; index++) {
            if (this.shopFavList[index].isCheck) {
              shopIds.push(this.shopFavList[index].shopId)
            }
          }
          this.shopIds = shopIds
          if (shopIds.length < 1) {
            this.overManager()
            return
          } else {
            this.visible = true
          }
        }
      }
    },
    /**
     * 提示弹窗隐藏
     */
    closePopup () {
      this.visible = false
    },
    /**
     * 点击开启 批量管理
     */
    batchManager ($event) {
      this.isBatchEdit = true
    },
    /**
     * 完成批量管理
     */
    overManager () {
      this.isBatchEdit = false
      this.checkAllData = false
      if (this.favType === 1) {
        for (let index = 0; index < this.prodFavList.length; index++) {
          this.prodFavList[index].isCheck = false
        }
      } else if (this.favType === 2) {
        for (let index = 0; index < this.shopFavList.length; index++) {
          this.shopFavList[index].isCheck = false
        }
      }

    },
    /**
     * 点击选中
     */
    selectIt (id, index) {
      if (!this.isBatchEdit) {
        return
      }
      if (this.favType === 1) {
        this.prodFavList[index].isCheck = !this.prodFavList[index].isCheck
        this.$set(this.prodFavList, index, this.prodFavList[index])
      } else if (this.favType === 2) {
        this.shopFavList[index].isCheck = !this.shopFavList[index].isCheck
        this.$set(this.shopFavList, index, this.shopFavList[index])
      }
      this.checkAllSelect() //检查全选
    },
    /**
     *  全选事件
     */
    checkAll () {
      if (this.checkAllData) {
        this.checkAllData = false
      } else {
        this.checkAllData = true
      }
      // 全选商品
      if (this.favType === 1) {
        this.selectAll(this.prodFavList, !this.checkAllData)
      } else if (this.favType === 2) {
        this.selectAll(this.shopFavList, !this.checkAllData)
      }

    },

    /**
     * 检查全选
     */
    checkAllSelect () {
      var prodFavList = this.prodFavList;
      var shopFavList = this.shopFavList;
      this.checkAllData = true
      if (this.favType === 1) {
        for (var i = 0; i < prodFavList.length; i++) {
          if (!prodFavList[i].isCheck) {
            this.checkAllData = false;
            break;
          }
        }
        return
      }
      if (this.favType === 2) {
        for (var i = 0; i < shopFavList.length; i++) {
          if (!shopFavList[i].isCheck) {
            this.checkAllData = false;
            break;
          }
        }
        return
      }
    },

    /**
     * 价格过滤
     */
    parsePrice (value) {
      var val = Number(value)
      if (!val) {
        val = 0;
      }
      // 截取小数点后两位，并以小数点为切割点将val转化为数组
      return val.toFixed(2).split(".");
    },

    /**
     * 勾选/取消全选商品
     */
    selectAll (data, isChecked) {
      if (isChecked) {
        for (let index = 0; index < data.length; index++) {
          data[index].isCheck = false
        }
      } else {
        for (let index = 0; index < data.length; index++) {
          data[index].isCheck = true
        }
      }
      if (this.favType == 1) {
        this.prodFavList = data
      } else if (this.favType == 2) {
        this.shopFavList = data
      }
    },
  },
  watch: {
    favType () {
      this.current = 1
      this.getFavList()
    },
    prodTypeSearch () {
      this.search()
    }
  }

}
</script>

<style scoped src='~/assets/css/uc-collection.css'></style>
<style scoped src='~/assets/css/user-center.css'></style>
<style scoped>
.el-pagination {
  text-align: right;
  padding: 0 30px;
  padding-top: 20px;
}
.pagination .el-pagination button,
.el-pagination span:not([class*='suffix']) {
  padding: 0 8px !important;
}
.pagination .el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: #fff !important;
}
.pagination .el-pagination__editor.el-input .el-input__inner {
  width: 30px !important;
}
</style>
