var vms = Vue.component("Company-amplify-czzqk", {
    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="czz-number">
                                <div class="czz-number-content" style="padding-left: 118px">
                                    <div class="czz-number-img czz-number-img-blue">
                                        <img src="/images/circle_icon_1.png">
                                    </div>
                                    <div class="survey_content_number">
                                        <p>操作证数量</p>
                                        <div class="survey_content_value"><span v-cloak>{{certInfoData.count}}</span> 个</div>
                                    </div>
                                </div>
                                <div class="czz-number-content" style="padding-left: 118px">
                                    <div class="czz-number-img czz-number-img-green">
                                        <img src="/images/circle_icon_2.png">
                                    </div>
                                    <div class="survey_content_number">
                                        <p>已绑定数量</p>
                                        <div class="survey_content_value survey_content_value_color_green"><span v-cloak>{{certInfoData.bindCount}}</span> 台</div>
                                    </div>
                                </div>
                            </div>
                            
                             <div :style="{'height': height+'px'}" ref="chart"></div>
<!--                             <div style="border: 1px solid green;height: 380px" ref="chart"></div>-->
                            
                        </div>  
                    </div>
                </div>
            </transition>
        </div>
    `,
    props: {
        businessdata:{
            type:Object
        }
    },
    data() {
        return {
            show:false,
            certInfoData:{},
            height:380,
            //操作证数据
            data:[
                {
                    text:"职工",
                    value:0
                },{
                    text:"劳务派遣",
                    value:0
                },{
                    text:"其他",
                    value:0
                },
            ],
        }
    },
    mounted(){

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

        //操作证情况统计
        getCertInfoData(){
            axios.post(this.businessdata.requestUrl+"getCertInfoData?deptId="+this.businessdata.deptId+"&projectId="+this.businessdata.projectIdStr, {
            }).then(res => {
                this.certInfoData = res.data.data;
                this.data = [{text:"职工",value:res.data.data.zgCount},{text:"劳务派遣",value:res.data.data.lwCount},{text:"其他",value:res.data.data.qtCount}]
                this.getChartData()
            }).catch(err => {
            })
        },

        getChartData(){
            //品类金额占比 饼图
            var chChart = echarts.init(this.$refs.chart);
            this.echart(chChart,this.data)
        },
        echart(chChart,chartData){
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                var value = []
                var text = []
                var total = 0
                var bgd = []
                for (let i = 0; i < chartData.length; i++) {
                    value.push(chartData[i].value)
                    text.push(chartData[i].text)
                    bgd.push(100)
                    total += chartData[i].value
                }

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

                }

                this.option = {
                    grid: {
                        left: "5%",
                        right: "5%",
                        bottom: "-10%",
                        top: "2%",
                        containLabel: true,
                    },
                    xAxis: {
                        show: false,
                        type: "value",
                    },
                    yAxis: [
                        {
                            type: "category",
                            inverse: true,
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#cbdaff",
                                    fontSize: "14",
                                },
                            },
                            splitLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                            },
                            data: text,
                        },
                        {
                            type: "category",
                            inverse: true,
                            axisTick: "none",
                            axisLine: "none",
                            show: true,
                            axisLabel: {
                                textStyle: {
                                    color: "#cbdaff",
                                    fontSize: "16",
                                },
                                formatter: function(params,i){
                                    var text = "{a|" + value[i] + "}{a|   "+ prop[i]+ "%}";
                                    return text;
                                },
                                rich: {
                                    a: {
                                        fontSize: '16px',
                                        color: "#cbdaff",
                                    },
                                },
                            },
                            data: prop,
                        },
                    ],
                    series: [
                        {
                            type: "bar",
                            zlevel: 1,
                            itemStyle: {
                                normal: {
                                    color: "#6ab9fe",
                                },
                            },
                            barWidth: 8,
                            data: prop,
                        },
                        {
                            type: "bar",
                            barWidth: 8,
                            barGap: "-100%",
                            data: bgd,
                            itemStyle: {
                                normal: {
                                    color: "rgba(24,31,68,1)",
                                },
                            },
                        },
                    ],
                };

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

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

})