<template>
    <div class="app-container">
        <el-row>
            <el-col :span="14" class="spacing-top-5">
                <!-- 查询 -->
                <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="50px">
                    <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" @change="getBatchs">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="批次" prop="flowNum">
                        <el-select v-model="flowNum" filterable placeholder="请选择" style="width: 200px;">
                            <el-option v-for="item in batchsList" :key="item.flow_num" :label="item.flow_name"
                                :value="item.flow_num + ',' + item.flow_name">
                            </el-option>
                        </el-select>
                    </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-col>
            <el-col :span="10" v-if="isCheck">
                <el-descriptions :column="3" border style="width: 100%;">
                    <el-descriptions-item label="重保次数" label-class-name="my-checkname"
                        content-class-name="my-checkvalue">
                        {{ checkData.count }}
                    </el-descriptions-item>
                    <el-descriptions-item label="参与人数" label-class-name="my-checkname"
                        content-class-name="my-checkvalue">
                        {{ checkData.personCnt }}
                    </el-descriptions-item>
                    <el-descriptions-item label="参与公司数" label-class-name="my-checkname"
                        content-class-name="my-checkvalue">
                        {{ checkData.companyCnt }}
                    </el-descriptions-item>
                </el-descriptions>

            </el-col>
        </el-row>
        <!-- 下载 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
            </el-col>
        </el-row>
        <!-- element table组件 -->
        <div v-if="tableShow">
            <el-table :data="dataList" style="width: 100%" :span-method="objectSpanMethod" :height=tableHeight>
                <template v-for="(item, index) in headers">
                    <el-table-column prop="" :label="item" align="center" min-width="110" v-if="index < 3" fixed>
                        <template slot-scope="scope">
                            <div>
                                {{ scope.row[index] }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="" :label="item" v-else align="center">
                        <el-table-column prop="" label="姓名" align="center">
                            <template slot-scope="scope">
                                {{ scope.row[index + index - 3] }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="" label="手机号" align="center" min-width="110">
                            <template slot-scope="scope">
                                {{ scope.row[index + index - 2] }}
                            </template>
                        </el-table-column>
                    </el-table-column>
                </template>
            </el-table>
        </div>
    </div>
</template>

<script>
import { getDutyList, getBatchList, dutyInfoStatistics } from "@/api/view/vduty";
export default {
    name:"Vduty",
    data() {
        return {
            queryParams: {},
            dateValue: [],
            // element table数据结构
            dataList: [],
            headers: [],
            spanArr: [],
            batchsList: [],//批次列表
            flowNum: '',//批次
            tableShow: false,
            checkData: {},
            isCheck: false,
        };
    },
    created() {
        let startDate = this.getDaysAgo();
        let endDate = this.getToday();
        this.dateValue.push(startDate, endDate);
        // 批次
        this.getBatchs();
    },
    mounted() {
        // 设置表格高度
        this.tableHeight = window.innerHeight - 180
        // 监听浏览器窗口变化，动态计算表格高度，
        window.onresize = () => {
            return (() => {
                this.tableHeight = window.innerHeight - 180
            })()
        }
    },
    methods: {
        getToday() {
            //获取当前日期
            let myDate = new Date();
            let nowY = myDate.getFullYear();
            let nowM = myDate.getMonth() + 1;
            let nowD = myDate.getDate();
            let endDate =
                nowY +
                "-" +
                (nowM < 10 ? "0" + nowM : nowM) +
                "-" +
                (nowD < 10 ? "0" + nowD : nowD); //当前日期
            return endDate;
        },
        getDaysAgo() {
            let myDate = new Date();
            let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 90); //最后一个数字可改，天数
            let lastY = lw.getFullYear();
            let lastM = lw.getMonth() + 1;
            let lastD = lw.getDate();
            let startData =
                lastY +
                "-" +
                (lastM < 10 ? "0" + lastM : lastM) +
                "-" +
                (lastD < 10 ? "0" + lastD : lastD);
            return startData;
        },
        // 批次
        getBatchs() {
            let params = {};
            params.beginTime = this.dateValue.length == 0 ? '' : this.dateValue[0];
            params.endTime = this.dateValue.length == 0 ? '' : this.dateValue[1];
            getBatchList(params).then((res) => {
                this.batchsList = res.filter(item => item);
                this.flowNum = res[0].flow_num + ',' + res[0].flow_name;
                this.getDuty();
                this.getDutyInfo();
            })
        },
        // 列表
        getDuty() {
            this.dataList = [];
            this.headers = [];
            this.flowName = this.flowNum.split(',')[1]
            getDutyList({ flowNum: this.flowNum.split(',')[0] }).then((res) => {
                this.dataList = res.data;
                this.headers = res.headers;
                this.tableShow = true;
            })
        },
        getDutyInfo() {
            this.isCheck = false;
            let parameter = {}
            parameter.beginTime = this.dateValue.length == 0 ? '' : this.dateValue[0];
            parameter.endTime = this.dateValue.length == 0 ? '' : this.dateValue[1];
            parameter.flowNum = this.flowNum.split(',')[0];
            dutyInfoStatistics(parameter).then((res) => {
                this.checkData = res.data;
                this.isCheck = true;
            })
        },
        // 搜索
        handleQuery() {
            this.tableShow = false;
            this.getDuty();
            this.getDutyInfo();
        },
        // 重置
        resetQuery() {
            this.resetForm("queryForm");
            this.flowNum = '';
            this.dateValue = [];
            let startDate = this.getDaysAgo();
            let endDate = this.getToday();
            this.dateValue.push(startDate, endDate);
            this.getBatchs();
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0 || columnIndex === 1) {
                if (rowIndex % 2 === 0) {
                    return {
                        rowspan: 2,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('resource/duty/export?flowNum=' + this.flowNum.split(',')[0] + '&flowName=' + this.flowName, {}, `${this.flowName}-值班信息-${new Date().getTime()}.xlsx`)
        },
    },
}
</script>
<style scoped>
.resume_table {
    width: 100%;
    table-layout: fixed;
    border: none;
}

.resume_table thead td {
    background: #f7f9fc;
    font-weight: bold;
    padding: 9px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: none;
}

.resume_table tbody td {
    padding: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: none;
}

.resume_table tbody tr:nth-child(2n) {
    background: #f7f9fc;
}

.tc td {
    text-align: center;
}
</style>
<style>
.my-checkvalue {
    width: 95px;
    font-size: 18px;
    font-weight: bold;
    text-align: center !important;
    height: 20px !important;
    line-height: 20px !important;
}

.my-checkname {
    background: #f4f9fb !important;
    text-align: center !important;
    height: 20px !important;
    line-height: 20px !important;
}
</style>