<script setup lang="ts">
import { View } from '@element-plus/icons-vue'
import { getFormatDuration } from '@/utils/common'
import { User_List } from '@/api/user/index'
import { GlobalStore } from '@/stores/index'
import Drawer from '@/components/Drawer/index.vue'
import TableBase from '@/components/TableBase/index.vue'
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
import { ColumnProps } from '@/components/TableBase/interface/index'
import { useTablePublic } from '@/hooks/useTablePublic'
import { Leave_User_list, Overtime_User_list, Overtime_Stat } from '@/api/workAttendance/index'
import ImageCom from '@/components/Image/index.vue'

let clientHeight = ref(0)
const globalStore = GlobalStore()
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
const leaveRef = ref<InstanceType<typeof TableBase> | null>(null)
const overtimeRef = ref<InstanceType<typeof TableBase> | null>(null)
const remainingTimeRef = ref<InstanceType<typeof TableBase> | null>(null)
const drawerLeaveRef = ref<InstanceType<typeof Drawer> | null>(null)
const drawerOvertimeRef = ref<InstanceType<typeof Drawer> | null>(null)
const { tableRowClassName } = useTablePublic()
const tableRowClassNameHandle = (data: any): any => tableRowClassName(data.row.T_uuid, userInitParam.T_uuid)

const columns: ColumnProps[] = [{ prop: 'T_name', label: '姓名' }]
const overtimeColums: ColumnProps[] = [
  { prop: 'T_start_time', label: '开始时间', ellipsis: true },
  { prop: 'T_end_time', label: '结束时间', ellipsis: true },
  { prop: 'T_duration', label: '时长', name: 'T_duration' },
  { prop: 'T_State', label: '审核', name: 'T_State' },
  { prop: 'T_approver_name', label: '处理人' },
  { prop: 'operation', label: '操作', width: 80, fixed: 'right' }
]
const remainingTimeColums: ColumnProps[] = [
  { prop: 'T_duration', label: '时长', name: 'T_duration' },
  { prop: 'RemainingTime', label: '剩余时长', name: 'RemainingTime' },
  { prop: 'T_type_name', label: '事项' },
  { prop: 'T_approver_name', label: '处理人' },
  { prop: 'UpdateTime', label: '时间', ellipsis: true }
]
const leaveColums: ColumnProps[] = [
  { prop: 'T_type_name', label: '请假类型' },
  { prop: 'CreateTime', label: '申请时间', ellipsis: true },
  { prop: 'T_start_time', label: '开始时间', ellipsis: true },
  { prop: 'T_end_time', label: '结束时间', ellipsis: true },
  { prop: 'T_duration', label: '请假时长', name: 'T_duration' },
  { prop: 'T_text', label: '理由', ellipsis: true },
  { prop: 'T_State', label: '审核', name: 'T_State' },
  { prop: 'T_approver_name', label: '处理人' },
  { prop: 'operation', label: '操作', width: 80, fixed: 'right' }
]

const initParam = reactive({
  User_tokey: globalStore.GET_User_tokey,
  T_name: '',
  T_dept: ''
})
const userInitParam = reactive({
  User_tokey: globalStore.GET_User_tokey,
  T_uuid: ''
})
const userInfo = reactive({
  squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  name: '',
  T_dept: '',
  T_post: ''
})

// 加班记录
let url = ''
const OvertimeEmptyObject = {
  T_start_time: '',
  T_end_time: '',
  T_text: ''
} as Record<string, unknown>
const OvertimeInfo = ref(OvertimeEmptyObject)
// 请假记录
const LeaveInfo = ref<Record<string, string>>({
  T_type_name: '',
  T_start_time: '',
  T_end_time: '',
  T_duration: '',
  T_text: ''
})

const userInfoAssign = (row: any) => {
  userInitParam.T_uuid = row.T_uuid
  userInfo.name = row.T_name
  userInfo.T_dept = row.T_dept_name
  userInfo.T_post = row.T_post_name
}

const onContentResize = () => {
  const height = document.documentElement.clientHeight
  clientHeight.value = height - 140 - 60 - 3 * 12
}
onMounted(() => {
  onContentResize()
  window.onresize = onContentResize
})
onUnmounted(() => (window.onresize = null))
// 点击行
const getSalaryParams = (row: any) => {
  if (row.T_uuid === userInitParam.T_uuid) return
  userInitParam.T_uuid = ''
  setTimeout(() => {
    userInfoAssign(row)
    leaveRef.value && leaveRef.value.searchTable()
    overtimeRef.value && overtimeRef.value.searchTable()
    remainingTimeRef.value && remainingTimeRef.value.searchTable()
  }, 100)
}
// 查看加班记录
const viewOvertime = (row: any) => {
  url = row.T_prove_img
  OvertimeInfo.value = { ...row }
  drawerOvertimeRef.value && drawerOvertimeRef.value.openDrawer()
}
const closerOvertime = () => {
  drawerOvertimeRef.value && drawerOvertimeRef.value.closeDrawer()
  drawerLeaveRef.value && drawerLeaveRef.value.closeDrawer()
  nextTick(() => {
    url = ''
    LeaveInfo.value = {}
    OvertimeInfo.value = {}
  })
}
// 查看请假
const viewoLeave = (row: any) => {
  LeaveInfo.value = { ...row }
  LeaveInfo.value.T_duration = getFormatDuration(row.T_duration)
  drawerLeaveRef.value && drawerLeaveRef.value.openDrawer()
}
const callbackDrawer = (done: () => void) => done()
const searchHandle = () => TableRef.value?.searchTable()
</script>

<template>
  <div class="records">
    <div style="width: 290px" class="records-table">
      <TableBase
        ref="TableRef"
        :columns="columns"
        :requestApi="User_List"
        :initParam="initParam"
        layout="prev, pager, next"
        :rowClick="getSalaryParams"
        :tableRowClassName="tableRowClassNameHandle"
      >
        <template #table-header>
          <el-row :gutter="24" class="margin-left-0 margin-right-0">
            <el-col :span="24" class="d-flex padding-right-0 padding-left-0">
              <span class="inline-flex">姓名：</span>
              <el-input type="text" v-model="initParam.T_name" @change="searchHandle" />
              <el-button type="primary" @click="searchHandle">搜索</el-button>
            </el-col>
          </el-row>
        </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 records-container" v-if="userInitParam.T_uuid">
        <el-col :span="24" class="h-100" style="overflow: hidden">
          <el-card class="m-b-3">
            <h3 class="title m-b-5">员工基本信息</h3>
            <div class="info-content">
              <el-avatar shape="square" size="large"><img src="@/assets/images/avatar.jpg" /> </el-avatar>
              <div class="info-name">
                <h4>名字：{{ userInfo.name }}</h4>
                <h4>部门： {{ userInfo.T_dept }}</h4>
                <h4>岗位： {{ userInfo.T_post }}</h4>
              </div>
            </div>
          </el-card>
          <div class="content" :style="{ height: clientHeight + 'px' }">
            <div>
              <div class="content-table-item">
                <el-tag font-large type="success" effect="dark">加班记录:</el-tag>
                <TableBase
                  ref="overtimeRef"
                  v-if="userInitParam.T_uuid"
                  :columns="overtimeColums"
                  :requestApi="Overtime_User_list"
                  :initParam="userInitParam"
                  :displayHeader="true"
                  layout="prev, pager, next"
                >
                  <template #T_State="{ row }">
                    <el-tag v-if="row.T_State === 1" type="success">通过</el-tag>
                    <el-tag v-else-if="row.T_State === 2" type="warning">未通过</el-tag>
                    <el-tag v-else type="danger">待审核</el-tag>
                  </template>
                  <template #T_duration="{ row }">{{ getFormatDuration(row.T_duration) }}</template>
                  <template #right="{ row }">
                    <el-button type="success" size="small" link :icon="View" @click="viewOvertime(row)">查看</el-button>
                  </template>
                </TableBase>
              </div>
              <div class="content-table-item">
                <TableBase
                  ref="remainingTimeRef"
                  v-if="userInitParam.T_uuid"
                  :columns="remainingTimeColums"
                  :requestApi="Overtime_Stat"
                  :initParam="userInitParam"
                  layout="prev, pager, next"
                >
                  <template #table-header="{ pageable }">
                    <el-tag effect="dark">
                      剩余总时长：{{ getFormatDuration(pageable.RemainingTime as number) }}
                    </el-tag>
                  </template>
                  <template #T_duration="{ row }">{{ getFormatDuration(row.T_duration) }}</template>
                  <template #RemainingTime="{ row }">{{ getFormatDuration(row.RemainingTime) }}</template>
                </TableBase>
              </div>
              <div class="content-table-item">
                <el-tag font-large type="danger" effect="dark">请假记录:</el-tag>
                <TableBase
                  ref="leaveRef"
                  v-if="userInitParam.T_uuid"
                  :columns="leaveColums"
                  :requestApi="Leave_User_list"
                  :initParam="userInitParam"
                  :displayHeader="true"
                  layout="prev, pager, next"
                >
                  <template #T_State="{ row }">
                    <el-tag v-if="row.T_State === 1" type="success">通过</el-tag>
                    <el-tag v-else-if="row.T_State === 2" type="warning">未通过</el-tag>
                    <el-tag v-else type="danger">待审核</el-tag>
                  </template>
                  <template #T_duration="{ row }">{{ getFormatDuration(row.T_duration as number) }}</template>
                  <template #right="{ row }">
                    <el-button type="success" size="small" link :icon="View" @click="viewoLeave(row)">查看</el-button>
                  </template>
                </TableBase>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </transition>
    <Drawer ref="drawerOvertimeRef" :handleClose="callbackDrawer">
      <template #header="{ params }">
        <h4 :id="params.titleId" :class="params.titleClass">加班记录</h4>
      </template>
      <div>
        <el-descriptions :column="1" size="large" border>
          <el-descriptions-item label="开始时间："
            ><el-text type="primary">{{ OvertimeInfo.T_start_time }}</el-text></el-descriptions-item
          >
          <el-descriptions-item label="结束时间："
            ><el-text type="primary">{{ OvertimeInfo.T_end_time }}</el-text></el-descriptions-item
          >
          <el-descriptions-item label="取证：" :span="2">
            <ImageCom :src="url" />
          </el-descriptions-item>
          <el-descriptions-item label="内容：">
            <el-text type="primary">{{ OvertimeInfo.T_text }}</el-text>
          </el-descriptions-item>
        </el-descriptions>
        <div class="btn">
          <el-button type="primary" @click="closerOvertime">关闭</el-button>
        </div>
      </div>
    </Drawer>
    <Drawer ref="drawerLeaveRef" :handleClose="callbackDrawer">
      <template #header="{ params }">
        <h4 :id="params.titleId" :class="params.titleClass">请假记录</h4>
      </template>
      <div>
        <el-descriptions :column="1" size="large" border>
          <el-descriptions-item label="请假类型："
            ><el-text type="danger">{{ LeaveInfo.T_type_name }}</el-text></el-descriptions-item
          >
          <el-descriptions-item label="开始时间："
            ><el-text type="primary">{{ LeaveInfo.T_start_time }}</el-text></el-descriptions-item
          >
          <el-descriptions-item label="结束时间："
            ><el-text type="primary">{{ LeaveInfo.T_end_time }}</el-text></el-descriptions-item
          >
          <el-descriptions-item label="请假时长："
            ><el-text type="primary">{{ LeaveInfo.T_duration }}</el-text></el-descriptions-item
          >
          <el-descriptions-item label="内容：">
            <el-text type="primary">{{ LeaveInfo.T_text }}</el-text>
          </el-descriptions-item>
        </el-descriptions>
        <div class="btn">
          <el-button type="primary" @click="closerOvertime">关闭</el-button>
        </div>
      </div>
    </Drawer>
  </div>
</template>

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

.records-table {
  @include f-direction;
}
</style>
