<!--
  @description:我的收藏
  @Modifier: haofengxian
  @routerPath: /personalCenter/myCollection
  @date: 2021-11-26 19:17
-->
<template>
  <div>
    <div class="shopmall-page-title">
      我的收藏
    </div>
    <div class="shopmall-view collection-wrap">
      <div class="search-wrap">
        <el-input
          v-model="shopPrams.productValue"
          :value="shopPrams.productValue"
          :placeholder="`请输入${page==='1'?'商品':'店铺'}名称${page==='1'?'，商品编号':''}`"
          style="width: 250px"
        />
        <i class="el-input__icon el-icon-search cursor" @click="initData" />
      </div>
      <div class="collection-inner">
        <el-tabs v-model="page" @tab-click="tabClick">
          <el-tab-pane
            v-for="(item,index) in tabsList"
            :key="index"
            :name="item.index"
          >
            <span slot="label">
              {{ item.name }}
            </span>
          </el-tab-pane>
        </el-tabs>
        <div>
          <shop-collection v-show="page==='1'" :shop-list="shopList" :init-data="initData" />
          <shop-store-collection v-show="page==='2'" :store-list="storeList" :init-data="initData" />
        </div>
      </div>
    </div>
    <el-row v-show="page==='1'" class="pagination shopmall-pagination p16" style="clear:both;margin:20px 0">
      <div v-if="shopList.length" class="page-number fl">
        共{{ Math.ceil(total /shopPrams.pageSize) }}页
        {{ total }}条
      </div>
      <el-pagination
        v-if="shopList.length"
        :current-page="shopPrams.pageNo"
        :total="total"
        :page-sizes="[10,20,30,40]"
        class="fr"
        background
        layout="prev, pager, next, sizes"
        @current-change="pickHandle"
        @size-change="handleSizeChange"
      />
    </el-row>
  </div>
</template>

<script>
import ShopCollection from './shopCollection'
import shopStoreCollection from './shopStoreCollection'
import { getCollectionList } from '@/api/shoppingmall/tabcenter'
export default {
  name: 'MyCollection',
  components: {
    ShopCollection: ShopCollection,
    shopStoreCollection: shopStoreCollection
  },
  data() {
    return {
      total: 0,
      searchOrder: '',
      // activeIndex: '1',
      searchInput: '',
      page: '1',
      shopPrams: {
        type: '2',
        pageNo: 1,
        pageSize: 10,
        productValue: ''
      },
      message: '',
      shopList: [],
      storeList: [],
      tabsList: [
        { index: '1', name: '商品收藏' },
        { index: '2', name: '店铺收藏' }
      ]
    }
  },
  watch: {
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      if (this.page === '1') {
        this.shopPrams.type = '2'
      } else if (this.page === '2') {
        this.shopPrams.type = '3'
      }
      getCollectionList(this.shopPrams).then((res) => {
        if (res.header.ret === '0') {
          if (this.page === '1') {
            this.shopList = res.data.records
            this.total = res.data.total
          } else {
            this.storeList = res.data.records
          }
        }
      }).catch((err) => {
        throw new Error('获取我的收藏列表失败' + err)
      })
    },
    tabClick(tab) {
      this.shopPrams.productValue = ''
      this.initData()
    },
    pickHandle(val) {
      this.shopPrams.pageNo = val
      this.initData()
    },
    handleSizeChange(val) {
      this.shopPrams.pageSize = val
      this.initData()
    }
  }
}
</script>

<style scoped lang="less">
.collection-wrap {
  position: relative;
  padding: 10px;
  .search-wrap {
    padding: 5px;
    position: absolute;
    right: 30px;
    width: 280px;
    z-index: 9999999;

    i {
      width: 20px;
      height: 31px;
      border-left: 1px solid #cccccc;
      line-height: 32px;
      position: absolute;
      right: 35px;
      top: 4px;
      text-align: center;
      padding-left: 6px;
    }
  }

  .collection-inner {
    background: #ffffff;
  }
}
</style>

