<template>
  <view style="padding: 100rpx 0;min-height: 100vh;">
    <view class="head">
      <view class="">
        <view class="" style="display: flex;justify-content: space-around;margin-top: 24rpx;color:#777777">
          <view :class="{act: tabIndex==1}" @click="changeTabs(1)">
            报价列表
          </view>
          <view :class="{act: tabIndex==2}" @click="changeTabs(2)">
            报价记录
          </view>
        </view>
        <view style="height: 8rpx;" />
        <view class="line" :style="{left:tabIndex==1?tabsLeft+'px':tabsRight+'px'}" />
      </view>
    </view>
    <view class="content">
      <u-loading-page v-if="loading" :loading="loading"></u-loading-page>
      <view v-else>
        <view class="card" v-for="(item,index) in lists" :key='index'>
          <view class="head">
          </view>
          <view class="card-content">
            <view class="card-content-l" style="width: 152rpx;height: 152rpx;">
              <image style="width: 152rpx;height: 152rpx;" :src="item.goods.imgs" mode=""></image>
              <view class="status">
                {{tabIndex==1?"未报价":"已报价" }}
              </view>
            </view>
            <view class="card-content-r">
              <view class="title ellipsis">
                {{item.goods.goods_name}}
              </view>
              <view class="need">
                需求量： {{item.need_num}}{{item.goods.unit_name}}
              </view>
              <view class="ipt">
                <u--input placeholder="输入报价数量" :readonly="tabIndex==2" v-model="item.nums"
                  style="background-color:#F6F6F6;border: none;"></u--input>
                <view style="width: 10rpx;">

                </view>
                <u--input style="background-color: #F6F6F6;border: none;" placeholder="输入产品报价" @blur="priceBlur(index)"
                  :readonly="tabIndex==2" v-model="item.price"></u--input>
              </view>
            </view>
            <view class="status-png" v-if="tabIndex==2">
              <image v-if="item.is_adopt==0" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/491f6202405281828272606.png" style="width: 108rpx; height: 84rpx;">
              </image>
              <image v-else-if="item.is_adopt==1" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/274ad202405111523222891.png" style="width: 108rpx; height: 84rpx;">
              </image>
              <image v-else-if="item.is_adopt==2 && item.delivery_name" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/fde75202405281450531427.png" style=" width: 108rpx;
              	height: 84rpx;">
              </image>
              <image v-else-if="item.is_adopt==2 && !item.delivery_name" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/dbe43202405281449446456.png" style=" width: 108rpx;
              	height: 84rpx;">
              </image>
              <image v-else src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/22059202405281826183468.png" style="width: 108rpx; height: 84rpx;">
              </image>
            </view>
          </view>
          <view class="card-footer" v-if="item.nums && item.price">
            共{{item.nums}}{{item.unit_name}}&nbsp; &nbsp;合计:<text
              style="font-size: 28rpx;color: #FC452F;font-weight: 700;">￥{{(item.nums*item.price).toFixed(2)}}</text>
          </view>
          <u-line style="margin-top: 30rpx;" color="#F3F3F3"></u-line>
        </view>
        <u-empty v-if="lists.length==0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
        </u-empty>
      </view>

      <view class="submit-btn" v-if="tabIndex==1">
        <u-button shape='circle' color='#20B128' @click="submit" text="提交"></u-button>
      </view>
      <view class="submit-btn" v-if="tabIndex==2">
        <u-button shape='circle' color='#20B128' @click="showDeliver" text="立即发货"></u-button>
      </view>
      <uni-popup ref="deliver" type="center" @click.stop="">
        <view class="deliver">
          <view style="font-size: 32rpx;font-weight: bold;text-align: center;">发货</view>
          <u--form labelPosition="left" style="width: 100%;" labelWidth="auto" :model="model1" :rules="rules"
            ref="uForm">
            <u-form-item label="配送方式" borderBottom>
              <u-radio-group v-model="model_type" placement="row" @change="model1.delivery_name='';model1.delivery_id=''">
                <u-radio label="自己配送" :name="2" style="margin-right: 20rpx;"></u-radio>
                <u-radio label="快递配送" :name="1"></u-radio>
              </u-radio-group>
            </u-form-item>
            <block v-if="model_type==1">
              <u-form-item label="快递公司" prop="delivery_name" @tap="deliveryNameShow=true" borderBottom>
                <u--input v-model="model1.delivery_name" readonly border="none" placeholder="请选择快递公司" suffixIcon="arrow-right"></u--input>
              </u-form-item>
              <u-form-item label="物流单号" prop="delivery_id" borderBottom>
                <u--input v-model="model1.delivery_id" border="none" placeholder="请输入物流单号"></u--input>
              </u-form-item>
            </block>
            <block v-if="model_type==2">
              <u-form-item label="送货人姓名" prop="delivery_name" borderBottom>
                <u--input v-model="model1.delivery_name" border="none" placeholder="请输入送货人姓名"></u--input>
              </u-form-item>
              <u-form-item label="送货人电话" prop="delivery_id" borderBottom>
                <u--input v-model="model1.delivery_id" border="none" placeholder="请输入送货人电话"></u--input>
              </u-form-item>
            </block>
          </u--form>
          <u-button shape='circle' style="margin-top: 80rpx;" color='#20B128' @click="onExpress" text="确认发货"></u-button>
          <u-picker
          				:show="deliveryNameShow"
          				:columns="[columns]"
          				title="请选择快递公司"
          				@cancel="deliveryNameShow = false"
          				@confirm="changeName"
          		>
          		</u-picker>
        </view>
      </uni-popup>
    </view>
  </view>
</template>
<script>
  import { Toast } from "../../libs/uniApi";
  import {
    OpurchaseGoodsOfferApi,
    OpurchaseGoodsOfferListApi,
    OpurchaseclassExpressApi,
    ExpressListApi
  } from "@/api/supplier.js"

  export default {
    data() {
      return {
        tabIndex: 1,
        tabsLeft: 0,
        tabsRight: 0,
        loading: false,
        lists: [],
        date: "",
        ycn: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/739c3202405071458553459.png',
        wcj: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/04c2c202405071501462462.png',
        ybj: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/274ad202405111523222891.png',
        model_type: 2,
        deliveryNameShow: false,
        model1: {
          delivery_name: "",
          delivery_id: "",
        },
        rules: {
          delivery_name: {
            type: 'string',
            required: true,
            message: '不可为空',
            trigger: ['change', 'blur']
          },
          delivery_id: {
            type: 'string',
            required: true,
            message: '不可为空',
            trigger: ['change', 'blur']
          }
        },
        columns: []
      }
    },
    methods: {
      navgo(url) {
        uni.navigateTo({
          url
        })
      },
      getTabsPosi() {
        const {
          windowWidth
        } = uni.getSystemInfoSync();
        this.tabsLeft = (((windowWidth / 2) - 26) / 2)
        this.tabsRight = (this.tabsLeft + (windowWidth / 2))
      },
      async getLists(type) {
        let that = this
        OpurchaseGoodsOfferListApi({
          type: type || this.tabIndex,
          date: this.date
        }).then(res => {
          this.lists = res.data.lists
          this.lists.forEach(item => {
            if (!(+item.nums)) {
              item.nums = ''
            }
            if (!(+item.price)) {
              item.price = ''
            }
          })
        })
        that.loading = true
        setTimeout(() => {
          that.loading = false
        }, 1000)
      },
      changeTabs(num) {
        let that = this
        this.tabIndex = num
        this.getLists()
      },
      priceBlur(i) {
        this.lists[i].price = (+this.lists[i].price).toFixed(2)
      },
      async submit() {
        let data =
          this.lists.filter(item => {
            return (+item.price && +item.nums)
          }).map(item => {
            return {
              id: item.id,
              nums: item.nums,
              price: item.price
            }
          })
        if (!data.length) return ;
        let res = await OpurchaseGoodsOfferApi({
          data: data
        })
        this.getLists(1)
      },
      showDeliver() {
        this.getAction();
        this.$refs.deliver.open()
      },
      // 发货
      onExpress() {
        this.$refs.uForm.validate().then(res=>{
          OpurchaseclassExpressApi({
            ...this.model1,
            date: this.date
          }).then(res => {
            this.getLists(2);
            this.$refs.deliver.close();
            Toast('发货成功')
          })
        })
      },
      // 物流公司列表
      getAction(){
        ExpressListApi({
          page_size: 100
        }).then(res=>{
          this.columns = res.data.lists.map(item=>item.name);
        })
      },
      changeName(e){
        this.model1.delivery_name = e.value[0];
        this.deliveryNameShow = false;
      },
    },
    onLoad(option) {
      this.date = option.date
      this.getTabsPosi()
      this.getLists()
      // OpurchaseGoodsOfferListApi()

    }
  }
</script>


<style lang="scss">
  .head {
    padding: 20rpx;
    background-color: white;
    position: relative;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 10;

    .act {
      color: #20B128;
    }

    .line {
      width: 26px;
      height: 5rpx;
      background-color: #20B128;
      border-radius: 50rpx;
      position: absolute;
      transition: 300ms;
    }
  }

  .content {
    padding: 20rpx;
    padding-bottom: 150rpx;

    .card {
      width: 710rpx;
      margin: 0 auto;
      padding: 20rpx;
      box-sizing: border-box;
      background-color: white;



      .card-content {
        display: flex;
        position: relative;

        .card-content-l {
          margin-right: 20rpx;
          position: relative;

          .status {
            width: 152rpx;
            height: 40rpx;
            background-color: rgba(0, 0, 0, .3);
            text-align: center;
            color: white;
            font-size: 24rpx;
            line-height: 40rpx;
            position: absolute;
            bottom: 0;
          }
        }

        .card-content-r {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .title {
            font-size: 30rpx;
            width: 500rpx;
          }

          .need {
            color: #777777;
            font-size: 24rpx;
          }

          .ipt {
            display: flex;
            height: 56rpx;

          }
        }

        .status-png {
          position: absolute;
          right: 20rpx;
        }

      }

      .card-footer {
        margin-top: 30rpx;
        text-align: right;
        font-size: 28rpx;
        color: #060606;
      }
    }

    .submit-btn {
      position: fixed;
      bottom: 70rpx;
      width: 710rpx;
      margin: 0 auto;
    }
  }

  .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .deliver {
    width: 600rpx;
    height: 500rpx;
    background-color: #fff;
    border-radius: 14rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
</style>