<template>
  <view class="container">
    <VNavigationBar background-color="#fff" title="配件申请" title-color="#333"></VNavigationBar>
    <view class="body">
      <div class="userList">
        <view v-for="item in twItem" :key="item.id" class="userItem">
          <view class="info">
            <text class="name">{{ item.waresName }}</text>
            <text class="num">x{{ item.waresCount}}</text>
          </view>
          <view class="info2">
            <view class="info2-item">
              <text class="label">规格型号</text>
              <text class="value">{{ item.wares.model }}</text>
            </view>
            <view class="info2-item">
              <text class="label">当前库存</text>
              <text class="value">{{ item.wares.stock }}</text>
            </view>
          </view>
        </view>
      </div>
      <u-popup bgColor="#fff" :show="show" mode="bottom" round @close="close" @open="open">
        <view class="pop">
          <view class="popHeader">
            <text class="btn1" @click="cancel">取消</text>
            <text class="popHeaderText">
              填写理由
            </text>
            <text class="btn2" @click="confirm">确定</text>
          </view>
          <view class="popContent">
            <textarea style="padding: 36rpx 32rpx" placeholder="填写审批未通过理由" v-model="argument"></textarea>
          </view>
        </view>
      </u-popup>
    </view>

    <view class="foot">
      <view class="btn1" @click="noFun">
        <image mode="aspectFit" src="/pages-order/static/dh.png" style="width: 32rpx;height: 32rpx"></image>
        驳回
      </view>
      <view class="line"></view>
      <view class="btn2" @click="yesFun">
        <image mode="aspectFit" src="/pages-order/static/tg.png" style="width: 32rpx;height: 32rpx"></image>
        审批通过
      </view>
    </view>
  </view>
</template>

<script>
import VNavigationBar from '@/components/VNavigationBar.vue'
import request from '@/utils/request';
export default {
  components: {
    VNavigationBar,
  },
  data() {
    return {
      list: [
        {name: '7字小钩', id: 1, typeName: '机修', num: 3, count: 35},
        {name: '反光贴', id: 2, typeName: '机修', num: 3, count: 35},
        {name: '刹车油DOT4', id: 3, typeName: '喷漆', num: 3, count: 35},
      ],
      show: false,
      argument: '',
      twId:'',
      //配件列表
      twItem:[],
      formData:{}
    }
  },
  onLoad(data) {
    this.formData = JSON.parse(decodeURIComponent(data.formData))
    this.listByTwId()
  },
  methods: {
    /**
     * 根据twId查询对应配件
     */
    listByTwId(){
      console.log(this.formData)
      request({
        url: '/admin-api/repair/twi/list',
        method: 'get',
        params:{twId:this.formData.id}
      }).then((res)=>{
        console.log(res.data,90)
        if (res.code == 200){
          this.twItem = res.data
        }
      })
    },


    close() {
      this.show = false
    },
    open() {},
    noFun() {
      this.handleAudit('05')
    },
    yesFun() {
      this.handleAudit('02')
    },

    /**
     * 审批接口
     * @param flag"02:审批通过"，"05:驳回"
     */
    handleAudit(flag){
      this.formData['status'] = flag
      // 处理配件信息
      this.formData.wares = [...this.twItem.map(item => {
        return {
          itemName: item.waresName,
          itemCount: item.waresCount,
          itemUnit: item.wares.unit,
          itemPrice: item.wares.price,
          repairIds: this.formData.repairId,
          repairNames: this.formData.repairName,
          saleId: this.formData.adviserId,
          saleName: this.formData.adviserName,
          itemDiscount: item.itemDiscount,
          itemMoney: item.wares.price * item.waresCount,
          partId: item.waresId,
          remark: item.remark
        }
      })]
      console.log(this.twItem,132)
      request({
        url: '/admin-api/repair/tw/audit',
        method: 'post',
        data:this.formData
      }).then((res)=>{
        if (res.code == 200){
          uni.showToast({
            title: '审批成功！',
            icon: 'none'
          })
          setTimeout(()=>{
            uni.navigateBack()
          },700)
        }
      })
    },

    confirm() {
      this.show = false
      uni.navigateBack()
    },
    cancel() {
      this.show = false
      this.argument = ''
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background-color: #F3F5F7;
  display: flex;
  flex-direction: column;

  .body {
    flex: 1;
    height: 0;
    overflow: auto;
    padding: 20rpx 0;

    .userList {
      margin: 20rpx 32rpx 0;
      background-color: #fff;
      padding: 0 20rpx;

      .userItem {
        padding: 30rpx 0;
        border-bottom: 1rpx solid #DDDDDD;

        .info {
          margin-bottom: 30rpx;
          display: flex;
          align-items: flex-end;
          column-gap: 10rpx;
          row-gap: 20rpx;

          .name {
            font-weight: bold;
            font-size: 32rpx;
            color: #333333;
          }

          .num {
            font-size: 28rpx;
            color: #0174F6;
          }
        }

        .info2 {
          display: flex;

          .info2-item {
            display: flex;
            flex-direction: column;
            flex: 1;
            width: 0;

            .label {
              font-size: 28rpx;
              color: #858BA0;
            }

            .value {
              font-size: 28rpx;
              color: #333333;
            }
          }
        }
      }

      .userItem:last-child {
        border-bottom: none;
      }
    }
  }

  .foot {
    background-color: #fff;
    padding: 30rpx;

    display: flex;
    align-items: center;

    .btn1, .btn2 {
      flex: 1;
      width: 0;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 10rpx;
    }

    .btn1 {
      color: #858BA0;
    }

    .btn2 {
      color: #0174F6;
    }

    .line {
      height: 32rpx;
      width: 1rpx;
      background-color: #ddd;
    }

  }

  .pop {
    //background-color: #fff;
    height: 60vh;
  }
  .popHeader {
    padding: 40rpx;

    display: flex;
    align-items: center;

    border-bottom: 1rpx solid #EEEEEE;

    .btn2 {
      color: #0174F6;
    }
    .btn1 {
      color: #999999;
    }

    .popHeaderText {
      flex: 1;
      width: 0;
      text-align: center;
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
    }
  }
  .popContent {

  }
}
</style>