<template>
  <div class="contract-sign">
    <cy-info-title>电子合同信息</cy-info-title>

    <div class="sign-link-box">
      <div v-for="(item, index) in deatailList" :key="index" class="sign-item">
        <div class="name">{{ item.name }}</div>
        <div class="title">
          <div>认证链接</div>
          <div>签署链接</div>
          <div v-for=" (citem, cindex) in item.contractElectronicCustomerInfos" :key="cindex">
            <el-tooltip effect="dark" :content="citem.customerName" placement="top">
              <div class="one-ellipsis">{{ citem.customerName }} </div>
            </el-tooltip>
          </div>
        </div>
        <div class="link">
          <div class="two-link">
            <div>
              <div>
                {{ item.authUrl }}
              </div>
              <el-button v-clipboard:copy="item.authUrl" v-clipboard:success="copySuccess" type="text" icon="iconfont icon-a-Group779" />
            </div>
            <div>
              <div>
                认证状态: {{ modifyStatus(item.authStatus, 1) }}
              </div>
              <div v-if="!disabled" class="tips">
                <span><span>*</span>签署后点击「刷新」按钮”</span>
                <el-button type="text" icon="iconfont icon-a-Group8131" @click="refreshAuth(item)" />
              </div>

            </div>
          </div>
          <div class="one-link">
            <div>{{ item.contractLink }}</div>
            <el-button v-clipboard:copy="item.contractLink" v-clipboard:success="copySuccess" type="text" icon="iconfont icon-a-Group779" />
          </div>
          <div v-for=" (citem, cindex) in item.contractElectronicCustomerInfos" :key="cindex" class="one-link">
            <div>签署状态：{{ modifyStatus(citem.signStatus, 2) }}</div>
            <div v-if="!disabled" class="tips">
              <span><span>*</span>签署后点击「刷新」按钮”</span>
              <el-button type="text" icon="iconfont icon-a-Group8131" @click="refreshSign(item, citem)" />
            </div>
          </div>
        </div>

      </div>
    </div>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      class="rule-form-orange"
    >
      <cy-info-title>签署结论</cy-info-title>
      <el-form-item label="签署结论" prop="conclusion">
        <el-radio-group v-model="ruleForm.conclusion" :disabled="disabled">
          <el-radio label="pass">完成</el-radio>
          <el-radio label="back">退回</el-radio>
          <el-radio label="veto">否决</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="说明"
        prop="remark"
        class="two-form-item"
        :rules="[
          { required: ruleForm.conclusion === 'back' || ruleForm.conclusion === 'veto', message: '请输入说明', trigger: 'blur' }
        ]"
      >
        <el-input v-model="ruleForm.remark" :disabled="disabled" placeholder="请输入说明" />
      </el-form-item>
    </el-form>
    <div v-if="!disabled" class="submit-btn">
      <el-button @click="$router.go(-1)">关闭</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import { getContractSignDetails, refreshAuthStatus, refreshSignStatus, contractSignSubmit } from '@/api/myFinancing'
export default {
  props: {
    detailsInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      ruleForm: {
        conclusion: '',
        remark: ''
      },
      rules: {
        conclusion: [{ required: true, message: '请选择签署结论', trigger: 'change' }]
      },
      deatailList: [],
      contractInfoId: '',
      disabled: false
    }
  },
  computed: {
    supplierList() {
      return this.deatailList.filter(item => item.type === 1)
    },
    platformList() {
      return this.deatailList.filter(item => item.type === 2)
    },
    guarantorList() {
      return this.deatailList.filter(item => item.type === 3)
    },
    modifyStatus() {
      return (value, type) => {
        if (type === 1) {
          return value ? '已认证' : '未认证'
        } else if (type === 2) {
          return value ? '已签署' : '未签署'
        } else {
          return ''
        }
      }
    }
  },
  watch: {
    detailsInfo: {
      handler(val) {
        if (val) {
          const { type } = this.$route.query
          if (type === 'see') {
            this.initData(val)
            this.ruleForm.conclusion = val.conclusion
            this.ruleForm.remark = val.remark
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    const { type } = this.$route.query
    if (type === 'see') {
      this.disabled = true
    } else {
      this.getDeatail()
    }
  },
  methods: {
    initData(val) {
      this.contractInfoId = val.contractInfoId
      this.deatailList = val.contractElectronicVos
    },
    getDeatail() {
      const { id } = this.$route.params
      getContractSignDetails({ id }).then(({ data }) => {
        this.initData(data)
      })
    },
    copySuccess() {
      this.$message.success('复制成功')
    },
    refreshAuth(row) {
      const { sysCustomerId } = row
      refreshAuthStatus({ sysCustomerId }).then(({ data }) => {
        this.deatailList.map(item => {
          if (item.sysCustomerId === sysCustomerId) {
            item.authStatus = data.authStatus
          }
          return item
        })
        this.$message.success('刷新成功')
      })
    },
    refreshSign(row, crow) {
      const { id } = crow
      refreshSignStatus({ electronicCustomerInfoId: id }).then(({ data }) => {
        this.deatailList.map(item => {
          if (item.sysCustomerId === row.sysCustomerId) {
            item.contractElectronicCustomerInfos.map(citem => {
              if (citem.id === id) {
                citem.signStatus = data.signStatus
              }
              return citem
            })
          }
          return item
        })
        this.$message.success('刷新成功')
      })
    },
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const params = {
            ...this.ruleForm,
            visible: true,
            contractInfoId: this.contractInfoId
          }
          contractSignSubmit(params).then(() => {
            this.$message.success('提交成功')
            this.$router.go(-1)
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.contract-sign {

}
.sign-link-box {
  border-top: 1px solid #E4E7ED;
  box-sizing: border-box;
  margin: 20px 0px;
  .sign-item {
    display: flex;
    .name {
      display: flex;
      align-items: center;
      background: #f5f6f6;
      padding: 0 20px;
      min-width: 200px;
      width: 200px;
      box-sizing: border-box;
      border-bottom: 1px solid #E4E7ED;
      border-right: 1px solid #E4E7ED;
      border-left: 1px solid #E4E7ED;
      &:last-child {
        border-bottom: none;
      }
    }
    .title {
      line-height: 39.2px;
      height: 40px;
      min-width: 300px;
      width: 300px;
      & > div {
        border-bottom: 1px solid #E4E7ED;
        border-right: 1px solid #E4E7ED;
        box-sizing: border-box;
        padding: 0 20px;
      }

    }
    .link {
      line-height: 40px;
      flex-grow: 1;
      & > div {
        border-bottom: 1px solid #E4E7ED;
        border-right: 1px solid #E4E7ED;
        padding: 0 20px;
      }
      .two-link {
        display: flex;
        & > div {
          height: 40px;
          flex: 1;
          border-right: 1px solid #E4E7ED;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-right: 20px;
          &:last-child {
            padding-left: 20px;
            padding-right: 0px;
            border-right: none;
          }
        }
      }
      .one-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
      }
      .tips {
        display: flex;
        align-items: center;
        & > span {
          color: #b9b9b9;
          & > span {
            color: #ff1a1a;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.contract-sign {
  .icon-a-Group779, .icon-a-Group813 {
    font-size: 26px;
  }
}

</style>
