<template>
    <div class="wrapper">
        <el-dialog
            style="margin-top: 5vh"
            :title="title"
            :visible.sync="open"
            width="80%"
            append-to-body
            :close-on-click-modal="false"
            @close="closeDialog"
        >
            <div class="content">
                <el-form
                    :model="queryParams"
                    ref="queryFormRef"
                    size="medium"
                    :inline="true"
                    label-width="80px"
                    style="margin-bottom: 20px"
                >
                    <el-form-item label="选择月份" v-if="status == 12">
                      <el-date-picker
                        v-model="queryParams.month"
                        type="month" value-format="yyyy-MM"
                        placeholder="选择月">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item
                        label="姓名"
                        prop="userName"
                    >
                        <el-input
                            v-model="queryParams.userName"
                            placeholder="请输入姓名"
                            clearable
                            style="width: 240px"
                        />
                    </el-form-item>
                    <el-form-item label="部门" prop="orgId" v-if="status == 12">
                        <treeselect v-model="queryParams.orgId" :options="deptOptions" :normalizer="normalizer" placeholder="选择部门" style="width: 240px"/>
                    </el-form-item>
                    <el-form-item label="状态" prop="attStatus" v-if="status == 12">
                      <el-select
                        v-model="queryParams.attStatus"
                        placeholder="状态"
                        clearable
                        style="width: 240px"
                      >
                        <el-option
                          v-for="dict in dict.type.att_status"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                    </el-form-item>
                    <!-- <el-form-item
                        label="设备编号"
                        prop="devCode"
                        v-if="status <= 8"
                    >
                        <el-input
                            v-model="queryParams.devCode"
                            placeholder="请输入设备编号"
                            clearable
                            style="width: 240px"
                        />
                    </el-form-item>
                    <el-form-item
                        label="工程名称"
                        prop="proName"
                        v-if="status > 8"
                    >
                        <el-input
                            v-model="queryParams.proName"
                            placeholder="请输入工程名称"
                            clearable
                            style="width: 240px"
                        />
                    </el-form-item>
                    <el-form-item
                        label="工程类型"
                        prop="proType"
                        v-if="status === 9"
                    >
                      <el-select
                        v-model="queryParams.proType"
                        clearable
                        filterable
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in proTypeRange"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="日期" prop="date" v-if="status > 11">
                        <el-date-picker
                            v-model="queryParams.date"
                            style="width: 240px"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        />
                    </el-form-item> -->
                    <el-button
                        style="margin-top: 3px"
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="getTableList(currentFunc)"
                        >搜索</el-button
                    >
                </el-form>

                <el-table
                    :data="tableList"
                    border
                    ref="tableRef"
                    width="100%" height="500px"
                    v-loading="loading"
                   
                >
                    <el-table-column type="index" label="序号" align="center" width="80">
                      <!-- 使用 `index` 方法自定义索引，传入当前行数据和行索引 -->
                      <template slot-scope="scope">
                        {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
                      </template>
                    </el-table-column>
                    <el-table-column
                        v-for="(item, v) in columnList"
                        :key="v"
                        :label="item.t_label"
                        :prop="item.t_props"
                        :width="item.t_width"
                        align="center"
                        show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                          <template v-if="item.t_slot === 'attStatus'">
                            <dict-tag :options="dict.type.att_status" :value="scope.row[item.t_props]"/>
                          </template>

                          <template v-else-if="item.t_slot === 'attCurrentDay'">
                            <span>{{ formatWeekday(scope.row[item.t_props]) }}</span>
                          </template>

                          <template v-else-if="item.t_slot === 'examineStatus'">
                            <span v-if="scope.row[item.t_props]==0">{{ '待审核' }}</span>
                            <span v-if="scope.row[item.t_props]==1">{{ '通过' }}</span>
                            <span v-if="scope.row[item.t_props]==2">{{ '不通过' }}</span>
                            <span v-if="scope.row[item.t_props]==3">{{ '已撤回' }}</span>
                            <span v-else>{{  }}</span>
                          </template>
                        
                          <template v-else>
                            {{ scope.row[item.t_props] || '-' }}
                          </template>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getTableList(currentFunc, currentParam)"
                />
            </div>
        </el-dialog>

       
         
       
    </div>
</template>

<script>
 import { listDept } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";   
import { getDetailsList } from "@/api/report/attReport";
import { getAttDayReportDetailsList } from "@/api/report/dayReport";
import { getDetailExceptionAll } from "@/api/dashboard";
export default {
    name: 'commonDialog',
    dicts: ['att_status'],
    components: {
      Treeselect
    },
    data() {
        return {
            total: 0,
            loading: false,
            status: undefined,
            queryParams: {
                month:undefined,
                pageNum: 1,
                pageSize: 10,
            },
            title:"",
            open: false,
            deptOptions: [],
            tableList: [],
            columnList: [],
            additionalList: [],
            currentFunc: undefined,
            currentParam: undefined,
            
            proTypeRange: [
              { label: '变电工程', value: '1' },
              { label: '线路工程', value: '2' },
              { label: '电缆工程', value: '3' },
            ]
        }
    },
    mounted() {  
      
      this.getDeptList();
    },
    methods: {
        getMonth(){
          // 默认当月
          var nowDate = new Date();
          var date = {
            year: nowDate.getFullYear(),
            month: nowDate.getMonth() + 1,
            day: nowDate.getDate()
          };
          const dayDate = date.year + "-" + (date.month >= 10 ? date.month : "0" + date.month);
          this.$set(this.queryParams, "month", dayDate.toString());
        },
        getMonthDate() {
          const str=this.queryParams.month+'-01'; 
          // 获取当前日期
          var currentDate = new Date(str);
          // 获取当前月份的第一天
          var firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
          let firstDay = this.formatDate(firstDayOfMonth) 
          // 获取当前月份的最后一天
          var lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
          let lastDay = this.formatDate(lastDayOfMonth) 
          return [firstDay,lastDay]
        },
        formatDate(dateString){
          const date = new Date(dateString); // 创建日期对象
          const year = date.getFullYear(); // 获取年份
          const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份（注意：月份从0开始）
          const day = String(date.getDate()).padStart(2, '0'); // 获取日期
          return `${year}-${month}-${day}`; // 组合成所需格式
        },
        formatWeekday(dateString){
          const date = new Date(dateString); // 创建日期对象
          const year = date.getFullYear(); // 获取年份
          const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份（注意：月份从0开始）
          const day = String(date.getDate()).padStart(2, '0'); // 获取日期
          const weekdays = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; // 星期几数组
          const weekday = weekdays[date.getDay()]; // 获取星期几

          return `${year}-${month}-${day} ${weekday}`; // 组合成所需格式
        },
        //部门选择
        getDeptList(){
          listDept().then(response => {
              this.deptOptions = this.handleTree(response.data, "id");
          });
        },
        /** 转换部门数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.id,
                label: node.orgName,
                children: node.children
            };
        },
        //当日考勤统计
        async getAttDayReportDetailsList(data) {
          let res= await getAttDayReportDetailsList(data).then(response => {
            return response
          });
          return res
        },
        //未处理已处理数据
        async getDetailExceptionAll(data) {
          var nowDate = new Date();
          var date = {
            year: nowDate.getFullYear(),
            month: nowDate.getMonth() + 1,
            day: nowDate.getDate()
          };
          const dayDate = date.year + "-" + (date.month >= 10 ? date.month : "0" + date.month);
          data.month=dayDate.toString()
          data.name=data.userName;
          data.attCurrentMonth=data.month;
          let res= await getDetailExceptionAll(data).then(response => {
            return response
          });
          return res
        },
        //当月异常数据
        async getDetailsList(data) {
          let dateRange=this.getMonthDate()
          console.log(dateRange)
          if(dateRange&&dateRange.length>0){
              data.startDate=dateRange[0]
              data.endDate=dateRange[1]
            }else{
                data.startDate=undefined
                data.endDate=undefined
            }
          let res= await getDetailsList(data).then(response => {
            return response
          });
          return res
        },
        
        setOpen(v) {
            console.log(v)
            this.queryParams = {
              pageNum: 1,
              pageSize: 10,
            }
            this.open = v.open
            this.status = v.param.order
            switch (v.param.order) {
                case 1:
                    this.title="打卡记录"
                    this.columnList = [
                        { t_props: 'userName', t_label: '姓名' },
                        { t_props: 'orgName', t_label: '所属部门' },
                        { t_props: 'toWorkAttCurrentTime', t_label: '上班打卡时间' },
                        { t_props: 'toWorkAttStatus', t_label: '上班状态', t_slot: 'attStatus'},
                        { t_props: 'toWorkAttAddress', t_label: '打卡地址' },
                        { t_props: 'offWorkAttCurrentTime', t_label: '下班打卡时间' },
                        { t_props: 'offWorkAttStatus', t_label: '下班状态', t_slot: 'attStatus'},
                        { t_props: 'offWorkAttAddress', t_label: '打卡地址' },
                    ]
                    this.currentFunc = this.getAttDayReportDetailsList
                    this.getTableList(this.getAttDayReportDetailsList,v.param)
                    break;
                case 2:
                    this.title="迟到记录"
                    this.columnList = [
                        { t_props: 'userName', t_label: '姓名' },
                        { t_props: 'orgName', t_label: '所属部门' },
                        { t_props: 'toWorkAttCurrentTime', t_label: '上班打卡时间' },
                        { t_props: 'toWorkAttStatus', t_label: '上班状态', t_slot: 'attStatus'},
                        { t_props: 'toWorkAttAddress', t_label: '打卡地址' },
                        { t_props: 'offWorkAttCurrentTime', t_label: '下班打卡时间' },
                        { t_props: 'offWorkAttStatus', t_label: '下班状态', t_slot: 'attStatus'},
                        { t_props: 'offWorkAttAddress', t_label: '打卡地址' },
                    ]
                    this.currentFunc = this.getAttDayReportDetailsList
                    this.getTableList(this.getAttDayReportDetailsList,v.param)
                    break;
                case 3:
                    this.title="旷工记录"
                    this.columnList = [
                        { t_props: 'userName', t_label: '姓名' },
                        { t_props: 'orgName', t_label: '所属部门' },
                        { t_props: 'toWorkAttCurrentTime', t_label: '上班打卡时间' },
                        { t_props: 'toWorkAttStatus', t_label: '上班状态', t_slot: 'attStatus'},
                        { t_props: 'toWorkAttAddress', t_label: '打卡地址' },
                        { t_props: 'offWorkAttCurrentTime', t_label: '下班打卡时间' },
                        { t_props: 'offWorkAttStatus', t_label: '下班状态', t_slot: 'attStatus'},
                        { t_props: 'offWorkAttAddress', t_label: '打卡地址' },
                    ]
                    this.currentFunc = this.getAttDayReportDetailsList
                    this.getTableList(this.getAttDayReportDetailsList,v.param)
                    break;
                case 4:
                    this.title="早退记录"
                    this.columnList = [
                        { t_props: 'userName', t_label: '姓名' },
                        { t_props: 'orgName', t_label: '所属部门' },
                        { t_props: 'toWorkAttCurrentTime', t_label: '上班打卡时间' },
                        { t_props: 'toWorkAttStatus', t_label: '上班状态', t_slot: 'attStatus'},
                        { t_props: 'toWorkAttAddress', t_label: '打卡地址' },
                        { t_props: 'offWorkAttCurrentTime', t_label: '下班打卡时间' },
                        { t_props: 'offWorkAttStatus', t_label: '下班状态', t_slot: 'attStatus'},
                        { t_props: 'offWorkAttAddress', t_label: '打卡地址' },
                    ]
                    this.currentFunc = this.getAttDayReportDetailsList
                    this.getTableList(this.getAttDayReportDetailsList,v.param)
                    break;
                case 6:
                    this.title="请假记录"
                    this.columnList = [
                        { t_props: 'userName', t_label: '姓名' },
                        { t_props: 'orgName', t_label: '所属部门' },
                        { t_props: 'toWorkAttCurrentTime', t_label: '上班打卡时间' },
                        { t_props: 'toWorkAttStatus', t_label: '上班状态', t_slot: 'attStatus'},
                        { t_props: 'toWorkAttAddress', t_label: '打卡地址' },
                        { t_props: 'offWorkAttCurrentTime', t_label: '下班打卡时间' },
                        { t_props: 'offWorkAttStatus', t_label: '下班状态', t_slot: 'attStatus'},
                        { t_props: 'offWorkAttAddress', t_label: '打卡地址' },
                    ]
                    this.currentFunc = this.getAttDayReportDetailsList
                    this.getTableList(this.getAttDayReportDetailsList,v.param)
                    break;
                case 8:
                    this.title="出入异常记录"
                    this.columnList = [
                        { t_props: 'userName', t_label: '姓名' },
                        { t_props: 'orgName', t_label: '所属部门' },
                        { t_props: 'toWorkAttCurrentTime', t_label: '上班打卡时间' },
                        { t_props: 'toWorkAttStatus', t_label: '上班状态', t_slot: 'attStatus'},
                        { t_props: 'toWorkAttAddress', t_label: '打卡地址' },
                        { t_props: 'offWorkAttCurrentTime', t_label: '下班打卡时间' },
                        { t_props: 'offWorkAttStatus', t_label: '下班状态', t_slot: 'attStatus'},
                        { t_props: 'offWorkAttAddress', t_label: '打卡地址' },
                    ]
                    this.currentFunc = this.getAttDayReportDetailsList
                    this.getTableList(this.getAttDayReportDetailsList,v.param)
                    break;
                case 9:
                    this.title="打卡地异常记录"
                    this.columnList = [
                        { t_props: 'userName', t_label: '姓名' },
                        { t_props: 'orgName', t_label: '所属部门' },
                        { t_props: 'toWorkAttCurrentTime', t_label: '上班打卡时间' },
                        { t_props: 'toWorkAttStatus', t_label: '上班状态', t_slot: 'attStatus'},
                        { t_props: 'toWorkAttAddress', t_label: '打卡地址' },
                        { t_props: 'offWorkAttCurrentTime', t_label: '下班打卡时间' },
                        { t_props: 'offWorkAttStatus', t_label: '下班状态', t_slot: 'attStatus'},
                        { t_props: 'offWorkAttAddress', t_label: '打卡地址' },
                    ]
                    this.currentFunc = this.getAttDayReportDetailsList
                    this.getTableList(this.getAttDayReportDetailsList,v.param)
                    break;
                case 10:
                    this.title="已处理异常数据"
                    this.columnList = [
                        { t_props: 'name', t_label: '姓名' },
                        { t_props: 'orgName', t_label: '所属部门' },
                        { t_props: 'leaveType', t_label: '请假类型' },
                        { t_props: 'leaveStartDate', t_label: '请假开始时间' },
                        { t_props: 'leaveEndDate', t_label: '请假结束时间'},
                        { t_props: 'leaveDuration', t_label: '请假时长(天)' },
                        { t_props: 'examineStatus', t_label: '审批状态',t_slot: 'examineStatus' },
                    ]
                    this.currentFunc = this.getDetailExceptionAll
                    this.getTableList(this.getDetailExceptionAll,v.param)
                    break;
                case 11:
                    this.title="未处理异常数据"
                    this.columnList = [
                            { t_props: 'name', t_label: '姓名' },
                            { t_props: 'orgName', t_label: '所属部门' },
                            { t_props: 'leaveType', t_label: '请假类型' },
                            { t_props: 'leaveStartDate', t_label: '请假开始时间' },
                            { t_props: 'leaveEndDate', t_label: '请假结束时间'},
                            { t_props: 'leaveDuration', t_label: '请假时长(天)' },
                            { t_props: 'examineStatus', t_label: '审批状态',t_slot: 'examineStatus' },
                    ]
                    this.currentFunc = this.getDetailExceptionAll
                    this.getTableList(this.getDetailExceptionAll,v.param)
                break;
                case 12:
                    this.title="当月异常统计"
                    this.columnList = [
                        { t_props: 'userName', t_label: '姓名' },
                        { t_props: 'orgName', t_label: '所属部门' },
                        { t_props: 'attCurrentDay', t_label: '考勤日期', t_slot: 'attCurrentDay'},
                        { t_props: 'toWorkAttCurrentTime', t_label: '上班打卡时间' },
                        { t_props: 'toWorkAttStatus', t_label: '上班状态', t_slot: 'attStatus'},
                        { t_props: 'toWorkAttAddress', t_label: '打卡地址' },
                        { t_props: 'offWorkAttCurrentTime', t_label: '下班打卡时间' },
                        { t_props: 'offWorkAttStatus', t_label: '下班状态', t_slot: 'attStatus'},
                        { t_props: 'offWorkAttAddress', t_label: '打卡地址' },
                    ]
                    this.getMonth();
                    this.currentFunc = this.getDetailsList
                    this.getTableList(this.getDetailsList,v.param)
                    break;
                
            }
        },
        async getTableList(func, param) {
            if(param) {
              Object.assign(this.queryParams, param)
            }
            let res = await func(this.queryParams)
            console.log(res)
            if(res.data) {
              this.tableList = res.data.rows
              this.total = res.data.total
            } else {
              this.total = res.total
              this.tableList = res.rows
            } 
        },
        closeDialog() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.content {
    box-sizing: border-box;
    padding: 20px;
}
</style>
