<template>
  <div class="main-content abnormal">
    <div class="content-body">
      <el-tabs v-model="activeName" type="border-card" class="tabs" style="font-size:unset">
        <el-tab-pane label="除名异议申请信息" name="first">
          <div class="table-title">
            <img src="../../../assets/images/icon01.png" alt="" style="width:24px;margin-right:10px">
            除名异议申请信息
          </div>
          <el-form ref="form" label-width="190px" label-position="right">
            <div class="form">
              <div class="form-body">
                <table
                  width="100%"
                  class="apply-table"
                  style="border-collapse: collapse;"
                  border="1"
                  cellpadding="0"
                  cellspacing="0"
                >
                  <tr>
                    <th width="20%"><span style="color:red">*</span>拟除名市场主体提出的陈述、申辩意见</th>
                    <td colspan="2">
                      <el-input v-model="detailInfo.objectionInfo.opinion" placeholder="请输入拟除名市场主体提出的陈述、申辩意见" type="textarea" />
                    </td>
                  </tr>
                  <tr>
                    <th width="20%"><span style="color:red">*</span>除名异议的理由</th>
                    <td colspan="2">
                      <el-input v-model="detailInfo.objectionInfo.auditOpinion" placeholder="请输入除名异议的理由" type="textarea" />
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <table
              style="border-collapse: collapse;"
              border="1"
              cellpadding="0"
              cellspacing="0"
              width="100%"
              class="apply-table"
            >
              <tr>
                <th width="20%"><span style="color:red">*</span>是否受理除名异议</th>
                <td colspan="3" class="radio">
                  <el-radio v-model="isAgreeObjection" label="1" style="font-size: unset">受理</el-radio>
                  <el-radio v-model="isAgreeObjection" label="0" style="font-size: unset">不受理</el-radio>
                </td>
              </tr>
            </table>
            <div class="submit-btn-box">
              <el-button type="primary" @click="$router.go(-1)">返回</el-button>
              <el-button type="primary" @click="toSecond">确定</el-button>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane :label="isAgreeObjection === '0'? '不予除名异议审批表':'除名异议审批表'" name="second" :disabled="apprDisable">
          <div class="table-title">
            <img src="../../../assets/images/icon01.png" alt="" style="width:24px;margin-right:10px">
            {{ isAgreeObjection === '0'? '不予除名异议审批表':'除名异议审批表' }}
          </div>
          <div>
            <table
              width="100%"
              class="apply-table"
              style="border-collapse: collapse;"
              border="1"
              cellpadding="0"
              cellspacing="0"
            >
              <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 style="font-size: 0.37333rem">{{ each.step }}人:</label>
                      <span>{{ each.handler }}</span>
                      <label
                        style="font-size: 0.37333rem; margin-left: 10px"
                      >{{ each.step }}日期:</label>
                      <span style="display: inline-block">{{ each.handledate }}</span>
                    </el-col>
                  </td>
                </tr>
              </template>
              <tr>
                <th><span style="color:red">*</span>经办人意见</th>
                <td colspan="3">
                  <el-input v-model="formData.opinion" type="textarea" :autosize="{ minRows: 2 }" placeholder="1000字内" style="width:100%" />
                </td>
              </tr>
              <tr>
                <th><span style="color:red">*</span>审核人</th>
                <td colspan="3">
                  <el-select v-model="formData.nextPerformerIds" placeholder="请选择审核人" filterable class="custom" 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>
              <el-button @click="activeName = 'first'">返回</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getUsersWithPermission } from '@/api/user'
import { expelledObjectionGetBiz, expelledObjectionNextBiz } from '@/api/除名公告'
export default {
  data() {
    return {
      bizId: '',
      activeName: 'first',
      apprDisable: true,
      submitLoading: false,
      detailInfo: {
        objectionInfo: {},
        tsTaskList: {},
        historyOpinions: []
      },
      isAgreeObjection: '1',
      reviewer: [],
      formData: {
        opinion: '',
        nextPerformerIds: '',
        nextPerformerNames: ''
      },
      user: JSON.parse(sessionStorage.getItem('user'))
    }
  },
  mounted() {
    this.bizId = this.$route.query.bizId
    this.loadObjectionInfo()
    // 加载审核人
    this.loadReviewer()
  },
  methods: {
    loadObjectionInfo() {
      expelledObjectionGetBiz(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
        }
      })
    },
    toSecond() {
      if (this.$util.isEmpty(this.detailInfo.objectionInfo.opinion)) {
        return this.$message.warning('请输入拟除名市场主体提出的陈述、申辩意见')
      }
      if (this.$util.isEmpty(this.detailInfo.objectionInfo.auditOpinion)) {
        return this.$message.warning('请输入除名异议的理由')
      }
      this.apprDisable = false
      this.activeName = 'second'
    },
    submitExamine() {
      this.submitLoading = true
      if (this.isAgreeObjection === '1' && this.$util.isEmpty(this.formData.opinion)) {
        this.submitLoading = false
        return this.$message.error('请输入经办人意见')
      }
      if (this.isAgreeObjection === '1' && this.$util.isEmpty(this.formData.nextPerformerIds)) {
        this.submitLoading = false
        return this.$message.error('请选择审核人')
      }
      if (this.isAgreeObjection === '0') {
        this.formData.nextPerformerIds = this.user.primaryKey
        this.formData.nextPerformerNames = this.user.username
      } else {
        for (const i in this.reviewer) {
          if (this.reviewer[i].primaryKey === this.formData.nextPerformerIds) {
            this.formData.nextPerformerNames = this.reviewer[i].name
          }
        }
      }
      const params = {
        bizId: this.bizId,
        taskId: this.detailInfo.tsTaskList.tasklistid,
        nextNodeId: 'handleExptlist',
        nextPerformerIds: this.formData.nextPerformerIds,
        nextPerformerNames: this.formData.nextPerformerNames,
        objectionInfo: {
          ...this.detailInfo.objectionInfo
        },
        opinionQuery: {
          bizseq: this.bizId,
          workflowid: this.detailInfo.tsTaskList.workflowid,
          handler: this.user.nickname,
          handlerid: this.user.primaryKey,
          opiniontype: '0',
          isagree: this.isAgreeObjection,
          opinioncontent: this.formData.opinion
        }
      }
      expelledObjectionNextBiz(params).then(res => {
        this.submitLoading = false
        if (res.code === 0) {
          this.$message.success('提交成功')
          this.$router.back()
        } else {
          this.$message.error('提交失败，' + res.msg)
        }
      }).catch(() => {
        this.submitLoading = false
      })
    }
  }
}
</script>
<style lang="scss">
.tabs {
  .el-tabs__item {
    font-size: initial;
  }
}
.reasonOptions {
  .el-scrollbar .el-select-dropdown__wrap {
   max-height: 300px;
 }
}
</style>
<style lang="scss" scoped>
/deep/.el-table .warning-row {
  background: #eaf4fe!important;
}
.el-upload{
  /deep/ .el-icon-close-tip{
    display: none!important;
  }
}
.table-title{
  width: 100%;
  margin-top: 10px;
  padding: 15px;
  display: flex;
  align-items: center;
  font-weight: 600;
  background: #fff;
  font-size: $table-title-font-size;
  color:#333;
  border-bottom: 1px solid #E5E5E5;
}
.main-content{
  padding: 10pt;
  font-size: $table-content-font-size;
  .back-btn{
    margin-top: 6px;
    position:absolute;
    right:40pt;
  }
  .content-body{
    background: white;
    border:1PX solid #eee;
  }
  .content-header{
    background: white;
    height:50PX;
    border:1PX solid #eee;
    display: flex;
    align-items: center;
    .title{
      font-weight: 600;
      font-size: 1rem;
    }
  }
  .content-body{
    .tab{
      .tab-title{
        label{
          background: $color-primary;
          display:inline-block;
          color:$color-title-color;
          padding:5px;
        }
      }
    }
    .form{
      margin-bottom: 20pt;
    }
  }
  .apply-table{
    padding:15px;
    margin-bottom: 30px;
    border-color: $color-border;
    tr{
      width:100%
    }
    th,td{
      font-size:$table-title-font-size;
      padding:15px
    }
    th{
      color: #666;
      font-weight: normal;
      background: $color-form-label;
      text-align: $text-algin-right;
      font-size:$table-title-font-size;
    }
    td{
      text-align: $text-algin-left;
    }
    .radio{
      .el-radio__label {
        font-size: unset;
      }
    }
  }
}
.el-row {
  border-left: 1px solid $color-border;
}
.bt0 {
  /deep/.el-form-item__label{
    border-top: 0!important;
  }
  /deep/.el-form-item__content{
    border-top: 0!important;
  }
}
.submit-btn-box {
  text-align: center;
}
</style>
<style lang="scss">
.main-content.abnormal{
  .el-form-item{
    margin-bottom:0;
    background: $color-form-label;
    .el-form-item__label{
      padding-left: 10px;
      border-top: 1px solid $color-border;
      font-size: $table-content-font-size;
    }
    .el-form-item__content{
      background: white;
      padding: 10px;
      font-size: $table-content-font-size;
      border-top: 1px solid $color-border;
      border-right: 1px solid $color-border;
      border-left: 1px solid $color-border;
    }
  }
  .el-form-item:last-child{
    border-bottom: 1px solid $color-border;
  }
  .form-body.history{
    padding:15px;
    border:1px solid $color-border;
  }
  .el-form-item.is-error .custom .el-input__inner{
    border-color:$color-border;
  }
  .el-table-column--selection .cell {
    padding-right: 0px;
  }
  .no {
    padding-left: 0px;
  }
  .el-table_9_column_61.is-left.is-leaf{
    .cell{
      padding-left: 0px;
      padding-right: 0px;
    }
  }
  .el-pagination{
    text-align: right;
  }
  .dialog-box{
    text-align: right;
  }
  .el-textarea.is-disabled .el-textarea__inner{
    color: #1c1e23;
  }
  .el-input__inner{
    margin-bottom: 5px;
  }
  .uploadFileList{
    .el-upload-list__item{
      display: inline-block;
      width: auto;
    }
  }
    .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;
    }
  }
}
</style>
