<template>
  <div class="purchase-contract-update">

    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
      :style="formStyle"
    >
      <!-- 电子合同信息 -->
      <cy-info-title> 电子合同信息 </cy-info-title>
      <el-form-item
        label="是否新增货物"
        prop="contractSupplementInfo.addGoods"
        class="industry"
      >
        <el-radio-group v-model="ruleForm.contractSupplementInfo.addGoods" @change="businessInfo.list = []">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="补充合同编号">
        <el-input
          v-model="ruleForm.contractSupplementInfo.supplementContractNumber"
          disabled
        />
      </el-form-item>
      <el-form-item label="价格计算规则" style="width: 100%;" :rules="[{required: ruleForm.contractSupplementInfo.addGoods == 1, message: '请输入价格计算规则', trigger: 'blur'}]">
        <el-input type="textarea" :rows="3" placeholder="请输入价格计算规则"
          v-model="ruleForm.contractSupplementInfo.priceRuleDetail"
        />
      </el-form-item>
      <el-form-item label="其他约定" style="width: 100%;">
        <el-input type="textarea" :rows="3" v-model="ruleForm.contractSupplementInfo.otherConvention" placeholder="请输入其他约定" />
      </el-form-item>
    </el-form>
    <!-- 货物信息 -->
    <cy-info-title v-if="ruleForm.contractSupplementInfo.addGoods == 1">
      货物信息
      <div slot="right">
        <el-button type="primary" @click="addGoods">选择</el-button>
      </div>
    </cy-info-title>

    <div class="table-box" style="width: 100%" v-if="ruleForm.contractSupplementInfo.addGoods == 1">
      <el-table :data="businessInfo.list">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="goodsName" label="名称" label-class-name="rule-required"></el-table-column>
        <el-table-column prop="goodsFactory" label="厂家" label-class-name="rule-required"></el-table-column>
        <el-table-column prop="modelNumber" label="型号" label-class-name="rule-required"></el-table-column>
        <el-table-column prop="units" label="单位" label-class-name="rule-required"></el-table-column>
        <el-table-column prop="quantity" label="数量" label-class-name="rule-required"></el-table-column>
        <el-table-column prop="price" label="暂定单价"></el-table-column>
        <el-table-column prop="remark" label="备注">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.remark"
              placeholder="请输入备注"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span v-if="scope.$index !== 0" style="color: #FE7D0B; cursor: pointer;" @click="deleteInfo(scope.$index)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="submit-btn">
      <el-button @click="$router.go(-1)">关闭</el-button>
      <el-button type="primary" @click="confirm">提交</el-button>
    </div>

    <cy-dialog ref="chooseGood" title="选择货物">
      <choose-goods ref="goodsTable" :info="businessInfo"></choose-goods>
      <template slot="footer">
        <el-button @click="$refs.chooseGood.show = false">关闭</el-button>
        <el-button type="primary" @click="confirmGoods">确定</el-button>
      </template>
    </cy-dialog>
  </div>
</template>

<script>
import { getUpdateDetail, submitUpdate, calculateMoney } from '@/api/myTrade/purchaseContractManagement/purchaseContractManagement'
import ChooseGoods from './components/ChooseGoods.vue'
export default {
  name: 'PurchaseContractUpdate',
  components: {
    ChooseGoods
  },
  props: {
    'formStyle': {
      type: Object,
      default: () => {}
    },
    inspectionData: {
      type: [Object],
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        contractSupplementInfo: {
          addGoods: '',
          supplementContractNumber: '',
          priceRuleDetail: '',
          otherConvention: ''
        }
      },
      rules: {
        'contractSupplementInfo.addGoods': [{ required: true, message: '请选择是否新增货物', trigger: 'change' }]
      },
      businessInfo: {
        businessNumber: '',
        info: {},
        list: [],
        source: 'caigou'
      }
    }
  },
  watch: {
    inspectionData: {
      handler(newV) {
        if (newV && Object.keys(newV).length) {
          const { company } = newV
          if (company) {
            this.formlabel.company = company.name
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    // getUpdateDetail({ businessKey: this.$route.params.infoId }).then(({ data }) => {
    //   Object.keys(this.ruleForm).forEach(key => {
    //     if(data[key]) {
    //       this.ruleForm[key] = data[key]
    //     }
    //   })
    //   this.businessInfo.list = data.contractGoodsInfo || []
    // })
  },
  methods: {
    confirm() {
      this.$refs.ruleFormRef.validate(flag => {
        if(flag) {
          if(this.ruleForm.contractSupplementInfo.addGoods == 1 && this.businessInfo.list.length === 0) {
            this.$message.error('请选择货物')
            return
          }
          this.submit()
        }
      })
    },
    submit() {
      let data = {
        Loading: true,
        contractGoodsInfo: [ ...this.businessInfo.list ],
        businessKey: this.$route.query.infoId,
        ...this.ruleForm
      }
      this.isLoading = true
      submitUpdate(data).then(() => {
        this.isLoading = false
        this.$message.success('提交成功')
        this.$router.go(-1)
      }, () => {
        this.isLoading = false
      })
    },
    validate() {
      this.$refs.ruleFormRef.value.validate(valid => {
        if (valid) {
          console.log(valid)
        } else {
          console.log(1111)
        }
      })
    },
    addGoods() {
      this.businessInfo.businessNumber = this.$route.query.businessNumber
      this.$refs.chooseGood.show = true
    },
    confirmGoods() {
      if(this.$refs.goodsTable.selectedInfos.length === 0) {
        this.$message.error('请选择货物')
        return
      }
      this.$refs.chooseGood.show = false
      this.calculate(this.$refs.goodsTable.selectedInfos)
    },
    calculate(list) {
      let data = {
        salesContractSupplementGoodsInfos: [ ...list ],
        businessKey: this.$route.query.infoId
      }
      this.isLoading = true
      calculateMoney(data).then(({ data }) => {
        this.businessInfo.list = [ ...data ]
        this.isLoading = false
      }, () => {
        this.isLoading = false
      })
    },
    deleteInfo(index) {
      this.businessInfo.list.splice(index, 1)
    }
  }
}
</script>

    <style lang="scss" scoped>
    .contract-base-update {
    }
    </style>
