var vms = Vue.component("amplify-gqgk", {
    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-pcd-duration-survey-max">
                             <div class="amplify-pcd-duration-survey">
                                <div class="amplify-pcd-duration-survey-left">
                                    <div class="amplify-glr-title">合同工期</div>
                                    <div style="display: flex;align-items: center">
                                        <div class="amplify-people-number-con" style="margin-left: 30px">
                                            <div v-for="item in people" v-html="item"></div>
                                        </div>
                                        <div v-if="unit" style="">{{unit}}</div>
                                     </div>
                                </div>
                                <div class="amplify-pcd-duration-survey-time">
                                    2022-09-01 至 2024-08-21
                                </div>
                            </div>
                            </div>
                            <!-- 数据百分比展示-->
                            <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>
            </transition>
        </div>
    `,
    props: {},
    data() {
        return {
            show: false,
            people: [],
            number: 720,
            unit: '天',
            shiJiPro:0,
            timePro:0,
            text:'时间进度',
            text1:'实际产值进度',
            projectId:JSON.parse(localStorage.getItem("data")).id,
        }
    },
    mounted() {

    },
    methods: {
        openAmplify() {
            this.show = true
            this.setData()
            this.gainProBase()
        },
        closeAmplify() {
            this.show = false
        },
        closeAmplifyAll(e) {
            if (e.target.className == 'amplify-fixed') {
                this.show = false
            }
        },
        setData() {
            var people = this.number != undefined ? this.number.toString().split('') : 0;
            this.people = people
        },
        //数据接口
        gainProBase() {
            axios.post("/api/building/proBaseInfo?projectId=" + this.projectId).then(res => {
                if(res.data.code == "200") {
                    this.shiJiPro = parseInt((res.data.data.kailei_money / 67640 * 100).toFixed(0))
                    this.timePro = parseInt(((moment().diff(moment(res.data.data.actual_start_date), 'days') / 720) * 100).toFixed(0))
                }
                this.getChartData()
                this.getChartData1()
            }).catch(err => {

            })
        },
        //数据展示图1
        getChartData(){
            var chChartBar = echarts.init(this.$refs.chart1);
            this.echartBar(chChartBar,this.timePro,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: "30%",
                            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;
            })
        },
        //数据展示图2
        getChartData1(){
            var chChartBar = echarts.init(this.$refs.chart2);
            this.echartBar(chChartBar,this.shiJiPro,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: "30%",
                            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: {},

})