<template>
  <div v-loading="isLoading" class="acceptance-sign">

    <!-- 电子合同信息 -->
    <cy-info-title> 电子合同信息 </cy-info-title>
    <table border class="view-table" cellspacing="0">
      <tr>
        <th rowspan="100" style="width: 150px;">{{ detailInfo.electronicSignaturePersonal.name }}</th>
        <td style="width: 150px;"><span class="label-span">认证链接：</span></td>
        <td>
          <div style="display: flex; flex-direction: row; justify-content: space-between;">
            <span>{{ detailInfo.electronicSignaturePersonal.shortAuthUrl }}</span>
            <div
              v-if="detailInfo.electronicSignaturePersonal.shortAuthUrl"
              v-clipboard="detailInfo.electronicSignaturePersonal.shortAuthUrl"
              v-clipboard:success="copyResult"
              style="color: #FE7D0B; margin-right: 10px; width: 55px; flex-shrink: 0; text-align: right; display: flex; flex-direction: column; justify-content: center; cursor: pointer;"
            >复制</div>
          </div>
        </td>
        <td style="width: 250px;">
          <span class="label-span">认证状态：</span>{{ detailInfo.electronicSignaturePersonal.authStatus ? '已认证' : '未认证' }}
          <span style="color: #FE7D0B; float: right; margin-right: 10px; cursor: pointer;" @click="refreshStatus(1, detailInfo.electronicSignaturePersonal.fddCustomerId)">刷新</span>
        </td>
      </tr>
      <tr>
        <td><span class="label-span">签署链接：</span></td>
        <td colspan="2">
          <div style="display: flex; flex-direction: row; justify-content: space-between;">
            <span>{{ detailInfo.shortContractLink }}</span>
            <div
              v-if="detailInfo.shortContractLink ? true : false"
              v-clipboard="detailInfo.shortContractLink ? detailInfo.shortContractLink : ''"
              v-clipboard:success="copyResult"
              style="color: #FE7D0B; margin-right: 10px; width: 55px; flex-shrink: 0; text-align: right; display: flex; flex-direction: column; justify-content: center; cursor: pointer;"
            >复制</div>
          </div>
        </td>
      </tr>
      <tr v-for="item in detailInfo.signConfirmationElectronicInfos" :key="item.id">
        <td colspan="2">{{ item.contractName }}
          <span style="color: #b9b9b9; float: right; margin-right: 10px;"><span style="color: #ff1a1a;">*</span>签署后点击「刷新」按钮</span>
        </td>
        <td>
          <span class="label-span">签署状态：</span>{{ item.signStatus ? '已签署' : '未签署' }}
          <span style="color: #FE7D0B; float: right; margin-right: 10px; cursor: pointer;" @click="refreshStatus(2, detailInfo.electronicSignaturePersonal.fddCustomerId,item)">刷新</span>
        </td>
      </tr>
    </table>

    <!-- 签署结论 -->
    <cy-info-title style="margin: 10px 0 0px;"> 签署结论 </cy-info-title>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
      :style="formStyle"
    >
      <el-form-item label="签署结论" prop="signConclusion" style="width: 100%;">
        <el-radio-group v-model="ruleForm.signConclusion">
          <el-radio label="1">完成</el-radio>
          <el-radio label="0">终止</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="说明" style="width: 100%;" prop="remark" :rules="[{ required: ruleForm.signConclusion == '0', message: '请输入说明', trigger: 'blur' }]">
        <el-input v-model="ruleForm.remark" type="textarea" :rows="3" placeholder="请输入说明" />
      </el-form-item>
    </el-form>

    <div class="submit-btn">
      <el-button @click="closePage">取消</el-button>
      <el-button type="primary" @click="confirm">提交</el-button>
    </div>
  </div>
</template>

<script>
import { getSignDetails, submitSign, refreshReStatus, refreshSiStatus } from '@/api/myTrade/acceptanceManagement/index'
export default {
  name: 'AcceptanceSign',
  components: {

  },
  props: {
    'formStyle': {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        signConclusion: '',
        remark: ''
      },
      rules: {
        signConclusion: [{ required: true, message: '请选择签署结论', trigger: 'change' }]
      },
      detailInfo: {
        electronicSignaturePersonal: {},
        signConfirmationElectronicInfos: null
      },
      isLoading: false

    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.isLoading = true
      getSignDetails({ businessKey: this.$route.query.id }).then(({ data }) => {
        this.detailInfo = { ...data }
        this.isLoading = false
      })
    },

    closePage() {
      this.$router.push({
        name: 'MyTrade',
        query: {
          type: 'AcceptanceManagement'
        }
      })
    },
    copyResult() {
      this.$message.success('复制成功')
    },
    refreshStatus(type, id, item) {
      if (type === 1) {
        refreshReStatus({ customerId: id }).then(({ data }) => {
          this.detailInfo.electronicSignaturePersonal.authStatus = data.authStatus
          this.getDetail()
        })
      } else if (type === 2) {
        const params = {
          customerId: id,
          contractId: item.contractId,
          transactionId: item.transactionId
        }
        refreshSiStatus(params).then(({ data }) => {
          // const info = this.detailInfo.signConfirmationElectronicInfos.filter(item => item.id === id)
          // if (info.length) {
          //   info[0].signStatus = data
          //   this.getDetail()
          // }
          this.getDetail()
        })
      }
    },
    confirm() {
      this.$refs.ruleFormRef.validate(flag => {
        if (flag) {
          this.isLoading = true

          const postData = {
            ...this.ruleForm,
            taskId: this.$route.query.taskId,
            id: this.detailInfo.id,
            businessKey: this.detailInfo.cAcceptanceBasicInfoId
          }
          delete postData.acceptanceGoodInfos
          submitSign(postData).then((res) => {
            if (res.success) {
              this.isLoading = false
              this.$message.success('提交成功')
              this.closePage()
            } else {
              this.isLoading = false
              this.$message.warning(res.msg)
            }
          })
        }
      })
    }
  }
}
</script>
  <style lang="scss" scoped>
  .acceptance-sign {
    padding: 10px 20px;

    .view-table {
      width: 100%;
      border-color: rgba(228, 228, 228, .2);
      margin-bottom: 20px;
      table-layout: fixed;
      tr {
        width: 100%;
        td, th {
          border-width: 1px;
          border-color: rgba(228, 228, 228, .2);
          height: 40px;
          padding-left: 10px;
          background-color: #ffffff;
          word-break: break-all;
        }
        th {
          background-color: #f5f6f6;
          font-weight: normal;
        }
      }
      .label-span {
        font-size: 14px;
      }
    }
    .el-form {
        padding: 10px 20px;
    }
    .statistics {
        color: #FF0000;
        margin-left: 20px;
        font-size: 14px;
    }
  }
  </style>
