var vms = Vue.component("Company-amplify-aqjy", {
    template: `
        <div>
            <div class="amplify-title-icon">
                <img src="http://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-glr-max" style="padding:36px 20px 0">
                                <div class="amplify-glr-min">
                                    <div class="amplify-glr-title">线上教育人数</div>
                                    <div class="amplify-labour-education">
                                        <people-number :number="lsry" unit="人"></people-number>
                                        <div class="amplifys-survey_content">
                                            <div class="amplifys-survey_content_img  amplify-labour-education_bgd">
                                                <img src="/images/education_icon.png">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="amplify-glr-title" >累计安全教育人数</div>
                                    <people-number :number="ljaqjy" unit="人"></people-number>

                                   <div :style="{'height': height+'px'}" ref="chart"></div>

                                </div>
                            </div>
                            
                        </div>  
                    </div>
                </div>
            </transition>
        </div>
    `,
    props: {

    },
    data() {
        return {
            show:false,
            //安全教育
            safetyEducationData1:[
                { text:"接受培训率", value:0  },
            ],
            safetyEducationData2:[
                { text:"培训通过率", value:0 },
            ],
            ljaqjy:0,
            lsry:0,
            height:60,
            max:0,
            width:280,
            infoNav:1,
        }
    },
    mounted(){

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

        getActivePeopleNum1(){
            axios.post("https://smz.makalu.cc/mkl/screenApi/getUserInfoTempList?token=00e650bb50854f54b146e83f73500ca8&isWork=1&deptId=123&typtDeptId="+JSON.parse(localStorage.getItem("data")).dept_id+"&typtProjectId="+JSON.parse(localStorage.getItem("data")).id, {
            }).then(res => {
                if(res.data.state == "OK"){
                    this.lsry = res.data.data.length;
                }else{
                    this.lsry = 0;
                }
            }).catch(err => {
            })
        },

        //劳务人员概况
        getLWData(infoNav){
            var that = this
            axios.post("https://smz.makalu.cc/mkl/screenApi/getAllUserData?token=00e650bb50854f54b146e83f73500ca8&deptId=123&typtDeptId="+JSON.parse(localStorage.getItem("data")).dept_id, {
            }).then(res => {
                var laborPersonnelData = [];
                if(infoNav == 0){
                    laborPersonnelData.push({text:"特种作业人员", value:res.data.userInfo.specialTotal})
                    laborPersonnelData.push({text:"劳务人员", value:res.data.userInfo.grrs})
                    laborPersonnelData.push({text:"管理人员", value:res.data.userInfo.glrs})
                    that.lwDataTotal = res.data.zgrs
                }else{
                    laborPersonnelData.push({text:"特种作业人员", value:res.data.cqUserInfo.specialTotal})
                    laborPersonnelData.push({text:"劳务人员", value:res.data.cqUserInfo.grrs})
                    laborPersonnelData.push({text:"管理人员", value:res.data.cqUserInfo.glrs})
                    that.lwDataTotal = res.data.rcrs
                }
                that.ljaqjy = res.data.zcrs;
                var safetyEducationData = [];
                var safetyEducationData2 = [];
                // safetyEducationData.push({text:"培训通过率",value:(res.data.jspxrs*res.data.pxtgl/100).toFixed(0)});
                // safetyEducationData2.push({text:"接受培训率",value:res.data.jspxrs});
                safetyEducationData.push({text:"培训通过率",value:res.data.zcrs});
                safetyEducationData2.push({text:"接受培训率",value:res.data.zcrs});
                that.safetyEducationData1 = safetyEducationData;
                that.safetyEducationData2 = safetyEducationData2;
                that.laborPersonnelData = laborPersonnelData;
                that.pxTotal = res.data.jspxrs;
                console.log(safetyEducationData2)
                this.getChartData()

            }).catch(err => {
            })
        },

        getChartData(){
            //品类金额占比 饼图
            var chChart = echarts.init(this.$refs.chart);
            this.echart(chChart,this.safetyEducationData2)
        },
        echart(chChart,chartData){
            var that = this
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {

                var value = []
                var text = []
                var bgData = []
                var total = 0
                for (let i = 0; i < chartData.length; i++) {
                    value.push(chartData[i].value)
                    text.push(chartData[i].text)
                    bgData.push(100)
                    if(this.max){
                        total = this.max
                    }else{
                        total += chartData[i].value
                    }
                }

                var prop = []
                for (let j = 0; j < value.length; j++) {
                    if(total == 0){
                        prop.push(0)
                    }else{
                        prop.push((value[j]/total * 100).toFixed(1))
                    }
                }
                var unit = '人'
                if(this.unit){
                    unit = this.unit
                }


                this.option = {
                    grid: {
                        left: "5%",
                        right: "5%",
                        bottom: "0%",
                        top: "0%",
                        containLabel: true,
                    },
                    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: '6', //统计条宽度
                            itemStyle: {
                                normal: {
                                    color: 'rgba(22,203,115,0.05)'
                                },
                            },
                            label: {
                                normal: {
                                    show: true,
                                    //label 的position位置可以是top bottom left,right,也可以是固定值
                                    //在这里需要上下统一对齐,所以用固定值
                                    position: [0, '-20'],
                                    rich: { //富文本
                                        prop: { //自定义颜色
                                            color: '#c6d9fa',
                                            fontSize:'14',
                                        },
                                        unit:{
                                            color: '#6c829a',
                                            fontSize:'12',
                                        },
                                        yes:{
                                            color: '#55adf7',
                                            fontSize:'14',
                                        },
                                        not:{
                                            color: '#4677fa',
                                            fontSize:'14',
                                        },
                                        index:{
                                            color: '#fcbc02',
                                            fontStyle: 'italic',
                                            padding:[0,0,0,5],
                                            fontSize:'14',
                                        },
                                        name: {
                                            width: this.width,
                                            color: '#c6d9fa',
                                            padding:[0,0,0,5],
                                            fontSize:'12',
                                        },
                                        color:{
                                            color: '#8ca2be',
                                            fontSize:'12',
                                        },
                                        arrow:{
                                            width:12,
                                            height:8,
                                            backgroundColor: {
                                                image: "https://fileimg.makalu.cc/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png",
                                            },
                                        },

                                    },
                                    formatter: function(data) {
                                        console.log(text)
                                        console.log(value)
                                        //富文本固定格式{colorName|这里填你想要写的内容}
                                        //return '{arrow|}'
                                        if(that.show == true){
                                            return '{arrow|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| '+unit+'}';
                                        }else{
                                            return '{arrow|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| '+unit+'}   {prop|'+prop[data.dataIndex]+'}{color| %} ';
                                        }

                                    },
                                }
                            },
                            data: bgData,
                        },
                        {
                            type: "bar",
                            zlevel: 1,
                            itemStyle: {
                                normal: {
                                    color: "#6ab9fe",
                                },
                            },
                            barWidth: 8,
                            data: prop,
                        },
                        {
                            type: "bar",
                            barWidth: 8,
                            barGap: "-100%",
                            data: bgData,
                            itemStyle: {
                                normal: {
                                    color: "rgba(24,31,68,1)",
                                },
                            },
                        },
                    ],
                };

                chChart.setOption(this.option);
                window.onresize = chChart.resize;

                chChart.off('click')

                chChart.on('click', function (params) {
                    that.$emit('personnel',params.dataIndex);
                })
            })
        },

    },
    watch:{
        data: function (n,o) {
            this.getChartData()
        },
        max: function (n,o) {
            this.getChartData()
        }
    },

})