<template>
<div class='statistics-container'>
    <div class="filter-container">

        <el-cascader
            v-model="areaId"
            :options="orgs"
            size="mini"
            style="width: calc(25% - 15px);margin-right:15px;"
            :props="cascaderProps"
            placeholder="请选择行政区划"
            @change="handleChange">
        </el-cascader>

        <el-date-picker
            size="mini"
            style="width: calc(25% - 15px);margin-right:15px;"
            v-model="beginEndTime"
            @change="timeChange"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        
        <!-- <el-input type="text" v-model="listQuery.name" placeholder="请输入搜索关键字" style="width: calc(25% - 15px);margin-right:15px;" size="mini" round></el-input> -->
        
        <div style="float:right;text-align:center;">
            <el-button type="primary" size="mini" icon="el-icon-search" @click="getList();getAllData();">查询</el-button>
            <el-button type="primary" size="mini" icon="el-icon-download" @click="downloadExcel" >导出</el-button>
        </div>
    </div>
    <div class="cate-title"> <i class="el-icon el-icon-pie-chart" style=""></i> 数据总览</div>
    <div class="count-item-container">
        <div class="count-item">
            <div class="count-item-icon">
                <img src="/img/护林员数量.png" />
            </div>
            <div class="count-item-title">
                护林员数量
            </div>
            <div class="count-item-value">
                {{allData.hulinyuan}}  <span class="unit">人</span>
            </div>
        </div>

        <div class="count-item">
            <div class="count-item-icon">
                <img src="/img/打卡轨迹.png" />
            </div>
            <div class="count-item-title">
                全部巡查总数
            </div>
            <div class="count-item-value">
                {{allData.xunchazongshu}}  <span class="unit">次</span>
            </div>
        </div>

        <div class="count-item">
            <div class="count-item-icon">
                <img src="/img/打卡次数.png" />
            </div>
            <div class="count-item-title">
                全部打卡总数
            </div>
            <div class="count-item-value">
                {{allData.dakacishu}}  <span class="unit">次</span>
            </div>
        </div>

        <div class="count-item">
            <div class="count-item-icon">
                <img src="/img/有效次数.png" />
            </div>
            <div class="count-item-title">
                全部打卡点数
            </div>
            <div class="count-item-value">
                {{allData.dakadian}}  <span class="unit">个</span>
            </div>
        </div>

        
    </div>
    <div class="cate-title"> <i class="el-icon el-icon-s-data" style=""></i> 数据统计
    </div>
    <div class="list-container">
        <div class="list-item" style="transform:scale(1.0);box-shadow:0px 0px 25px rgba(0,0,0,0.3);margin-bottom:6px;">
            <div class="list-item-box" style="color:#9da1bd;">所属班组</div>
            <div class="list-item-box" style="color:#9da1bd;">护林员</div>
            <div class="list-item-box" style="color:#9da1bd;">手机号码</div>
            <div class="list-item-box" style="color:#9da1bd;">打卡次数</div>
            <div class="list-item-box" style="color:#9da1bd;">巡检次数</div>
            <div class="list-item-box" style="color:#9da1bd;">打卡点数量</div>
            <div class="list-item-box" style="color:#9da1bd;">操作</div>
        </div>
        <div class="list-container-scroll">
            <div class="list-item" v-for="(item,index) in list" :key="index">
            <div class="list-item-box">{{item.areaName}}</div>
            <div class="list-item-box">{{item.name}}</div>
            <div class="list-item-box">{{item.account}}</div>
            <div class="list-item-box">{{item.dakacishu}}</div>
            <div class="list-item-box">{{item.xunjian}}</div>
            <div class="list-item-box">{{item.dakadian}}</div>
            <div class="list-item-box" @click="getGuiji(item.id)"> 
                <el-link type="primary"> <i class="el-icon el-icon-tickets"></i>巡查轨迹</el-link>
            </div>
        </div>
        </div>
    </div>
    <div class="" style="padding:10px 0px 0px 0px;">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.pageIndex"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="listQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
    <div class="personal-container animation-scale-up" v-if="personalInfoShow">
        <personalInfo @close="personalInfoShow = false;" :currentStreet="currentStreet" :userid="currentPeople"></personalINfo>
    </div>
</div>
</template>

<script>

import personalInfo from './widget/personalInfo.vue'
import { postMethodCommon, getMethodCommon } from "../../../api/common";
import axios from 'axios'
export default {
    components: {
        personalInfo
    },
    props:[],
    data() {
        return {
            personalInfoShow:false,
            beginEndTime:null,
            listQuery:{
                areaid:null,
                begintime:null,
                endtime:null,
                pageIndex:1,
                pageSize:20,
            },
            areaId:null,
            orgs:[],
            cascaderProps:{label:'name',value:'id',children:'child',checkStrictly: true},
            allData:{},
            list:[],
            total:null,
            currentPeople:null,
            currentStreet:null,
        };
    },
    computed: {

    },
    watch: {

    },
    methods: {
        downloadExcel(){
            let query = {
                areaid:this.listQuery.areaid,
                begintime:this.listQuery.begintime,
                endtime:this.listQuery.endtime
            }
            axios({
                method:"get",
                url:process.env.VUE_APP_BASE_API +"/FireGrid/ExportStatisticsNew",
                params:query,
                headers:{
                    "X-Token":localStorage.getItem("X-Token")
                },
                responseType:"blob"
                }).then(res=>{
                    let fileName = "巡检统计" + new Date().getTime() + ".xls";
                    const elink = document.createElement('a')
                    elink.download = fileName;
                    elink.style.display = 'none'
                    elink.href = URL.createObjectURL(res.data)
                    document.body.appendChild(elink)
                    elink.click()
                    URL.revokeObjectURL(elink.href)
                    document.body.removeChild(elink)
                })
        },
        getGuiji(phone){
            this.currentPeople = phone;
            this.personalInfoShow = true;
        },
        timeChange(e){
            this.listQuery.begintime = e[0];
            this.listQuery.endtime = e[1];
        },
        gethlyList(){
            getMethodCommon("/FireGrid/LoadUsersArea").then(res =>{
                this.orgs = res.data;
                this.handleOrgs();
                if(this.orgs[0].child.length == 1){
                    this.currentStreet = this.orgs[0].child[0].name;
                    this.areaId = [this.orgs[0].id,this.orgs[0].child[0].id]
                
                }else if(this.orgs[0].child.length  != 1){
                    this.currentStreet = "费县";
                    this.areaId = [this.orgs[0].id]
                }
                this.listQuery.areaid = this.areaId
                this.getAllData();

            })
        },
        handleOrgs(orgs){
            for(let i=0;i<this.orgs[0].child.length;i++){
                if(this.orgs[0].child[i]){
                    for(let j=0;j<this.orgs[0].child[i].child.length;j++){
                        if(this.orgs[0].child[i].child[j].child){
                            this.orgs[0].child[i].child[j].child = null;
                        }
                    }
                }
                
            }
        },
        handleChange(e){
            let id = null;
            e.forEach((item,index)=>{
                id = item;
            })
            this.listQuery.areaid = id;
        },
        getAllData(){
            let param = {
                areaid:this.listQuery.areaid,
                begintime:this.listQuery.begintime,
                endtime:this.listQuery.endtime
            }

            console.log("param",param);
            getMethodCommon("/FireGrid/GetStatisticsCountNew",param).then(res=>{
                if(res.code == 200){
                    this.allData = res.data;
                }
            })
        },
        resetListQuery(){
            this.areaId = null;
            this.listQuery.areaid = null;
            this.listQuery.begintime = null;
            this.listQuery.endtime = null;
              
            this.getList();
        },
        getList(){
            getMethodCommon("/FireGrid/GetStatisticsNew",this.listQuery).then(res=>{
                if(res.code == 200){
                    this.total = res.count;
                    this.list = res.data;
                }
            })
        },
        handleSizeChange(e){
            this.listQuery.pageSize = e;
            this.getList();
        },
        handleCurrentChange(e){
            this.listQuery.pageIndex = e;
            this.getList();
        }
    },
    created() {


        let start = new Date();
        let end = new Date()
        this.beginEndTime = [end.getFullYear()+"-"+(end.getMonth()+1)+"-"+end.getDate()+" 00:00:00",start.getFullYear()+"-"+(start.getMonth()+1)+"-"+start.getDate()+" "+start.getHours()+":"+start.getMinutes()+":"+start.getSeconds()]
        
        this.listQuery.begintime = this.beginEndTime[0];
        this.listQuery.endtime = this.beginEndTime[1];


        this.gethlyList();
        this.getList();
    },
    mounted() {

    },
    destroyed() {
        
    },
}
</script>

<style scoped>
.statistics-container{
    width:100%;
    height:100%;
    background:#2b2d3c;
    padding:30px;
    position:relative;
}
.filter-container{
    width:100%;
    padding:0px 0px 20px 0px;
    text-align:right;
}
.cate-title{
    font-size:14px;
    color:#fff;
    font-weight:500;
    letter-spacing:1px;
}

.count-item-container{
    width:100%;
    min-height:100px;
    padding:15px 0px;
}

.count-item{
    width: calc( 25% - 20px);
    background:#2f3243;
    padding:5px 15px;
    float:left;
    margin-right:20px;
    border-radius:0px;
    color:#fff;
    box-shadow:0px 5px 15px rgba(0,0,0,0.2);
}

.count-item .count-item-icon{
    float:left;
    color:#fff;
}

.count-item-icon img{
    width:40px;
    height:40px;
    margin-top:4px;
    opacity:0.9;
}
.count-item-title{
    line-height:50px;
    margin-left:15px;
    font-size:14px;
    float:left;
    color:#9da1bd;
}
.count-item-value{
    font-size:20px;
    line-height:50px;
    margin-left:30px;
    float:right;
}
.count-item .unit{
    font-size:14px;
    color:#ccc;
}
.list-container{
    padding:20px 0px;
    width:100%;
}
.list-container-scroll{
    width: 100%;
    height: calc( 100vh - 485px);
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:0px;
}
.list-item{
    width:100%;
    height:48px;
    background:#2f3243;
    margin-bottom:4px;
    box-shadow:0px 0px 3px rgba(0,0,0,0.2);
    cursor:pointer;
    transition:all 0.2s;
}
.list-item:hover{
    transform:scale(1.01);
    box-shadow:0px 10px 25px rgba(0,0,0,0.5)
}
.list-item-box{
    float:left;
    width:14.28%;
    padding:12px;
    color:#eee;
    text-align:center;
    max-height:48px;
    overflow:hidden;
    color:#a7a9b0;
}

::v-deep .el-input__inner{
    border-radius:0px;
}
::v-deep .el-button{
    border-radius:0px;
}

.personal-container{
    width:100%;
    height: calc( 100vh - 100px);
    position:absolute;
    left:0px;
    top:0px;
    padding:20px 40px;
    background:rgba(43,45,60,1);
    box-shadow:0px 0px 30px rgba(0,0,0,0.5);
}

::-webkit-scrollbar {
  height: 4px;
  width: 4px;
  background: transparent;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  padding-top: 100px;
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
    inset -1px -1px 0 rgba(0, 0, 0, 0.07);
  background-color: rgba(0,0,0,0.2);
  min-height: 28px;
  border-radius: 4px;
  background-clip: padding-box;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0;
}

::-webkit-scrollbar-thumb:hover {
  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-thumb:active {
  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
  background-color: rgba(0, 0, 0, 0.5);
}

@keyframes fade-scale {
	0% {
		opacity: 0;
		-webkit-transform: scale(.2);
		-o-transform: scale(.2);
		transform: scale(.2);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}
.animation-scale-up {
    -webkit-animation-name: fade-scale;
    -o-animation-name: fade-scale;
    animation-name: fade-scale;
}
</style>