<!--
  @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"
    >
      <div v-for="(item, index) in formData.stageDetailDtoList" :key="index" class="mt10">
        <div style="overflow: hidden">
          <div class="page-title" style="overflow: hidden">
            <span>
              付款单位明细
            </span>
            <el-button v-if="formData.stageDetailDtoList.length > 1" type="primary" style="float: right;" @click="deleteItem(index)">
              删除
            </el-button>
          </div>
        </div>
        <template>
          <el-table
            :data="item.contractPayStageDetailItemDtoList"
            highlight-current-row
          >
            <el-table-column
              type="index"
              label="序号"
              width="50"
            />
            <el-table-column
              prop="departName"
              label="付款单位名称"
              align="center"
            />
            <el-table-column
              prop="paymentProportion"
              label="合同付款比例(%)"
              align="center"
            >
              <template slot-scope="scope">
                <el-form-item
                  show-word-limit
                  :prop="'stageDetailDtoList.' + index + '.contractPayStageDetailItemDtoList.' + scope.$index + '.paymentProportion'"
                  :rules="rules.paymentProportion"
                >
                  <el-input
                    v-model="scope.row.paymentProportion"
                    type="number"
                    style="width: 200px"
                  />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              prop="paymentMoney"
              label="付款金额(元)"
              align="center"
            >
              <template slot-scope="scope">
                <!-- :prop="'stageDetailDtoList.' + index + '.contractPayStageDetailItemDtoList.' + scope.$index + 'paymentMoney'"
                  :rules="rules.paymentMoney" -->
                <el-form-item
                  show-word-limit
                  :prop="'stageDetailDtoList.' + index + '.contractPayStageDetailItemDtoList.' + scope.$index + '.paymentMoney'"
                  :rules="rules.paymentMoney"
                >
                  <money
                    :thousands="true"
                    :unit-fixed="6"
                    :money-value="scope.row"
                    name="paymentMoney"
                    style="display: inline-block;"
                    @input="paymentMoneyTotal(item)"
                  />
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <table class="from_table mt10">
          <tr>
            <td>
              <el-form-item
                show-word-limit
                label="付款阶段"
                :prop="'stageDetailDtoList.' + index + '.paymentStage'"
                :rules="rules.paymentStage"
              />
            </td>
            <td>
              {{ item.paymentStage }}
            </td>
            <td>
              <el-form-item
                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="paymentMoney"
                show-word-limit
                label="付款金额"
                :prop="'stageDetailDtoList.' + index + '.paymentMoney'"
                :rules="rules.paymentMoney"
              />
            </td>
            <td colspan="3">
              {{ item.paymentMoney }}
              <span style="color: red;">（大写：{{ numberChinese(item.paymentMoney) }}）</span>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item
                ref="paymentMoney"
                show-word-limit
                label="付款备注说明"
              />
            </td>
            <td colspan="3">
              <el-input
                v-model="item.paymentRemarks"
                type="textarea"
              />
            </td>
          </tr>
        </table>
      </div>
    </el-form>
    <!-- 所属机构弹框 -->
    <organTree-dialog
      ref="organTree"
      :single-choice="true"
      @call-back="organTree"
    />
  </div>
</template>

<script>
/* 公共混入*/
import { contractSigningMixin } from '../mixins/contractSigningMixin'
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' // 数字组件
import organTreeDialog from '@/views/common/user/organizationTree/organTree-dialog' // 组织机构选择
export default {
  name: 'ContractPaymentProvisionBuyMoreAdd',
  components: {
    money,
    organTreeDialog
  },
  mixins: [contractSigningMixin, contractSigningMixins],
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      protproject_currencyList: [],
      rules: {
        isUnified: [{ required: true, message: '请选择', trigger: 'blur' }], // 是否同一账号付款
        paymentDepartName: [{ required: true, message: '请选择', trigger: 'blur' }], // 付款单位
        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()
  },
  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]
          }
        }
      })
    },
    paymentMoneyTotal(item) {
      item.paymentMoney = 0
      item.contractPayStageDetailItemDtoList.forEach(data => {
        item.paymentMoney += Number(data.paymentMoney)
      })
    },
    isUnifiedChange(val) {
      this.formData.stageDetailDtoList = [{ ...this.formData.stageDetailDtoList[0], isUnified: val }]
      this.formData.stageDetailDtoList[0].contractPayStageDetailItemDtoList.forEach(item => {
        item.paymentProportion = ''
        item.paymentMoney = ''
      })
      this.formData.stageDetailDtoList[0].paymentMoney = '0'
    },
    deleteItem(index) {
      this.formData.stageDetailDtoList.splice(index, 1)
      this.formData.stageDetailDtoList.forEach((item, i) => {
        item.paymentStage = i + 1
      })
    },
    // 选择机构
    organSelect() {
      this.$refs.organTree.open({
        title: '选择机构', // 弹框标题
        dialog: true, // 弹窗状态
        selectCodes: this.formData.stageDetailDtoList[0].paymentDepartId && this.formData.stageDetailDtoList[0].paymentDepartId.split(',')
      })
    },
    // 选择/清空机构
    organTree(data, index) {
      // 清空
      if (data === 'clear') {
        this.formData.stageDetailDtoList.forEach(item => {
          item.paymentDepartId = ''
          item.paymentDepartName = ''
        })
        // this.formData.stageDetailDtoList[0].paymentDepartId = '' // 需方机构id
        // this.formData.stageDetailDtoList[0].paymentDepartName = '' // 需方机构名称
      } else {
        // 选择
        this.formData.stageDetailDtoList.forEach(item => {
          item.paymentDepartId = data.keys
          item.paymentDepartName = data.labels
        })
        // this.$set(this.formData.stageDetailDtoList[0], 'paymentDepartName', data.labels)
        // this.$set(this.formData.stageDetailDtoList[0], 'paymentDepartId', data.keys)
      }
    },
    paymentCurrencyChange(index) {
      this.protproject_currencyList.forEach(item => {
        if (item.typecode === this.formData.stageDetailDtoList[index].paymentCurrencyCode) {
          this.formData.stageDetailDtoList[index].paymentCurrency = item.typename
        }
      })
    },
    // 新增付款阶段
    paymentStageAdd() {
      // ...this.dataItem
      const itemData = { ...this.formData.stageDetailDtoList[0] }
      restoreInitialValue(itemData)
      this.formData.stageDetailDtoList[0].contractPayStageDetailItemDtoList.forEach(item => {
        itemData.contractPayStageDetailItemDtoList.push({
          ...item,
          paymentProportion: '',
          paymentMoney: ''
        })
      })
      this.formData.stageDetailDtoList.push({
        ...itemData,
        paymentStage: this.formData.stageDetailDtoList.length + 1,
        paymentMoney: '0',
        paymentProportion: '0',
        isUnified: this.formData.stageDetailDtoList[0].isUnified
      })
    },
    // 保存
    save() {
      let isSubmit = false
      this.$refs['form'].validate(valid => {
        if (valid) {
          isSubmit = true
        } else {
          isSubmit = false
        }
      })
      return isSubmit
    }
  }
}
</script>

<style>
</style>
