<template>
  <div class="purchase-contract-sign">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
      :style="formStyle"
    >
      <!-- 电子合同信息 -->
      <cy-info-title> 电子合同信息 </cy-info-title>
      <table border class="view-table" cellspacing="0">
        <tr>
          <th rowspan="100" style="width: 250px;">{{ detailInfo.supplierInfo.corporateName }}</th>
          <td style="width: 150px;">认证链接</td>
          <td>
            <div style="display: flex; flex-direction: row; justify-content: space-between;">
              <span>{{ detailInfo.supplierInfo.shortAuthUrl }}</span>
              <!-- <div style="color: #169bd5; margin-right: 10px; width: 55px; flex-shrink: 0; text-align: right; display: flex; flex-direction: column; justify-content: center; cursor: pointer;"
                v-clipboard="detailInfo.supplierInfo.shortAuthUrl" v-clipboard:success="copyResult">复制</div> -->
            </div>
          </td>
          <td style="width: 220px;">
            认证状态：{{ detailInfo.supplierInfo.authStatus ? '已认证' : '未认证' }}
            <!-- <span style="color: #169bd5; float: right; margin-right: 10px; cursor: pointer;" @click="refreshStatus(1, detailInfo.supplierInfo.fddCustomerId)">刷新</span> -->
          </td>
        </tr>
        <tr>
          <td>签署链接</td>
          <td colspan="2">
            <div style="display: flex; flex-direction: row; justify-content: space-between;">
              <span>{{ detailInfo.purchContractElectronicInfos.length ? detailInfo.purchContractElectronicInfos[0].shortContractLink : '' }}</span>
              <!-- <div style="color: #169bd5; margin-right: 10px; width: 55px; flex-shrink: 0; text-align: right; display: flex; flex-direction: column; justify-content: center; cursor: pointer;"
                v-clipboard="detailInfo.purchContractElectronicInfos.length ? detailInfo.purchContractElectronicInfos[0].shortContractLink : ''" v-clipboard:success="copyResult">复制</div> -->
            </div>
          </td>
        </tr>
        <tr v-for="item in detailInfo.purchContractElectronicInfos" :key="item.id">
          <td>{{ item.contractName }}</td>
          <td colspan="2">
            签署状态：{{ item.signStatus ? '已签署' : '未签署' }}
            <!-- <span style="color: #169bd5; float: right; margin-right: 10px; cursor: pointer;" @click="refreshStatus(2, item.id)">刷新</span> -->
          </td>
        </tr>
        <tr>
          <td>合同附件</td>
          <td colspan="2" style="padding-left: 0;">
            <cy-upload
              :upload-params="{}"
              :file-data="detailInfo.files"
              :upload-from-orange-status="true"
              placeholder="请上传附件"
              :disabled="true"
            />
          </td>
        </tr>
      </table>

      <!-- 签署结论 -->
      <cy-info-title> 签署结论 </cy-info-title>
      <el-form-item label="签署结论" prop="conclusion" style="width: 100%;">
        <el-radio-group v-model="ruleForm.conclusion" disabled>
          <el-radio label="pass">完成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="说明" style="width: 100%;">
        <el-input v-model="ruleForm.remark" type="textarea" :rows="3" placeholder="请输入说明" disabled />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'PurchaseContractSign',
  components: {

  },
  props: {
    'formStyle': {
      type: Object,
      default: () => {}
    },
    inspectionData: {
      type: [Object],
      default: () => {}
    },
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        conclusion: '',
        remark: ''
      },
      rules: {
        conclusion: [{ required: true, message: '请选择签署结论', trigger: 'change' }]
      },
      detailInfo: {
        supplierInfo: {},
        purchContractElectronicInfos: [],
        files: []
      },
      isLoading: false
    }
  },
  mounted() {
    // this.getDetail()
  },
  methods: {
    getDetail() {
      this.isLoading = true
      getSignDetail({ id: this.$route.params.infoId }).then(({ data }) => {
        this.detailInfo = { ...data }
        this.isLoading = false
      })
    },
    searchClick(val) {
      console.log(val)
    },
    submitClick() {

    },
    validate() {
      this.$refs.ruleFormRef.value.validate(valid => {
        if (valid) {
          console.log(valid)
        } else {
          console.log(1111)
        }
      })
    },
    copyResult() {
      this.$message.success('复制成功')
    },
    refreshStatus(type, id) {
      if(type == 1) {
        refreshReStatus({ customerId: id }).then(({ data }) => {
          this.detailInfo.supplierInfo.authStatus = data.authStatus
          this.getDetail()
        })
      } else if(type == 2) {
        refreshSiStatus({ electronicInfoId: id, contractType: 1 }).then(({ data }) => {
          let info = this.detailInfo.purchContractElectronicInfos.filter(item => item.id == id)
          if(info.length) {
            info[0].signStatus = data
          }
        })
      }
    },
    confirm() {
      this.$refs.ruleFormRef.validate(flag => {
        if(flag) {
          this.isLoading = true
          submitSign({ businessKey: this.$route.params.infoId, ...this.ruleForm }).then(() => {
            this.isLoading = false
            this.$message.success('提交成功')
            this.$router.go(-1)
          })
        }
      })
    }
  },
  watch: {
    'info.mathId': {
      handler(newV) {
        if (newV) {
          Object.keys(this.ruleForm).forEach(key => {
            this.ruleForm[key] = this.info[key]
          })
          if(this.info.supplierInfo) {
            this.detailInfo.supplierInfo = this.info.supplierInfo
          }
          if(this.info.purchContractElectronicInfos) {
            this.detailInfo.purchContractElectronicInfos = this.info.purchContractElectronicInfos
          }
          if(this.info.files) {
            this.detailInfo.files = this.info.files
          }
        }
      },
      immediate: true
    }
  }
}
</script>
<style lang="scss" scoped>
.purchase-contract-sign {
  .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;
      }
    }
  }
}
</style>
