<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import SalaryFrom from './SalaryFrom.vue'
import { User_List } from '@/api/user/index'
import { GlobalStore } from '@/stores/index'
import { Salary_Get } from '@/api/salary/index'
import TableBase from '@/components/TableBase/index.vue'
import { ColumnProps } from '@/components/TableBase/interface/index'

let date = new Date()
const year = date.getFullYear()
const month = date.getMonth()
const salaryFromData = reactive({
  year: year + '',
  month: (month < 10 ? '0' : '') + month,
  T_uuid: ''
})
const globalStore = GlobalStore()
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
const salaryFromRef = ref<InstanceType<typeof SalaryFrom> | null>(null)

// 搜索以及参数
const columns: ColumnProps[] = [
  { prop: 'T_name', label: '姓名', name: 'T_name' },
  { prop: 'T_post_name', label: '职位' }
]

const searchs = reactive({
  T_name: '',
  T_dept: ''
})
const initParam = {
  User_tokey: globalStore.GET_User_tokey,
  T_name: '',
  T_dept: ''
}

const searchHandle = () => {
  initParam.T_name = searchs.T_name
  initParam.T_dept = searchs.T_dept
  TableRef.value?.searchTable()
}

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

  salaryFromData.T_uuid = row.T_uuid
  getSalary()
}
const getSalary = async () => {
  let T_date = `${salaryFromData.year}-${salaryFromData.month}`
  const res = await Salary_Get({ T_uuid: salaryFromData.T_uuid, T_date })
  salaryFromRef.value?.DataEcho(res.Data)
}
const salarDateMonthChange = (val: string) => {
  if (!val) return
  if (!salaryFromData.T_uuid) {
    ElMessage.warning('请选择员工!!!')
  }
  getSalary()
}
const salarDateYearChange = (val: string) => {
  if (!val) return
  if (!salaryFromData.T_uuid) {
    ElMessage.warning('请选择员工!!!')
  }
  getSalary()
}
const userInfo = reactive({
  squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  name: '',
  T_dept: '',
  T_post: ''
})
const onResize = () => {
  const height = document.documentElement.clientHeight
  const table_header = document.querySelector('.table-header') as HTMLDivElement
  return height - table_header.clientHeight - 24 - 60 - 12
}
</script>

<template>
  <div class="salary">
    <div style="width: 290px">
      <TableBase
        ref="TableRef"
        :columns="columns"
        :requestApi="User_List"
        :initParam="initParam"
        layout="prev, pager, next"
        :onResize="onResize"
        :rowClick="getSalaryParams"
      >
        <template #table-header>
          <el-row :gutter="24" class="input-suffix margin-left-0 margin-right-0">
            <el-col :span="24" class="d-flex padding-left-0 padding-right-0" style="margin-bottom: 5px">
              <span class="inline-flex">部门：</span>
              <el-select v-model="searchs.T_dept" clearable placeholder="请选择部门">
                <el-option
                  v-for="item in globalStore.GET_Dept_List"
                  :key="item.Id"
                  :label="item.T_name"
                  :value="item.Id"
                />
              </el-select>
            </el-col>
            <el-col :span="24" class="d-flex padding-right-0 padding-left-0">
              <span class="inline-flex">姓名：</span>
              <el-input v-model="searchs.T_name" type="text" />
              <el-button type="primary" @click="searchHandle">搜索</el-button>
            </el-col>
          </el-row>
        </template>
        <template #T_name="{ row }">
          <el-button type="primary" text @click="getSalaryParams(row)">{{ row.T_name }}</el-button>
        </template>
      </TableBase>
    </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>
        <SalaryFrom ref="salaryFromRef" v-bind="salaryFromData"></SalaryFrom>
      </el-col>
    </el-row>
  </div>
</template>

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