<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>
      <!-- <div class="table-box" style="width: 100%">
        <el-table :data="signList">
          <el-table-column prop="name" label="姓名" width="120" />
          <el-table-column prop="shortAuthUrl" label="认证链接">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.shortAuthUrl" placement="top">
                <span class="one-ellipsis">{{ scope.row.shortAuthUrl }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="authStatus" label="认证状态" width="110">
            <template slot-scope="scope">
              <span> {{ scope.row.authStatus == 1 ? '已认证' : '未认证' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="shortContractLink" label="签署链接">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.shortContractLink" placement="top">
                <span class="one-ellipsis">{{ scope.row.shortContractLink }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="debtors" label="合同名称">
            <template slot-scope="scope">
              <el-tooltip placement="top">
                <div slot="content">
                  <div v-for="(item, index) in scope.row.contractNamelist" :key="index">
                    {{ item }}
                  </div>
                </div>
                <div>
                  <div v-for="(item, index) in scope.row.contractNamelist" :key="index" class="one-ellipsis">
                    {{ item }}
                  </div>
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="signStatus" label="签署状态" width="110">
            <template slot-scope="scope">
              <span> {{ scope.row.signStatus == 1 ? '已签署' : '未签署' }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="!disabled" label="操作" width="230">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="刷新认证状态" placement="top">
                <span class="table-icon-box" style="color: #FE7D0B; cursor: pointer; margin-right: 5px" @click="modifyClick(scope.row, 'auth')">刷新认证状态
                </span>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="刷新签署状态" placement="top">
                <span class="table-icon-box" style="color: #FE7D0B; cursor: pointer;" @click="modifyClick(scope.row, 'contract')">刷新签署状态
                </span>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div> -->
      <table style="margin-top: 20px" border class="view-table" cellspacing="0">
        <tr>
          <th rowspan="100" style="width: 250px;">{{ detailInfo.electronicSignaturePersonal.name }}</th>
          <td style="width: 200px;">认证链接</td>
          <td>
            <div style="display: flex; flex-direction: row; justify-content: space-between;">
              <span>{{ detailInfo.electronicSignaturePersonal.shortAuthUrl }}</span>
              <div
                v-if="detailInfo.electronicSignaturePersonal.shortAuthUrl && !disabled"
                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: 220px;">
            认证状态：{{ 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 ? '已签署' : '未签署' }}
            <div style="float: right; padding-right: 5px;">
              <span style="color: #b9b9b9;"><span style="color: #ff1a1a;">*</span>签署后点击「刷新」按钮”</span>
              <span v-if="!disabled" style="color: #FE7D0B; float: right; margin-right: 10px; cursor: pointer;" @click="modifyClick(item, detailInfo.electronicSignaturePersonal.fddCustomerId, 'contract')">刷新</span>
            </div>
          </td>
        </tr>
        <tr v-if="disabled">
          <td>签署合同</td>
          <td colspan="2">
            <el-form-item
              prop="desc"
              style="width: 100%"
            >
              <cy-upload
                ref="salesContractManagementFile"
                :upload-params="{
                  fileType: 'salesContractManagementFile'
                }"
                :file-data="detailInfo.files"
                :upload-from-orange-status="true"
                placeholder="请上传销售合同模板"
                :disabled="disabled"
              />
            </el-form-item>
          </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, salesContractChangeSign } 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,
      detailInfo: {}
      // signList: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  watch: {
    deatilsInfo: {
      handler(newV) {
        if (this.deatilsInfo && Object.keys(newV).length) {
          // const { authStatus, authUrl, contractId, contractNamelist, fddCustomerId, id, name, shortAuthUrl, shortContractLink, signStatus, transactionId, remark } = JSON.parse(JSON.stringify(newV))
          // const data = {
          //   authStatus,
          //   authUrl,
          //   contractId,
          //   contractNamelist,
          //   fddCustomerId,
          //   id,
          //   name,
          //   shortAuthUrl,
          //   shortContractLink,
          //   signStatus,
          //   transactionId
          // }
          // this.signList.push(data)
          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, taskName } = this.$route.query
      if (type === 'edit' && taskName === '签署确认') {
        salesContractManagementSign({ id: businessKey }).then(({ data }) => {
          this.detailInfo = data
          this.ruleForm.id = data.id
        })
      }
      if (type === 'edit' && taskName === '变更签署确认') {
        salesContractChangeSign({ id: businessKey }).then(({ data }) => {
          this.detailInfo = data
          this.ruleForm.id = data.id
        })
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          return false
        }
      })
    },
    modifyClick(item, fddCustomerId, type) {
      console.log(item, fddCustomerId, type)
      if (type === 'auth') {
        salesContractManagementGetAuthStatus({ customerId: fddCustomerId, Loading: true }).then(({ data }) => {
          // this.signList.map(item => {
          //   if (item.authStatus) {
          //     item.authStatus = data.authStatus
          //     this.getDetails()
          //   }
          //   return item
          // })
          this.detailInfo.electronicSignaturePersonal.authStatus = data.authStatus
          this.getDetails()
        })
      }
      if (type === 'contract') {
        const params = {
          customerId: fddCustomerId,
          contractId: item.contractId,
          transactionId: item.transactionId,
          Loading: true
        }
        salesContractManagementSignType(params).then(({ data }) => {
          // this.signList.map(item => {
          //   item.signStatus = data ? 1 : 0
          //   return item
          // })
          const info = this.detailInfo.signConfirmationElectronicInfos.filter(data => data.id === item.id)
          if (info.length) {
            info[0].signStatus = data
          }
        })
      }
    },
    copyResult() {
      this.$message.success('复制成功')
    },
    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.detailInfo.signConfirmationElectronicInfos.length; i++) {
              const { signStatus } = this.detailInfo.signConfirmationElectronicInfos[i]
              if (signStatus === 0) {
                this.$message.warning('请刷新签署状态')
                return
              }
            }
            if (this.detailInfo.electronicSignaturePersonal.authStatus === 0) {
              this.$message.warning('请刷新认证状态')
              return
            }
            const params = {
              signConclusion,
              remark,
              id,
              businessKey
            }
            resolve(params)
          } else {
            reject()
            return false
          }
        })
      })
    }
  }
}
</script>

<style lang="scss">
.sign-confirmation-content {
  .view-table {
    width: 100%;
    border-color: rgba(228, 228, 228, .2);
    margin-bottom: 10px;
    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;
      }
    }
  }
}
// .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>
