<!--
  @description: 店铺收藏
  @Modifier：lcj
  @routerPath:D:shopmall//tabcenter/shopCollection
  @date：  2019/10/17-5:00
-->
<template>
  <div class="shop-collection">
    <div class="collection-wrap">
      <div v-for="(item,index) in storeList" :key="index" class="item">
        <div class="img-wrap">
          <img :src="item.productPicture" alt width="186" height="156">
        </div>
        <div class="info-wrap">
          <div style="color:#F42233;font-weight: Bold;font-size:14px;margin-bottom: 10px">
            <!--            <span>{{ item.marketPrice | priceFilter }}</span>-->
          </div>
          <div style="color: #262626;font-size: 12px;text-align: center;">
            {{ item.supplierName }}
          </div>
        </div>
        <div class="btn-wrap">
          <el-button class="close" @click.native="closeBtn(item.markId)">
            取消收藏
          </el-button>
          <!--          <el-button type="info" class="add" @click.native="addToCar(item)"><i class="iconfont icon-xingzhuang8"/>加入购物车</el-button>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { deleteMarkInfo } from '@/api/shoppingmall/tabcenter'
import { saveShoppingCart } from '@/api/shoppingmall/products'

export default {
  filters: {
    priceFilter: function(value) {
      if (!value) return ''
      return '￥' + value
    }
  },
  props: {
    storeList: {
      type: Array,
      default: function() {
        return
      }
    },
    initData: {
      type: Function,
      default: function() {
        return
      }
    }
  },
  data() {
    return {
      flag: false,
      total: 1,
      form: {
        name: '',
        page: 1,
        pageSize: 10
      },
      carData: {
        goodsId: '', // 商品Id
        number: 1, // 数量
        goodsName: '', // 商品名称
        id: null // 购物车id
      }
    }
  },
  created() {
  },
  methods: {
    //
    // pickHandleD() {
    //
    // },
    // handleSizeChangeD() {
    //
    // },
    closeBtn(id) {
      var type = '02'
      deleteMarkInfo(id, type).then((res) => {
        if (res.header.ret === '0') {
          this.$message({
            type: 'success',
            message: '取消收藏成功'
          })
          this.initData()
          // this.shopList.filter((item, index) => {
          //   item.id !== id
          // })
        }
      }).catch((err) => {
        throw new Error('取消收藏成功' + err)
      })
    },
    addToCar(item) {
      if (this.isLogin) {
        // 调用加入购物车接口
        this.carData.goodsId = item.id // 商品id
        this.carData.goodsName = item.productName // 商品名称
        saveShoppingCart(this.carData)
          .then(res => {
            if (res.header.ret === '0') {
              this.$message({
                type: 'success',
                message: res.data
              })
              // 调用vuex获取购物车列表方法
              const data = {
                pageNo: 1,
                pageSize: 3
              }
              this.$store
                .dispatch('loadShoppingCart', data)
                .then(() => { })
                .catch(() => { })
            }
          })
          .catch(() => { })
      } else {
        this.$message({
          type: 'warning',
          message: '请先登录'
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
.shop-collection {
  .collection-wrap {
    display: flex;
    justify-content: flex-start;
    padding-top: 15px;
    flex-wrap: wrap;
    margin-left: 5px;
    .item:hover {
      border: 1px solid #ff6600;
    }
    .item {
      width: 22%;
      height: 250px;
      border: 1px solid #e0e0e0;
      margin-right: 21px;
      margin-bottom: 21px;
      position: relative;
      border-radius: 3px;
      .img-wrap {
        margin-top: 20px;
        text-align: center;
        margin-bottom: 10px;
      }

      .info-wrap {
        margin-left: 11px;
        // margin-top: 40px;
        margin-right: 17px;
      }
      .btn-wrap {
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        width: 100%;

        .close,
        .add {
          flex: 1;
          margin-left: 0px;
          margin-right: 0px;
          border-radius: 0px;
          height: 30px;
        }

        .close {
          // background: #f2f2f2;
          color: #ff6600;
          border: 1px solid #f2f2f2;
        }
        .add {
          background: #ff6600;
          color: #ffffff;
          border: 1px solid #f42233;
        }
      }
    }
  }
  .page {
    margin-bottom: 10px;
  }
}
</style>
