<template>
  <div class="app-container">
    <div class="task-container">
      <div class="task-left-menu">
        <el-tabs tab-position="left" v-model="taskState" @tab-click="handleSelectState">
          <el-tab-pane :name="State.MY_TASK">
            <span slot="label"><i class="el-icon-user"></i> 我的任务</span>
          </el-tab-pane>
          <el-tab-pane :name="State.HISTORY_TASK">
            <span slot="label"><i class="el-icon-time"></i> 历史任务</span>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="task-right-content">
        <el-table v-loading="loading" :data="studentLeaveList">
          <el-table-column label="姓名" width="100" :key="Math.random()" align="center" prop="studentName"/>
          <el-table-column label="班级" width="100" :key="Math.random()" align="center" prop="className"/>
          <el-table-column label="请假开始时间" :key="Math.random()" align="center" min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.startTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="请假结束时间" :key="Math.random()" align="center" prop="endTime" min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.endTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="请假类型" :key="Math.random()" align="center" prop="type" width="100">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.biz_leave_type" :value="scope.row.type"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="请假天数" align="center" :key="Math.random()" prop="totalTime" width="100"/>
          <el-table-column label="申请人" align="center" :key="Math.random()" prop="applyUser" width="100"
                           show-overflow-tooltip/>
          <el-table-column label="申请时间" align="center" :key="Math.random()" prop="applyTime" width="150">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.applyTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="任务状态" align="center" v-if="taskState === State.MY_TASK" :key="Math.random()"
                           width="120" prop="taskName">
            <template slot-scope="scope">
              <el-tag effect="dark" v-show="scope.row.taskName">{{ scope.row.taskName }}</el-tag>
            </template>
          </el-table-column>


          <el-table-column label="操作" fixed="right" :key="Math.random()" min-width="100" align="center">
            <template slot-scope="scope">
              <el-button v-if="taskState === State.MY_TASK && scope.row.taskName=='等待销假' " type="text" size="mini"

                         @click="handleResolve(scope.row, false)">销假
              </el-button>

              <el-button v-if="taskState === State.MY_TASK  && scope.row.taskName!='等待销假' " type="text" size="mini"

                         @click="handleResolve(scope.row, false)">办理
              </el-button>

              <el-button v-if="taskState === State.HISTORY_TASK" type="text" size="mini"
                         @click="handleResolve(scope.row, true)">历史
              </el-button>
            </template>
          </el-table-column>


        </el-table>
        <!--        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"-->
        <!--                    :limit.sync="queryParams.pageSize" @pagination="getList"/>-->
      </div>
    </div>
    <HandleResolve v-if="process.open" :process-open.sync="process.open" :instanceId="process.instanceId"
                   :id="process.id" :taskId="process.taskId" :readOnly="process.readOnly" :revoke="process.revoke"
                   @refreshData="refreshData"></HandleResolve>
  </div>
</template>
<script>
import {State} from '@/enums/apply'
import {CustomCellStyle} from '@/enums/customStyle'
import HandleResolve from '@/views/smartSchool/indexMould/myTask/studentLeaveApproval/HandleResolve'
import {
  getTeacherLeave,
  delTeacherLeave,
  addTeacherLeave,
  updateTeacherLeave,
  taskDoneList,
  listHistory,
  viewSchedule,
  submitApply
} from '@/api/smartSchool/teacherManage/teacherLeave'
import {taskList, historyList} from '@/api/smartSchool/studentManage/studentLeave'

export default {
  name: 'MyTask',
  dicts: ['biz_leave_type'],
  components: {
    HandleResolve
  },
  data() {
    return {
      State,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 老师请假信息表格数据
      studentLeaveList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        // pageNum: 1,
        // pageSize: 10,
        leaveReason: null,
        startTime: null,
        endTime: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        leaveReason: [{required: true, message: '请假原因不能为空', trigger: 'blur'}],
        startTime: [{required: true, message: '请假开始时间不能为空', trigger: 'blur'}],
        endTime: [{required: true, message: '请假结束时间不能为空', trigger: 'blur'}]
      },
      // 任务状态
      taskState: State.MY_TASK,
      // 自定义单元格
      customCellStyle: CustomCellStyle,
      // 办理流程
      process: {
        id: undefined,
        instanceId: undefined,
        taskId: undefined,
        open: false,
        title: '流程办理',
        readOnly: false,
        // 是否销假
        revoke: false
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        id: null,
        type: null,
        title: null,
        teacherId: null,
        teacherName: null,
        reasonForLeave: null,
        startTime: null,
        endTime: null,
        totalTime: null,
        state: null,
        instanceId: null,
        applyUser: null,
        applyTime: null,
        realityStartTime: null,
        realityEndTime: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null
      }
      this.resetForm('form')
    },
    /** 任务状态发生变化 */
    handleSelectState({name}) {
      this.resetQuery()
    },
    /** 办理/历史/销假 */
    handleResolve({id, taskId, instanceId, taskName}, readOnly, revoke = false) {
      const isRevoke = new RegExp('销假', 'g')
      this.process.open = true
      this.process.instanceId = instanceId
      this.process.id = id
      this.process.taskId = taskId
      console.log(1111111, this.process.taskId)
      this.process.readOnly = readOnly // 主要用来判断是否为历史任务。或者是申请人查看
      // 是等待销假状态，同时保证不是在历史任务中
      this.process.revoke = isRevoke.test(taskName) && !readOnly
    },
    /** 审核人提交表单(刷新数据) */
    refreshData() {
      this.getList()
    },
    /** 查询任务列表 */
    async getList() {
      let response = null // 返回结果
      try {
        this.loading = true // 加载效果
        switch (this.taskState) {
          case State.MY_TASK:
            response = await taskList(this.queryParams)
            console.log(response)
            break
          case State.HISTORY_TASK:
            response = await historyList(this.queryParams)
            break
          default:
            break
        }
        this.loading = false

        let rows = response.rows.map(item => {
          if (item.applyType == 0) {
            item.startTime = this.getFormatDate(item.startTime)
            item.endTime = this.getFormatDate(item.endTime)
          }
          return item
        })

        this.studentLeaveList = rows
        this.total = response.total
      } catch (exception) {
        this.loading = false
      }
    },

    // 取消按钮
    cancel() {
      this.dialogTeacherLeave = false
      this.reset()
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 提交申请
    submitApply(row) {
      this.$confirm('确认要提交申请?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          submitApply(row, row.id).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '提交成功!'
              })
              this.getList()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消提交'
          })
        })
    },
    getFormatDate(timeDate) {
      let date = new Date(timeDate)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      return [year, '-', month, '-', day].join('')
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/moduleStyle/custom-global-style.scss';
</style>
