var vms = Vue.component("amplify-aqjy", {
    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-secure">
                            <div class="amplify-accumulate">
                               <div class="amplify-accumulate-amt">
                               <div class="amplify-icons"></div>
                               <div style="font-size: 24px">累计入场教育人数</div>
                               </div>
                               <div class="amplify-accumulate-amt">
                               <div class="amplify-icons"></div>
                               <div style="font-size: 24px">线上教育人数</div>
                               </div>
                            </div>
                            <div class="amplify-gifPictrue" >
                            <div class="amplify-gif">
                                        <div class="amplify-people-number" v-for="(item,index) in ljaqjy" :key="index">
                                        {{item}}
                                        </div>
<!--                            <span style="font-size: 32px;line-height: 80px">人</span>-->
                            </div>
                             <div class="amplify-gif" style="position:absolute;right:310px">
                                       <div class="amplify-people-number" >
                                        {{lsry}}
                                        </div>
<!--                            <span style="font-size: 32px;line-height: 80px">人</span>-->
                            </div>
                            </div>
                            <div class="amplify-train">
                            <div class="amplify-train-line" ref="charts1">1</div>
<!--                            <div class="amplify-train-line" ref="charts2">2</div>-->
</div>
</div>
                        </div>  
                    </div>
                </div>
            </transition>
        </div>
    `,
    props: {},
    data() {
        return {
            ljaqjy: 0,
            lsry: 0,
            show: false,
            safetyEducationData1: [
                {text: "接受培训率", value: 0},
            ],
            safetyEducationData2: [
                {text: "接受培训率", value: 0},
            ],
            width: 400
        }
    },
    mounted() {

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

        },
        getLWData() {
            axios.post("https://smz.makalu.cc/mkl/screenApi/getAllUserData?token=" + JSON.parse(localStorage.getItem("data")).smz_token
                + "&deptId=123&typtDeptId=" + JSON.parse(localStorage.getItem("data")).dept_id + "&typtProjectId=" + JSON.parse(localStorage.getItem("data")).id, {}).then(res => {


                if (res.data.code == "-1") {

                    this.ljaqjy = 0;

                }
                this.ljaqjy = res.data.zcrs + '';
                console.log(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});
                this.safetyEducationData1 = safetyEducationData;
                this.safetyEducationData2 = safetyEducationData2;
                this.getChartData()
                this.getChartData1()
            }).catch(err => {
            })
        },
        getLSRYData() {
            axios.post("https://smz.makalu.cc/mkl/screenApi/getUserInfoTempList?token=" + JSON.parse(localStorage.getItem("data")).smz_token
                + "&isWork=1&deptId=123&typtDeptId=" + JSON.parse(localStorage.getItem("data")).dept_id + "&typtProjectId=" + JSON.parse(localStorage.getItem("data")).id, {}).then(res => {
                    this.lsry = res.data.data.length + '';
            }).catch(err => {
            })
        },
        getChartData() {
            //品类金额占比 饼图
            var chChart = echarts.init(this.$refs.charts1);
            this.echart1(chChart, this.safetyEducationData1)
        },
        //出勤情况-灰名单
        getChartData1() {
            //品类金额占比 饼图
            var chChart = echarts.init(this.$refs.charts2);
            this.echart2(chChart, this.safetyEducationData2)
        },
        echart1(chChart, chartData) {
            console.log(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.workMax) {
                        total = this.workMax
                    } 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: '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: this.width,
                                            color: '#c6d9fa',
                                            padding: [0, 0, 0, 5],
                                            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|}'
                                        // 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| %} ';
                                        // }
                                        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: 16,
                            data: prop,
                        },
                        {
                            type: "bar",
                            barWidth: 20,
                            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);
                })
            })
        },
        //出勤情况-灰名单
        echart2(chChart, chartData) {
            console.log(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.workMax) {
                        total = this.workMax
                    } else {
                        total += chartData[i].value
                    }
                }

                var prop = []
                for (let j = 0; j < value.length; j++) {
                    console.log(value)
                    if (total == 0) {
                        prop.push(0)
                    } else {
                        prop.push((value[j] / total * 100).toFixed(1))
                    }
                }
                console.log(prop)
                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: '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: this.width,
                                            color: '#c6d9fa',
                                            padding: [0, 0, 0, 5],
                                            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|}'
                                        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: 16,
                            data: prop,
                        },
                        {
                            type: "bar",
                            barWidth: 20,
                            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: {},

})