<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="el-icon-document">退学申请详情</span>
        <el-button style="float: right" size="mini" type="danger" @click="goBack">关闭</el-button>
        <el-button style="float: right" size="mini" type="success" v-print="printobj">打印</el-button>
      </div>
      <div class="el-container" id="quitSchool">
        <div class="table-container">
          <h2 style="text-align: center">学生退学申请</h2>
          <div class="block">
            <!-- 处分表单 -->

            <el-descriptions class="margin-top" title="" :column="3" size="medium" border style="width: 100%">
              <el-descriptions-item>
                <template slot="label"> 学号 </template>
                {{ form.stuNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 姓名 </template>
                {{ form.stuName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 性别 </template>
                {{ form.gender }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 院部 </template>
                {{ form.departmentName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 年级 </template>
                {{ form.gradeName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 班级 </template>
                {{ form.className }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 出生日期 </template>
                {{ form.birthday }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label"> 家长姓名 </template>
                {{ form.parentName }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label"> 家长电话 </template>
                {{ form.parentPhone }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label"> 民族 </template>
                {{ form.mz }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label"> 籍贯:省/自治区/直辖市 </template>
                {{ form.jg }}
              </el-descriptions-item>

              <el-descriptions-item span="3">
                <template slot="label"> 退学类型 </template>
                {{ quitSchoolMethodFormat(form) }}
              </el-descriptions-item>

              <el-descriptions-item span="3">
                <template slot="label"> 附件上传 </template>
                <Affix v-model="form.attachmentUpload" :disabled="true"></Affix>
              </el-descriptions-item>

              <el-descriptions-item span="3">
                <template slot="label"> 申请原因 </template>
                {{ form.reasonApplying }}
              </el-descriptions-item>

              <el-descriptions-item span="3">
                <template slot="label"> 签名 </template>
                <img v-if="form.applySignature" :src="baseurl + form.applySignature" width="200px" height="200px"
                  class="avatar" />
              </el-descriptions-item>

              <el-descriptions-item span="3">
                <template slot="label"> 辅导员联系情况 </template>
                {{ form.ideologicalEducation }}
              </el-descriptions-item>

              <el-descriptions-item span="3">
                <template slot="label"> 在校时间说明 </template>
                {{ form.instructionSchoolHours }}
              </el-descriptions-item>

              <el-descriptions-item span="3">
                <template slot="label"> 退学文号 </template>
                {{ form.quitNumber }}
              </el-descriptions-item>

              <el-descriptions-item span="3">
                <template slot="label"> 退学类别 </template>
                {{ quitSchoolCategoryMethodFormat(form) }}
              </el-descriptions-item>

              <el-descriptions-item span="3">
                <template slot="label"> 退学年份 </template>
                {{ form.quitYear }}
              </el-descriptions-item>

              <el-descriptions-item span="3">
                <template slot="label"> 备注 </template>
                {{ form.remark }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="block">
            <el-timeline>
              <el-timeline-item v-for="(item, index) in flowRecordList" :key="index" :icon="setIcon(item.finishTime)"
                :color="setColor(item.finishTime)">
                <p style="font-weight: 700">{{ item.taskName }}</p>
                <el-card :body-style="{ padding: '10px' }">
                  <el-descriptions class="margin-top" :column="1" size="small" border>
                    <el-descriptions-item v-if="item.assigneeName" label-class-name="my-label">
                      <template slot="label"><i class="el-icon-user"></i>办理人</template>
                      {{ item.assigneeName }}
                      <el-tag type="info" size="mini">{{ item.deptName }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item v-if="item.candidate" label-class-name="my-label">
                      <template slot="label"><i class="el-icon-user"></i>候选办理</template>
                      {{ item.candidate }}
                    </el-descriptions-item>
                    <el-descriptions-item label-class-name="my-label">
                      <template slot="label"><i class="el-icon-date"></i>接收时间</template>
                      {{ item.createTime }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="item.finishTime" label-class-name="my-label">
                      <template slot="label"><i class="el-icon-date"></i>处理时间</template>
                      {{ item.finishTime }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="item.duration" label-class-name="my-label">
                      <template slot="label"><i class="el-icon-time"></i>耗时</template>
                      {{ item.duration }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="item.comment" label-class-name="my-label">
                      <template slot="label"><i class="el-icon-tickets"></i>处理意见</template>
                      {{ item.comment.comment }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="item.finishTime" label-class-name="my-label">
                      <template slot="label"><i class="el-icon-date"></i>签名</template>
                      <img :src="baseurl + item.assigneeSign" width="300px" height="200px" class="avatar" />
                    </el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </div>
      <!--流程流转记录-->
      <!--表单信息-->
    </el-card>
  </div>
</template>

<script>
import { flowXmlAndNode } from '@/api/flowable/definition'
import { flowRecord } from '@/api/flowable/finished'
import { getRtStuDropOutSchoolByprocInsId ,getRtStuDropOutSchool} from '@/api/routine/rtStuDropOutSchool'
import Parser from '@/components/parser/Parser'
import flow from '@/views/flowable/task/finished/detail/flow'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: 'RtStuDropOutSchoolDetail',
  dicts: ['rt_penalty_type', 'rt_penalty_status', 'rt_quit_type', 'rt_reentry_type', 'rt_logout_type'],
  components: {
    Parser,
    flow,
  },
  props: {},
  data() {
    return {
      baseurl: process.env.VUE_APP_BASE_API,
      // 模型xml数据
      flowData: {},
      activeName: '1',
      // 用户表格数据
      userList: null,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      // 查询参数
      queryParams: {
        deptId: undefined,
      },
      // 遮罩层
      loading: true,
      flowRecordList: [], // 流程流转数据
      formConfCopy: {},
      src: null,
      taskForm: {
        multiple: false,
        comment: '', // 意见内容
        procInsId: '', // 流程实例编号
        instanceId: '', // 流程实例编号
        deployId: '', // 流程定义编号
        taskId: '', // 流程任务编号
        procDefId: '', // 流程编号
        vars: '',
        targetKey: '',
      },
      variables: [], // 流程变量数据
      variablesData: {}, // 流程变量数据
      variableOpen: false, // 是否加载流程变量数据
      category: null, // 流程分类
      leaveForm: false, // 请假表单
      disposalForm: false, // 处分表单
      dropOutForm: false, // 退学申请表单
      form: {},
      // 学生基础信息
      stuInfo: {},
      //打印
      printobj: {
        id: 'dropOutForm',
        popTitle: '打印', // 打印配置页上方标题
        extraHead: '', //最上方的头部文字,附加在head标签上的额外标签,使用逗号分隔
        preview: '', // 是否启动预览模式,默认是false(开启预览模式,可以先预览后打印)
        previewTitle: '', // 打印预览的标题(开启预览模式后出现),
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本,点击可进入打印(开启预览模式后出现)
        zIndex: '', // 预览的窗口的z-index,默认是 20002(此值要高一些,这涉及到预览模式是否显示在最上面)
        previewBeforeOpenCallback() {}, //预览窗口打开之前的callback(开启预览模式调用)
        previewOpenCallback() {}, // 预览窗口打开之后的callback(开启预览模式调用)
        beforeOpenCallback() {}, // 开启打印前的回调事件
        openCallback() {}, // 调用打印之后的回调事件
        closeCallback() {}, //关闭打印的回调事件(无法确定点击的是确认还是取消)
        url: '',
        standard: '',
        extraCss: '',
      },
      notupload: {
        type: Boolean,
        default: true,
      },
    }
  },
  created() {
    this.taskForm.deployId = this.$route.query && this.$route.query.deployId
    this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId
    this.dropOutSchoolId = this.$route.query && this.$route.query.dropOutSchoolId
    this.category = this.$route.query.category
    if (this.category == 'dropOut') {
      this.dropOutForm = true
      if (this.dropOutSchoolId) {
        this.getRtStuDropOutSchool(this.dropOutSchoolId)
      } else {
        this.getRtStuDropOutSchoolByprocInsId(this.taskForm.procInsId)
      }
    }
    // 回显流程记录
    // 流程任务重获取变量表单
    //   if (this.taskForm.taskId){
    //     this.processVariables( this.taskForm.taskId)
    //   }

    this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId)
  },
  methods: {
      getRtStuDropOutSchool(dropOutSchoolId) {
      getRtStuDropOutSchool(dropOutSchoolId).then((response) => {
        this.form = response.data
        this.form.penaltyType = this.form.penaltyType.toString()
      })
    },
    // 类别
    quitSchoolCategoryMethodFormat(row, column) {
      return this.selectDictLabel(this.dict.type.rt_logout_type, row.dropOutCategory)
    },
    getRtStuDropOutSchoolByprocInsId(procInsId) {
      getRtStuDropOutSchoolByprocInsId(procInsId).then((res) => {
        this.form = res.data
      })
    },
    quitSchoolMethodFormat(row, column) {
      return this.selectDictLabel(this.dict.type.rt_reentry_type, row.dropOutType)
    },
    handleClick(tab, event) {
      if (tab.name === '3') {
        flowXmlAndNode({ procInsId: this.taskForm.procInsId, deployId: this.taskForm.deployId }).then((res) => {
          this.flowData = res.data
        })
      }
    },
    setIcon(val) {
      if (val) {
        return 'el-icon-check'
      } else {
        return 'el-icon-time'
      }
    },
    setColor(val) {
      if (val) {
        return '#2bc418'
      } else {
        return '#b3bdbb'
      }
    },
    /** 流程流转记录 */
    getFlowRecordList(procInsId, deployId) {
      const that = this
      const params = { procInsId: procInsId, deployId: deployId }
      flowRecord(params)
        .then((res) => {
          that.flowRecordList = res.data.flowList
        })
        .catch((res) => {
          this.goBack()
        })
    },
    //   /** 获取流程变量内容 */
    //   processVariables(taskId) {
    //     if (taskId) {
    //       // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
    //       getProcessVariables(taskId).then(res => {
    //         this.variablesData = res.data.variables;
    //         this.variableOpen = true
    //       });
    //     }
    //   },
    /** 返回页面 */
    goBack() {
      // 关闭当前标签页并返回上个页面
      // const obj = { path: 'disciplinaryApplication', query: { t: Date.now() } }
      // this.$tab.closeOpenPage(obj)
      this.$router.back()
      // 关闭窗体 index 当前层索引
      this.$tab.closePage()
    },
    // 下载违纪材料
    async uploadFile() {
      const fileList = this.form.evidenceUpload // 假设这是文件ID列表或直接的URL列表

      if (fileList != null && fileList !== undefined && fileList !== '') {
        const files = fileList.split(',') // 分割字符串得到文件列表数组

        files.forEach(async (file) => {
          // 直接在files上使用forEach
          if (file != null && file !== '' && file !== undefined) {
            await downloadModule.resource(file)
          }
        })
      } else {
        return []
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.test-form {
  margin: 15px auto;
  width: 800px;
  padding: 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.my-label {
  background: #e1f3d8;
}

.table-container {
  // display: table;
  width: 100%;
  margin: 0 auto;
}

.table-header,
.table-body {
  display: table-row;
}

.header-cell {
  display: table-cell;
  padding: 8px;
  font-weight: bold;
  text-align: center;
  background-color: #f5f7fa;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 8px;
  vertical-align: top;
  border-bottom: 1px solid #ddd;
}

.form-table {
  margin: 0;
}
</style>
