<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <ExportBtn :getTableRef="() => $refs.table" :columns="exportCols" fileName="离职申请台账" />
      </div>
      <div class="right-panel">
        <el-input v-model="query.search" placeholder="姓名" clearable @keyup.enter="handleQuery" style="width:150px"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable ref="table" :apiObj="API.hrm.resignation.list" row-key="id" stripe
        @row-click="(row)=>{t_id=row.id;mode='show';drawerVisible=true;}">
        <el-table-column label="姓名" prop="employee_name" min-width="80" show-overflow-tooltip></el-table-column>
        <el-table-column label="部门" prop="belong_dept_name" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column label="岗位" prop="post_name" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column label="身份证号" prop="employee_id_number" min-width="170" show-overflow-tooltip></el-table-column>
        <el-table-column label="离职日期" prop="end_date" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column label="原因" prop="reason" min-width="150" show-overflow-tooltip></el-table-column>
        <el-table-column label="审批状态" min-width="180">
          <template #default="scope">
            <el-tag :type="actStateEnum[scope.row.ticket_?.act_state]?.type">{{ actStateEnum[scope.row.ticket_?.act_state]?.text }}</el-tag>
            <el-tag type="info" effect="plain">{{ scope.row.ticket_?.state_?.name }}</el-tag>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <el-drawer title="离职申请" v-model="drawerVisible" :size="'80%'" destroy-on-close>
    <resignation-form :mode="mode" :t_id="t_id"></resignation-form>
  </el-drawer>
</template>
<script setup>
import { ref } from 'vue'
import API from '@/api'
import resignationForm from './resignation_form.vue'
import ExportBtn from '@/components/scExportBtn/index.vue'
import { actStateEnum } from "@/utils/enum.js"
const query = ref({})
const drawerVisible = ref(false)
const mode = ref('add')
const t_id = ref(null)
const table = ref(null)
const handleQuery = () => { table.value?.queryData(query.value) }
const exportCols = [
  { header: "姓名", key: "employee_name", wch: 10 },
  { header: "部门", key: "belong_dept_name", wch: 15 },
  { header: "岗位", key: "post_name", wch: 12 },
  { header: "身份证号", key: "employee_id_number", wch: 20 },
  { header: "离职日期", key: "end_date", wch: 12 },
  { header: "原因", key: "reason", wch: 25 },
  { header: "审批状态", key: "_act_state_text", wch: 10 },
]
</script>
