<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;">{{ 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 ? '已签署' : '未签署' }}
            <div style="float: right;">
              <span style="color: #b9b9b9;"><span style="color: #ff1a1a;">*</span>签署后点击「刷新」按钮”</span>
              <span style="color: #169bd5; margin: 0 10px 0 20px; cursor: pointer;" @click="refreshStatus(2)">刷新</span>
            </div>
          </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">
          <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" placeholder="请输入说明" />
      </el-form-item>
    </el-form>

    <div class="submit-btn">
      <el-button @click="$router.go(-1)">取消</el-button>
      <el-button type="primary" @click="confirm">提交</el-button>
    </div>
  </div>
</template>

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

  },
  props: {
    'formStyle': {
      type: Object,
      default: () => {}
    },
    inspectionData: {
      type: [Object],
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        signConclusion: '',
        signComment: ''
      },
      rules: {
        signConclusion: [{ required: true, message: '请选择签署结论', trigger: 'change' }]
      },
      detailInfo: {},
      isLoading: false,
      supplierName: ''
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      request({
        url: '/bill/sign',
        method: 'get',
        params: { taskId: this.$route.query.taskId, businessKey: this.$route.query.key }
      }).then(({ data }) => {
        this.detailInfo = { ...data.settlementElectronicInfo }
        this.supplierName = data.supplierName
      })
    },
    submit() {
      request({
        url: '/bill/finalStatementsign',
        method: 'post',
        data: { 
          Loading: true,
          taskId: this.$route.query.taskId,
          electronicInfoId: this.detailInfo.id,
          ...this.ruleForm
        }
      }).then(() => {
        this.isLoading = false
        this.$message.success('提交成功')
        this.$router.go(-1)
      })
    },
    copyResult() {
      this.$message.success('复制成功')
    },
    refreshStatus() {
      request({
        url: '/bill/signType',
        method: 'get',
        params: { taskId: this.$route.query.taskId, electronicInfoId: this.detailInfo.id, basicId: this.$route.query.key }
      }).then(({ data }) => {
        this.detailInfo.signStatus = data
      })
    },
    confirm() {
      if(!this.detailInfo.certifyStatus) {
        this.$message.error('请先认证')
        return
      }
      if(!this.detailInfo.signStatus) {
        this.$message.error('请先签署')
        return
      }
      this.$refs.ruleFormRef.validate(flag => {
        if(flag) {
          this.submit()
        }
      })
    }
  }
}
</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>
