<template>
    <div>
        <el-form ref="form" inline :model="form">
            <el-form-item style="margin-bottom: 0px">
                <Area @click="handleNodeClick" ref="area"></Area>
            </el-form-item>
            <el-form-item label="统计类型:">
                <el-select v-model.trim="form.type" @change="change" placeholder="请选择">
                    <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="监测对象类型:" v-if="form.type == 1">
                <el-select v-model.trim="form.monitorTags" placeholder="请选择" clearable collapse-tags multiple>
                    <el-option
                        v-for="item in interferenceSource"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" icon="el-icon-search" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="boxS">
            <div class="boxTableS">
                <el-table
                    stripe
                    :data="tableData"
                    v-loading="loading"
                    highlight-current-row
                    border
                    :height="vh"
                    header-cell-class-name="table_header"
                >
                    <el-table-column
                        width="80"
                        show-overflow-tooltip
                        align="center"
                        type="index"
                        label="序号"
                    ></el-table-column>
                    <el-table-column prop="name" show-overflow-tooltip align="center" label="名称"></el-table-column>
                    <el-table-column
                        prop="monitorCount"
                        show-overflow-tooltip
                        align="center"
                        label="监测点数量"
                    ></el-table-column>
                    <el-table-column
                        prop="terminalCount"
                        show-overflow-tooltip
                        align="center"
                        label="设备数量"
                    ></el-table-column>
                </el-table>
            </div>

            <div id="electr_1" style="width: 100%; margin-top: 10px" :style="{ height: vh + 'px' }" />
        </div>
    </div>
</template>
<script>
import { getMainnetPoint } from '@/api/AccountOperation.js'
import Area from '@/views/components/Area/Area.vue'
import { dicData } from '@/assets/commjs/dictypeData'
export default {
    components: { Area },
    props: {},
    data() {
        return {
            form: {
                type: 0,
                orgId: '',
                monitorTags: []
            },
            Monitoring: 0,
            device: 0,
            interferenceSource: [], //干扰源类型
            loading: false,
            vh: 100,
            zoom: '', //图表焦点校验
            typeList: [
                {
                    id: 0,
                    name: '区域'
                },
                {
                    id: 1,
                    name: '监测点标签'
                }
            ],
            tableData: [],
            myChart2: null
        }
    },
    created() {
        this.vh = (window.sessionStorage.getItem('appheight') - 123) / 2
    },
    mounted() {
        this.interferenceSource = dicData('Monitoring_Labels', [])
        this.form.orgId = JSON.parse(window.sessionStorage.getItem('Info')).deptId

        this.setHeight()

        this.onSubmit()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = (window.sessionStorage.getItem('appheight') - 123) / 2
            // document.getElementById('electr_1').style.width =
            //     document.getElementById('app-main-in').offsetWidth - 40 + 'px'
            // if (this.myChart2) {
            //     this.myChart2.resize()
            // }
        },
        change(e) {
            if (e == 0) {
                this.form.monitorTags = []
            } else {
                this.interferenceSource.forEach(item => {
                    this.form.monitorTags.push(item.id)
                })
            }
        },
        async onSubmit() {
            this.loading = true
            this.Monitoring = 0
            this.device = 0
            await getMainnetPoint(this.form).then(res => {
                this.tableData = res.data
                if (this.form.type == 1) {
                    this.interferenceSource.forEach(item => {
                        this.tableData.forEach(val => {
                            if (item.id == val.name) {
                                val.name = item.name
                                return
                            }
                        })
                    })
                }

                this.tableData.forEach(item => {
                    this.Monitoring += item.monitorCount
                    this.device += item.terminalCount
                })
                if (this.form.type != 1) {
                    let obj = { name: '总数', monitorCount: this.Monitoring, terminalCount: this.device }
                    this.tableData.push(obj)
                }
                this.electr()
            })
            this.loading = false
        },
        handleNodeClick(data) {
            this.form.orgId = data.id
        },
        electr() {
            let echarts = require('echarts')
            let domID1 = document.getElementById('electr_1')

            this.myChart2 = echarts.init(domID1)
            setTimeout(() => {
                // ;(domID1.style.width = document.getElementById('app-main-in').offsetWidth - 40 + 'px'),
                domID1.style.height = this.vh
            }, 0)
            let nameList = []
            let monitorCount = []
            let terminalCount = []
            let echartsData = JSON.parse(JSON.stringify(this.tableData))
            echartsData.pop()
            echartsData.forEach(item => {
                nameList.push(item.name)
                monitorCount.push(item.monitorCount)
                terminalCount.push(item.terminalCount)
            })
            let echartsColor = JSON.parse(window.localStorage.echartsColor)

            let option = {
                title: {
                    text: '主网台账统计',
                    top: 10,
                    left: 'center',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                    //
                    //   top: 5,
                },
                tooltip: {
                    //提示框组件
                    trigger: 'axis',

                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },
                grid: {
                    right: '2%',
                    top: '50px',
                    left: '2%',
                    bottom: '10px',
                    containLabel: true
                },
                legend: {
                    data: ['监测点数量', '设备数量'],
                    itemWidth: 16,
                    itemHeight: 16,
                    right: 40,
                    top: 20,
                    itemGap: 28,
                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },

                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: nameList,
                        axisLine: {
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            formatter: function (value) {
                                var ret = '' //拼接加\n返回的类目项
                                var maxLength = 8 //每项显示文字个数
                                var valLength = value.length //X轴类目项的文字个数
                                var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
                                if (rowN > 1) {
                                    //如果类目项的文字大于5,
                                    for (var i = 0; i < rowN; i++) {
                                        var temp = '' //每次截取的字符串
                                        var start = i * maxLength //开始截取的位置
                                        var end = start + maxLength //结束截取的位置
                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                        temp = value.substring(start, end) + '\n'
                                        ret += temp //凭借最终的字符串
                                    }
                                    return ret
                                } else {
                                    return value
                                }
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        name: '(单位/个)',
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        },
                        minInterval: 1,
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: [echartsColor.thread],
                                type: 'dashed',
                                opacity: 0.5
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '监测点数量',
                        type: 'bar',
                        barGap: 0.4,
                        barMaxWidth: 30, //最大宽度
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },

                            fontSize: 12
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        },
                        data: monitorCount
                    },
                    {
                        name: '设备数量',
                        type: 'bar',
                        barMaxWidth: 30, //最大宽度
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[1] }
                        },
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },
                            fontSize: 12
                        },

                        data: terminalCount
                    }
                ]
            }

            option && this.myChart2.setOption(option, true)
            window.echartsArr.push(this.myChart2)
            setTimeout(function () {
                this.myChart2.resize()
            }, 0)
        }
    },

    computed: {},

    watch: {}
}
</script>

<style lang="less" scoped>
// @import url("../../../../styles/comStyle.less");
</style>

<style lang="scss" scoped>
.boxS {
    width: 100%;
    // display: flex !important;
    // justify-content: space-between;
}
</style>
