<template>
  <view class="merchant">
    <view class="head_search flex_a_c">
      <view class="search_content flex_a_c_j_sb">
        <view class="flex_a_c">
          <view class="iconfont icon-sousuo"></view>
          <input type="text" v-model="infoData.keyword" placeholder="请搜索">
        </view>
        <button class="search_btn" @click="searchBtn">搜索</button>
      </view>
    </view>
    <view style="background-color: #fff;width: 100%;">
      <view class="tabs_box flex_a_c_j_sb">
        <view v-for="(item,index) in tabsList" :key="index" class="flex_a_c" :class="active==index?'active':''">
          <view @click="tabsChange(index,order)">{{item}}</view>
        </view>
      </view>
    </view>

    <block v-for="(item,index) in list" :key="index">
      <view class="item_list flex">
        <view class="left_goods_msg">
          <view class="name">{{ item.store_name }}</view>
          <view class="classify flex_a_c">
            <text>分类：{{ item.cate_name ? item.cate_name : '无' }}</text>
            <text style="margin-left: 17.54rpx;">单位：{{ item.unit_name }}</text>
          </view>
          <view class="bar_code">条形码：{{item.bar_code?item.bar_code : '无'}}</view>
        </view>
        <view class="right_goods_msg">
          <view class="num">订货价：{{item.price}}</view>
          <view class="add_goods" @click="getGoodsDetails(item)">加入购物单</view>
        </view>
      </view>
    </block>
    <u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />

    <navigator class="bottom_purchase" url="./shopping_trolley" open-type="navigate">采购清单</navigator>

    <goodsPopup :goodsStatu="isPopupShow" @colses="isPopupShow=false" :goods_info="goodsInfo"></goodsPopup>
  </view>
</template>

<script>
  import {
    getStoreGoods,
    getProductDetail,
    postCartAdd
  } from '@/api/store.js'
  import { Toast } from '@/libs/uniApi'
  import goodsPopup from '../cpns/goodsPopup.vue'
  export default {
    components: {
      goodsPopup
    },
    data() {
      return {
        status: 'loadmore',
        loadingText: '努力加载中',
        loadmoreText: '轻轻上拉',
        nomoreText: '我也是有底线的~~',
        myCount: 0,
        goodsInfo: {},
        isPopupShow: false,
        cartCount: 0,
        isAllSelect: false,
        search: '',
        active: 0,
        src: 'https://cdn.uviewui.com/uview/album/1.jpg',
        tabsList: ['综合', '新品', '价格(升)', '销量'],
        value: 5,
        list: [],
        attr: {
          cartAttr: false,
          productAttr: [],
          productSelect: {}
        },
        productValue: [], // 系统属性
        attrValue: '', // 已选属性,
        infoData: {
          page: 1,
          limit: 10,
          product_type: 98,
          keyword: ''
        },
        id: '',
        order: true,
        num: ''
      }
    },
    onLoad(e) {
      this.id = e.id
      this.getStoreGoodsList()

      // getStoreGoods(e.id, this.infoData).then(res => {
      //   this.list = res.data.list
      // })
    },
    onShow() {},
    methods: {
      async searchBtn() {
        const res = await getStoreGoods(this.id, this.infoData)
        this.list = res.data.list
      },
      // jian() {
      // 	Toast('请到购物清单减少数量')
      // },
      // goodsPopupClick(item) {
      //   this.goodsInfo = item
      //   this.isPopupShow = true
      // },
      navGoodsDetails(id) {
        uni.navigateTo({
          url: `/pages/goods_details/index?id=${id}&type=town`
        })
      },
      valChange(e) {
        console.log('当前值为: ' + e.value)
      },
      //添加购物车 *data是修改过后的参数
      handelInfo(data) {},
      //获取商品数据
      async getStoreGoodsList() {
        // console.log(this.infoData);
        const res = await getStoreGoods(this.id, this.infoData)
        this.list.push(...res.data.list)
        if (this.list.length < 10) this.status = 'loadmore'
        // this.publicMethods1(res)
      },
      //上拉刷新
      publicMethods1(res) {
        this.num = res.data.count
        this.list = [...this.list, ...res.data.list]
        if (this.list.length < this.num) {
          this.status = 'loadmore'
        } else {
          this.status = 'nomore'
        }

      },
      tabsChange(i, order) {
        this.active = i
        this.list = []
        this.infoData.page = 1
        this.order = !this.order
        if (i == 0) {
          this.infoData.order = ''
          this.getStoreGoodsList()
        }
        if (i == 1) {
          this.infoData.order = 'is_new'
          this.getStoreGoodsList()
        }
        //价格升序
        if (i == 2) {
          if (order) {
            this.infoData.order = 'price_asc'
            this.getStoreGoodsList()
            this.tabsList[2] = '价格(升)'
          } else {
            this.infoData.order = 'price_desc'
            this.getStoreGoodsList()
            this.tabsList[2] = '价格(降)'
          }
        }
        if (i == 3) {
          this.infoData.order = 'sales'
          this.getStoreGoodsList()
        }
      },
      /**
       * 获取产品详情
       */
      getGoodsDetails(item) {
        // console.log('e,item',e,item);
        // let that = this;
        // const count = e.value
        // getProductDetail(item.product_id).then(res => {
        // 	const unique = Object.values(res.data.sku)[0].unique
        // 	console.log(res.data.product_id, count, unique,'123123');
        // 	that.goCat(res.data.product_id, count, unique)
        // })
        let that = this;
        const count = '1'
        console.log(111);
        getProductDetail(item.product_id, { product_type: 98 }).then(res => {
          const unique = Object.values(res.data.sku)[0].unique
          that.goCat(res.data.product_id, count, unique)
        }).catch(err => {
          Toast(err)
        })
      },
      /*
       * 加入购物车
       */
      goCat: function(id, count, unique) {
        let that = this
        let q = {
          is_new: 0,
          product_id: id,
          cart_num: count,
          product_attr_unique: unique,
          // source: this.source,
          product_type: 98,
          spread_id: ''
        };
        postCartAdd(q)
          .then(res => {
            that.$util.Tips({
              title: "添加购物车成功",
            });
          })
          .catch(res => {
            return that.$util.Tips({
              title: res
            });
          });
      },

    },
    onReachBottom() {
      //如果状态为nomore 则不能在触发上拉事件
      if (this.status != 'nomore') {
        this.infoData.page++
        this.getStoreGoodsList()
      }

    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    },

  }
</script>

<style lang="scss" scoped>
  //减号
  /deep/.uicon-minus {
    font-weight: 700 !important;
    color: #000 !important;
  }

  .minus {
    color: #000;
    display: inline-block;
    width: 70rpx;
    height: 60rpx;
    background-color: rgb(235, 236, 238);
    padding-top: 20rpx;
    padding-left: 24rpx;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;

    .reduce {
      font-weight: bold !important;
      font-weight: 700;
    }
  }

  .merchant {
    padding-bottom: 175.44rpx;
  }

  .icon-xuanzhong1 {
    color: $uni-theme-color;
  }

  .head_search {
    width: 100%;
    background-color: #fff;
    height: 108.77rpx;

    .search_content {
      margin: 0 auto;
      width: 694.74rpx;
      height: 66.67rpx;
      padding: 2px 2px 2px 21.05rpx;
      border: 1px solid $uni-theme-color;
      border-radius: 100px;

      .icon-sousuo {
        font-weight: bold;
        color: $uni-theme-color;
        margin-right: 17.54rpx;
      }

      .search_btn {
        color: #fff;
        width: 135.09rpx;
        height: 59.65rpx;
        line-height: 59.65rpx;
        background: $uni-theme-bg-color;
        border-radius: 100px;
      }
    }
  }

  .tabs_box {
    justify-content: space-around;
    width: 694.74rpx;
    margin: 0 auto;
    height: 80.7rpx;
    border-top: 1px solid #E7E6E4;
    background-color: #fff;
  }

  .active {
    font-weight: 700;
    color: $uni-theme-color;
  }

  .item_list {
    margin: 0 auto;
    margin-top: 28.07rpx;
    padding: 21.05rpx;
    width: 694.74rpx;
    background: #FFFFFF;
    border-radius: 8px;

    .left_goods_msg {
      width: 100%;
      flex: 1;

      .name {
        font-size: 31.58rpx;
        font-weight: bold;
      }

      .price {
        width: 100%;
        margin-bottom: 0;
      }

    }

    .right_goods_msg {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;

      .num {
        font-size: 31.58rpx;
        color: $uni-theme-color;
      }

      .purchase_btn {
        color: #fff;
        padding: 7.02rpx 21.05rpx;
        background: $uni-theme-color;
        border-radius: 100px;
        margin-left: 21.05rpx;
      }

      .add_goods {
        text-align: center;
        width: 180rpx;
        height: 60rpx;
        line-height: 60rpx;
        background-color: $uni-theme-color;
        border-radius: 100px;
        color: #fff;
      }
    }
  }

  .bottom_purchase {
    z-index: 999;
    position: fixed;
    left: 50%;
    bottom: 52.63rpx;
    transform: translate(-50%);
    width: 526.32rpx;
    height: 80.7rpx;
    text-align: center;
    line-height: 80.7rpx;
    border-radius: 100px;
    background-color: $uni-theme-color;
    color: #fff;
  }
</style>