<template>
  <div class="create-bidding-content">
    <cy-info-title>变更合同</cy-info-title>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
    >
      <el-form-item label="补充合同编号" prop="supplementContractNumber">
        <el-input
          v-model="ruleForm.supplementContractNumber"
          placeholder="请输入补充合同编号"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="是否新增货物" prop="addGoods">
        <el-radio-group v-model="ruleForm.addGoods" :disabled="disabled">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <cy-info-title>变更文件</cy-info-title>
      <el-form-item
        label="合同文件"
        prop="desc"
        class="form-required"
      >
        <cy-upload
          ref="salesContractSupplementContractFile"
          :upload-params="{
            fileType: 'salesContractSupplementContractFile'
          }"
          :file-data="ruleForm.salesContractSupplementContractFile"
          :upload-from-orange-status="true"
          placeholder="请上传已签署的合同"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="说明">
        <el-input
          v-model="ruleForm.remark"
          placeholder="请输入说明"
          :disabled="disabled"
        />
      </el-form-item>
      <cy-info-title v-if="ruleForm.addGoods">
        货物信息
        <template v-if="!disabled" slot="right">
          <span style="color: #FE7D0B; margin-right: 20px; cursor: pointer" @click="addInfo">添加</span>
          <span style="color: #FE7D0B; margin-right: 20px; cursor: pointer" @click="templateImport">模板导入</span>
          <input ref="fileButton" type="file" accept="xls, .xlsx, .excel" style="display: none" @change="importFile">
        </template>
      </cy-info-title>
      <div v-if="ruleForm.addGoods" class="table-box" style="width: 100%">
        <el-table :data="goodsInfoList">
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="goodsName" label="名称" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.goodsName"
                placeholder="请输入名称"
                :disabled="disabled"
              />
            </template>
          </el-table-column>
          <el-table-column prop="goodsFactory" label="厂家" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.goodsFactory"
                placeholder="请输入厂家"
                :disabled="disabled"
              />
            </template>
          </el-table-column>
          <el-table-column prop="modelNumber" label="型号" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.modelNumber"
                placeholder="请输入型号"
                :disabled="disabled"
              />
            </template>
          </el-table-column>
          <el-table-column prop="units" label="单位" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.units"
                placeholder="请输入单位"
                :disabled="disabled"
              />
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.quantity"
                placeholder="请输入数量"
                :disabled="disabled"
              />
            </template>
          </el-table-column>
          <el-table-column prop="clearPrice" label="是否明确单价" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.clearPrice"
                placeholder="请选择是否明确单价"
                style="width: 100%"
                :disabled="disabled"
              >
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="salesPrice" label="销售单价" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.salesPrice"
                placeholder="请输入销售单价"
                :disabled="disabled"
              />
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.remark"
                placeholder="请输入备注"
                :disabled="disabled"
              />
            </template>
          </el-table-column>
          <el-table-column v-if="!disabled" label="操作">
            <template slot-scope="scope">
              <span style="color: #FE7D0B; cursor: pointer;" @click="deleteInfo(scope.$index)">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
  </div>
</template>

<script>
import { salesContractChangeEnter, doImportGoodsInfo } from '@/api/myTrade/salesContractManagement/salesContractManagement'
import { fourMoney, formatMoney } from '@/utils/index'
export default {
  components: {
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    deatilsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: false,
      ruleForm: {
        detailsId: '',
        supplementContractNumber: '',
        addGoods: '',
        salesContractSupplementContractFile: [],
        remark: ''
      },
      uploadParams: {},
      rules: {
        supplementContractNumber: [{ required: true, message: '请输入补充合同编号', trigger: 'blur' }],
        addGoods: [{ required: true, message: '请选择是否新增货物', trigger: 'change' }],
        salesContractSupplementContractFile: [{ required: true, message: '请上传合同文件', trigger: 'change' }]
      },
      goodsInfoList: []
    }
  },
  computed: {
    fourMoney() {
      return (val) => {
        return fourMoney(val)
      }
    },
    formatMoney() {
      return (val) => {
        return formatMoney(val)
      }
    }
  },
  watch: {
    deatilsInfo: {
      handler(newV) {
        if (this.deatilsInfo && Object.keys(newV).length) {
          const { supplementContractNumber, addGoods, fileStorageDOs, files, remark, supplementGoodsInfos } = JSON.parse(JSON.stringify(newV))
          this.ruleForm = {
            supplementContractNumber,
            addGoods,
            salesContractSupplementContractFile: fileStorageDOs || files || [],
            remark
          }
          this.goodsInfoList = supplementGoodsInfos
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.salesContractChangeEnter()
  },
  methods: {
    salesContractChangeEnter() {
      const { id } = this.$route.query
      salesContractChangeEnter({ id }).then(({ data }) => {
        this.goodsInfoList = data.supplementGoodsInfos
        this.ruleForm.detailsId = data.id
      })
    },
    addInfo() {
      this.goodsInfoList.push({
        goodsName: '',
        goodsFactory: '',
        modelNumber: '',
        units: '',
        quantity: '',
        clearPrice: '',
        salesPrice: '',
        remark: ''
      })
    },
    deleteInfo(index) {
      this.goodsInfoList.splice(index, 1)
    },
    templateImport() {
      this.$refs.fileButton.click()
    },
    importFile(e) {
      const file = e.target.files[0] || e.dataTransfer.files[0]// 用于提交
      const postData = new FormData()
      postData.append('file', file)
      doImportGoodsInfo(postData).then(res => {
        if (res.success) {
          if (res.data.length) {
            this.goodsInfoList = []
            res.data.map(item => {
              item.quantity = typeof (item.quantity) === 'number' ? fourMoney(item.quantity) : item.quantity
              item.salesPrice = typeof (item.salesPrice) === 'number' ? formatMoney(item.salesPrice) : item.salesPrice
              this.goodsInfoList.push(item)
            })
          }
        } else {
          this.$message.warning(res.msg)
        }
      })
      e.target.value = ''
    },
    getParams() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleFormRef.validate(valid => {
          if (valid) {
            const { detailsId, supplementContractNumber, addGoods, remark } = this.ruleForm
            const { id } = this.$route.query
            const salesContractSupplementContractFileList = this.$refs.salesContractSupplementContractFile.getFileLists
            if (!salesContractSupplementContractFileList.length) {
              this.$message.warning('请上传已签署的合同文件')
              return
            }
            const params = {
              loading: true,
              id: detailsId === 0 ? null : detailsId,
              cSalesContractManagementId: id,
              supplementContractNumber,
              addGoods,
              remark,
              fileIds: salesContractSupplementContractFileList.map(item => item.id)
            }
            if (addGoods) {
              if (!this.goodsInfoList.length) {
                this.$message.warning('请添加货物信息')
                return
              }
              for (let i = 0; i < this.goodsInfoList.length; i++) {
                const { goodsName, goodsFactory, modelNumber, units, quantity, clearPrice, salesPrice } = this.goodsInfoList[i]
                if (!goodsName) {
                  this.$message.warning('请输入姓名')
                  return
                }
                if (!goodsFactory) {
                  this.$message.warning('请输入厂家')
                  return
                }
                if (!modelNumber) {
                  this.$message.warning('请输入型号')
                  return
                }
                if (!units) {
                  this.$message.warning('请输入单位')
                  return
                }
                if (!quantity) {
                  this.$message.warning('请输入数量')
                  return
                }
                if (clearPrice === '') {
                  this.$message.warning('请选择是否明确单价')
                  return
                }
                if (clearPrice === 1) {
                  if (!salesPrice) {
                    this.$message.warning('请输入销售单价')
                    return
                  }
                }
              }
              params.supplementGoodsInfos = this.goodsInfoList
            }
            resolve(params)
          } else {
            reject()
            return false
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.create-bidding {

}
</style>
