<template>
  <view class="container">
    <VNavigationBar background-color="#fff" title="采购单" title-color="#333"></VNavigationBar>

    <view class="listBox">
      <view class="list">
        <view v-for="(item, index) in partList" :key="index" class="listItem">
          <view class="repairName">{{ item.name }}</view>
          <view class="repairBottom">
            <text class="repairDesc">上次价格：
              <text class="repairUnit">{{ item.purPrice }}</text>
            </text>
            <text class="repairDesc">单价：
              <text class="repairUnit">
                <u--input type="number"
                  placeholder="请输入内容"
                  border="surround"
                  v-model="item.newPrice"/>
              </text>
            </text>
            <text class="repairDesc">数量：
              <text class="repairUnit">
                <u--input
                    type="number"
                    placeholder="请输入内容"
                    border="surround"
                    v-model="item.count"/>
              </text>
            </text>


            <!--<view class="repairBtns">-->
<!--              <u-icon name="minus-circle-fill" size="24" @click="delNum(item)"></u-icon>-->
<!--              <text class="repairNum">{{ item.waresCount }}</text>-->
<!--              <u-icon color="#0174F6" name="plus-circle-fill" size="24" @click="addNum(item)"></u-icon>-->
<!--            </view>-->
          </view>
        </view>
        <u--input
            placeholder="备注"
            border="surround"
            type="text"
            v-model="remark"
            clearable
        ></u--input>
      </view>

    </view>

    <view class="footer">
      <text class="label"></text>
      <text class="repairNum"></text>
      <view class="submit" @click="submit">结算</view>
    </view>
  </view>
</template>

<script>
import VNavigationBar from "@/components/VNavigationBar.vue";
import request from '@/utils/request';
import {getDictTextByCodeAndValue,createUniqueCodeByHead} from "@/utils/utils";
import {getUserInfo} from '@/utils/auth.js'

export default {
  components: {VNavigationBar},
  data() {
    return {
      //配件申请单id
      twId:'',
      //配件列表
      wares:[],
      //代采购配件列表
      partList:[],
      //01零配件、02退配件
      type:true,
      //父组件传入的数据
      formData:{},
      repairList: [],
      remark:"",
      selectedRepairList: [
        {name: '炫驰全合成机油S7 4L/ALL', num: 3, unit: '桶', id: 3}
      ],
      active: ''
    };
  },
  onLoad(data) {
    if (data.formData){
      this.formData = JSON.parse(decodeURIComponent(data.formData))
      this.wares = this.formData.items
    }
    this.init()
  },

  computed: {

  },
  methods: {
    /**
     * 初始化配件数据
     */
    init() {
      this.partList = [...this.wares.map(item =>{
        return {
          ...item.wares,
          count: item.waresCount,
          newPrice: item.wares.purPrice,
          totalPrice: item.waresCount * item.wares.purPrice,
        }
      })]
    },
    /**
     *
     */
    addNum(repair) {
      this.$set(repair, 'waresCount', repair.waresCount + 1)
      const find = this.wares.find(f => f.id === repair.id)
      if (find) {
        find.waresCount = repair.waresCount
      } else {
        this.wares.push(JSON.parse(JSON.stringify(repair)))
      }
      console.log('repair', repair)
    },
    /**
     * 减
     */
    delNum(repair) {
      if (repair.waresCount <= 0) {
        return
      }
      this.$set(repair, 'waresCount', repair.waresCount - 1)
      const findIndex = this.wares.findIndex(f => f.id === repair.id)
      if (findIndex > -1 && repair.num <= 0) {
        this.wares.splice(findIndex, 1)
      } else if (repair.num > 0) {
        this.$set(this.wares[findIndex], 'waresCount', repair.waresCount)
      }
    },
    /**
     * 出库
     */
    submit() {
      const userInfo = getUserInfo()
      const data = {
        soType: '01',
        purchaseType: '01',
        soNo: createUniqueCodeByHead("CG"),
        userId: userInfo.id,
        userName: userInfo.nickname,
        itemCount:this.partList.length,
        totalPrice:this.partList.reduce((x, y) => {return x + y.totalPrice}, 0),
        soStatus:'03',
        remark:this.remark
      }
      data.goodsList = [...this.partList.map(item => {
        return {
          soiType: '01',
          goodsId: item.id,
          goodsType: '0',
          wareId: item?.wareId,
          goodsCount: item.count,
          goodsPrice: item.newPrice,
          remark: item.remark
        }
      })]
      request({
        url: '/admin-api/repair/so/create',
        method: 'post',
        data:data
      }).then((res)=>{
        if (res.code == 200){
          uni.showToast({
            title: '创建成功！',
            icon: 'none'
          })
          setTimeout(()=>{
            uni.navigateBack()
          },700)
        }
      })
    }

  }
}
</script>

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

.search {
  padding: 0 40rpx;
  background-color: #fff;

  & > .searchBox {
    height: 84rpx;
    background: #F3F5F7;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    margin: 0 auto;
    padding: 0 30rpx;
    font-size: 28rpx;
    color: #0174F6;

    display: flex;
    align-items: center;
  }

  .searchInput {
    flex: 1;
    width: 0;
    color: #333;
  }
}

.tabs {
  background-color: #fff;
  padding: 30rpx 40rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  column-gap: 30rpx;
  overflow: auto;

  .tab-item {
    flex-shrink: 0;
    padding: 16rpx 30rpx;
    font-size: 28rpx;
    color: #113A68;
    background: #F2F2F7;
    border-radius: 30rpx 30rpx 30rpx 30rpx;

    &.active {
      background: #0174F6;
      color: #fff;
    }

  }
}

.listBox {
  padding: 30rpx 32rpx;
  flex: 1;
  height: 0;

  .list {
    background-color: #fff;
    padding: 0 30rpx;
    height: 100%;
    overflow: auto;
  }

  .listItem {
    padding: 30rpx 0;
    border-bottom: 2rpx solid #DDDDDD;
    &:last-child {
      border-bottom: none;
    }
    .repairName {
      font-size: 32rpx;
      color: #333333;
      margin-bottom: 20rpx;
    }

    .repairBottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

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

    .repairUnit {
      color: #333333;
    }

    .repairBtns {
      display: flex;
      align-items: center;
      column-gap: 10rpx;
    }
  }
}

.footer {
  padding: 14rpx 32rpx;
  background-color: #fff;
  display: flex;
  align-items: center;

  .repairNum {
    flex: 1;
    width: 0;
    margin-right: 10rpx;
  }

  .submit {
    width: 208rpx;
    height: 72rpx;
    background: #0174F6;
    border-radius: 38rpx 38rpx 38rpx 38rpx;
    text-align: center;
    line-height: 72rpx;
    font-size: 32rpx;
    color: #FFFFFF;
  }
}
</style>
