var vms = Vue.component("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="amplify-czz-number" style="padding: 0px">
                                <div class="amplify-czz-number-content" @click="getCertInfoList(1)">
                                    <div class="amplify-czz-number-img amplify-czz-number-img-blue">
                                        <img src="/images/circle_icon_1.png">
                                    </div>
                                    <div class="amplify-survey_content_numbers">
                                        <p>操作证数量</p>
                                        <div class="amplify-survey_content_value"><span v-cloak>{{certInfoData.count}}</span> 个</div>
                                    </div>
                                </div>
                                <div class="amplify-czz-number-content" @click="getCertInfoList(2)">
                                    <div class="amplify-czz-number-img amplify-czz-number-img-green">
                                        <img src="/images/circle_icon_2.png">
                                    </div>
                                    <div class="amplify-survey_content_number">
                                     <p>已绑定数量</p>
                                 <div class=" amplify-survey_content_value amplify-survey_content_value_color_green"><span v-cloak>{{certInfoData.bindCount}}</span> 台</div>
                                    </div>
                                </div>
                         </div>
<!--                        职工、劳务派遣、其他-->
                            <div class="amplify-workers" ref="chart">
                            
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
    `,
        props: {},
        data() {
            return {
                certInfoData:{},
                //操作证数据
                certificateData:[
                    {
                        text:"职工",
                        value:0
                    },{
                        text:"劳务派遣",
                        value:0
                    },{
                        text:"其他",
                        value:0
                    },
                ],
                show: false,
            }
        },
        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(requestUrl+"getCertInfoData?deptId="+deptId+"&projectId="+JSON.parse(localStorage.getItem("data")).jzgj, {
                }).then(res => {
                    this.certInfoData = res.data.data;
                    this.certificateData = [{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.certificateData)
            },
            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++) {
                        prop.push((value[j] / total * 100).toFixed(1))
                    }

                    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: "25",
                                    },
                                },
                                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: "25",
                                    },
                                    formatter: function (params, i) {
                                        var text = "{a|" + value[i] + "}{a|   " + prop[i] + "%}";
                                        return text;
                                    },
                                    rich: {
                                        a: {
                                            fontSize: '25px',
                                            color: "#cbdaff",
                                        },
                                    },
                                },
                                data: prop,
                            },
                        ],
                        series: [
                            {
                                type: "bar",
                                zlevel: 1,
                                itemStyle: {
                                    normal: {
                                        color: "#6ab9fe",
                                    },
                                },
                                barWidth: 20,
                                data: prop,
                            },
                            {
                                type: "bar",
                                barWidth: 20,
                                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)
            }
        }




})