<template>
    <!-- 监控日志 -->
    <div class="jktjDetail form-clues">
        <!-- 头部搜索 -->
        <el-form ref="form" :model="form" :inline="true" class="from-clues-header" label-width="100px">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="开始时间">
                        <el-date-picker type="date" :picker-options="pickerOptionsStart" clearable
                            v-model="form.startTime" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="结束时间">
                        <el-date-picker clearable :picker-options="pickerOptionsEnd" v-model="form.endTime"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <!-- 按钮操作 -->
                <el-col :span="12" class="btnColRight">
                    <el-button type="default" @click="resetForm"> 重置 </el-button>
                    <el-button type="primary"> 查询 </el-button>
                </el-col>
            </el-row>
        </el-form>
        <!-- 表格 -->
        <div class="form-clues-content echarts-box">
            <div id="myChart" class="chart"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: "jktj",
    data () {
        return {
            // 开始结束日期限制
            pickerOptionsStart: {
                disabledDate: (time) => {
                    if (this.form.endTime) {
                        return (
                            time.getTime() >= new Date(this.form.endTime).getTime()
                        );
                    }
                }
            },
            // 结束日期限制
            pickerOptionsEnd: {
                disabledDate: (time) => {
                    if (this.form.startTime) {
                        return (
                            time.getTime() <= new Date(this.form.startTime).getTime()
                        );
                    }
                }
            },
            // 搜索表单
            form: {
                startTime: "",
                endTime: ""
            }
        }
    },
    mounted () {
        // 初始化图表
        this.echartInit();
    },
    methods: {
        // 重置
        resetForm () {
            this.form = {
                startTime: "",
                endTime: ""
            }
        },
        echartInit () {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(
                document.getElementById("myChart")
            );
            // 绘制图表
            myChart.setOption({
                color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
                title: {
                    show: true,
                    text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
                    left: "center",
                    textStyle: {
                        fontSize: 18,
                        lineHeight: 30,
                        height: 60,
                        color: "#777",
                    },
                },
                legend: {
                    data: [
                        "接入成功数量",
                        "接入失败数量",
                        "上报成功数量",
                        "上报失败数量",
                    ],
                    top: 80,
                },
                tooltip: {
                    show: true,
                    trigger: "axis",
                },
                grid: {
                    top: 120,
                },
                xAxis: [
                    {
                        type: "category",
                        data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                    },
                ],
                series: [
                    {
                        name: "接入成功数量",
                        type: "bar",
                        data: [1000, 1500, 2000, 500, 4000],
                    },
                    {
                        name: "接入失败数量",
                        type: "bar",
                        data: [900, 500, 3200, 800, 4500],
                    },
                    {
                        name: "上报成功数量",
                        type: "bar",
                        data: [1000, 1500, 2000, 500, 4000],
                    },
                    {
                        name: "上报失败数量",
                        type: "bar",
                        data: [900, 500, 3200, 800, 4500],
                    },
                ],
            });
        },
    },
};
</script>
<style scoped lang="scss">
.jktjDetail {
    background-color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;

    .echarts-box {
        display: flex;
        justify-content: center;
        height: 100%;

        .chart {
            width: 100%;
            height: 100%;
        }
    }

    .form-clues-content {
        flex: 1;
        height: 100%;
    }
}
</style>
<style scoped lang="scss">
@import "~@/styles/public.scss";
</style>