<template>
  <div class="main-content credit">
    <el-row style="background: #fff;">
      <el-col :span="12">
        <div class="table-title">
          <img src="../../../assets/images/icon01.png" alt="" style="width:24px;margin-right:10px">
          {{ acceptStatus === '1'? '除名决定审批表':'不予除名决定审批表' }}
        </div>
      </el-col>
    </el-row>
    <div class="content-body">
      <div>
        <table
          width="100%"
          class="apply-table"
          style="border-collapse: collapse;"
          border="1"
          cellpadding="0"
          cellspacing="0"
        >
          <tr>
            <th width="20%">除名决定的理由</th>
            <td>{{ detailInfo?.auditInfo?.auditOpinion || '-' }}</td>
          </tr>
          <template v-if="detailInfo.historyOpinions && detailInfo.historyOpinions.length > 0">
            <tr v-for="(each,index) in detailInfo.historyOpinions" :key="'detailInfo.historyOpinions'+index">
              <th>{{ each.label }}</th>
              <td colspan="3">
                <span style="display: block;text-indent: 1em;min-height:80px">{{ each.opinioncontent }}</span>
                <el-col :span="8" :offset="16">
                  <label>{{ each.step }}人:</label>
                  <span>{{ each.handler }}</span>
                  <label
                    style="margin-left: 10px"
                  >{{ each.step }}日期:</label>
                  <span style="display: inline-block">{{ each.handledate }}</span>
                </el-col>
              </td>
            </tr>
          </template>
        </table>
        <table
          width="100%"
          class="apply-table"
          style="border-collapse: collapse;"
          border="1"
          cellpadding="0"
          cellspacing="0"
        >
          <tr>
            <th><span style="color:red">*</span>部门负责人意见</th>
            <td colspan="3">
              <el-row style="margin-bottom:10px">
                <el-col :span="24" style="margin-bottom:10px">
                  <el-input v-model="formData.opinion" type="textarea" :autosize="{ minRows: 2 }" placeholder="请输入审批意见" style="width:100%" />
                </el-col>
                <el-col :span="12">
                  <label>常用语：</label>
                  <el-select v-model="formData.opinion" size="mini" placeholder="请选择" class="custom">
                    <el-option
                      v-for="item in opinionOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-col>
                <el-col :span="11" :offset="1">
                  <label>审批人:</label>
                  <span>{{ user.nickname }}</span>
                  <label style="margin-left: 10px">审批日期:</label>
                  <el-date-picker
                    v-model="formData.handleDate"
                    style="display: inline-block"
                    :clearable="false"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss"
                    size="small"
                    type="datetime"
                    placeholder="选择日期"
                  />
                </el-col>
              </el-row>
            </td>
          </tr>
          <tr>
            <th>
              <span style="color:red">*</span>是否审批通过
            </th>
            <td colspan="3">
              <el-radio-group v-model="formData.nextNodeId">
                <el-radio label="endExptlist">通过</el-radio>
                <el-radio label="exptlistEnter">回退</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr v-if="formData.nextNodeId === 'approvelist'">
            <th><span style="color:red">*</span>审批人</th>
            <td colspan="3">
              <el-select v-model="formData.nextPerformerIds" placeholder="请选择审批人" filterable style="width:30%">
                <el-option
                  v-for="item in reviewer"
                  :key="'reviewer' + item.primaryKey"
                  :label="item.name"
                  :value="item.primaryKey"
                />
              </el-select>
            </td>
          </tr>
        </table>
        <div class="submit-btn-box">
          <el-button type="primary" :loading="submitLoading" @click="submitExamine">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUsersWithPermission } from '@/api/user'
import { expelledAuditGetBiz, expelledAuditNextBiz } from '@/api/除名公告'
export default {
  data() {
    return {
      bizId: '',
      submitLoading: false,
      detailInfo: {
        auditInfo: {},
        tsTaskList: {},
        historyOpinions: []
      },
      acceptStatus: '1',
      reviewer: [],
      formData: {
        opinion: '',
        nextPerformerIds: '',
        nextPerformerNames: '',
        handleDate: '',
        nextNodeId: '',
        isAgree: ''
      },
      opinionOptions: [
        { value: '同意', label: '同意' },
        { value: '不同意', label: '不同意' }
      ],
      user: JSON.parse(sessionStorage.getItem('user'))
    }
  },
  mounted() {
    this.bizId = this.$route.query.bizId
    this.loadAuditInfoInfo()
    // 加载审批人
    this.loadReviewer()
  },
  methods: {
    loadAuditInfoInfo() {
      expelledAuditGetBiz(this.bizId).then(res => {
        if (res.code === 0) {
          this.detailInfo = res.data
          // 加载处办记录
          res.data.historyOpinions.forEach(each => {
            switch (each.opiniontype) {
              case '0':
                each.step = '经办'
                each.label = '经办人意见'
                break
              case '1':
                each.step = '审核'
                each.label = '部门负责人意见'
                break
              case '2':
                each.step = '审批'
                each.label = '经办机构负责人意见'
                break
              case '9':
                each.step = '经办'
                each.label = '经办人意见'
                break
            }
          })
        }
      })
    },
    // 加载审批人
    loadReviewer() {
      getUsersWithPermission('', this.user.orgId).then(res => {
        if (res.code === 0) {
          this.reviewer = res.data
        }
      })
    },
    // 提交审批
    submitExamine() {
      this.submitLoading = true
      if (this.$util.isEmpty(this.formData.opinion)) {
        this.submitLoading = false
        return this.$message.error('请输入部门负责人意见')
      }
      if (this.formData.nextNodeId === 'approvelist' && this.$util.isEmpty(this.formData.nextPerformerIds)) {
        this.submitLoading = false
        return this.$message.error('请选择审批人')
      }
      this.formData.isAgree = '1'
      if (this.formData.nextNodeId === 'exptlistEnter') {
        this.formData.isAgree = '2'
      }
      expelledAuditNextBiz({
        bizId: this.bizId,
        taskId: this.detailInfo.tsTaskList.tasklistid,
        nextNodeId: this.formData.nextNodeId,
        nextPerformerIds: '',
        nextPerformerNames: '',
        auditInfo: {
          ...this.detailInfo.auditInfo
        },
        opinionQuery: {
          bizseq: this.bizId,
          workflowid: this.detailInfo.tsTaskList.workflowid,
          handler: this.user.nickname,
          handlerid: this.user.primaryKey,
          opiniontype: '2',
          isagree: this.formData.isAgree,
          opinioncontent: this.formData.opinion,
          handledate: this.formData.handleDate
        }
      }).then(res => {
        this.submitLoading = false
        if (res.code === 0) {
          this.$message.success('提交成功')
          this.$router.back()
        } else {
          this.$message.error('提交失败，' + res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 表单表头颜色
$font-size-label:#666;

.disabled-upload-remove{
  /deep/ .el-upload-list__item-status-label{
    display: none;
  }
  /deep/ .el-icon-close{
    display: none;
  }
  /deep/ .el-icon-close-tip{
    display: none!important;
  }
}
.main-content{
  background: #fff;
  padding: 20pt;
  .back-btn{
    position:absolute;
    right:40pt;
  }
  .content-header,.content-body{
    background: white;
    padding:20PX 10PX;
  }
  .content-header{
    height:60PX;
    .title{
      font-weight: 700;
      font-size: $font-size-sub-title;
    }
  }
  .content-body{
    padding:20pt;
    .tab{
      .tab-title{
        label{
          background: $color-primary;
          display:inline-block;
          color:white;
          padding:5px;
        }
      }
    }
    .form{
      margin-bottom: 20pt;
    }
  }
  .apply-table{
    padding:15px;
    margin-bottom: 30px;
    .table-title{
      padding:15px;
      font-size: 1.3rem;
      color:#243668
    }
    table{
      border-top: 1px solid $color-border;
      border-left: 1px solid $color-border;
    }
    tr{
      width:100%
    }
    th,td{
      border-top: 1px solid $color-border;
      border-left: 1px solid $color-border;
      border-right: 1px solid $color-border;
      border-bottom: 1px solid $color-border;
      padding:15px
    }
    th{
      color: $font-size-label;
      font-weight: normal;
      text-align: $text-algin-right;
      background: $color-form-label
    }
    td{
      text-align: $text-algin-left;
      color: #333!important;
    }
    .el-radio{
      color: #333!important;
    }
  }
}
.table-title{
  width: 100%;
  margin-top: 10px;
  padding: 15px;
  display: flex;
  align-items: center;
  font-weight: 600;
  background: #fff;
  font-size: $page-title-font-size;
  color:#333;
  border-bottom: 1px solid #E5E5E5;
}
.title-btn{
  margin-top: 15px;
  margin-right: 40px;
  text-align: right;
  background: #fff;
}
</style>
<style lang="scss">
.credit{
  .radio{
    .el-radio__label {
      font-size: unset;
    }
    .el-radio__input.is-disabled+span.el-radio__label {
      color: unset;
    }
    .el-radio__input.is-disabled.is-checked .el-radio__inner {
      background-color: #409EFF;
      border-color: #409EFF;
    }
  }
  .el-dialog__header{
    background:#e4e4e4;
    .el-dialog__title {
      font-size: large;
    }
  }
  .decForm{
    .el-form-item {
      margin-bottom: 0;
      background: $color-form-label;
      .el-form-item__label {
        font-size: initial;
        padding-left: 20px;
        border-top: 1px solid $color-border;
        border-left: 1px solid $color-border;
      }
      .el-form-item__content {
        padding-left: 10px;
        font-size: initial;
        // line-height: normal;
        background: white;
        border-top: 1px solid $color-border;
        border-right: 1px solid $color-border;
        border-left: 1px solid $color-border;
      }
    }
  }
}
.infoDialog {
  .apply-table{
    padding:15px;
    margin-bottom: 30px;
    .table-title{
      padding:15px;
      font-size: 1.3rem;
      color:#243668
    }
    table{
      border-top: 1px solid $color-border;
      border-left: 1px solid $color-border;
    }
    tr{
      width:100%
    }
    th,td{
      border-top: 1px solid $color-border;
      border-left: 1px solid $color-border;
      border-right: 1px solid $color-border;
      border-bottom: 1px solid $color-border;
      padding:15px
    }
    th{
      color: $font-size-label;
      font-weight: normal;
      text-align: $text-algin-right;
      background: $color-form-label
    }
    td{
      text-align: $text-algin-left;
    }
  }
}
.submit-btn-box {
  text-align: center;
}
</style>
