<template>
  <div class="sign-confirmation-content">
    <el-form ref="ruleForm" :key="key" :model="ruleForm" :rules="rules" label-width="150px" label-position="top" class="rule-form-orange">
      <cy-info-title>电子合同信息</cy-info-title>
      <table style="margin-top: 20px" border class="view-table" cellspacing="0">
        <tr>
          <th rowspan="100" style="width: 250px;">{{ detailInfo.electronicSignaturePersonal ? detailInfo.electronicSignaturePersonal.name : '' }}</th>
          <td style="width: 200px;">认证链接</td>
          <td>
            <div style="display: flex; flex-direction: row; justify-content: space-between;">
              <span>{{ detailInfo.electronicSignaturePersonal ? detailInfo.electronicSignaturePersonal.shortAuthUrl : '' }}</span>
              <div
                v-if="detailInfo.electronicSignaturePersonal && detailInfo.electronicSignaturePersonal.shortAuthUrl && !disabled"
                v-clipboard="detailInfo.electronicSignaturePersonal ? 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: 220px;">
            认证状态：{{ detailInfo.electronicSignaturePersonal && detailInfo.electronicSignaturePersonal.authStatus ? '已认证' : '未认证' }}
            <span v-if="!disabled" style="color: #FE7D0B; float: right; margin-right: 10px; cursor: pointer;" @click="modifyClick('', detailInfo.electronicSignaturePersonal.fddCustomerId, 'auth')">刷新</span>
          </td>
        </tr>
        <tr>
          <td>签署链接</td>
          <td colspan="2">
            <div style="display: flex; flex-direction: row; justify-content: space-between;">
              <span>{{ detailInfo.shortContractLink ? detailInfo.shortContractLink : '' }}</span>
              <div
                v-if="detailInfo.shortContractLink && !disabled"
                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>{{ item.contractName }}</td>
          <td colspan="2">
            签署状态：{{ item.signStatus ? '已签署' : '未签署' }}
            <span v-if="!disabled" style="color: #FE7D0B; float: right; margin-right: 10px; cursor: pointer;" @click="modifyClick(item, detailInfo.electronicSignaturePersonal.fddCustomerId, 'contract')">刷新</span>
          </td>
        </tr>
      </table>
      <cy-info-title>签署结论</cy-info-title>
      <el-form-item label="签署结论" prop="signConclusion">
        <el-radio-group v-model="ruleForm.signConclusion" :disabled="disabled">
          <el-radio :label="1">完成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="说明" prop="remark" class="two-form-item">
        <el-input
          v-model="ruleForm.remark"
          placeholder="请输入说明"
          :disabled="disabled"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import { salesContractManagementSign, salesContractManagementGetAuthStatus, salesContractManagementSignType } from '@/api/myTrade/salesContractManagement/salesContractManagement'
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    deatilsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        signConclusion: 1,
        remark: '',
        id: ''
      },
      rules: {},
      key: 0,
      loading: false,
      signList: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  watch: {
    deatilsInfo: {
      handler(newV) {
        if (Object.keys(newV).length) {
          console.log('eeeeeee', JSON.parse(JSON.stringify(newV)))
          this.detailInfo = JSON.parse(JSON.stringify(newV))
          this.ruleForm.remark = this.deatilsInfo.remark
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    // this.getDetails()
  },
  methods: {
    // getDetails() {
    //   const { businessKey, type } = this.$route.query
    //   if (type === 'edit') {
    //     salesContractManagementSign({ id: businessKey }).then(({ data }) => {
    //       this.signList.push(data)
    //       this.ruleForm.id = data.id
    //     })
    //   }
    // },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          return false
        }
      })
    },
    // modifyClick(row, type) {
    //   if (type === 'auth') {
    //     salesContractManagementGetAuthStatus({ customerId: row.fddCustomerId }).then(({ data }) => {
    //       this.signList.map(item => {
    //         item.authStatus = data.authStatus
    //         return item
    //       })
    //     })
    //   }
    //   if (type === 'contract') {
    //     const params = {
    //       customerId: row.fddCustomerId,
    //       contractId: row.contractId,
    //       transactionId: row.transactionId
    //     }
    //     salesContractManagementSignType(params).then(({ data }) => {
    //       this.signList.map(item => {
    //         item.signStatus = data ? 1 : 0
    //         return item
    //       })
    //     })
    //   }
    // },
    getParams() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            const { signConclusion, remark, id } = this.ruleForm
            const { businessKey } = this.$route.query
            for (let i = 0; i < this.signList.length; i++) {
              const { authStatus, signStatus } = this.signList[i]
              if (!authStatus) {
                this.$message.warning('请刷新认证状态')
                return
              }
              if (!signStatus) {
                this.$message.warning('请刷新签署状态')
                return
              }
            }
            const params = {
              signConclusion,
              remark,
              id,
              businessKey
            }
            resolve(params)
          } else {
            reject()
            return false
          }
        })
      })
    }
  }
}
</script>

<style lang="scss">
.sign-confirmation-content {
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

}
</style>
