<template>
  <div class="page">
    <el-tabs v-model="active" type="card">
      <el-tab-pane label="自然人移出严重违法失信名单申请信息" name="info" />
      <el-tab-pane
        :disabled="!readonly"
        label="自然人移出严重违法失信名单审批表"
        name="approval"
      />
    </el-tabs>
    <HandleInfo
      v-if="inited"
      v-show="active === 'info'"
      :readonly="readonly"
      @next-tab="handleNextTab"
    />
    <HandleApproval
      v-if="inited"
      v-show="active === 'approval'"
      v-model="data"
      :readonly="readonly"
      @prev-tab="active = 'info'"
    />
  </div>
</template>

<script>
import HandleInfo from './handle-info.vue'
import HandleApproval from './handle-approval.vue'
import { xrSeriousIllegalPersonRemListGetApprovalFormByBizSeqNo } from '@/api/auto-baseapi'
export default {
  components: {
    HandleInfo,
    HandleApproval
  },
  data() {
    return {
      active: 'info',
      orgs: [], // 登记机关树
      data: {

      },
      inited: true
    }
  },
  computed: {
    readonly() {
      return this.$route.meta.type === 'history'
    }
  },
  created() {
    const bizSeqNo = this.$route.query.bizSeqNo
    const cerNo = this.$route.query.cerNo

    if (!bizSeqNo) {
      this.$message.error('缺少必要的参数')
      return
    }
    this.fetchOpinionRecords(bizSeqNo, cerNo)
  },
  methods: {
    // 查询意见记录
    fetchOpinionRecords(bizSeqNo) {
      const cerNo = this.$route.query.cerNo
      if (!cerNo) {
        console.error('缺少证件号码参数 cerNo')
      }
      return xrSeriousIllegalPersonRemListGetApprovalFormByBizSeqNo({
        bizSeqNo,
        cerNo: cerNo
      }).then((response) => {
        if (response.code === 0) {
          const data = response.data || {}
          const opinionList = data.opinion || []
          this.data = {
            ...this.data,
            steps: opinionList.map(item => ({
              ...item,
              opinionType: ({ '0': '待受理', '1': '经办', '2': '审核', '3': '审批', '4': '已通过', '5': '未通过', '6': '已作废', '7': '转办', '8': '待执法' })[item.opiniontype] || item.opiniontype,
              opinionContent: item.opinioncontent || item.opinionContent,
              handler: item.handler,
              createTime: item.lauptime || item.handledate || item.createTime
            })).reverse()
          }
        }
      })
    },
    handleNextTab(formData) {
      // 将接收到的表单数据合并到当前数据中
      this.data = {
        ...this.data,
        ...formData
      }
      // 切换到审批tab
      this.active = 'approval'
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/abnormal-handle.scss";
.opinion-selector{
  margin-top: 18px;
  display: flex;
  .opinion-selector-text{
    margin-right: 16px;
  }
}
.steps{
  padding: 20px 24px;
  overflow: auto;
  .el-steps{
    position: relative;
    width: max-content;
    min-width: 100%;
    &::before{
      content: "";
      position: absolute;
      border: 2px solid #F5F5F5;
      width: 100%;
      top: 18px;
    }
    .el-step{
      flex-basis: unset!important;
      margin-right: 56px!important;
      flex-shrink: 0;
      /deep/ .el-step__head{
        margin-bottom: 16px;
        .el-step__line{
          display: none;
        }
        .el-step__icon{
          width: 36px;
          height: 36px;
          border-color: #2A8CE3;
          color: #2A8CE3;
        }
      }
      /deep/ .el-step__description{
        padding-right: 0;
      }
      .step-description{
        font-size: 14px;
        &>div{
          margin-bottom: 8px;
        }
        .step-description-label{
          color: #666666;
        }
        .step-description-value{
          color: #333333;
        }
      }
    }
  }
}
</style>
