<template>
    <div>
        <LHeader :text="text"></LHeader>
        <!-- 内容列表 -->
        <!-- 接口对接4 START -->
        <div class="con-list">
            <van-cell-group inset>
                <van-row gutte>
                    <van-col span="24">总巡查次数:{{countObj.totalNumber}}次</van-col>
                </van-row>
                <van-row gutte>
                    <van-col span="24">认定隐患数量: {{countObj.hdNumber}}个</van-col>
                </van-row>

                <van-tabs @click="onClick" color="#2980f7">
                    <van-tab title="隐患上报统计">
                        <van-row gutte>
                            <van-col span="24" class="excel-title">
                                <van-cell title="请选择查询的月份" :value="date" @click="show = true" />
                                <!-- <span>月巡查</span>
                                <span>周巡查</span> -->
                                <van-popup v-model="show" position="bottom">
                                    <van-datetime-picker
                                        v-model="currentDate"
                                        type="year-month"
                                        title="选择年月"
                                        :min-date="minDate"
                                        :max-date="maxDate"
                                        :formatter="formatter"
                                        @confirm="onConfirm"
                                        @cancel="show=false"
                                    />
                                </van-popup>
                            </van-col>
                        </van-row>
                        <!-- echarts图 -->
                        <van-row gutte>
                            <van-col span="24" class="excel-title">
                                <div id="box" style="width: 100%;height: 300px;"></div>
                            </van-col>
                        </van-row>
                    </van-tab>
                    <van-tab title="巡查时长统计">
                        <van-row gutte>
                            <van-col span="24" class="excel-title">
                                <van-col span="24" class="excel-title">
                                    <van-cell title="请选择查询的月份" :value="dateTwo" @click="showTwo = true" />
                                    <!-- <span>月巡查</span>
                                    <span>周巡查</span> -->
                                    <van-popup v-model="showTwo" position="bottom">
                                        <van-datetime-picker
                                            v-model="currentDateTwo"
                                            type="year-month"
                                            title="选择年月"
                                            :min-date="minDateTwo"
                                            :max-date="maxDateTwo"
                                            :formatter="formatterTwo"
                                            @confirm="onConfirmTwo"
                                            @cancel="showTwo=false"
                                        />
                                    </van-popup>
                                </van-col>
                            </van-col>
                        </van-row>
                        <!-- 日历图 -->
                        <van-row gutte v-if="aa">
                            <van-col span="24" class="excel-title">
                                <van-calendar
                                    title="日历"
                                    :poppable="false"
                                    :show-confirm="false"
                                    :style="{ height: '500px' }"
                                    type="multiple"
                                    :min-date="minDateThree"
                                    :max-date="maxDateThree"
                                    :formatter="formatterThree"
                                    :default-date="defaultData"
                                    />
                            </van-col>
                        </van-row>
                    </van-tab>
                </van-tabs>
            </van-cell-group>
        </div>
        <tab-bar :index="1"></tab-bar>
    </div>
</template>

<script>
import tabBar from "@/components/TabBar";
import LHeader from "@/components/header.vue";
import { getFun, postFun } from "@/service/table.js";
import * as echarts from "echarts";
export default {
    name: "statistics",
    components: {
        LHeader,
        tabBar
    },
    data() {
        return {
            date:'2022/01',
            show:false,
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2025, 10, 1),
            currentDate: new Date(),
            dateTwo:'2022/01',
            showTwo:false,
            minDateTwo: new Date(2020, 0, 1),
            maxDateTwo: new Date(2025, 10, 1),
            currentDateTwo: new Date(),
            text: "巡查统计",
            messageList: [],
            minDateThree: new Date(2022, 0, 1),
            maxDateThree: new Date(2022, 0, 31),
            defaultData:[],
            isHaveNews: false,
            countObj:{},
            dateList:[],
            MonthList:[],

            aa:true
        };
    },
    watch: {
        dateList: {
            deep: true,
            handler(val) {
                this.myEcharts(val)
            }
        }
    },
    mounted() {
        this.init()
    },
    
    methods: {
        init(){
            this.count()
            this.leftEcharts()
            this.rightEcharts()
        },
        count(){
            this.$toast.loading({
                message:'加载中...',
                forbidClick: true,
                loadingType: 'spinner',
                duration: 0
            })
            getFun('patrol/statistics/total/count').then((response)=>{
                this.$toast.clear()
                this.countObj=response.data
            }).catch(()=>{
                this.$toast.clear()
                this.$toast.fail('加载失败,请稍后再试')
            })
        },
        //加载左侧折线图数据
        leftEcharts(){
            var obj={
                time:this.date
            }
            this.$toast.loading({
                message:'加载中...',
                forbidClick: true,
                loadingType: 'spinner',
                duration: 0
            })
            getFun('patrol/statistics/hd/count',obj).then((response)=>{
                this.$toast.clear()
                this.dateList=response.data
            }).catch(()=>{
                this.$toast.clear()
                this.$toast.fail('加载失败,请稍后再试')
            })
        },
        rightEcharts(){
            var obj={
                time:this.dateTwo
            }
            this.$toast.loading({
                message:'加载中...',
                forbidClick: true,
                loadingType: 'spinner',
                duration: 0
            })
            getFun('patrol/statistics/example/status',obj).then((response)=>{
                this.$toast.clear()
                this.MonthList=response.data
            }).catch(()=>{
                this.$toast.clear()
                this.$toast.fail('加载失败,请稍后再试')
            })
        },
        formatter(type, val) {
            if (type === 'year') {
                return `${val}年`;
            } else if (type === 'month') {
                return `${val}月`;
            }
            return val;
        },
        formatterTwo(type, val) {
            if (type === 'year') {
                return `${val}年`;
            } else if (type === 'month') {
                return `${val}月`;
            }
            return val;
        },
        formatterThree(date){
            var date1=this.util.timestampToTime(date.date,'DT2',true)
            this.MonthList.forEach((i)=>{
                if(date1==i.date){
                    if(i.status=='red'){
                        date.className='red-flag'
                    }else if(i.status=='green'){
                        date.className='green-flag'
                    }
                }
            })
            return date
        },
        onClick(name, title) {
            console.log(title);
        },
        formatDate(date) {
            return `${date.getFullYear()}/${(date.getMonth() + 1)<10?'0'+(date.getMonth() + 1):(date.getMonth() + 1)}`;
        },
        onConfirm(date) {
            console.log(date,999)
            this.show = false;
            this.date = this.formatDate(date);
            this.leftEcharts()
        },
        onConfirmTwo(date) {
            this.aa = false
            this.showTwo = false;
            this.dateTwo = this.formatDate(date);
            this.maxDateThree=this.getCurrentMonthLast(date)
            this.minDateThree=date
            this.rightEcharts()
            setTimeout(() =>{
                this.aa = true
            },100)
        },
        getCurrentMonthLast(date){
            var currentMonth=date.getMonth();
            var nextMonth=++currentMonth;
            var nextMonthFirstDay=new Date(date.getFullYear(),nextMonth,1);
            var oneDay=1000*60*60*24;
            return new Date(nextMonthFirstDay-oneDay);
        },
        myEcharts(data) {
            var xData=[]
            var seriesData=[]
            data.forEach((i)=>{
                xData.push(i.date)
                seriesData.push(i.hdNumber)
            })
            var myChart = echarts.init(document.getElementById("box"));
            //配置图表
            var option = {
                xAxis: {
                    type: "category",
                    data: xData
                },
                yAxis: {
                    type: "value"
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 20
                    },
                    {
                        start: 0,
                        end: 20
                    }
                ],
                series: [
                    {
                        data: seriesData,
                        type: "line"
                    }
                ]
            };
            myChart.setOption(option);
        }
    }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
#app {
    font-family: "";
    color: #2c3e50;
}
.con-list {
    padding: 0;
    background-color: #f0f1f5;
    .van-cell-group--inset {
        margin: 0;
        margin-bottom: 0.26667rem;
        padding: 0.25rem;
        font-size: 0.4rem;
        position: relative;
        border-radius: 4%;
        box-shadow: 0px 0px 10px 2px #f3f3f3;
        width: 90%;
        margin: 0.4rem auto;
        .van-row {
            font-size: 0.4rem;
            line-height: 0.8rem;
            margin-bottom: 0;
            .excel-title {
                display: flex;
                justify-content: space-evenly;
                margin-top: 15px;
            }
        }
    }
}
/deep/ .red-flag{
    background:red !important;
    color: #fff;
}
/deep/ .green-flag{
    background:green !important;
    color: #fff;
}
</style>
