<template>
    <div class="app-container">
        <!-- 查询条件 -->
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="50px">
            <el-form-item label="单位" prop="companyId">
                <el-select v-model="queryParams.companyId" filterable placeholder="请选择">
                    <el-option v-for="item in companyList" :key="item.id" :label="item.companyName" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <!--
            <el-form-item label="人员" prop="personId">
                <el-select v-model="queryParams.personId" filterable placeholder="请选择" style="width: 260px;">
                    <el-option v-for="item in userBList" :key="item.userId" :label="item.nickName" :value="item.userId">
                    </el-option>
                </el-select>
            </el-form-item>
            -->
            <el-form-item label="合同" prop="contractId">
                <el-select v-model="queryParams.contractId" filterable placeholder="请选择">
                    <el-option v-for="item in contractList" :key="item.id" :label="item.contractName" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="日期" prop="dateValue">
                <el-date-picker v-model="dateValue" type="daterange" align="right" unlink-panels range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 顶部数据 -->
        <el-card>
            <div class="flexbox">
                <div class="flexitem" v-for="item in topShowList" :class="item.className">
                    <div class="itemname">{{ item.name }}</div>
                    <div class="itemvalue">{{ item.value }}<span class="itemunit">{{ item.unit }}</span></div>
                </div>
                <div class="el-icon-question cus" v-if="$store.state.user.showRules"
                    style="color: #1890ff; font-size: 22px;" @click="rulsDetail = true">
                </div>
            </div>
        </el-card>
        <!-- echarts图标 -->
        <el-row :gutter="10" class="spacing-top-10">
            <!--左侧tree-->
            <el-col :span="14">
                <el-card>
                    <div class="chartsbox1" ref="charts1"></div>
                </el-card>
            </el-col>
            <el-col :span="10">
                <el-card>
                    <div class="chartsbox1" ref="charts2"></div>
                </el-card>
            </el-col>
        </el-row>
        <div class="spacing-top-10">
            <el-card>
                <div class="chartsbox1" ref="charts3"></div>
            </el-card>
        </div>
        <div class="spacing-top-10">
            <el-card>
                <div class="flex flex-between">
                    <el-tabs v-model="activeName" type="card">
                        <el-tab-pane label="实际考勤-合同" name="contract1"></el-tab-pane>
                        <el-tab-pane label="实际考勤-单位" name="company1"></el-tab-pane>
                        <el-tab-pane label="有效加班-合同" name="contract3"></el-tab-pane>
                        <el-tab-pane label="有效加班-单位" name="company3"></el-tab-pane>
                        <!-- <el-tab-pane label="不含请假-单位" name="company2"></el-tab-pane> -->
                        <!-- <el-tab-pane label="不含请假-合同" name="contract2"></el-tab-pane> -->
                    </el-tabs>
                    <div>
                        <el-button type="warning" plain icon="el-icon-download" size="mini" class="spacing-right-5"
                            @click="handleExport">导出</el-button>
                        <div class="el-icon-question cus" v-if="$store.state.user.showRules"
                            style="color: #1890ff; font-size: 22px;" @click="bottomRulesDetail = true">
                        </div>
                    </div>

                </div>
                <el-table v-loading="loading"
                    :data="activeName == 'company1' || activeName == 'company2' || activeName == 'company3' ? attendanceList1 : attendanceList2">
                    <el-table-column type="index" width="50" key="1" />
                    <el-table-column key="2" label="单位" prop="companyShortName" />
                    <el-table-column key="3" label="合同" prop="contractShortName"
                        v-if="activeName == 'contract1' || activeName == 'contract2' || activeName == 'contract3'"
                        min-width="200" />
                    <!-- <el-table-column key="4"
                        :label="activeName == 'company1' || activeName == 'company2' || activeName == 'company3' ? '单位人数' : '合同人数'"
                        prop="personNum" align="right" /> -->
                    <el-table-column key="4" label="合同人数" prop="personNum" align="right" />
                    <el-table-column key="8" label="夜班出勤数" prop="nmScore" align="right"
                        v-if="activeName == 'company1' || activeName == 'contract1'" />
                    <el-table-column key="6" label="上午班出勤数" prop="amScore" align="right"
                        v-if="activeName == 'company1' || activeName == 'contract1'" />
                    <el-table-column key="7" label="下午班出勤数" prop="pmScore" align="right"
                        v-if="activeName == 'company1' || activeName == 'contract1'" />
                    <el-table-column key="12" label="夜班出勤数" prop="nmScore2" align="right"
                        v-if="activeName == 'company2' || activeName == 'contract2'" />
                    <el-table-column key="10" label="上午班出勤数" prop="amScore2" align="right"
                        v-if="activeName == 'company2' || activeName == 'contract2'" />
                    <el-table-column key="11" label="下午班出勤数" prop="pmScore2" align="right"
                        v-if="activeName == 'company2' || activeName == 'contract2'" />
                    <el-table-column key="16" label="夜班出勤数" prop="nmScore3" align="right"
                        v-if="activeName == 'company3' || activeName == 'contract3'" />
                    <el-table-column key="14" label="上午班出勤数" prop="amScore3" align="right"
                        v-if="activeName == 'company3' || activeName == 'contract3'" />
                    <el-table-column key="15" label="下午班出勤数" prop="pmScore3" align="right"
                        v-if="activeName == 'company3' || activeName == 'contract3'" />
                    <el-table-column key="5" label="应出勤数" prop="shoudScore" align="right" />
                    <el-table-column key="13" label="实际出勤数" prop="sumScore2" align="right"
                        v-if="activeName == 'company2' || activeName == 'contract2'" />
                    <el-table-column key="9" label="实际出勤数" prop="sumScore" align="right"
                        v-if="activeName == 'company1' || activeName == 'contract1'" />
                    <el-table-column key="17" label="实际出勤数" prop="sumScore3" align="right"
                        v-if="activeName == 'company3' || activeName == 'contract3'" />
                    <el-table-column key="18" label="迟到次数" prop="lateTimes" align="right" />
                    <el-table-column key="19" label="早退次数" prop="earlyTimes" align="right" />
                    <el-table-column key="20" label="请假数" prop="leaveTimes" align="right" />
                    <el-table-column key="21" label="出勤率" prop="percent" align="right"
                        v-if="activeName == 'company1' || activeName == 'contract1'">
                        <template slot-scope="scope">
                            {{ scope.row.percent }}%
                        </template>
                    </el-table-column>
                    <el-table-column key="22" label="出勤率" prop="percent" align="right"
                        v-if="activeName == 'company2' || activeName == 'contract2'">
                        <template slot-scope="scope">
                            {{ scope.row.percent2 }}%
                        </template>
                    </el-table-column>
                    <el-table-column key="23" label="出勤率" prop="percent" align="right"
                        v-if="activeName == 'company3' || activeName == 'contract3'">
                        <template slot-scope="scope">
                            {{ scope.row.percent3 }}%
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
            </el-card>
        </div>
        <el-dialog title="统计规则" :visible.sync="rulsDetail" width="1000px">
            <div v-html="checkRule"></div>
        </el-dialog>

        <el-dialog title="统计规则" :visible.sync="bottomRulesDetail" width="1000px">
            <div v-html="bottomRule"></div>
        </el-dialog>
    </div>
</template>

<script>
import { getTopShowList, getBarList, getPieList, getContractBarList, getCompanyList, getContractList, checkRule } from "@/api/view/vcheckon";
import { listCompany } from "@/api/resource/company";
import { listContract, getUserList } from "@/api/resource/contract";
import { checkCount } from "@/api/view/vcompany";
import store from "@/store";
import * as echarts from "echarts";
export default {
    name: "Vcheckon",
    data() {
        return {
            loading: false,
            total: 0,
            // 单位列表
            companyList: [],
            // 合同列表
            contractList: [],
            //日期
            dateValue: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                companyId: '',//单位
                personId: '',//人员
                contractId: '',//合同
            },
            // 日期快捷键
            pickerOptions: {
                shortcuts: [
                    {
                        text: '本周',
                        onClick(picker) {
                            const monday = new Date()
                            const now = new Date()
                            const todayOfWeek = now.getDay() || 7
                            monday.setTime(now.getTime() - (todayOfWeek - 1) * 24 * 60 * 60 * 1000)
                            picker.$emit('pick', [monday, now])
                        }
                    },
                    {
                        text: '上周',
                        onClick(picker) {
                            const monday = new Date()
                            const sunday = new Date()
                            const now = new Date()
                            const todayOfWeek = now.getDay() || 7
                            sunday.setTime(now.getTime() - todayOfWeek * 24 * 60 * 60 * 1000)
                            monday.setTime(sunday.getTime() - 6 * 24 * 60 * 60 * 1000)
                            picker.$emit('pick', [monday, sunday])
                        }
                    },
                    {
                        text: '本月',
                        onClick(picker) {
                            const firstDay = new Date()
                            const now = new Date()
                            firstDay.setDate(1)
                            picker.$emit('pick', [firstDay, now])
                        }
                    },
                    {
                        text: '上月',
                        onClick(picker) {
                            const lastDay = new Date()
                            lastDay.setDate(0)
                            const firstDay = new Date(lastDay)
                            firstDay.setDate(1)
                            picker.$emit('pick', [firstDay, lastDay])
                        }
                    },]
            },
            // top数据
            topShowList: [],
            charts1: null,
            charts2: null,
            charts3: null,
            // 图表
            barList: {
                xAxis: [],
                yData: []
            },
            pieList: [],
            contractBarList: {
                xAxis: [],
                yData: []
            },
            // 按单位分组表格
            attendanceList1: [],
            // 按合同分组表格
            attendanceList2: [],
            userBList: [],
            // tab标签
            activeName: 'company1',
            rulsDetail: false,
            checkRule: '',
            bottomRulesDetail: false,
            bottomRule: '',
        }
    },
    created() {
        // 获取当月1日到当天
        this.getInitializeDate();
        // 人员列表
        this.getUsers();
        // 单位列表
        this.getCompanyList();
        // 合同列表
        this.getcontractList();
        // top数据、表格数据获取
        this.getListDatas();
        this.getCheckCount();
        this.getcheckRule();
    },
    mounted() {
        // 图表数据获取
        this.getChartData();
    },
    methods: {
        getCheckCount() {
            checkCount().then((res) => {
                this.checkRule = res.data.remark;
            })
        },
        getcheckRule() {
            checkRule().then((res) => {
                this.bottomRule = res.data.remark;
            })
        },
        getInitializeDate() {
            let date = new Date()
            let year = date.getFullYear().toString()
            let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()
            let day = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()
            let start = year + '-' + month + '-01'
            let end = year + '-' + month + '-' + day
            this.dateValue = [start, end]
        },
        // 人员列表
        getUsers() {
            getUserList({ userType: 2 }).then((res) => {
                this.userBList = res.data;
            })
        },
        // 单位列表
        getCompanyList() {
            listCompany({ pageSize: 999 }).then(response => {
                this.companyList = response.rows;
            });
        },
        // 合同列表
        getcontractList() {
            listContract({ pageSize: 999,status:'1' }).then(response => {
                this.contractList = response.rows;
            })
        },
        // top数据、echarts数据
        getListDatas() {
            let visit = JSON.parse(JSON.stringify(this.queryParams));
            visit.beginTime = this.dateValue.length == 0 ? '' : this.dateValue[0]
            visit.endTime = this.dateValue.length == 0 ? '' : this.dateValue[1]
            delete visit.params;
            getTopShowList(visit).then(response => {
                this.topShowList = response.data.topShowList;
            })
            this.getList();
        },
        // 表格数据
        getList() {
            let visit = JSON.parse(JSON.stringify(this.queryParams));
            visit.beginTime = this.dateValue.length == 0 ? '' : this.dateValue[0]
            visit.endTime = this.dateValue.length == 0 ? '' : this.dateValue[1]
            delete visit.params;
            getCompanyList(visit).then(response => {
                this.attendanceList1 = response.data;
                this.loading = false;
            })
            getContractList(visit).then(response => {
                this.attendanceList2 = response.data;
                this.loading = false;
            })
        },
        getChartData() {
            let visit = JSON.parse(JSON.stringify(this.queryParams));
            visit.beginTime = this.dateValue.length == 0 ? '' : this.dateValue[0]
            visit.endTime = this.dateValue.length == 0 ? '' : this.dateValue[1]
            delete visit.params;
            getBarList(visit).then(response => {
                this.barList.xAxis = response.data.xAxis;
                this.barList.yData = response.data.yData;
                this.drawBar();
            })
            getPieList(visit).then(response => {
                this.pieList = response.data;
                this.drawPie();
            })
            getContractBarList(visit).then(response => {
                this.contractBarList.xAxis = response.data.xAxis;
                this.contractBarList.yData = response.data.yData;
                this.drawBarContract();
            })
        },
        // 搜索
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getListDatas();
            this.getChartData();
        },
        // 重置
        resetQuery() {
            this.resetForm("queryForm");
            this.dateValue = [];
            this.getInitializeDate();
            this.handleQuery();
        },
        // 柱状图
        drawBar() {
            const barChart = echarts.init(this.$refs.charts1)
            let colorArry = [
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0, 192, 240, 1)' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: 'rgba(101, 105, 255, 1)' // 100% 处的颜色
                }], false),
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(27, 223, 202, 1)' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: 'rgba(8, 222, 149, 1)' // 100% 处的颜色
                }], false)
            ]
            let option = {
                color: colorArry,
                title: {
                    text: '单位出勤率',
                    left: 'center',
                },
                grid: {
                    left: '3%', //默认10%
                    right: '3%', //默认10%
                    bottom: '4%', //默认60
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        let template = ''
                        params.forEach((item, index) => {
                            template = item.marker + item.name + " : " + item.value + '%' + "<br>"
                        })
                        return template;
                    }
                },
                xAxis: {
                    type: 'category',
                    data: this.barList.xAxis,
                    axisLabel: {
                        interval: 0,
                        rotate: 45,
                        formatter: function (value) {
                            if (value.length > 5) {
                                return value.slice(0, 5) + '...'
                            } else {
                                return value
                            }
                        },
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: { formatter: `{value} %` }
                },
                series: [
                    {
                        data: this.barList.yData,
                        type: 'bar',
                        barWidth: 20
                    }
                ]
            };
            barChart.setOption(option);
        },
        // 饼图
        drawPie() {
            const pieChart = echarts.init(this.$refs.charts2);
            let option = {
                title: {
                    text: '夜班占比',
                    left: 'center'
                },
                grid: {
                    left: '3%', //默认10%
                    right: '3%', //默认10%
                    bottom: '4%', //默认60
                    containLabel: true
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        var res;
                        res = '<div>' + params.data.name + '：' + params.data.value + '%</div>'
                        return res
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        type: 'pie',
                        radius: '50%',
                        label: {
                            formatter: function (data) {
                                return data.name + data.value
                            }
                        },
                        data: this.pieList,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            pieChart.setOption(option);
        },
        drawBarContract() {
            const barChartContract = echarts.init(this.$refs.charts3)
            let colorArry = [
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0, 192, 240, 1)' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: 'rgba(101, 105, 255, 1)' // 100% 处的颜色
                }], false),
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(27, 223, 202, 1)' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: 'rgba(8, 222, 149, 1)' // 100% 处的颜色
                }], false)
            ]
            let option = {
                color: colorArry,
                title: {
                    text: '合同出勤率',
                    left: 'center',
                },
                grid: {
                    left: '3%', //默认10%
                    right: '3%', //默认10%
                    bottom: '4%', //默认60
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        let template = ''
                        params.forEach((item, index) => {
                            template = item.marker + item.name + " : " + item.value + '%' + "<br>"
                        })
                        return template;
                    }
                },
                xAxis: {
                    type: 'category',
                    data: this.contractBarList.xAxis,
                    axisLabel: {
                        interval: 0,
                        rotate: 45,
                        formatter: function (value) {
                            if (value.length > 3) {
                                return value.slice(0, 3) + '...'
                            } else {
                                return value
                            }
                        },
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: { formatter: `{value} %` },
                },
                series: [
                    {
                        data: this.contractBarList.yData,
                        type: 'bar',
                        barWidth: 15
                    }
                ]
            };
            barChartContract.setOption(option);
        },
        // 导出
        handleExport() {
            this.download('view/vcheckon/export?companyId=' + this.queryParams.companyId + '&personId=' + this.queryParams.personId + '&contractId=' + this.queryParams.contractId + '&beginTime=' + this.dateValue[0] + '&endTime=' + this.dateValue[1], {}, `考勤信息-${new Date().getTime()}.xlsx`)
        },
    },
}
</script>
<style scoped>
.flexbox {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.flexitem {
    width: 13%;
    height: 110px;
    /* margin: 10px 13px 10px 14px; */
    margin: 10px;
    border-radius: 10px;
    box-shadow: 4px 5px 5px -4px rgba(204, 204, 204, 0.5)
}

.itemname {
    font-size: 18px;
    font-weight: 600;
    color: #656565;
    padding-left: 30px;
    padding-top: 15px;
}

.itemvalue {
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    height: 55px;
    line-height: 55px;
}

.itemunit {
    color: #666;
    font-size: 18px;
    margin-left: 7px;
}

.bg01 {
    background: linear-gradient(to top right, rgb(255, 255, 255), rgb(38, 105, 250));
}

.bg02 {
    background: linear-gradient(to top right, rgb(255, 255, 255), rgb(133, 196, 255));
}

.bg03 {
    background: linear-gradient(to top right, rgb(255, 255, 255), rgb(42, 140, 252));
}

.m-t-15 {
    margin-top: 15px;
}

.chartsbox1 {
    width: 100%;
    height: 330px;
}
</style>