<template>
  <div class="accounts-plan">
    <cy-info-title>收放款计划（应收账款）</cy-info-title>
    <div class="table-box" style="margin-top: 20px;">
      <el-table :data="tableData">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="basicTradeContractName" label="基础交易合同名称" show-overflow-tooltip />
        <el-table-column prop="basicTradeContractNo" label="基础交易合同编号" show-overflow-tooltip />
        <el-table-column prop="tripartiteAgreementNo" label="三方协议合同编号" show-overflow-tooltip />
        <el-table-column prop="expireDate" label="到期日" show-overflow-tooltip />
        <el-table-column prop="accountReceivableAmount" label="应收账款金额" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.currencyTypeCode }}{{ formatMoney(scope.row.accountReceivableAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="accountReceivableNetAmount" label="应收账款净额" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.currencyTypeCode }}{{ formatMoney(scope.row.accountReceivableNetAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="debtor" label="债务人" show-overflow-tooltip />
        <el-table-column v-if="type === 'planChange' && !disabled" label="操作" width="145">
          <template slot-scope="scope">
            <div class="table-click-color">
              <span @click="seeClick(scope.row)">查看</span>
              <!-- <span @click="notNeedClick(scope.$index)">{{scope.row.notNeed ?  '取消豁免' : '豁免' }} </span> -->
              <div>
                <span @click="replaceNumber(scope.row, scope.$index)">更换三方协议编号</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <cy-dialog ref="replaceNumber" title="更换三方协议合同编号" class="assets-box" top="15vh">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" label-position="left" class="rule-form">
        <el-form-item label="债务人：" style="width: 100%">
          <el-input
            v-model="replaceItem.debtor"
            placeholder="请输入业务编号"
            disabled
          />
        </el-form-item>
        <div class="table-box" style="width: 100%">
          <el-table :data="replaceTableData">
            <el-table-column prop="contractName" label="基础交易名称" />
            <el-table-column prop="contractNo" label="基础交易合同编号" />
            <el-table-column prop="originalContractContent" label="原合同内容" />
            <el-table-column prop="postChangeContent" label="变更后内容" />
          </el-table>
        </div>
        <el-form-item label="三方协议合同编号：" style="width: 100%" prop="tripartiteAgreementNo">
          <el-input
            v-model="ruleForm.tripartiteAgreementNo"
            class="form-item-border"
            placeholder="请输入三方协议合同编号"
          />
        </el-form-item>
      </el-form>
      <div class="submit-btn">
        <el-button type="primary" style="width: 100px;" @click="onSubmit">确定</el-button>
        <el-button style="width: 100px;" @click="() => { this.$refs.replaceNumber.show = false }">取消</el-button>
      </div>
    </cy-dialog>
  </div>
</template>

<script>
import { formatMoney } from '@/utils'
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    accountsPlan: {
      type: Array,
      default: () => []
    },
    // type:  planChange: 计划变更
    type: {
      type: String,
      default: ''
    },
    // 合同放款信息ID
    paymentInfoId: {
      type: [String, Number],
      defualt: ''
    }
  },
  data() {
    return {
      tableData: [],
      replaceTableData: [],
      ruleForm: {
        tripartiteAgreementNo: ''
      },
      rules: {
        tripartiteAgreementNo: [
          { required: true, message: '请输入三方协议合同编号', trigger: 'blur' }
        ]
      },
      replaceItem: {}
    }
  },
  computed: {
    formatMoney() {
      return (val) => {
        return formatMoney(val)
      }
    }
  },
  watch: {
    accountsPlan: {
      handler(newV) {
        if (newV.length) {
          this.tableData = JSON.parse(JSON.stringify(newV))
          this.tableData = this.tableData.map(item => {
            item.currencyTypeCode = item.currencyType?.code
            return item
          })
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    seeClick(row) {
      if (row.businesstype == 'domestic_factoring') { // 国内
        window.open('/contractInfo/contractMaking/contractDomesticAccountReceivableView?domesticAccountReceivableId=' + row.contractAccountReceivableId + '&viewDuediligence=1')
      } else { // 出口
        window.open('/contractInfo/contractMaking/contractExportAccountReceivableView?exportAccountReceivableId=' + row.contractAccountReceivableId + '&viewDuediligence=1')
      }
    },
    notNeedClick(index) {
      this.tableData[index].notNeed = !this.tableData[index].notNeed
    },
    replaceNumber(row, index) {
      this.ruleForm.tripartiteAgreementNo = ''
      this.$refs.replaceNumber.show = true
      this.agreementOrder = index
      this.replaceItem = row
      this.replaceItem.index = index
      const params = {
        paymentInfoId: this.paymentInfoId,
        underlyingAssetsId: row.underlyingAssetsId
      }
      this.$api.customManage.collectionLoanManage.getAgreementContent(params).then((data) => {
        this.replaceTableData = data.data
      })
    },
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.tableData[this.replaceItem.index].tripartiteAgreementNo = this.ruleForm.tripartiteAgreementNo
          this.$refs.replaceNumber.show = false
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
