<template>
  <div class="purchase-contract-sign" v-loading="isLoading">
    <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.supplierName }}</th>
          <td style="width: 150px;">认证链接</td>
          <td>
            <div style="display: flex; flex-direction: row; justify-content: space-between;">
              <span>{{ detailInfo.certifyLink }}</span>
              <!-- <div v-if="detailInfo.certifyLink" 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.certifyLink" v-clipboard:success="copyResult">复制</div> -->
            </div>
          </td>
          <td style="width: 220px;">
            认证状态：{{ detailInfo.certifyStatus ? '已认证' : '未认证' }}
          </td>
        </tr>
        <tr>
          <td>签署链接</td>
          <td colspan="2">
            <div style="display: flex; flex-direction: row; justify-content: space-between;">
              <span>{{ detailInfo.shortContractLink }}</span>
              <!-- <div v-if="detailInfo.shortContractLink" 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.shortContractLink" v-clipboard:success="copyResult">复制</div> -->
            </div>
          </td>
        </tr>
        <tr>
          <td>结算单</td>
          <td colspan="2">
            签署状态：{{ detailInfo.signStatus ? '已签署' : '未签署' }}
          </td>
        </tr>
        <tr>
          <td>结算单附件</td>
          <!-- <td style="padding-left: 0; width: 150px"> -->
          <td colspan="2">
            <cy-upload
              :upload-params="{}"
              :file-data="detailInfo.files"
              :upload-from-orange-status="true"
              placeholder="请上传附件"
              :disabled="true"
            />
          </td>
          <!-- <td>
            <el-button type="primary" @click="downloadFile">下载</el-button>
          </td> -->
        </tr>
      </table>

      <!-- 签署结论 -->
      <cy-info-title> 签署结论 </cy-info-title>
      <el-form-item label="签署结论" prop="signConclusion" style="width: 100%;">
        <el-radio-group v-model="ruleForm.signConclusion" 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.signComment" type="textarea" :rows="3" disabled placeholder="请输入说明" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import request from '@/utils/request'
import { exportFile } from '@/utils/index'
export default {
  name: 'PurchaseContractSign',
  components: {

  },
  props: {
    'formStyle': {
      type: Object,
      default: () => {}
    },
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        signConclusion: '',
        signComment: ''
      },
      rules: {
        signConclusion: [{ required: true, message: '请选择签署结论', trigger: 'change' }]
      },
      detailInfo: {},
      isLoading: false
    }
  },
  methods: {
    getDetail() {
      request({
        url: '/bill/sign',
        method: 'get',
        params: { taskId: this.$route.params.taskId, businessKey: this.$route.params.key }
      }).then(({ data: { settlementElectronicInfo } }) => {
        this.detailInfo = { ...settlementElectronicInfo }
      })
    },
    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
          if(this.$route.params.isChange) {
            submitChangeSign({ businessKey: this.$route.params.infoId, ...this.ruleForm }).then(() => {
              this.isLoading = false
              this.$message.success('提交成功')
              this.$router.go(-1)
            })
          } else {
            submitSign({ businessKey: this.$route.params.infoId, ...this.ruleForm }).then(() => {
              this.isLoading = false
              this.$message.success('提交成功')
              this.$router.go(-1)
            })
          }
        }
      })
    },
    downloadFile() {
      if(!this.detailInfo.files || this.detailInfo.files.length === 0) return
      request({
        url: '/bill/downloadPdfSign',
        method: 'get',
        responseType: 'arraybuffer',
        params: { settlementBasicInfoId: this.detailInfo.settlementBasicInfoId }
      }).then(data => {
        exportFile(data)
      })
    }
  },
  watch: {
    'info.mathId': {
      handler(newV) {
        if(newV) {
          this.detailInfo = { ...this.info }
          this.detailInfo.files = [this.detailInfo.settlementSignedFile]
          this.ruleForm.signConclusion = this.info.signConclusion
          this.ruleForm.signComment = this.info.signComment
        }
      },
      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>
