<template>
  <view class="page-content">
    <!--主要内容-->
    <view class="main-content">
      <!--顶部搜索-->
      <view class="search-content">
        <view class="search-main">
          <input class="search-input" type="text" placeholder="请输入商品名称...">
          <view class="search-btn">搜索</view>
        </view>
      </view>
      <!--顶部提示-->
      <view class="top-tips">请添加你需要的商品进行进货！</view>
      <!--商品列表-->
      <view class="list">
        <view class="item" v-for="(item,index) in Object.values(list)" :key="index">
          <view class="goods">
            <view class="image">
              <image class="goods-image" :src="item.image"></image>
            </view>
            <view class="info">
              <view class="title">{{ item.store_name }}</view>
              <view class="price">¥{{ item.price }}</view>
            </view>
          </view>
          <view class="buy">
            <view class="left">
              <template v-if="item.is_batch == 1">
                <view v-if="index / 2 == 0"  class="buy-unit">按{{ item.batch_unit }}购买</view>
                <view v-else class="buy-unit">按{{ item.unit_name }}购买</view>
                <text class="iconfont icon-jiantou_shangxiaqiehuan_o"></text>
              </template>
            </view>
            <view class="right">
              <text v-if="index / 2 == 0" class="iconfont icon-gengduozhankai1"></text>
              <view v-else class="buy-num">
                <view class="num-change">
                  <text class="iconfont icon-shangpinshuliang-jian"></text>
                  <input class="num-input" type='number' />
                  <text class="iconfont icon-shangpinshuliang-jia"></text>
                </view>
                <view class="unit"> 箱 共12瓶</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--结算按钮-->
      <view class="settlement">
        <view class="left">
          <text class="iconfont icon-gouwuche-mendian">
            <text class="total-num">99+</text>
          </text>
          <view class="total">
            合计：<text class="total-price">¥54288.00</text>
          </view>
        </view>
        <view class="settlement-btn">立即结算</view>
      </view>
    </view>
    <!-- 授权登录 -->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>

  </view>
</template>

<script>
import {mapGetters} from "vuex";
import authorize from '@/components/Authorize';
import {supplierGoodsList} from "@/api/supplier";

export default {
  name: 'business',
  components: {
    authorize,
  },
  computed: {
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
  },
  data() {
    return {
      // 商品列表相关
      list: [],
      search:{
        page: 1,
        store_name: '',
      },
      // 购买选中商品相关
      buy_list: {},



    }
  },
  onLoad(options) {
    // 判断：是否登录
    if (!this.isLogin) this.isAuto = this.isShowAuth = true;// 未登录  授权登录
    else this.init();// 已登录  获取信息
  },
  // 滚动到底部
  onReachBottom() {
    this.getGoodsList();
  },
  methods: {
    // 授权回调
    onLoadFun() {
      if(this.isLogin){
        this.isShowAuth = false;
        this.init();
      }
    },
    // 授权关闭
    authClose(e) {
      this.isShowAuth = e
    },
    // 授权成功 初始化
    init () {
      this.getGoodsList();
    },
    // 供应商商品列表
    getGoodsList(page = 0) {
      let _this = this;
      let params = _this.search;
      if(Number(page) > 0) params.page = page;
      // 数据查询
      supplierGoodsList(params).then(res => {
        let list = res.data.list || {};
        if (Object.values(list).length > 0) {
          _this.list = _this.$util.SplitArray(list, _this.list);
          _this.$set(_this, 'list', _this.list);
          _this.search.page++;
        }
      }).catch(err => {
        this.$util.Tips({title: err});
      });
    },



  }
}
</script>

<style scoped lang="scss">
.page-content{
  width: 100vw;
  min-height: 100vh;
  background-color: #f6f6f6;

  .main-content{
    padding-bottom: 150rpx;
    // 搜索
    .search-content{
      background: #F9F0DA;
      .search-main{
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 15rpx;
        .search-input{
          border-top-left-radius: 10rpx;
          border-bottom-left-radius: 10rpx;
          width: calc(100% - 110rpx);
          padding: 0 20rpx;
          height: 60rpx;
          line-height: 60rpx;
          border: 4rpx solid #c5464a;
          background: transparent;
          outline: none;
        }
        .search-btn{
          background: #c5464a;
          border-top-right-radius: 10rpx;
          border-bottom-right-radius: 10rpx;
          width: 110rpx;
          height: calc(60rpx + (4rpx * 2));
          line-height: calc(60rpx + (4rpx * 2));
          font-size: 26rpx;
          color: #F9F0DA;
          text-align: center;
        }
      }
    }
    // 提示
    .top-tips{
      background: #F9F0DA;
      color: #813d40;
      font-size: 30rpx;
      font-weight: bold;
      text-align: center;
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
    }
    // 商品列表
    .list{
      --item-padding-: 30rpx;
      .item:not(:last-child){
        margin-bottom: var(--item-padding-);
      }
      .item{
        padding: var(--item-padding-);
        background: #FFFFFF;
        .goods{
          width: 100%;
          padding-bottom: var(--item-padding-);
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: flex-start;
          align-items: center;
          .image{
            width: 120rpx;
            height: 120rpx;
            .goods-image{
              width: 100%;
              height: 100%;
            }
          }
          .info{
            width: calc(100% - 120rpx);
            height: 120rpx;
            padding-left: 20rpx;
            display: inline-flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: space-evenly;
            align-items: flex-start;
            .title{
              width: 100%;
              font-size: 32rpx;
              font-weight: bold;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .price{
              font-size: 26rpx;
              color: #d84b40;
              font-weight: bold;
            }
          }
        }
        .buy{
          padding-top: var(--item-padding-);
          border-top: 2rpx solid #F6F6F6;
          width: 100%;
          height: 75rpx;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
          .left{
            display: inline-flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            .buy-unit{
              font-size: 26rpx;
            }
            .icon-jiantou_shangxiaqiehuan_o{
              transform: rotate(90deg);
              font-size: 36rpx;
              font-weight: bold;
              margin-left: 15rpx;
            }
          }
          .right{
            .icon-gengduozhankai1{
              font-size: 42rpx;
            }
            .buy-num{
              --border-color-: #f2f2f2;

              display: inline-flex;
              flex-direction: row;
              flex-wrap: nowrap;
              justify-content: flex-start;
              align-items: center;
              .num-change{
                border: 2rpx solid var(--border-color-);
                display: inline-flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: flex-start;
                align-items: center;
                border-radius: 100rpx;
                padding: 0 15rpx;
                height: 45rpx;
                .iconfont{
                  text-align: center;
                  font-size: 30rpx;
                }
                .icon-shangpinshuliang-jian{
                  padding-right: 15rpx;
                }
                .icon-shangpinshuliang-jia{
                  padding-left: 15rpx;
                }
                .num-input{
                  border-left: 2rpx solid var(--border-color-);
                  border-right: 2rpx solid var(--border-color-);
                  width: 60rpx;
                  text-align: center;
                }
              }
              .unit{
                font-size: 26rpx;
                margin-left: 10rpx;
              }
            }
          }
        }
      }
    }
    // 结算按钮
    .settlement{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #FFFFFF;
      padding: 20rpx 20rpx 50rpx 20rpx;
      box-shadow: 0 0 10px 0 #f3f3f3;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      .left{
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        .icon-gouwuche-mendian{
          font-size: 30rpx;
          margin-right: 20rpx;
          border: 2rpx solid #000000;
          border-radius: 50%;
          padding: 15rpx;
          position: relative;
          .total-num{
            position: absolute;
            top: -5px;
            right: -5px;
            font-size: 20rpx;
            background: #ef2c1c;
            color: #ffffff;
            border-radius: 50%;
            width: 35rpx;
            height: 35rpx;
            text-align: center;
            line-height: 35rpx;
          }
        }
        .total{
          font-size: 30rpx;
          .total-price{
            font-weight: bold;
            color: #ef2c1c;
          }
        }
      }
      .settlement-btn{
        background: #ef2c1c;
        color: #FFFFFF;
        height: 55rpx;
        line-height: 55rpx;
        width: 200rpx;
        text-align: center;
        border-radius: 100rpx;
      }
    }
  }
}
</style>
