<!--
  @description:招标项目/采购项目-合同付款条款（单买单买）
  @Modifier:郝定康
  @routerPath:
  @date:2021-10-18 14:30:49
-->
<template>
  <div>
    <el-button type="primary" @click="paymentStageAdd()">
      新增付款阶段
    </el-button>
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      :inline-message="true"
    >
      <table v-for="(item, index) in formData.stageDetailDtoList" :key="index" class="from_table mt10">
        <tr>
          <td>
            <el-form-item
              ref="paymentStage"
              show-word-limit
              label="付款阶段"
              :prop="'stageDetailDtoList.' + index + '.paymentStage'"
              :rules="rules.paymentStage"
            />
          </td>
          <td>
            {{ item.paymentStage }}
          </td>
          <td>
            <el-form-item
              ref="paymentName"
              show-word-limit
              label="付款阶段名称"
              :prop="'stageDetailDtoList.' + index + '.paymentName'"
              :rules="rules.paymentName"
            />
          </td>
          <td>
            <gx-input
              v-model="item.paymentName"
            />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item
              ref="paymentProportion"
              show-word-limit
              label="合同款付款比例"
              :prop="'stageDetailDtoList.' + index + '.paymentProportion'"
              :rules="rules.paymentProportion"
            />
          </td>
          <td>
            <el-input
              v-model="item.paymentProportion"
              type="number"
            /> %
          </td>
          <td>
            <el-form-item
              ref="paymentMoney"
              show-word-limit
              label="付款金额"
              :prop="'stageDetailDtoList.' + index + '.paymentMoney'"
              :rules="rules.paymentMoney"
            />
          </td>
          <td>
            <!--金额组件-->
            <money
              :thousands="true"
              :unit-fixed="6"
              :money-value="item"
              name="paymentMoney"
              style="display: inline-block;"
            /> 元
            <span style="color: red;">（大写：{{ numberChinese(item.paymentMoney) }}）</span>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item
              ref="paymentCurrencyCode"
              show-word-limit
              label="币种"
              :prop="'stageDetailDtoList.' + index + '.paymentCurrencyCode'"
              :rules="rules.paymentCurrencyCode"
            />
          </td>
          <td>
            <el-select v-model="item.paymentCurrencyCode" filterable style="width: 100%;" @change="paymentCurrencyChange(index)">
              <el-option
                v-for="itemVal in protproject_currencyList"
                :key="itemVal.typename"
                :label="itemVal.typename"
                :value="itemVal.typecode"
              />
            </el-select>
          </td>
          <td>
            <el-form-item
              ref="paymentTime"
              show-word-limit
              label="计划付款日期"
              :prop="'stageDetailDtoList.' + index + '.paymentTime'"
              :rules="rules.paymentTime"
            />
          </td>
          <td>
            <el-date-picker
              v-model="item.paymentTime"
              :picker-options="disabledPickerOptions"
              :format="elValueSaveFormat"
              :value-format="elValueSaveFormat"
              :default-time="defaultTimeDateTime"
              type="datetime"
              placeholder="请选择日期"
            />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item
              show-word-limit
              label="付款备注说明"
            />
          </td>
          <td colspan="3">
            <gx-input
              v-model="item.paymentRemarks"
              type="textarea"
            />
          </td>
        </tr>
      </table>
    </el-form>
  </div>
</template>

<script>
/* 公共混入*/
import { contractSigningMixins } from '../mixins/contractSigningMixins'
/* 公用方法*/
import { characters1_auto } from '@/assets/js/validate'// 校验输入内容
import { numberChinese, restoreInitialValue } from '@assets/js/utils'
/* 组件*/
import money from '@comp/common/money/money' // 数字组件
export default {
  name: 'ContractPaymentProvisionSingleAdd',
  components: { money },
  mixins: [contractSigningMixins],
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      protproject_currencyList: [],
      // dataItem: {
      //   paymentCurrency: '', // 付款币种
      //   paymentCurrencyCode: '', // 付款币种编码
      //   paymentMoney: 0, // 付款金额
      //   paymentName: '', // 付款阶段名称
      //   paymentProportion: 0, // 付款比例
      //   paymentRemarks: '', // 付款备注
      //   paymentStage: '', // 付款阶段编号
      //   paymentTime: '' // 付款时间
      // },
      // formData: {
      //   contractId: '',
      //   stageDetailDtoList: [
      //     {
      //       paymentCurrency: '', // 付款币种
      //       paymentCurrencyCode: '', // 付款币种编码
      //       paymentMoney: 0, // 付款金额
      //       paymentName: '', // 付款阶段名称
      //       paymentProportion: 0, // 付款比例
      //       paymentRemarks: '', // 付款备注
      //       paymentStage: '1', // 付款阶段编号
      //       paymentTime: '' // 付款时间
      //     }
      //   ]
      // },
      rules: {
        paymentCurrencyCode: [{ required: true, message: '请选择', trigger: 'blur' }], // 付款币种编码
        paymentMoney: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 付款金额
        paymentName: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 付款阶段名称
        paymentProportion: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 付款比例
        paymentStage: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 付款阶段编号
        paymentTime: [{ required: true, message: '请选择', trigger: 'blur' }] // 付款时间
      },
      dictionaryType: ['protproject_currency']
    }
  },
  created() {
    this.getGroupType()
    // 获取详情
    // this.loadData()
  },
  methods: {
    numberChinese,
    getGroupType() {
      // 获取字典信息
      this.$store.dispatch('getGroupType', this.dictionaryType).then((data) => {
      // 遍历key存储相应的数据
        for (const key in data.bidTypeData) {
        /* 是否有数据*/
          if (data.bidTypeData[key]) {
            this[key] = data.bidTypeData[key]
          }
        }
      })
    },
    paymentCurrencyChange(index) {
      this.protproject_currencyList.forEach(item => {
        if (item.typecode === this.formData.stageDetailDtoList[index].paymentCurrencyCode) {
          this.formData.stageDetailDtoList[index].paymentCurrency = item.typename
        }
      })
    },
    // 获取详情
    // loadData() {
    //   const params = {
    //     contractId: this.$route.query.id
    //   }
    //   listContractPayStage(params).then(res => {
    //     this.formData = res.data
    //     if (!this.formData.stageDetailDtoList.length) {
    //       this.paymentStageAdd()
    //     }
    //   })
    // },
    // 新增付款阶段
    paymentStageAdd() {
      // ...this.dataItem
      const itemData = { ...this.formData.stageDetailDtoList[0] }
      restoreInitialValue(itemData)
      this.formData.stageDetailDtoList.push({
        ...itemData,
        paymentStage: this.formData.stageDetailDtoList.length + 1,
        paymentMoney: '0',
        paymentProportion: '0'
      })
    },
    // 保存
    save() {
      let isSubmit = false
      this.$refs['form'].validate(valid => {
        if (valid) {
          isSubmit = true
        } else {
          isSubmit = false
        }
      })
      return isSubmit
    }
  }
}
</script>

<style>
</style>
