<template>
    <div class="content-main">
        <el-row :gutter="20" class="box">
            <el-col :span="6">
                <div class="grid-content bg-purple asides">
                    <el-tree :data="videoTreeData" :props="defaultProps" @node-click="handleNodeClick" v-loading="loading"></el-tree>
                </div>
            </el-col>
            <el-col :span="18">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="按月查询" name="0"></el-tab-pane>
                    <el-tab-pane label="按年查询" name="1"></el-tab-pane>
                </el-tabs>
                <el-row style="padding-bottom: 5px;">
                    <span style="float: right">更新时间: {{ xxcjsjjs }}</span>
                    <span>计算公式
                            <!--<el-tooltip content="计算公式提示内容:
                                                    监控点在线率 = 在线时长 /（在线时长+离线时长）* 100%;
                                                    录像完整率 = 完整时长 /（完整时长+丢失时长）* 100%;
                                                    离线时长= 每天时长总和 - 每天在线时长总和;
                                                    未录像时长 = 每天录像计划时长总和 - 每天录像完整时长总和;
                                                    状态变化次数 = 在线状态和离线状态之间的变化次数;"
                                        effect="dark" placement="left">
                                <i class="el-icon-question" style="font-size: 16px; vertical-align: middle;"></i>
                            </el-tooltip>-->
                        <el-tooltip placement="top">
                             <div v-html="formulaContent" slot="content" style="white-space: pre-line"></div>
                             <i class="el-icon-question" style="font-size: 16px; vertical-align: middle;"></i>
                        </el-tooltip>
                    </span>
                </el-row>
                <el-row style="padding-bottom: 5px;">
                    <!-- 功能按钮 -->
                    <el-form :inline="true">
                        <div class="all-row-b5 search-div">
                            <el-form-item label="">
                                <el-date-picker clearable v-model="cxtj" type="month" placeholder="选择月"
                                                value-format="yyyy-MM" v-show="showDateStyle"></el-date-picker>
                                <el-date-picker clearable v-model="cxtj" type="year" placeholder="选择年"
                                                v-show="!showDateStyle"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="类型:" placeholder="请输入" prop="orgname" v-show="showType">
                                <el-select v-model="orgname" filterable clearable placeholder="请选择">
                                    <el-option v-for="item in orgNameList"
                                               :key="item.id"
                                               :label="item.orgname"
                                               :value="item.orgname">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-button type="primary" class="iconfont iconchaxun" size="small" @click="getList" v-loading="loading">查询</el-button>
                            <el-button type="primary" class="iconfont icondaochu11" size="mini" @click='exportExcel'>
                                导出
                            </el-button>
                        </div>
                    </el-form>
                </el-row>
                <!-- 列表 -->
                <el-row>
                    <el-table :data="tableData" stripe border fit highlight-current-row style="width: 100%"
                              v-if="gldShow">
                        <el-table-column align="center" label="所在区域" v-if="qymcShow" prop="qymc"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column align="center" label="库点名称" prop="qyjdmc"
                                         show-overflow-tooltip v-if="qyjdmcShow"></el-table-column>
                        <el-table-column align="center" label="监控数量" prop="jksl"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column align="center" label="监控点在线率" prop="jkdzxl"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column align="center" label="录像完整率" prop="lxwzl"
                                         show-overflow-tooltip></el-table-column>
                    </el-table>
                    <!-- 库点页面 -->
                    <el-table :data="tableData" stripe border fit highlight-current-row style="width: 100%"
                              v-if="qydShow">
                        <el-table-column align="center" label="监控点" prop="resourcename"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column align="center" label="类型" prop="orgname"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column align="center" label="离线时间(天)" prop="lxsc"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column align="center" label="未录像时常(天)" prop="wlxsc"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column align="center" label="监控点在线率" prop="jkdzxl"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column align="center" label="录像完整率" prop="lxwzl"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column align="center" label="状态变化次数" prop="statuschangecount"
                                         show-overflow-tooltip></el-table-column>
                    </el-table>
                </el-row>
                <el-row>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="pageForm.pageNo"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageForm.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageForm.total">
                    </el-pagination>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {queryCameraPreviewStatus, getCameraAreas, exportCameraPreviewStatus} from '@/api/videoMonitorCount/index';

    export default {
        data() {
            return {
                videoTreeData: [],
                defaultProps: {
                    children: 'children',
                    label: 'text'
                },
                activeName: '0',
                cxtj: '',
                // 列表数据
                tableData: [],
                // 分页参数
                pageForm: {
                    pageNo: 1,
                    pageSize: 10,
                    total: 0,
                },
                // 切换搜索框时间样式
                showDateStyle: true,
                // 更新时间
                xxcjsjjs: '',
                // 区域名称
                qymc: '',
                // 区域节点名称
                qyjdmc: '',
                orgname: '',
                qymcShow: true,
                qyjdmcShow: false,
                // 管理端页面
                gldShow: true,
                // 企业端页面
                qydShow: false,
                showType: false,
                // 查询导出条件
                searchFor: {},
                orgNameList: [{id: 1, orgname: '仓内'}, {id: 2, orgname: '业务'}, {id: 3, orgname: '安防'}],
                formulaContent: '计算公式提示内容:\n' +
                    '监控点在线率 = 在线时长 /（在线时长+离线时长）* 100%\n' +
                    '录像完整率 = 完整时长 /（完整时长+丢失时长）* 100%\n' +
                    '离线时长= 每天时长总和 - 每天在线时长总和\n' +
                    '未录像时长 = 每天录像计划时长总和 - 每天录像完整时长总和\n' +
                    '状态变化次数 = 在线状态和离线状态之间的变化次数',
                loading: false
            }
        },
        created() {
            // 初始化树型菜单
            this.handleNodeClickInit();
            // 默认查询当前年前一个月数据
            this.cxtj = this.getCurrentTime();
        },
        methods: {
            // 列表
            getList() {
                this.loading = true;
                // 拼接查询条件
                let obj = this.getLastDateOfMonth(this.activeName, this.cxtj);
                this.searchFor.xxcjsjks = obj.xxcjsjks;
                this.searchFor.xxcjsjjs = obj.xxcjsjjs;
                if (this.showType)
                    this.searchFor.orgname = this.orgname;
                // console.log("vo:", this.searchFor);
                queryCameraPreviewStatus(this.pageForm, this.searchFor).then(res => {
                    // console.log("res:", res);
                    if (res.code === 200) {
                        this.tableData = res.data.list;
                        this.pageForm.total = res.data.total;
                        this.xxcjsjjs = this.searchFor.xxcjsjjs;
                        this.loading = false;
                    } else {
                        this.loading = false;
                        this.$message.error(res.msg);
                    }
                }).catch((err) => {
                    this.loading = false;
                    this.$message.error(err.msg);
                });
            },
            // 导出
            exportExcel() {
                exportCameraPreviewStatus(this.searchFor).then(res => {
                    let blob = new Blob([res], {type: 'application/vnd.ms-excel;charset=utf-8'});
                    if (!!window.ActiveXObject || "ActiveXObject" in window) {
                        window.navigator.msSaveOrOpenBlob(blob, '视频监控统计.xlsx');
                    } else {
                        const link = document.createElement('a');
                        link.style.display = 'none';
                        link.href = URL.createObjectURL(blob);
                        link.setAttribute('download', '视频监控统计.xlsx');
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    }
                }).catch((err) => {
                    this.$message.error(err.msg);
                });
            },
            // 树型下拉初始化
            handleNodeClickInit() {
                // 树型菜单查询条件
                let orgCode = sessionStorage.getItem("orgCode");
                getCameraAreas(orgCode).then(res => {
                    if (res.code === 200) {
                        this.videoTreeData.push(res.data.root);
                        this.searchFor.orgCode = orgCode;
                        if (res.data.root.leaf)
                            this.searchFor.levelType = '2';
                        else
                            this.searchFor.levelType = '1';
                        // 初始化列表数据
                        this.getList();
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch((err) => {
                    this.$message.error(err.msg);
                });
            },
            // 树型下拉
            handleNodeClick(data) {
                // console.log("handleNodeClick:", data);
                if (data !== undefined) {
                    // 区域名称
                    this.searchFor.orgCode = data.orgCode;
                    if (data.leaf) {
                        this.searchFor.levelType = '2';
                    } else {
                        this.searchFor.levelType = '1';
                    }
                    if (Object.keys(data).length !== 0) {
                        if (data.orgCode === 'LS001') {
                            this.qymcShow = true;
                            this.qyjdmcShow = false;
                            this.qydShow = false;
                            this.gldShow = true;
                            this.showType = false;
                        } else if (data.leaf) {
                            // this.searchFor.orgname = this.orgname;
                            this.qydShow = true;
                            this.gldShow = false;
                            this.qymcShow = false;
                            this.qyjdmcShow = true;
                            this.showType = true;
                        } else {
                            this.qymcShow = false;
                            this.qyjdmcShow = true;
                            this.qydShow = false;
                            this.gldShow = true;
                            this.showType = false;
                        }
                    }
                    this.getList();
                }
            },
            // 切换栏
            handleClick(tab, event) {
                /*console.log(tab, event);
                console.log("activeName:", this.activeName);*/
                // 按月查询
                if (this.activeName === '0') {
                    this.showDateStyle = true;
                    this.getLastDateOfMonth(this.activeName);
                }
                // 按年查询
                if (this.activeName === '1') {
                    this.showDateStyle = false;
                }
            },
            // 分页
            handleSizeChange(val) {
                this.pageForm.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.pageForm.pageNum = val;
                this.getList();
            },
            // 时间拼接type:0按月查询,1按年查询
            getLastDateOfMonth(type) {
                // type:0按月查询
                if (type === '0') {
                    const year = this.cxtj.substring(0, 4);
                    const month = this.cxtj.substring(5, 7);
                    // 创建指定年月的第一天
                    const startDate = new Date(year, month, 1);
                    // 月份的最后一天
                    const endDate = new Date(year, month, 0);
                    return {
                        xxcjsjks: this.cxtj + '-' + startDate.getDate(),
                        xxcjsjjs: this.cxtj + '-' + endDate.getDate()
                    };
                }
                // type:1按年查询
                if (type === '1') {
                    const year = this.cxtj.substring(0, 4);
                    return {
                        xxcjsjks: year + '-' + '01-01',
                        xxcjsjjs: year + '-' + '12-31'
                    };
                }
            },
            // 获取当前年月(初始化查询条件函数)
            getCurrentTime() {
                // 获取当前日期
                const currentDate = new Date();
                let monthP = currentDate.getMonth() + 1;
                return currentDate.getFullYear() + '-' + monthP;
            }
        }
    }
</script>

<style scoped>
    .box {
        height: 100%;
    }
</style>