var vms = Vue.component("amplify-fljgs", {
    template: `
        <div>
            <div class="amplify-title-icon">
                <img src="https://fileimg.makalu.cc/WEB_DBD5893450984E50AFF356EF44FF4139.png"  @click="openAmplify">
            </div>
            <transition name="el-zoom-in-top">
                <div class="amplify-fixed" v-show="show"  style="display: none" @click="closeAmplifyAll">
                    <div class="amplify-max">
                        <div class="amplify-title">
                            <div>分类及工时情况</div>
                            <div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
                        </div>   
                        <div class="amplify-content">
                            <!--内容区域-->  
                            <!--头部切换-->
                           <div class="amplify-warning-info">
                            <div class="amplify-warning-info-title">
                                <div :class="infoNav==0?'active':''" @click="onWarningInfoNav(0)">设备数量</div>
                                <div :class="infoNav==1?'active':''" @click="onWarningInfoNav(1)">昨日工时</div>
                                <div :class="infoNav==2?'active':''" @click="onWarningInfoNav(2)">当月工时</div>
                            </div>
                           <div class="amplify-pictable" ref="chart"></div>
                        </div>
                        </div>  
                    </div>
                </div>
            </transition>
        </div>
    `,
    props: {},
    data() {
        return {
            show: false,
            infoNav: 0,
            classifyBarData: [],
            showClassifyBarData: [],
        }
    },
    mounted() {

    },
    methods: {
        openAmplify() {
            this.show = true
            this.getClassifyBarData()
        },
        closeAmplify() {
            this.show = false
        },
        closeAmplifyAll(e) {
            if (e.target.className == 'amplify-fixed') {
                this.show = false
            }
        },

        //分类及工时情况
        getClassifyBarData() {
            axios.post(requestUrl + "getClassifyWorks?deptId=" + deptId + "&pageSize=4&projectId=" + JSON.parse(localStorage.getItem("data")).jzgj, {}).then(res => {
                this.classifyBarData = [res.data.data.num, res.data.data.dayWorkTime, res.data.data.monthWorkTime];
                this.showClassifyBarData = this.classifyBarData[0];
                this.getChartData()
            }).catch(err => {
            })
        },
        //数据图展示
        getChartData() {
            //品类金额占比 饼图
            var chChartPie = echarts.init(this.$refs.chart);
            this.echartPie(chChartPie, this.showClassifyBarData)
        },
        echartPie(chChart, data) {
            let newPromise = new Promise((resolve) => {
                resolve()
            })

            //然后异步执行echarts的初始化函数
            newPromise.then(() => {

                if (data.length > 0) {
                    var max = data[0].total
                } else {
                    var max = 0
                }
                var nameData = [];
                var totalData = []
                var background = []
                var yesMonitor = []
                var notMonitor = []
                var yesProp = []
                var notProp = []
                var unitData = []

                for (let i = data.length - 1; i >= 0; i--) {
                    nameData.push(data[i].name);
                    totalData.push(data[i].total)
                    unitData.push(data[i].unit)
                    background.push(100);
                    yesMonitor.push(data[i].yesMonitor);
                    notMonitor.push(data[i].notMonitor);
                    yesProp.push((data[i].yesMonitor / max) * 100)
                    notProp.push((data[i].notMonitor / max) * 100)
                }

                var legend = ["已监控", "未监控"]
                if (this.legend) {
                    legend = this.legend
                }

                this.option = {
                    grid: {
                        //图表的位置
                        top: "8%",
                        left: "3%",
                        right: "5%",
                        bottom: "-12%",
                        containLabel: true,
                    },
                    legend: {
                        right: "0",
                        top: "0",
                        //icon: "circle",
                        itemWidth: 22,
                        itemHeight: 20,
                        itemGap: 16,
                        textStyle: {
                            fontSize: 25,
                            color: '#c6d9fa',
                        },
                        data: legend,
                    },
                    xAxis: [{
                        show: false,
                    },
                        //由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
                        {
                            show: false,
                        }
                    ],
                    yAxis: [
                        {
                            type: 'category',
                            axisLabel: {
                                show: false, //让Y轴数据不显示
                            },
                            itemStyle: {},
                            axisTick: {
                                show: false, //隐藏Y轴刻度
                            },
                            axisLine: {
                                show: false, //隐藏Y轴线段
                            },
                            data: [],
                        }, {
                            show: false,
                            data: [],
                            axisLine: {
                                show: false
                            }
                        }],
                    series: [
                        //数据条--------------------我是分割线君------------------------------//
                        {
                            show: true,
                            type: 'bar',
                            xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
                            barGap: '-100%',
                            barWidth: '20', //统计条宽度
                            itemStyle: {
                                normal: {
                                    color: 'rgba(22,203,115,0.05)'
                                },
                            },
                            label: {
                                normal: {
                                    show: true,
                                    //label 的position位置可以是top bottom left,right,也可以是固定值
                                    //在这里需要上下统一对齐,所以用固定值
                                    position: [0, '-40'],
                                    rich: { //富文本
                                        prop: { //自定义颜色
                                            color: '#c6d9fa',
                                            fontSize: '25',
                                        },
                                        unit: {
                                            color: '#6c829a',
                                            fontSize: '25',
                                        },
                                        yes: {
                                            color: '#55adf7',
                                            fontSize: '25',
                                        },
                                        not: {
                                            color: '#4677fa',
                                            fontSize: '25',
                                        },
                                        index: {
                                            color: '#fcbc02',
                                            fontStyle: 'italic',
                                            padding: [0, 0, 0, 5],
                                            fontSize: '25',
                                        },
                                        name: {
                                            width: 480,
                                            color: '#c6d9fa',
                                            padding: [0, 0, 0, 10],
                                            fontSize: '25',
                                        },
                                        color: {
                                            color: '#8ca2be',
                                            fontSize: '20',
                                        },
                                        arrow: {
                                            width: 20,
                                            height: 15,
                                            backgroundColor: {
                                                image: "https://fileimg.makalu.cc/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png",
                                            },
                                        },

                                    },
                                    formatter: function (data) {
                                        //富文本固定格式{colorName|这里填你想要写的内容}
                                        //return '{arrow|}'
                                        return '{arrow|}{index|No.' + (nameData.length - data.dataIndex) + '}{name|' + nameData[data.dataIndex] + '}{prop|' + totalData[data.dataIndex] + '}{unit| ' + unitData[data.dataIndex] + '}{prop|（} {yes|' + yesMonitor[data.dataIndex] + '}{unit| ' + unitData[data.dataIndex] + '/}{not|' + notMonitor[data.dataIndex] + '}{unit| ' + unitData[data.dataIndex] + '}{prop|）} ';
                                    },
                                }
                            },
                            data: background
                        },
                        {
                            type: 'bar',

                            silent: true,
                            yAxisIndex: 1,
                            barWidth: 20,
                            itemStyle: {
                                normal: {
                                    color: 'rgba(0,82,198,0.3)'
                                },
                                emphasis: {
                                    color: 'rgba(0,82,198,0.3)'
                                }
                            },
                            data: background
                        },
                        {
                            type: 'bar',
                            name: legend[0],

                            stack: '1',
                            legendHoverLink: false,
                            barWidth: 20,
                            itemStyle: {
                                normal: {
                                    color: '#52adf4'
                                },
                                emphasis: {
                                    color: '#52adf4'
                                }
                            },
                            data: yesProp
                        }, {
                            type: 'bar',
                            name: legend[1],
                            stack: '1',
                            legendHoverLink: false,
                            barWidth: 20,
                            itemStyle: {
                                normal: {
                                    color: '#4677ff'
                                },
                                emphasis: {
                                    color: '#4677ff'
                                }
                            },
                            data: notProp
                        }]
                };

                chChart.setOption(this.option);
                window.onresize = chChart.resize;
            })
        },
        //头部切换
        onWarningInfoNav(n) {
            this.infoNav = n
            this.showClassifyBarData = this.classifyBarData[n];
            this.getChartData()
        },
    },
    watch: {},

})