<template>
  <div class="tripartite-agreement">
    <cy-info-title style="margin-bottom: 20px;">
      三方协议
      <div v-if="type !== 'contract' && !disabled" slot="right">
        <el-button type="text" @click="addClick">新增</el-button>
      </div>
    </cy-info-title>
    <cy-comm-table
      ref="commTable"
      :columns="columns"
      :data="tableData"
      :count="0"
    />
    <cy-dialog ref="dialog" title="三方协议" width="80%" top="10vh">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="top" class="rule-form-orange">
        <el-form-item label="债务人" prop="debtorCompanyName" style="width: 100%">
          <el-input v-model="ruleForm.debtorCompanyName" disabled placeholder="请输入债务人" clearable />
        </el-form-item>
        <cy-comm-table
          ref="commTable"
          :columns="protocolColumns"
          :data="ruleForm.contractContentList"
          :count="0"
        />
        <el-form-item label="其他特殊约定(固定)" prop="specialAgreementFixed" style="width: 100%">
          <el-input
            v-model="specialAgreementFixed"
            type="textarea"
            :rows="10"
            placeholder="请输入其他特殊约定(固定)"
            disabled
            clearable
          />
        </el-form-item>
        <el-form-item label="其他特殊约定" prop="specialAgreement" style="width: 100%">
          <el-input v-model="ruleForm.specialAgreement" type="textarea" :rows="3" placeholder="请输入其他特殊约定" clearable />
        </el-form-item>
      </el-form>
      <div class="submit-btn">
        <el-button @click="$refs.dialog.show = false">取消</el-button>
        <el-button type="primary" @click="dialogSubmit">提交</el-button>
      </div>
    </cy-dialog>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      handlerIndex: null,
      tableData: [],
      ruleForm: {
        debtorCompanyName: '',
        specialAgreement: '',
        contractContentList: []
      },
      rules: {
      },
      protocolColumns: [
        {
          label: '基础交易合同名称',
          prop: 'contractNo'
        },
        {
          label: '基础交易合同编号',
          prop: 'contractName'
        },
        {
          label: '原合同内容',
          prop: 'originalContractContent',
          render: (h, row) => {
            return <el-input v-model={row.originalContractContent} placeholder='请输入原合同内容'/>
          }
        },
        {
          label: '变更后内容',
          prop: 'postChangeContent',
          render: (h, row) => {
            return <el-input v-model={row.postChangeContent} placeholder='请输入变更后内容'/>
          }
        },
        {
          label: '操作',
          show: true,
          render: (h, row, index) => {
            const btnList = [
              {
                msg: '增加',
                category: 'add'
              },
              {
                msg: '删除',
                category: 'delete'
              }
            ]
            const options = btnList.map(item => {
              return (
                <span class='table-icon-box' style='font-size: 12px;' onClick={() => { this.handlerOperateDialog(item.category, row, index) }}>
                  { item.msg }
                </span>
              )
            })
            return <div>{ options }</div>
          },
          width: 130
        }
      ]
    }
  },
  computed: {
    specialAgreementFixed() {
      return `1.甲、乙双方同意并确认甲方（债权人）将基于基础交易合同项下的应收账款转让给长安银科，转让应收账款的具体明细以编号为${this.detailsInfo.reviewTransferReceivable?.confirmationNo || ''}的《应收账款转让确认书》为准。该应收账款的起算日为保理融资本金的投放日， ${this.detailsInfo.reviewFinancingInfo?.financingPeriod || ''}天到期。
2.乙方（债务人）拖延支付本协议约定的任何一期款项（包括但不限于应收账款、逾期利息及违约金），且在长安银科发出书面通知后 3 个工作日内仍不付款的，乙方应按所有逾期金额的 0.1%/日支付逾期利息，且本协议项下全部款项加速到期。长安银科有权要求乙方立即支付本协议项下全部已到期和未到期的应收款项，为行使本协议项下权利而发生的费用（包括但不限于诉讼费和律师费）全部由乙方承担。长安银科为行使本协议项下权利而发生的费用包括但不限于律师费、差旅费、保全费、鉴定费、调查取证费、诉讼费等。
3. 甲乙双方因基础交易合同产生的纠纷，应由甲乙双方自行解决，与丙方无关。在发生任何纠纷的情形下均不影响甲方向丙方的付款义务。丙方无需承担因甲方或乙方原因而对另一方造成的损失。
4. 甲乙双方共同确认，基础交易合同的真实性、有效性，确认所转让应收账款的真实性、有效性，同时确认基础交易合同项下的货物已完成交付，甲方已确认验收合格并对收到的全部货物的质量和数量没有任何异议，不会因货物质量、数量等其他原因而抗辩基础交易合同项下的付款义务，甲乙双方对编号为${this.detailsInfo.reviewTransferReceivable?.noticeNo || ''}的《应收账款转让通知书》中所列应收账款放弃抗辩权和抵销权。`
    },
    columns() {
      return [
        {
          label: '序号',
          index: true
        },
        {
          label: '三方协议编号',
          prop: 'tripartiteAgreementNo'
        },
        {
          label: '债务人',
          prop: 'debtorCompanyName'
        },
        {
          label: '基础交易合同名称',
          prop: 'userName',
          render: (h, row) => {
            // const dom = row.contractContentList.map(item => {
            //   return (<div>{item.contractName}</div>)
            // })
            return <div>{row.contractContentList[0].contractName}</div>
          }
        },
        {
          label: '基础交易合同编号',
          prop: 'userName',
          render: (h, row) => {
            // const dom = row.contractContentList.map(item => {
            //   return (<div>{item.contractNo}</div>)
            // })
            return <div>{row.contractContentList[0].contractNo}</div>
          }
        },
        {
          label: '操作',
          show: !this.disabled,
          render: (h, row, index) => {
            const btnList = [
              {
                msg: '编辑',
                category: 'edit'
              },
              {
                msg: '删除',
                category: 'delete'
              }
            ]
            const options = btnList.map(item => {
              return (
                (item.category === 'delete' && this.type === 'contract') ? '' : <span class='table-icon-box' style='font-size: 12px;' onClick={() => { this.handlerOperate(item.category, row, index) }}>
                  { item.msg }
                </span>
              )
            })
            return <div>{ options }</div>
          },
          width: 130
        }
      ]
    }
  },
  watch: {
    detailsInfo: {
      handler(newV) {
        if (newV === undefined) return
        const { reviewBasicContractList } = JSON.parse(JSON.stringify(newV))
        this.tableData = reviewBasicContractList
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    addClick() {
      this.$refs.dialog.show = true
      this.handlerIndex = null
      const { contractContentList } = this.tableData[0]
      this.ruleForm = {
        ...this.tableData[0],
        contractContentList: [{
          ...contractContentList[0],
          originalContractContent: '',
          postChangeContent: ''
        }]
      }
    },
    handlerOperateDialog(type, row, index) {
      if (type === 'add') {
        this.ruleForm.contractContentList.push({
          ...JSON.parse(JSON.stringify(this.tableData[0].contractContentList[0])),
          originalContractContent: '',
          postChangeContent: ''
        })
      } else if (type === 'delete') {
        this.ruleForm.contractContentList.splice(index, 1)
      }
    },
    dialogSubmit() {
      this.$refs.dialog.show = false

      if (this.handlerIndex !== null) {
        this.$set(this.tableData, this.handlerIndex, this.ruleForm)
      } else {
        this.tableData.push(this.ruleForm)
      }
    },
    handlerOperate(type, row, index) {
      if (type === 'edit') {
        this.ruleForm = row
        this.handlerIndex = index
        this.$refs.dialog.show = true
      } else {
        this.tableData.splice(index, 1)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tripartite-agreement {

}
</style>
