var vms = Vue.component("Company-amplify-ndczwcjd", {
    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-project-number" style="padding: 35px 0">
                                <div>计划产值：<span  v-cloak>50.86</span>亿</div>
                                <div>实际产值：<span  v-cloak>30.74</span>亿</div>
                            </div>
                            
<!--                           <div style="border: 1px solid red;height: 400px">-->
<!--                                 <el-row>-->
<!--                                    <el-col :span="12">-->
<!--                                        <norm-pie-small :value="Number(timeNum)" text="时间进度"></norm-pie-small>-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="12">-->
<!--                                        <norm-pie-small :value="Number(ActualNum)" text="实际产值进度"></norm-pie-small>-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </div>-->

                               <div style="margin-top: 80px">
                                <el-row>
                                    <el-col :span="12">
                                        <div class="amplify-row-circle" ref="chart1"></div>
                                    </el-col>
                                    <el-col :span="12">
                                       <div class="amplify-row-circle" ref="chart2"></div>
                                    </el-col>
                                </el-row>
                              </div>

                            
                        </div>  
                    </div>
                </div>
            </transition>
        </div>
    `,
    props: {

    },
    data() {
        return {
            show:false,
            timeNum:0,
            ActualNum:46,
            text:'时间进度',
            text1:'实际产值进度'
        }
    },
    mounted(){
        this.GetDateDiff("day")
    },
    methods: {
        openAmplify(){
            this.show = true
            this.getChartData()
            this.getChartData1()
        },
        closeAmplify(){
            this.show = false
        },
        closeAmplifyAll(e){
            if(e.target.className == 'amplify-fixed'){
                this.show = false
            }
        },

        GetDateDiff(diffType) {
            //将计算间隔类性字符转换为小写
            diffType = diffType.toLowerCase();
            let sTime = new Date('2023-01-01'); //开始时间
            let eTime = new Date(); //结束时间

            if (sTime > eTime) {
                alert("开始时间不能大于结束时间!!!");
                return false;
            }
            //作为除数的数字
            let divNum = 1;
            switch (diffType) {
                case "second":
                    divNum = 1000;
                    break;
                case "minute":
                    divNum = 1000 * 60;
                    break;
                case "hour":
                    divNum = 1000 * 3600;
                    break;
                case "day":
                    divNum = 1000 * 3600 * 24;
                    break;
                default:
                    break;
            }
            let ts = parseInt((eTime.getTime() - sTime.getTime()) / parseInt(divNum));
            this.timeNum = ((ts / 365) * 100).toFixed(2)
        },

        //数据展示图1
        getChartData(){
            var chChartBar = echarts.init(this.$refs.chart1);
            this.echartBar(chChartBar,this.timeNum,this.text)
        },
        echartBar(chChart,value,text){
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                var placeHolderStyle = {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0,
                    },
                    emphasis: {
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0,
                    },
                };

                var dataStyle = {

                };
                this.option ={
                    title: [
                        {
                            text: value+'%',
                            textAlign: "center",
                            left: "48%",
                            top: "50%",
                            textStyle: {
                                color: "#67abf2",
                                fontSize: 23,
                            },
                        },
                        {
                            text: text,
                            left: "48%",
                            top: "140%",
                            textAlign: "center",
                            textStyle: {
                                color: "#cdd7fa",
                                fontWeight: "normal",
                                fontSize: "16",
                                textAlign: "center",
                            },
                        },
                    ],
                    series: [
                        {
                            type: "pie",
                            hoverAnimation: false,
                            radius: ["60%", "59%"],
                            center: ["50%", "40%"],
                            labelLine: {
                                normal: {
                                    show: false,
                                },
                            },
                            label: {
                                normal: {
                                    position: "center",
                                },
                            },
                            data: [
                                {
                                    value: 100,
                                    itemStyle: {
                                        normal: {
                                            color: "#255788",
                                        },
                                    },
                                },

                            ],
                        },
                        {
                            type: "pie",
                            hoverAnimation: false,
                            radius: ["53%", "60%"],
                            center: ["50%", "40%"],
                            labelLine: {
                                normal: {
                                    show: false,
                                },
                            },
                            label: {
                                normal: {
                                    position: "center",
                                },
                            },
                            data: [
                                {
                                    value: value,
                                    itemStyle: {
                                        normal: {
                                            color: "#68a8f2",
                                        },
                                    },
                                    normal: {
                                        show: false,
                                    },
                                },
                                {
                                    value: 100-value,
                                    itemStyle: placeHolderStyle,
                                },
                            ],
                        },
                    ],
                };
                chChart.setOption(this.option);
                window.onresize = chChart.resize;
            })
        },

        //数据展示图2
        getChartData1(){
            var chChartBar = echarts.init(this.$refs.chart2);
            this.echartBar(chChartBar,this.ActualNum,this.text1)
        },
        echartBar(chChart,value,text){
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                var placeHolderStyle = {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0,
                    },
                    emphasis: {
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0,
                    },
                };

                var dataStyle = {

                };
                this.option ={
                    title: [
                        {
                            text: value+'%',
                            textAlign: "center",
                            left: "48%",
                            top: "36%",
                            textStyle: {
                                color: "#67abf2",
                                fontSize: 23,
                            },
                        },
                        {
                            text: text,
                            left: "48%",
                            top: "80%",
                            textAlign: "center",
                            textStyle: {
                                color: "#cdd7fa",
                                fontWeight: "normal",
                                fontSize: "16",
                                textAlign: "center",
                            },
                        },
                    ],
                    series: [
                        {
                            type: "pie",
                            hoverAnimation: false,
                            radius: ["60%", "59%"],
                            center: ["50%", "40%"],
                            labelLine: {
                                normal: {
                                    show: false,
                                },
                            },
                            label: {
                                normal: {
                                    position: "center",
                                },
                            },
                            data: [
                                {
                                    value: 100,
                                    itemStyle: {
                                        normal: {
                                            color: "#255788",
                                        },
                                    },
                                },

                            ],
                        },
                        {
                            type: "pie",
                            hoverAnimation: false,
                            radius: ["53%", "60%"],
                            center: ["50%", "40%"],
                            labelLine: {
                                normal: {
                                    show: false,
                                },
                            },
                            label: {
                                normal: {
                                    position: "center",
                                },
                            },
                            data: [
                                {
                                    value: value,
                                    itemStyle: {
                                        normal: {
                                            color: "#68a8f2",
                                        },
                                    },
                                    normal: {
                                        show: false,
                                    },
                                },
                                {
                                    value: 100-value,
                                    itemStyle: placeHolderStyle,
                                },
                            ],
                        },
                    ],
                };
                chChart.setOption(this.option);
                window.onresize = chChart.resize;
            })
        },


    },
    watch:{

    },

})