<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" @click="navToGoodsDetails(item)">
        <view>
          <image class="goods_image" :lazy-load="true" :src="item.image" mode="aspectFit"></image>
        </view>
        <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 ? 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">
            <text style="margin-right: 5rpx;">¥</text>
            <text>{{$wholesale_price(item)}}</text>
          </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="source==12?'./shopping_trolley_other?source=12':'./shopping_trolley_a' " open-type="navigate">采购清单<text v-if="goodsNum">{{ ` (${goodsNum}) ` }}</text></navigator>

    <goodsPopup :goodsStatu="isPopupShow" @colses="isPopupShow=false" :goods_info="goodsInfo"></goodsPopup>
    <shortPopup ref="shortPopupRef" :source="source" @addCart="cartFn"></shortPopup>
    <u-popup :show="show" @close="close">
      <view>
        <h3 style=" margin: 15px 5px 5px 24px;">颜色规格</h3>
        <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
          <view class="scroll-view-item" v-for="(item,index) in attrValue" :key="index">
            <view class="scroll_item_top">
              <image :src="Image" mode="" :lazy-load="true"></image>
              <view class="text">
                <view>{{item.sku}}</view>
                <view>库存: <text>{{item.stock}}</text> </view>
              </view>
            </view>
            <view class="scroll_item_bon">
              <view class="reduce" @click.stop='subCart(item,index)'>-</view>
              <input type="text" disabled="true" v-model="goods[index].cart_num" />
              <view class="plus" :class="goods.numAdd ? 'on' : ''" @click.stop='addCart(item,index)'>+</view>
              <!-- <u-number-box 
                    button-size="36"
                    color="#ffffff"
                    bgColor="#2979ff"
                    iconStyle="color: #fff"
                    v-model="number.cart_num"
                ></u-number-box> -->
            </view>
          </view>
        </scroll-view>
        <button class="btn" @click="addshopcart">确定</button>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import {
    getStoreGoods,
    getProductDetail,
    postCartAdd,
    getStoreDetail,
  } from '@/api/store.js'
  import { Toast } from '@/libs/uniApi'
  import goodsPopup from '../cpns/goodsPopup.vue'
  import {
    changeCartNum
  } from '@/api/order.js';
  import {
    getCartCounts
  } from '@/api/requesta.js';
  import shortPopup from "@/components/shortPopup.vue"
  export default {
    components: {
      goodsPopup,
      shortPopup
    },
    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: '',
        show: false,
        scrollTop: 0,
        attrValue: [],
        Image: '',
        goods: [{
          cart_num: 0
        }],
        goodsLite: {},
        goodsindexL: '',
        goodsNum: 0,
        source: 11
      }
    },
    onLoad(e) {
      this.source = e.value || 11;
      this.id = e.id
      this.initStore()
      this.getStoreGoodsList()

      // getStoreGoods(e.id, this.infoData).then(res => {
      //   this.list = res.data.list
      // })
    },
    onShow() {
      this.cartFn()
    },
    methods: {
      initStore(){
        getStoreDetail(this.id).then(res=>{
          console.log(res);
        }).catch(e=>{
          console.log(e);
        })
      },
      // 购物车信息
      cartFn() {
        getCartCounts({
          product_type: 98,
          source: this.source
        }).then(res => {
          this.goodsNum = res.data[0].count
        })
      },
      async searchBtn() {
        this.infoData.page = 1
        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 (res.data.list.length < 10) this.status = 'nomore'
        // 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(item);
        if (item.product.attrValue.length == 1) {
          let that = this;
          const count = '1'
          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)
          })
        } else {
          this.show = true
          this.attrValue = item.product.attrValue
          this.Image = item.image
          for (let i = 1; i < item.product.attrValue.length; i++) {
            this.goods.push({
              cart_num: 0
            })
          }
        }

      },
      /**
       * 跳转到产品详情
       */
      navToGoodsDetails(item){
        this.$refs.shortPopupRef.setDatas(item, this.goodsNum);
        this.$refs.shortPopupRef.open();
        // uni.navigateTo({
        //   url: `/pages/goods_details/index?id=${item.product_id}&referer=`
        // })
      },
      /*
       * 加入购物车
       */
      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
            });
          });
      },
      close() {
        this.show = false
      },
      //购物车增加
      addCart(item, index) {
        let that = this
        that.goods[index].cart_num = that.goods[index].cart_num + 1
        that.goods.numAdd = true
        that.goodsLite = item
        that.goodsindexL = index
        let q = {
          is_new: 0,
          product_id: that.goodsLite.product_id,
          cart_num: that.goods[that.goodsindexL].cart_num,
          product_attr_unique: that.goodsLite.unique,
          // source: this.source,
          product_type: 98,
          spread_id: ''
        };
        postCartAdd(q).then(res => {
            that.$util.Tips({
              title: "添加购物车成功",
            });
          })
          .catch(res => {
            this.show = false
            return that.$util.Tips({
              title: res
            });
          });

      },
      subCart(item, index) {
        let that = this
        if (that.goods[index].cart_num == 0) {
          return
        } else {
          that.goods[index].cart_num = that.goods[index].cart_num - 1
          that.goods.numAdd = true
          that.goodsLite = item
          that.goodsindexL = index
          let q = {
            is_new: 0,
            product_id: that.goodsLite.product_id,
            cart_num: that.goods[that.goodsindexL].cart_num,
            product_attr_unique: that.goodsLite.unique,
            // source: this.source,
            product_type: 98,
            spread_id: ''
          };
          postCartAdd(q).then(res => {
              that.$util.Tips({
                title: "添加购物车成功",
              });
            })
            .catch(res => {
              this.show = false
              return that.$util.Tips({
                title: res
              });
            });
        }
      },
      addshopcart() {
        console.log(this.goodsLite);
        console.log(this.goodsindexL);
              this.show = false
      //   let that = this
      //   let q = {
      //     is_new: 0,
      //     product_id: that.goodsLite.product_id,
      //     cart_num: that.goods[that.goodsindexL].cart_num,
      //     product_attr_unique: that.goodsLite.unique,
      //     // source: this.source,
      //     product_type: 98,
      //     spread_id: ''
      //   };
      //   postCartAdd(q).then(res => {
      //       this.show = false
      //       that.$util.Tips({
      //         title: "添加购物车成功",
      //       });
      //     })
      //     .catch(res => {
      //       this.show = false
      //       return that.$util.Tips({
      //         title: res
      //       });
      //     });
      },
      
    },
    onReachBottom() {
      //如果状态为nomore 则不能在触发上拉事件
      if (this.status != 'nomore') {
        this.infoData.page++
        this.getStoreGoodsList()
      }
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    },
    onBackPress() {
      if(this.$refs.shortPopupRef.isShow){
        this.$refs.shortPopupRef.close();
        return true;
      }
    }
  }
</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;
    font-size: 24.56rpx;

    .goods_image {
      width: 119.3rpx;
      height: 119.3rpx;
      border-radius: 8px;
      margin-right: 26.32rpx;
    }

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

      .name {
        font-size: 28.07rpx;
        font-weight: 700;
        width: 315.79rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

      }

      .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: 24.56rpx;
        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: $uni-theme-bg-color;
        border-radius: 100px;
        color: #fff;
      }
    }
  }

  .bottom_purchase {
    z-index: 50;
    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;
  }

  .scroll-Y {
    height: 50vh;
    width: 90%;
    margin: auto;

  }

  .scroll-view-item {
    font-size: 36rpx;
    border-bottom: 1px solid #ccc;

    .scroll_item_top {
      height: 60px;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      image {
        width: 50px;
        height: 50px;
        margin: 5px;
      }

      .text {
        width: 200px;
        height: 60px;
        float: left;

        view {
          height: 30px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

          text {
            color: #F84221;
          }
        }
      }
    }

    .scroll_item_bon {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .reduce {
        width: 30px;
        height: 30px;
        text-align: center;
        color: #BDC4CE;
        background: #EEEEEE;
      }

      input {
        width: 50px;
        height: 30px;
        text-align: center;
      }

      .plus {
        width: 30px;
        text-align: center;
        height: 30px;
        color: #FFFFFF;
        background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
      }

      .on {
        background-color: #e3e3e3;
        color: #dedede;
      }

    }
  }

  .btn {
    width: 100%;
    height: 50px;
    background: linear-gradient(84deg, #F98649 0%, #F34E45 100%);
    border-radius: 24px 24px 24px 24px;
    line-height: 50px;
    color: white;
  }
</style>