<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { User_List } from '@/api/user/index'
import { GlobalStore } from '@/stores/index'
import { getFormatDuration } from '@/utils/common'
import TableBase from '@/components/TableBase/index.vue'
import { Leave_Finance_List } from '@/api/workAttendance/index'
import { ref, reactive, onMounted, computed, onUnmounted } from 'vue'
import { ColumnProps } from '@/components/TableBase/interface/index'
import Pagination from '@/components/TableBase/components/Pagination.vue'

const TableData = ref()
const globalStore = GlobalStore()
const initParam = { User_tokey: globalStore.GET_User_tokey }
const LeaveTableRef = ref<InstanceType<typeof TableBase> | null>(null)
let date = new Date()
const month = date.getMonth()
const year = date.getFullYear()
const salaryFromData = ref({
  year: year + '',
  month: (month < 10 ? '0' : '') + month,
  T_uuid: ''
})

// 搜索以及参数
const columns: ColumnProps[] = [
  { prop: 'T_name', label: '姓名', name: 'T_name' },
  { prop: 'T_post_name', label: '职位', ellipsis: true }
]
const userColums: ColumnProps[] = [
  { prop: 'T_type_name', label: '请假类型' },
  { 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: '理由' },
  { prop: 'T_State', label: '审核', name: 'T_State' }
]
const dateCom = computed(() => {
  return `${salaryFromData.value.year}-${salaryFromData.value.month}`
})

const LeaveinitParam = reactive({
  User_tokey: globalStore.GET_User_tokey,
  T_uuid: '',
  T_month: dateCom.value
})

const getSalaryParams = (row: any) => {
  userInfo.name = row.T_name
  userInfo.T_dept = row.T_dept_name
  userInfo.T_post = row.T_post_name
  LeaveinitParam.T_uuid = row.T_uuid

  LeaveTableRef.value && LeaveTableRef.value.searchTable()
}

const salarDateMonthChange = (val: string) => {
  if (!val) return
  if (!LeaveinitParam.T_uuid) {
    ElMessage.warning('请选择员工!!!')
  }
  LeaveinitParam.T_month = dateCom.value
  LeaveTableRef.value && LeaveTableRef?.value.searchTable()
}
const salarDateYearChange = (val: string) => {
  if (!val) return
  if (!LeaveinitParam.T_uuid) {
    ElMessage.warning('请选择员工!!!')
  }
  LeaveinitParam.T_month = dateCom.value
  LeaveTableRef.value && LeaveTableRef.value.searchTable()
}
const userInfo = reactive({
  squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  name: '',
  T_dept: '',
  T_post: ''
})
const onResize = () => {
  const height = document.documentElement.clientHeight
  return height - 140 - 74 - 60 - 4 * 12
}

const getTableData = async () => {
  const res: any = await User_List({ ...initParam })
  TableData.value = res.Data.Data
  pageable.total = res.Data.Num
}
onMounted(async () => {
  await getTableData()
  let userInfoFirst = TableData.value[0]
  LeaveinitParam.T_uuid = userInfoFirst.T_uuid
  userInfo.name = userInfoFirst.T_name
  userInfo.T_dept = userInfoFirst.T_dept_name
  userInfo.T_post = userInfoFirst.T_post_name
})
const pageable = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  small: false,
  disabled: false
})
const handleSizeChange = (val: number) => {
  pageable.pageSize = val
  LeaveTableRef.value?.getTableList()
}

const handleCurrentChange = (val: number) => {
  pageable.pageNum = val
  LeaveTableRef.value?.getTableList()
}
let clientHeight = ref(0)
const onContentResize = () => {
  const height = document.documentElement.clientHeight
  clientHeight.value = height - 140 - 60 - 3 * 12
}
onMounted(() => {
  onContentResize()
  window.onresize = onContentResize
})
onUnmounted(() => (window.onresize = null))
</script>

<template>
  <div class="RecordsFinance">
    <div style="width: 290px; display: flex; padding: 20px; background: #fff; flex-direction: column">
      <el-table class="h-100" style="width: 100%; height: 100%; flex: 1" :data="TableData" @row-click="getSalaryParams">
        <el-table-column
          align="center"
          v-for="item in columns"
          :label="item.label"
          :prop="item.prop"
          :key="item.prop"
        />
      </el-table>
      <Pagination
        layout="total, prev, pager, next"
        :pageable="pageable"
        :handleSizeChange="handleSizeChange"
        :handleCurrentChange="handleCurrentChange"
      />
    </div>
    <el-row class="h-100 f-1 margin-left-3">
      <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" :src="userInfo.squareUrl" />
            <div class="info-name">
              <h4 class="m-b-3">名字：{{ userInfo.name }}</h4>
              <h4>
                <span>部门：{{ userInfo.T_dept }}</span>
                <span>岗位：{{ userInfo.T_post }}</span>
              </h4>
            </div>
          </div>
        </el-card>
        <el-card class="m-b-3">
          <el-row :gutter="20">
            <el-col :span="10" class="d-flex justify-start">
              <span class="demonstration">年：</span>
              <el-date-picker
                v-model="salaryFromData.year"
                value-format="YYYY"
                type="year"
                placeholder="请选择年"
                @change="salarDateYearChange"
              />
              <span class="demonstration">月：</span>
              <el-date-picker
                v-model="salaryFromData.month"
                popper-class="picker-date"
                value-format="MM"
                format="MM"
                type="month"
                placeholder="请选择月"
                @change="salarDateMonthChange"
              />
            </el-col>
          </el-row>
        </el-card>
        <div :style="{ height: clientHeight + 'px' }">
          <TableBase
            v-if="LeaveinitParam.T_uuid"
            ref="LeaveTableRef"
            :columns="userColums"
            :requestApi="Leave_Finance_List"
            :initParam="LeaveinitParam"
            layout="total,prev, pager, next"
            :onResize="onResize"
            :displayHeader="true"
          >
            <template #T_duration="{ row }">{{ getFormatDuration(row.T_duration) }}</template>
            <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>
          </TableBase>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.RecordsFinance {
  display: flex;
  height: 100%;
  overflow: hidden;
  .w-100 {
    width: 100%;
  }
}
.d-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
.justify-start {
  justify-content: start;
}
.input-suffix {
  width: 100%;
  flex-direction: column;
  .w-50 {
    width: 12.5rem;
  }

  .inline-flex {
    white-space: nowrap;
    display: inline-flex;
  }
}
.title {
  text-align: left;
}
.info-content {
  display: flex;
  color: #303133;
  .info-name {
    display: flex;
    flex-direction: column;
    padding-left: 0.75rem;
    span:first-child {
      margin-right: 2rem;
    }
  }
}
</style>
