<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'"
      v-model="data"
      :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 { attachmentListByBizSepNo, eOtIlldisdetailApprovalPage, eOtIlldisdetailQueryOpinionRecords, eOtIlldisdetailGetTaskDetail } from '@/api/auto-baseapi'
import { createGlobalLoading } from '@/utils'
export default {
  components: {
    HandleInfo,
    HandleApproval
  },
  data() {
    return {
      active: 'info',
      data: {

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

    if (!workflowid || !bizSeqNo) {
      this.$message.error('缺少必要的参数')
      return
    }

    createGlobalLoading(() => {
      // 公共查询：意见记录和附件列表
      const commonQueries = [
        this.fetchOpinionRecords(workflowid),
        this.fetchAttachmentList(bizSeqNo)
      ]

      if (this.readonly) {
        // 历史记录：公共查询 + workflowid查询业务信息
        return Promise.all([
          ...commonQueries,
          this.fetchTaskDetail(workflowid)
        ])
      } else {
        // 待办：公共查询 + tasklistid相关查询 + workflowid查询业务信息
        if (!tasklistid) {
          this.$message.error('缺少任务ID')
          return Promise.resolve()
        }
        return Promise.all([
          ...commonQueries,
          this.fetchApprovalPage(tasklistid),
          this.fetchTaskDetail(workflowid)
        ])
      }
    }).finally(() => {
      this.inited = true
    })
  },
  methods: {
    // 查询意见记录
    fetchOpinionRecords(workflowid) {
      return eOtIlldisdetailQueryOpinionRecords({ workflowid }).then((response) => {
        const data = response.data || []
        this.data = {
          ...this.data,
          steps: data.map(item => ({
            ...item,
            opinionType: ({ '0': '待受理', '1': '经办', '2': '审核', '3': '审批', '4': '已通过', '5': '未通过', '6': '已作废', '7': '转办', '8': '待执法' })[item.opiniontype] || item.opiniontype,
            opinionContent: item.opinioncontent,
            handler: item.handler,
            createTime: item.lauptime || item.handledate
          })).reverse()
        }
      })
    },
    // 查询附件列表
    fetchAttachmentList(bizSeqNo) {
      return Promise.all(['9', '10', '11', '12', '13', '14'].map((attachType) => {
        return attachmentListByBizSepNo({
          bizseq: bizSeqNo,
          attachtype: attachType
        }).then((response) => {
          const data = response.data || []
          this.data = {
            ...this.data,
            fixuploader: {
              ...(this.data.fixuploader || {}),
              [attachType]: data[data.length - 1]
            }
          }
        })
      }))
    },
    // 通过 workflowid 查询任务详情（历史记录和待办使用）
    fetchTaskDetail(workflowid) {
      return eOtIlldisdetailGetTaskDetail({ workflowid }).then((response) => {
        if (response.code !== 0) {
          this.$message.error(response.msg || '获取业务信息失败')
          return
        }
        const detailData = response.data || {}
        const taskList = detailData.taskList || {}
        const bizInfo = detailData.bizInfo || {}
        // 合并数据：bizInfo包含外单位信息和移出信息
        this.data = {
          ...this.data,
          ...bizInfo,
          ...taskList,
          bizSeqNo: this.$route.query.bizSeqNo
        }
      })
    },
    // 查询审批页面信息（待办使用）- 仅获取审批相关信息
    fetchApprovalPage(tasklistid) {
      return eOtIlldisdetailApprovalPage({ tasklistid }).then((response) => {
        if (response.code !== 0) {
          this.$message.error(response.msg || '获取页面数据失败')
          return
        }
        const pageData = response.data || {}
        // 仅从approvalPage获取审批相关数据
        this.data.status = pageData.taskStatus || this.data.status
      })
    },
    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>
