var vms = Vue.component("Company-amplify-lwrygk", {
    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-lwrygk-info">
                                <div class="amplify-lwrygk-info-title">
                                    <div :class="infoNav==1?'active':''" @click="onWarningInfoNav(1,'今日出勤')">今日出勤</div>
                                    <div :class="infoNav==0?'active':''" @click="onWarningInfoNav(0,'在岗人数')">在岗人数</div>
                                </div>
                            </div>
                            <div class="amplify-lwrygk-data-content">
                                <el-row>
                                    <el-col :span="8">
                                        <div class="amplify-lwrygk-survey_content">
                                            <div class="amplify-lwrygk-survey_content_img">
                                                <img :src="surveyUrl">
                                            </div>
                                        </div>
                                        <div class="amplify-lwrygk-survey_content_number">
                                            <div class="amplify-lwrygk-survey_content_value"><span>{{lwDataTotal}}</span> 人</div>
                                            <p>{{staffText}}</p>
                                        </div>
                                    </el-col>
                                    <el-col :span="16" >
                                         <div :style="{'height': height+'px'}" ref="chart"></div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>  
                    </div>
                </div>
            </transition>
        </div>
       
    `,
    props: {

    },
    data() {
        return {
            show:false,
            infoNav:1,
            staffText:'今日出勤',
            surveyUrl:'/images/survey_icon_4.png',
            lwDataTotal:0,
            option:{},
            height:380,
            width:380,
            laborPersonnelData:[],
            show1:false
        }
    },
    mounted(){

    },
    methods: {
        openAmplify() {
            this.show = true
            //劳务人员概况
            this.getLWData(this.infoNav);
        },
        closeAmplify() {
            this.show = false
        },
        closeAmplifyAll(e) {
            if (e.target.className == 'amplify-fixed') {
                this.show = false
            }
        },
        //劳务人员概况
        onWarningInfoNav(n,text){
            this.infoNav = n
            this.staffText = text
            this.getLWData(this.infoNav);
            if(n == 0){
                this.surveyUrl = '/images/survey_icon_4.png'
            }else{
                this.surveyUrl = '/images/survey_icon_5.png'
            }
        },

        //劳务人员概况
        getLWData(infoNav){
            this.lwLoading = true;
            axios.post("https://smz.makalu.cc/mkl/screenApi/getAllUserData?token=00e650bb50854f54b146e83f73500ca8&deptId=131", {
            }).then(res => {
                this.lwLoadinglwLoading = false;
                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})
                    this.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})
                    this.lwDataTotal = res.data.rcrs
                }
                this.ljaqjy = res.data.jspxrs;
                var safetyEducationData = [];
                var safetyEducationData2 = [];
                safetyEducationData.push({text:"培训通过率",value:(res.data.jspxrs*res.data.pxtgl/100).toFixed(0)});
                safetyEducationData2.push({text:"接受培训率",value:res.data.jspxrs});
                this.safetyEducationData = safetyEducationData;
                this.safetyEducationData2 = safetyEducationData2;
                this.laborPersonnelData = laborPersonnelData;
                this.pxTotal = res.data.jspxrs;
                this.getChartData()

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


        getChartData(){
            //品类金额占比 饼图
            var chChart = echarts.init(this.$refs.chart);
            this.echart(chChart,this.laborPersonnelData)
        },
        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.show1 == 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:{

    },
})