<template>
    <div>
        <el-form :inline="true" :model="formData">
            <el-form-item>
                <el-switch class="tableScopeSwitch" :active-value="2" :inactive-value="1" active-text="全网"
                    inactive-text="网公司" inactive-color="#666666" v-model="formData.monitorFlag"></el-switch>
            </el-form-item>
            <el-form-item label="统计类型:">
                <el-select v-model="formData.statisticalType" placeholder="请选择统计类型" style="width: 160px">
                    <el-option v-for="item in classificationData" :key="item.id" :label="item.name" :value="{
                        label: item.name,
                        value: item.id,
                        name: item.name,
                        id: item.id,
                        code: item.code,
                        sort: item.sort
                    }"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="终端等级:">
                <el-select v-model="formData.algoDescribe" multiple collapse-tags placeholder="终端等级"
                    style="width: 160px">
                    <el-option v-for="item in terminalClass" :key="item.id" :label="item.label"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="电压等级:">
                <el-select v-model="formData.scale" multiple collapse-tags placeholder="请选择电压等级" style="width: 160px">
                    <el-option v-for="item in voltageleveloption" :key="item.id" :label="item.name" :value="{
                        label: item.name,
                        value: item.id,
                        code: item.code,
                        name: item.name,
                        id: item.id,
                        sort: item.sort
                    }"></el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="终端厂家:">
        <el-select
          v-model="formData.manufacturer"
          multiple
          collapse-tags
          placeholder="请选择终端厂家"
          style="width: 160px;"
        >
          <el-option
            v-for="item in terminaloption"
            :key="item.id"
            :label="item.name"
            :value="{
              label: item.name,
              value: item.id,
              code: item.code,
              name: item.name,
              id: item.id,
              sort: item.sort
            }"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
            <el-form-item label="终端厂家:">
                <el-select v-model="formData.manufacturer" multiple collapse-tags placeholder="请选择终端厂家"
                    style="width: 160px">
                    <el-option v-for="item in terminaloption" :key="item.id" :label="item.name" :value="{
                        label: item.name,
                        value: item.id,
                        code: item.code,
                        name: item.name,
                        id: item.id,
                        sort: item.sort
                    }"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="干扰源类型:">
                <el-select v-model="formData.loadType" multiple collapse-tags placeholder="请选择干扰源类型"
                    style="width: 180px">
                    <el-option v-for="item in interfereoption" :key="item.id" :label="item.name" :value="{
                        label: item.name,
                        value: item.id,
                        code: item.code,
                        name: item.name,
                        id: item.id,
                        sort: item.sort
                    }"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="合格率:">
                <el-select v-model="formData.linePassRate" placeholder="请选择合格率" style="width: 180px">
                    <el-option label="合格" value="1"></el-option>
                    <el-option label="不合格" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <Area @click="handleNodeClick"></Area>
            </el-form-item>
            <el-form-item>
                <Timeinterval ref="Timeinterval" :interval="3"></Timeinterval>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="ml10" icon="el-icon-search" @click="Reset">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row>
            <el-col :span="24" style="height: 100px">
                <div ref="fg" v-loading="loading" id="dataintegrity" :style="'zoom:' + device"></div>
                <!--  -->
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { dicData } from '@/assets/commjs/dictypeData'
import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '@/views/components/Timeinterval.vue'
import { getLineIntegrityData } from '@/api/integraliy/integraliy'
import { onLienRate1, onLienRate2, onLienRate3, Integrity1, Integrity2, Integrity3 } from '@/assets/commjs/color'
export default {
    components: {
        Area,
        Timeinterval
    },
    props: {},
    data() {
        return {
            zoom: '',
            vh: undefined,
            formData: {
                //后面需要修改
                deptIndex: '',
                monitorFlag: 2,
                powerFlag: 2,
                loadType: [],
                manufacturer: [],
                searchBeginTime: '',
                searchEndTime: '',
                statisticalType: '',
                scale: [],
                linePassRate: ''
            },
            classificationData: [],
            dejioption: [],
            deji: '',
            //电压等级
            voltageleveloption: [],
            interfereoption: [],
            terminaloption: [],
            tableData: [],
            title: '',
            dydj: true,
            expandID: [],
            loading: false,
            title: '',
            device: 1,
            terminalClass: [
                {
                    id: 0,
                    value: '0',
                    label: '极重要'
                },
                {
                    id: 1,
                    value: '1',
                    label: '重要'
                },
                {
                    id: 2,
                    value: '2',
                    label: '普通'
                },
                {
                    id: 3,
                    value: '3',
                    label: '不重要'
                }
            ] //终端等级
        }
    },
    created() {
        this.info()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.zoom = 1 / document.body.style.zoom
        window.addEventListener('resize', () => {
            this.zoom = 1 / document.body.style.zoom
            //   this.myChartes.resize();
        })


        this.formData.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        this.onSubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            setTimeout(() => {
                ; (document.getElementById('dataintegrity').style.width = `100%`),
                    //   document.getElementById("app-main-in").offsetWidth - 100 + "px"
                    (document.getElementById('dataintegrity').style.height =
                        window.sessionStorage.getItem('appheight') - 240 + 'px')
                this.device = window.devicePixelRatio
                if (this.device == 1) {
                    this.tableheight = this.tableheight * 2
                }
                if (this.device == 1.25) {
                    this.tableheight = this.tableheight * 1.6
                }
                if (this.device == 1.5) {
                    this.tableheight = this.tableheight * 1.93
                }
            }, 0)
            this.vh = window.sessionStorage.getItem('appheight') - 170
        },
        //字典表
        info() {
            // 获取统计类型
            this.classificationData = dicData('Statistical_Type', ['Report_Type'])
            this.formData.statisticalType = this.classificationData[0]
            //   字典获取数据电压等级;
            this.voltageleveloption = dicData('Dev_Voltage', [])
            this.formData.scale = this.voltageleveloption
            //字典获取数据终端厂家
            this.terminaloption = dicData('Dev_Manufacturers', [])
            this.formData.manufacturer = this.terminaloption
            //字典获取数据干扰源类型
            this.interfereoption = dicData('Interference_Source', [])
            this.formData.loadType = this.interfereoption
        },
        // 区域
        handleNodeClick(data) {
            // console.log(data);
            this.formData.deptIndex = data.id
        },
        // 查询
        onSubmit() {
            this.loading = true

                ; (this.formData.serverName = 'harmonic-boot'),
                    (this.formData.searchBeginTime = this.$refs.Timeinterval.timeValue[0])
            this.formData.searchEndTime = this.$refs.Timeinterval.timeValue[1]
            this.title = this.formData.statisticalType.label
            getLineIntegrityData(this.formData).then(res => {
                if (res.code == 'A0000') {
                    let title = []
                    let integrityData = []
                    res.data.forEach(item => {
                        title.push(item.name)
                        integrityData.push(item.integrityData)
                    })
                    this.dataintegritys(title, integrityData)
                }
            })
        },
        // 重置
        Reset() {
            this.formData = {
                //后面需要修改
                deptIndex: '',
                monitorFlag: 2,
                powerFlag: 2,
                loadType: [],
                manufacturer: [],
                searchBeginTime: '',
                searchEndTime: '',
                statisticalType: '',
                scale: [],
                linePassRate: ''
            }
        },
        dataintegritys(title, integrityData) {
            // console.log("===", title, integrityData);

            this.loading = true
            const echarts = require('echarts')
            let runstatus = document.getElementById('dataintegrity')
            var myChartes = echarts.init(runstatus)

            myChartes.clear()
            var option = {
                title: {
                    text: this.title,
                    left: 'center'

                    //subtext: '单位(%)'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function (params) {
                        var tips = ''
                        tips += params[0].name + '</br/>'
                        for (var i = 0; i < params.length; i++) {
                            if (params[i].value == 3.14159) {
                                tips += params[i].seriesName + ':暂无数据<br/>'
                            } else {
                                tips += params[i].seriesName + ':' + params[i].value + '%<br/>'
                            }
                        }
                        return tips
                    }
                },
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '10px',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        // data: this.xdata,
                        data: title,
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            textStyle: {
                                fontFamily: 'dinproRegular',
                                color: '#000'
                            },
                            rotate: 39
                        },
                        axisLine: {
                            show: true,
                            symbol: ['none', 'arrow']
                        }
                    }
                ],
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: { show: true }
                        // dataZoom: {
                        //      yAxisIndex: 'none'
                        // },
                        // //restore: {},
                        // mark : {show: true},
                        //magicType : {show: true, type: ['line', 'bar']}
                    }
                },
                yAxis: [
                    {
                        name: '单位(%)',
                        type: 'value',
                        min: 0,
                        max: 100,
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            symbol: ['none', 'arrow']
                        },
                        splitArea: {
                            show: true
                        }
                    }
                ],
                series: [
                    {
                        name: '',
                        // name: this.timeValue,
                        barMaxWidth: 45,
                        type: 'bar',
                        label: {
                            normal: {
                                show: false,
                                position: 'top'
                            }
                        },
                        itemStyle: {
                            normal: {
                                // 随机显示
                                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                                // 定制显示（按顺序）
                                color: function (params) {
                                    if (params.value == 3.14159) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#ccc'
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value >= 90) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: Integrity1
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value >= 60 && params.value <= 90) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: Integrity2
                                                }
                                            ],
                                            false
                                        )
                                        // && params.value > 5
                                    } else if (params.value <= 60) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: Integrity3
                                                }
                                            ],
                                            false
                                        )
                                    }
                                }
                            }
                        },
                        markLine: {
                            silent: false,
                            symbol: 'circle',
                            data: [
                                {
                                    name: '完整性≥90%',
                                    yAxis: 100,
                                    lineStyle: {
                                        color: Integrity1
                                    },
                                    label: {
                                        position: 'middle',
                                        formatter: '{b}',
                                        textStyle: {
                                            color: Integrity1
                                        }
                                    }
                                },
                                {
                                    name: '60%≤完整性<90%',
                                    yAxis: 90,
                                    lineStyle: {
                                        color: Integrity2
                                    },
                                    label: {
                                        position: 'middle',
                                        formatter: '{b}',
                                        textStyle: {
                                            color: Integrity2
                                        }
                                    }
                                },
                                {
                                    name: '完整性<60%',
                                    yAxis: 60,
                                    lineStyle: {
                                        color: Integrity3
                                    },
                                    label: {
                                        position: 'middle',
                                        formatter: '{b}',
                                        textStyle: {
                                            color: Integrity3
                                        }
                                    }
                                }
                            ]
                        },
                        // data: this.ydata
                        data: integrityData
                    }
                ]
            }
            let _this = this
            myChartes.setOption(option)
            window.echartsArr.push(myChartes)
            setTimeout(() => {
                myChartes.resize()
                _this.loading = false
            }, 100)

            _this.$erd.listenTo(_this.$refs.fg, element => {
                _this.$nextTick(() => {
                    myChartes.resize()
                })
            })
            window.onresize = function () {
                myChartes.resize()
            }
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="less" scoped>
@import url('../../../../../styles/comStyle.less');
</style>
<style lang="scss" scoped>
::v-deep .el-table_1_column_1 {
    .el-tooltip {
        text-align: left;
    }
}
</style>
