<template>
    <div class="attendanceRecordsList">
        <div class="optBody">
            <div class="optItem">
                <span class="itemName" style="margin-right:15px">部门：</span>
                <a-select
                    show-search
                    v-model="departId"
                    placeholder="请选择部门"
                    style="width:320px"
                    :show-arrow="false"
                    option-filter-prop="children"
                    :filter-option="filterOption"
                    @change="departChange"
                >
                    <a-select-option v-for="item in departList" :key="item.value">
                    {{ item.text }}
                    </a-select-option>
                </a-select>
                <!-- <a-input placeholder="请输入部门名称" v-model="departName"></a-input> -->
            </div>
            <div class="optItem">
                <span class="itemName" style="margin-right:15px">姓名：</span>
               <a-input placeholder="请输入姓名" style="width:320px" v-model="userName"></a-input>
            </div>
            <div class="optItem">
                <span class="itemName" style="margin-right:15px">时间：</span>
                <a-range-picker
                        :disabled-date="disabledDate"
                        format="YYYY-MM-DD"
                        style="width: 250px;"
                        @change="dateValueChange"
                        v-model="dateValue"
                />
            </div>

            <a-button type='primary' @click="search" style="float:right" :loading='btnLoading'>查询</a-button>
           
        </div>
        <div class="tabBody">
            <a-tabs v-model="tabKey" @change="tabCHange">
                <a-tab-pane :key="1" tab="详细数据"></a-tab-pane>
                <a-tab-pane :key="2" tab="加班考勤"></a-tab-pane>
                <a-tab-pane :key="3" tab="异常考勤"></a-tab-pane>
                <a-button slot="tabBarExtraContent" @click="exportExcel"  >导出数据</a-button>
            </a-tabs>
        </div>
        <div class="tableBody">
            <a-table
                size="middle"
                :columns="columns"
                :dataSource="data"
                bordered
                id="outTable"
                :pagination="ipagination"
                :scroll="{ x: scrollX }"
                :loading="loading"
                @change="sort"
                style="word-break: break-all;"
                >
               <span slot="exceptionType" slot-scope="text">
                   {{text?text:'正常'}}
               </span>
               <span slot="status" slot-scope="text">
                   {{text?text:'-'}}
               </span>
               <span slot="type" slot-scope="text">
                   {{text?text:'-'}}
               </span>
               <span slot="stateDuration" slot-scope="text">
                   {{text?text:'-'}}
               </span>
               <span slot="overtime" slot-scope="text">
                   {{text?text:'-'}}
               </span>

            </a-table>
        </div>
    </div>
</template>

<script>
import moment from 'moment';
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
let OverTimeColumns=[
    {
        title: '员工名称',
        dataIndex: 'userName',
        align: 'center',       
        key: 'userName',
        width:150,
        scopedSlots: { customRender: 'userName' }
    },
     {
        title: '员工ID',
        dataIndex: 'userId',
        align: 'center',
        width:300,
        key: 'userId',
        scopedSlots: { customRender: 'userId' }
    },
    {
        title: '部门名称',
        dataIndex: 'departName',
        align: 'center',      
        key: 'departName',
        scopedSlots: { customRender: 'departName' }
    },
    {
        title: '部门ID',
        dataIndex: 'departId',
        align: 'center',      
        key: 'departId',
        scopedSlots: { customRender: 'departId' }
    },
    {
        title: '加班日期',
        dataIndex: 'checkinDate',
        align: 'center',      
        key: 'checkinDate',
        scopedSlots: { customRender: 'checkinDate' }
    },
    {
        title: '加班时长',
        dataIndex: 'overtime',
        align: 'center',      
        key: 'overtime',
        scopedSlots: { customRender: 'overtime' }
    },
]
let allDataColumns=[
    {
        title: '员工名称',
        dataIndex: 'userName',
        align: 'center',
        width:150,
        key: 'userName',
        scopedSlots: { customRender: 'userName' }
    },
    {
        title: '员工ID',
        dataIndex: 'userId',
        align: 'center',
        width:300,
        key: 'userId',
        scopedSlots: { customRender: 'userId' }
    },
    {
        title: '部门名称',
        dataIndex: 'departName',
        align: 'center',      
        key: 'departName',
        scopedSlots: { customRender: 'departName' }
    },
    {
        title: '部门ID',
        dataIndex: 'departId',
        align: 'center',      
        key: 'departId',
        scopedSlots: { customRender: 'departId' }
    },
    {
        title: '考勤时间',
        dataIndex: 'checkinTime',
        align: 'center',      
        key: 'checkinTime',
        scopedSlots: { customRender: 'checkinTime' }
    },
    {
        title: '考勤类型',
        dataIndex: 'checkinType',
        align: 'center',      
        key: 'checkinType',
        scopedSlots: { customRender: 'checkinType' }
    },
    {
        title: '异常状态',
        dataIndex: 'exceptionType',
        align: 'center',      
        key: 'exceptionType',
        scopedSlots: { customRender: 'exceptionType' }
    },
    {
        title: '加班时长',
        dataIndex: 'overtime',
        align: 'center',      
        key: 'overtime',
        scopedSlots: { customRender: 'overtime' }
    },   
]
let abnormalColumns=[
    {
        title: '员工名称',
        dataIndex: 'userName',
        align: 'center',
        width:150,
        key: 'userName',
        scopedSlots: { customRender: 'userName' }
    },
     {
        title: '员工ID',
        dataIndex: 'userId',
        align: 'center',
        width:300,
        key: 'userId',
        scopedSlots: { customRender: 'userId' }
    },
    {
        title: '部门名称',
        dataIndex: 'departName',
        align: 'center',      
        key: 'departName',
        scopedSlots: { customRender: 'departName' }
    },
    {
        title: '部门ID',
        dataIndex: 'departId',
        align: 'center',      
        key: 'departId',
        scopedSlots: { customRender: 'departId' }
    },
    {
        title: '考勤日期',
        dataIndex: 'checkinDate',
        align: 'center',      
        key: 'checkinDate',
        scopedSlots: { customRender: 'checkinDate' }
    },
    {
        title: '考勤类型',
        dataIndex: 'checkinType',
        align: 'center',      
        key: 'checkinType',
        scopedSlots: { customRender: 'checkinType' }
    },
    {
        title: '异常状态',
        dataIndex: 'exceptionType',
        align: 'center',      
        key: 'exceptionType',
        scopedSlots: { customRender: 'exceptionType' }
    },
    {
        title: '考勤时间',
        dataIndex: 'checkinTime',
        align: 'center',      
        key: 'checkinTime',
        scopedSlots: { customRender: 'checkinTime' }
    },
    {
        title: '审核状态',
        dataIndex: 'type',
        align: 'center',      
        key: 'type',
        scopedSlots: { customRender: 'type' }
    },
    {
        title: '状态时长',
        dataIndex: 'stateDuration',
        align: 'center',      
        key: 'stateDuration',
        scopedSlots: { customRender: 'stateDuration' }
    },
    {
        title: '审批状态',
        dataIndex: 'status',
        align: 'center',      
        key: 'status',
        scopedSlots: { customRender: 'status' }
    },
]
export default {
    data() {
        return {
            ipagination: {
                current: 1,
                pageSize: 10,
                //   pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger:true,
                pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.ipagination.current = current;
                    this.ipagination.pageSize= pageSize;
                }
            },
            userName:undefined,
            departName:undefined,
            departId:undefined,
            dateValue:[moment(),moment()],
            tabKey:1,
            btnLoading:false,

            columns:[...allDataColumns],
            OverTimeColumns,
            abnormalColumns,
            allDataColumns,
            data:[],
            scrollX:0,
            loading:false,

            url:{
                OverTime:'/oa/wechatNoList/selectOverTimePage',
                abnormal:'/oa/wechatNoList/selectNoListPage',
                allData:'/oa/wechatCheckinData/queryPageList'
            },
            departList:[],
        }
    },
    methods: {
        moment,
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        },
        departChange(value) {
            // console.log(`selected ${value}`);
            // console.log(this.departId)
            this.userName=undefined;
        },
        dateValueChange(date,dateString){

        },
        disabledDate(current) {
        // console.log(current)
          return current && current > moment() 
        },

        tabCHange(key){
            this.btnLoading=false;
            this.loading=false;
            this.data=[];
            this.ipagination.current=1
            switch (this.tabKey){
                case 1:
                    this.columns=[...allDataColumns]
                    this.attendanceHttp(this.url.allData)
                    break;
                case 2:
                    this.columns=[...OverTimeColumns]
                    this.attendanceHttp(this.url.OverTime)
                    break;
                case 3:
                    this.columns=[...abnormalColumns]
                    this.attendanceHttp(this.url.abnormal)
                    break;
            }
        },
        sort(pagination, filters, sorter, { currentDataSource }){
            // console.log(pagination, filters, sorter)          
            this.ipagination.current=pagination.current
            this.ipagination.pageSize=pagination.pageSize
            this.search()
        },
        search(){
            this.btnLoading=true;
            this.loading=true;
            this.data=[];
            switch (this.tabKey){
                case 1:
                    this.columns=[...allDataColumns]
                    this.attendanceHttp(this.url.allData)
                    break;
                case 2:
                    this.columns=[...OverTimeColumns]
                    this.attendanceHttp(this.url.OverTime)
                    break;
                case 3:
                    this.columns=[...abnormalColumns]
                    this.attendanceHttp(this.url.abnormal)
                    break;
            }
            

        },
        // 考勤数据查询
        attendanceHttp(url){
            if(this.dateValue.length>0){
                this.loading=true;
                postAction(url,{
                    userName:this.userName,
                    departId:this.departId,
                    startTime:this.dateValue[0].format('YYYY-MM-DD'),
                    stopTime:this.dateValue[1].format('YYYY-MM-DD'),
                    pageNo:this.ipagination.current,
                    pageSize:this.ipagination.pageSize
                }).then(res=>{
                    console.log(res)
                    this.btnLoading=false;
                    this.loading=false;
                    if(res.success){
                        this.data=[];
                        if(res.result){
                            this.data=res.result.list
                        }
                        this.ipagination.total=res.result.total
                    }
                })
            }else{
                this.btnLoading=false;
                this.loading=false;
                this.$message.error('请选择具体的时间')
            }
            
        },
       
        //获取部门数据
        departListHttp(){
            postAction('/oa/wechatDepartment/queryList',{
            }).then(res=>{
                console.log(res)
                if(res.success){
                    this.departList=res.result.map(item=>{
                        return {
                            value:item.departId,
                            text:item.departName
                        }
                    })
                }
            })
        },

         //导出报表
        exportExcel() {          
            downFile('/oa/wechatNoList/excel', {
                userName:this.userName,
                departId:this.departId,
                startTime:this.dateValue[0].format('YYYY-MM-DD'),
                stopTime:this.dateValue[1].format('YYYY-MM-DD'),
            }).then(res => {
                let blob = new Blob([res], {
                    type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                })
                let downloadElement = document.createElement('a')
                let href = window.URL.createObjectURL(blob) //创建下载的链接
                downloadElement.href = href
                downloadElement.download = this.dateValue[0].format('YYYY-MM-DD')+'-'+this.dateValue[1].format('YYYY-MM-DD') + '考情数据.xlsx' //下载后文件名
                document.body.appendChild(downloadElement)
                downloadElement.click() //点击下载
                document.body.removeChild(downloadElement) //下载完成移除元素
                window.URL.revokeObjectURL(href) //释放掉blob对象
            })
        },
    },

    mounted() {
        this.departListHttp()
    },
}
</script>

<style lang="scss" scoped>
.attendanceRecordsList{
    background: white;
    padding: 20px 15px;
    .optBody{
        margin-bottom: 20px;
        overflow: hidden;
        .optItem{
            float: left;
            margin-right: 35px;
            margin-bottom: 15px;
        }
    }
}
</style>