<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { getFormatDuration } from '@/utils/common'
import { UserFilled } from '@element-plus/icons-vue'
import { useTablePublic, LeaveUserInfoIn } from '@/hooks/useTablePublic'
import TableBase from '@/components/TableBase/index.vue'
import { ColumnProps } from '@/components/TableBase/interface/index'
import { Leave_List, Leave_Approval } from '@/api/workAttendance/index'

const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
const columns: ColumnProps[] = [{ prop: 'T_user_name', label: '姓名' }]
const { tableRowClassName, globalStore, updateOnTableList } = useTablePublic()
const tableRowClassNameHandle = (data: any): any => tableRowClassName(data.row.Id, userInfo.value.Id)

const userInfo = ref<LeaveUserInfoIn>({
  T_user_name: '',
  T_dept: '',
  T_post: '',
  T_type_name: '',
  CreateTime: '',
  T_start_time: '',
  T_end_time: '',
  T_text: '',
  Id: '',
  T_duration: 0
})
const getSalaryParams = (row: any) => {
  userInfo.value.Id = ''
  setTimeout(() => {
    userInfo.value = { ...row }
  }, 100)
}
const LeaveUser = async (T_State: number) => {
  if (!userInfo.value.Id) return
  const params = {
    User_tokey: globalStore.GET_User_tokey,
    T_id: userInfo.value.Id,
    T_State
  }
  const res: any = await Leave_Approval(params)
  if (res.Code === 200) {
    if (T_State) {
      ElMessage.success('审核通过！')
    } else {
      ElMessage.warning('审核不通过！')
    }
    updateOnTableList(TableRef.value)
    userInfo.value = {} as LeaveUserInfoIn
  }
}
</script>

<template>
  <div class="Leave">
    <div style="width: 290px" class="Leave-table">
      <TableBase
        ref="TableRef"
        :columns="columns"
        :requestApi="Leave_List"
        :initParam="{ User_tokey: globalStore.GET_User_tokey }"
        layout="prev, pager, next"
        :rowClick="getSalaryParams"
        :tableRowClassName="tableRowClassNameHandle"
      >
        <template #table-header>
          <h3 class="title">待处理</h3>
        </template>
      </TableBase>
    </div>
    <transition
      leave-active-class="animate__animated animate__fadeOutRight"
      enter-active-class="animate__animated animate__fadeInLeft"
    >
      <el-row class="h-100 f-1 margin-left-3 Leave-container" v-if="userInfo.Id">
        <el-col :span="24" class="h-100" style="overflow: hidden; display: flex; flex-direction: column">
          <el-card class="m-b-3 b-show-0">
            <h3 class="title-user m-b-5">员工基本信息</h3>
            <div class="info-content">
              <el-avatar shape="square" size="large" :icon="UserFilled" />
              <div class="info-name">
                <h4>名字：{{ userInfo.T_user_name }}</h4>
                <h4>部门： {{ userInfo.T_dept }}</h4>
                <h4>岗位： {{ userInfo.T_post }}</h4>
              </div>
            </div>
          </el-card>
          <el-card class="b-show-0" style="flex: 1">
            <el-descriptions title="请假申请" :column="1" size="large" border>
              <el-descriptions-item label="请假类型："
                ><el-text class="mx-1" type="primary">{{
                  userInfo.T_type_name ? userInfo.T_type_name : '-'
                }}</el-text></el-descriptions-item
              >
				<el-descriptions-item label="申请时间："
				><el-text class="mx-1" type="primary">{{
						userInfo.CreateTime ? userInfo.CreateTime : '-'
					}}</el-text></el-descriptions-item
				>
              <el-descriptions-item label="开始时间："
                ><el-text class="mx-1" type="primary">{{
                  userInfo.T_start_time ? userInfo.T_start_time : '-'
                }}</el-text></el-descriptions-item
              >
              <el-descriptions-item label="结束时间：" :span="2"
                ><el-text class="mx-1" type="primary">{{
                  userInfo.T_end_time ? userInfo.T_end_time : '-'
                }}</el-text></el-descriptions-item
              >
              <el-descriptions-item label="请假时长：">
                <el-text class="mx-1" type="primary">{{
                  userInfo.T_duration ? getFormatDuration(userInfo.T_duration) : '-'
                }}</el-text>
              </el-descriptions-item>
              <el-descriptions-item label="内容：">
                <el-text class="mx-1" type="primary">{{ userInfo.T_text ? userInfo.T_text : '-' }}</el-text>
              </el-descriptions-item>
            </el-descriptions>
            <div class="btn">
              <el-button type="primary" @click="LeaveUser(1)">通过</el-button>
              <el-button type="danger" @click="LeaveUser(0)">不通过</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </transition>
  </div>
</template>

<style scoped lang="scss">
@import '@/styles/var.scss';

.Leave {
  height: 100%;
  display: flex;
  overflow: hidden;
  .Leave-table {
    @include f-direction;
    z-index: 1;
    :deep(.table-header) {
      margin-bottom: 0;
    }
    .title {
      width: 100%;
      text-align: center;
    }
  }
  .Leave-container {
    z-index: 0;
    .title-user {
      text-align: left;
    }
    .b-show-0 {
      box-shadow: none;
    }
    .btn {
      margin-top: 2rem;
      display: flex;
      justify-content: end;
    }
    .info-content {
      display: flex;
      color: #606266;
      .info-name {
        flex: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-left: 0.75rem;
      }
    }
  }
}
</style>
