var vms = Vue.component("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="nav==1?'active':''" @click="onInfoNav(1,'今日出勤')">今日出勤</div>
                                    <div :class="nav==0?'active':''" @click="onInfoNav(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: 380px;" ref="chart"></div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>  
                    </div>
                </div>
            </transition>
        </div>
       
    `,
    props: {

    },
    data() {
        return {
            show:false,
            projectId:JSON.parse(localStorage.getItem("data")).id,
            nav:1,
            surveyUrl: '/images/survey_icon_5.png',
            staffText: '今日出勤',
            lwDataTotal:0,
            option:{}
        }
    },
    mounted(){

    },
    methods: {
        openAmplify() {
            this.show = true
            this.getLWData(1)
        },
        closeAmplify() {
            this.show = false
        },
        closeAmplifyAll(e) {
            if (e.target.className == 'amplify-fixed') {
                this.show = false
            }
        },
        onInfoNav(n, text) {
            this.nav = n
            this.staffText = text
            this.getLWData(n)
            if (n == 0) {
                this.surveyUrl = '../../images/survey_icon_4.png'
            } else {
                this.surveyUrl = '../../images/survey_icon_5.png'
            }
        },

        //劳务人员概况
        getLWData(infoNav) {
            axios.post("https://smz.makalu.cc/mkl/screenApi/getAllUserData?token=" + JSON.parse(localStorage.getItem("data")).smz_token + "&deptId=131&typtProjectId=" + JSON.parse(localStorage.getItem("data")).id + "&typtDeptId=" + JSON.parse(localStorage.getItem("data")).dept_id, {}).then(res => {
                this.lwLoading = false;
                var laborPersonnelData = [];
                if (infoNav == 0) {
                    laborPersonnelData.push({text: "特种作业人员", value: res.data.whiteUserInfo.specialTotal, type: 2})
                    laborPersonnelData.push({text: "劳务人员(不含特种人员)", value: res.data.whiteUserInfo.unSpecialTotal, type: 1})
                    laborPersonnelData.push({text: "管理人员", value: res.data.whiteUserInfo.glrs, type: 0})
                    this.lwDataTotal = parseInt(res.data.whiteUserInfo.specialTotal)+parseInt(res.data.whiteUserInfo.unSpecialTotal)+parseInt(res.data.whiteUserInfo.glrs)
                } else {
                    laborPersonnelData.push({text: "特种作业人员", value: res.data.cqUserInfo.specialTotal, type: 2})
                    laborPersonnelData.push({text: "劳务人员(不含特种人员)", value: res.data.cqUserInfo.unSpecialTotal, type: 1})
                    laborPersonnelData.push({text: "管理人员", value: res.data.cqUserInfo.glrs, type: 0})
                    this.lwDataTotal = res.data.rcrs
                }
                this.$nextTick(() => {
                    this.echart(laborPersonnelData)
                })
            }).catch(err => {
            })

        },

        echart(chartData){
            var chChart = echarts.init(this.$refs.chart);
            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)
                    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))
                    }
                }

                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: '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: 350,
                                            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|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| 人}   {prop|'+prop[data.dataIndex]+'}{color| %} ';
                                    },
                                }
                            },
                            data: bgData,
                        },
                        {
                            type: "bar",
                            zlevel: 1,
                            itemStyle: {
                                normal: {
                                    color: "#6ab9fe",
                                },
                            },
                            barWidth: 15,
                            data: prop,
                        },
                        {
                            type: "bar",
                            barWidth: 15,
                            barGap: "-100%",
                            data: bgData,
                            itemStyle: {
                                normal: {
                                    color: "rgba(24,31,68,1)",
                                },
                            },
                        },
                    ],
                };

                chChart.setOption(this.option);
                window.onresize = chChart.resize;
            })
        },
    },
    watch:{

    },
})