<template>
  <view class="container">
    <VNavigationBar background-color="#fff" :title="title" title-color="#333"></VNavigationBar>
    <view class="listBox">
      <view class="list">
        <view class="formItem" v-if="!isInput">
          <text class="formLabel">供应商</text>
          <input type="text" style="text-align: right" v-model="serviceName" placeholder="请输入供应商名称"/>
          <view @click="searchService">查询</view>
        </view>
        <view class="formItem" v-if="!isInput">
          <text class="formLabel">备注</text>
          <text class="formValue"></text>
        </view>
        <view style="padding-bottom: 60rpx;border-bottom: 1px solid #ddd;" class="formItem" v-if="!isInput">
          <textarea style="height: 50px" auto-height placeholder="请输入备注" v-model="remark"/>
        </view>
        <uni-card v-for="(item, index) in partList" :key="index" :title="item.name" :extra="'上次价格：'+item.purPrice">
          <view class="formItem">
            <view class="formLabel">单价</view>
            <input type="number" style="text-align: right" v-model="item.newPrice" placeholder="请输入单价"/>
          </view>
          <view class="formItem">
            <view class="formLabel">数量</view>
            <input type="number" style="text-align: right" v-model="item.count" placeholder="请输入数量"/>
          </view>
        </uni-card>
      </view>
    </view>
    <view class="footer">
      <text class="label"></text>
      <text class="repairNum"></text>
      <view class="submit" @click="submit" v-if="!isInput">保存</view>
      <view class="submit" @click="inWare" v-else>入库</view>
    </view>
  </view>
</template>

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

export default {
  components: {VNavigationBar},
  data() {
    return {
      //配件申请单id
      twId: '',
      //配件列表
      wares: [],
      //代采购配件列表
      partList: [],
      //01零配件、02退配件
      type: true,
      //父组件传入的数据
      formData: {},
      repairList: [],
      isInput: false, //是否入库
      remark: "",
      title: '采购单',
      selectedRepairList: [
        {name: '炫驰全合成机油S7 4L/ALL', num: 3, unit: '桶', id: 3}
      ],
      active: '',
      //供应商名称
      serviceName: "",
      //供应商id
      serviceId: "",
      soId: "",
      soiIds: []
    };
  },
  onLoad(data) {
    if (data.soId) {
      this.soId = data.soId
      this.isInput = true
      this.title = '配件入库'
      this.getSoiId()
    }else {
      if (getJSONData("applyWaresForm")) {
        this.formData = getJSONData("applyWaresForm")
        this.wares = this.formData.items
        this.init()
      }
    }

  },

  computed: {},
  methods: {
    /**
     * 查询供应商
     */
    searchService() {
      if ("" == this.serviceName) {
        uni.showToast({
          title: '请输入供应商名称！',
          icon: 'none'
        })
        return
      }
      //查询供应商
      request({
        url: '/admin-api/supplier/baseSupplier/searchList',
        method: 'get',
        params: {name: this.serviceName}
      }).then((res) => {
        console.log(res)
        if (res.code == 200 && res.data.length > 0) {
          uni.showActionSheet({
            itemList: res.data.map(m => m.name),
            success: ({tapIndex}) => {
              this.serviceName = res.data[tapIndex].name
              this.serviceId = res.data[tapIndex].id
            }
          })
        } else {
          //未查询到符合条件的供应商
          uni.showToast({
            title: '未查询到符合条件的供应商，您可以直接使用，系统将自动保存为新供应商！',
            icon: 'none'
          })
        }
      })
    },
    /**
     * 初始化配件数据
     */
    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,
        supplierId: this.serviceId,
        supplierName: this.serviceName
      }
      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
        }
      })]
      console.log(data)
      debugger
      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)
        }
      })
    },
    getSoiId() {
      request({
        url: '/admin-api/repair/so/get',
        method: 'get',
        params: {
          id: this.soId
        }
      }).then((res) => { // 将 `.then` 移到这里
        console.log(res)
        res.data.goodsList.forEach(item => {
          this.soiIds.push(item.id)
        })
        console.log('返回',res.data)

        request({
          url: '/admin-api/repair/soi/get',
          method: 'get',
          params: {
            ids: this.soiIds.join(',')
          }
        }).then((res) => { // 同样这里也要移到外层括号后
          console.log('配件信息', res.data)
          res.data.map(item => {
            item.wares = item.repairWares
            item.waresCount = 0
          })
          this.wares = res.data
          this.init()
        })
      })
    },
    /**
     * 入库
     */
    inWare(){
      console.log('partList',this.partList)
      // this.partList.forEach(item => {
      //   item.inCount = item.count
      //   item.goodsId = item.id
      //   // item.id = this.soiIds[0]
      //   })
      const copiedPartList = JSON.parse(JSON.stringify(this.partList));
      for (let i = 0; i < this.partList.length; i++) {
        this.partList[i].inCount = this.partList[i].count
        this.partList[i].goodsId = copiedPartList[i].id
        this.partList[i].id = this.soiIds[i]
      }
      console.log('partList',this.partList)
      request({
        url: '/admin-api/repair/so/inWare',
        method: 'post',
        data: {
          id: this.soId,
          soiList: this.partList
        }
      }).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;
}

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

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

.formItem {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20rpx;

  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 20rpx;

  border-bottom: 1rpx solid #DDDDDD;
}

.formLabel {
  font-size: 32rpx;
  color: #333333;
  width: 50px;
}

.formValue {
  flex: 1;
  width: 0;
  text-align: right;
  font-size: 32rpx;
  color: #999999;
}

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

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

.repairUnit {
  color: #333333;
}

.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>
