<template>
    <div id="UpdatePassword">
        <el-row>
            <el-col :span="24">
                <div class="container">
                    <div class="middle">
                        <div class="w_12001">
                            <div class="changetab">
                                <el-radio-group v-model="radio1" @change="onChange">
                                    <el-radio-button label="0">地区</el-radio-button>
                                    <el-radio-button label="1">行业</el-radio-button>
                                    <el-radio-button label="2">年月</el-radio-button>
                                </el-radio-group>
                            </div>
                            <div v-show="one">
                                <el-row :span="24" style="margin-top: 60px">
                                    <el-col :span="13">
                                        <div class="total">
                                            共<span style="color: #e9021d">{{regionTotal}}</span>个区域<span  style="color: #e9021d">{{companyTotal}}</span>家企业
                                        </div>
                                        <div class="black"></div>
                                        <!--                                        <img src="../../assets/total/map.png" style="margin-left: 30px">-->
                                        <!--                                        <div class="black">-->
                                        <!--                                            拥有{{songyuan}}家企业-->
                                        <!--                                        </div>-->
                                        <!--                                        <div class="black1">-->
                                        <!--                                            拥有{{chaungchun}}家企业-->
                                        <!--                                        </div>-->
                                        <!--                                        <div class="black2">-->
                                        <!--                                            拥有{{jilin}}家企业-->
                                        <!--                                        </div>-->
                                        <!--                                        <div class="black3">-->
                                        <!--                                            拥有{{yanbian}}家企业-->
                                        <!--                                        </div>-->
                                        <!--                                        <div class="black4">-->
                                        <!--                                            拥有{{baishan}}家企业-->
                                        <!--                                        </div>-->
                                        <!--                                        <div class="black5">-->
                                        <!--                                            拥有{{baicheng}}家企业-->
                                        <!--                                        </div>-->
                                        <!--                                        <div class="black6">-->
                                        <!--                                            拥有{{siping}}家企业-->
                                        <!--                                        </div>-->
                                        <!--                                        <div class="black7">-->
                                        <!--                                            拥有{{liaoyuan}}家企业-->
                                        <!--                                        </div>-->
                                        <!--                                        <div class="black8">-->
                                        <!--                                            拥有{{tonghua}}家企业-->
                                        <!--                                        </div>-->

                                        <jilinMap></jilinMap>
                                    </el-col>
                                    <el-col :span="11">
                                        <el-table
                                                :data="tableData"
                                                :cell-style="rowClass"
                                                :header-cell-style="rowClass"
                                                style="width: 100%">
                                            <el-table-column
                                                    type="index"
                                                    label="排名"
                                                    width="180">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="label"
                                                    label="地区"
                                                    width="180">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="value"
                                                    label="注册企业数量">
                                            </el-table-column>
                                        </el-table>
                                    </el-col>
                                </el-row>
                                <div id="myChart"></div>
                            </div>
                            <div v-show="two">
                                <el-row :span="24" style="margin-top: 60px">
                                    <el-col :span="12" style="margin-top: 200px">
                                        <div style="text-align: center">
                                            <img src="../../assets/total/bj.png" style="vertical-align: text-bottom;margin-right: 10px">
                                            共<span style="color: #e9021d">{{companyTotal}}</span>家企业
                                        </div>
                                        <circleantv></circleantv>
                                    </el-col>
                                    <el-col :span="12" style="margin-bottom: 30px">
                                        <el-table
                                                :data="tableData1"
                                                :cell-style="rowClass"
                                                :header-cell-style="rowClass"
                                                style="width: 100%">
                                            <el-table-column
                                                    type="index"
                                                    label="排名"
                                                    width="180">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="label"
                                                    label="行业"
                                                    width="180">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="value"
                                                    label="注册企业数量">
                                            </el-table-column>
                                        </el-table>
                                    </el-col>
                                </el-row>
                            </div>
                            <div v-show="three">
                                <el-row :span="24">
                                    <BrokenLine></BrokenLine>
                                </el-row>

                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import circleantv from '@/components/tubaio/circleantv.vue';
    import jilinMap from '@/components/tubaio/JiLinMap.vue';
    import BrokenLine from '@/components/tubaio/BrokenLine.vue';
    import {registerResult, registerResultone} from '../../api';
    export default {
        name: 'UpdatePassword',
        props: {},
        components: {
            circleantv,
            BrokenLine,
            jilinMap
        },
        data: () => ({
            photos: [],
            radio1: '0',
            radio2: '0',
            tableData: [],  // 柱形图
            tableData1: [], // 饼图
            chart: null,
            num: [],
            Xdata: [],
            one: true,
            two: false,
            three: false,
            companyTotal:0,
            regionTotal:0,
            chaungchun:0,
            jilin:0,
            songyuan:0,
            yanbian:0,
            baishan:0,
            baicheng:0,
            siping:0,
            liaoyuan:0,
            tonghua:0,
        }),
        created() {
        },
        computed: {},
        methods: {
            handleDetail() {
            },
            back() {
                this.$router.push({
                    path: '/',
                })
            },
            rowClass() {
                return 'text-align: center;'
            },

            onChange(val) {
                console.log(val)
                if (val == '0') {
                    this.one = true;
                    this.two = false;
                    this.three = false;
                } else if (val == '1') {
                    this.one = false;
                    this.three = false;
                    this.two = true;
                } else if (val == '2') {
                    this.one = false;
                    this.three = true;
                    this.two = false;
                }

            },
            onChange1(val){
                console.log(val)
                // if (val === '0'){
                //     this.$router.push({
                //         path:'/RegisterResult'
                //     })
                // }else if (val === '1'){
                //     this.$router.push({
                //         path:'/FinancialProducts'
                //     })
                // }else if (val === '2'){
                //     this.$router.push({
                //         path:'/CompanyResult'
                //     })
                // }else if (val === '3'){
                //     this.$router.push({
                //         path:'/ReleaseResult'
                //     })
                // }else if (val === '4'){
                //     this.$router.push({
                //         path:'/HelpResult'
                //     })
                // }else if (val === '5'){
                //     this.$router.push({
                //         path:'/SolutionResult'
                //     })
                // }
            },
            async all() {
                const result = await registerResult();
                const result1 = await registerResultone();
                if (result.errcode == 0) {
                    this.tableData = result.data
                    this.regionTotal = result.regionTotal
                    this.data = result.data.label;
                    result.data.forEach(item=>{
                        if (item.label == '长春市'){
                            this.chaungchun = item.value;
                        } else if (item.label == '吉林市'){
                            this.jilin = item.value;
                        }else if (item.label == '松原市'){
                            this.songyuan = item.value;
                        }else if (item.label == '延边朝鲜族自治州'){
                            this.yanbian = item.value;
                        }else if (item.label == '白山市'){
                            this.baishan = item.value;
                        }else if (item.label == '白城市'){
                            this.baicheng = item.value;
                        }else if (item.label == '四平市'){
                            this.siping = item.value;
                        }else if (item.label == '辽源市'){
                            this.liaoyuan = item.value;
                        }else if (item.label == '通化市'){
                            this.tonghua = item.value;
                        }
                    })
                }
                if (result1.errcode == 0) {
                    this.tableData1 = result1.data
                    this.data = result.data.label;
                    this.companyTotal = result1.companyTotal;
                }

            },
            async drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                const result = await registerResult();
                result.data.forEach(item => {
                    this.Xdata.push(item.label)
                })
                result.data.forEach(item => {
                    this.num.push(item.value)
                })
                console.log(this.Xdata)
                console.log(this.num)
                // 绘制图表
                myChart.setOption({
                    title: {text: '(注册企业数量)'},
                    tooltip: {},
                    xAxis: {
                        data: this.Xdata,
                        axisLabel: {
                            interval: 0
                        }
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: this.num,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        },
                    }]
                });

            }
        },
        mounted() {
            this.drawLine();
            this.all();
        }
    };
</script>

<style lang="less" scoped>
    #myChart {
        width: 100%;
        height: 500px;
        margin-left: 30px;
    }

    .container {
        /*width: 1920px;*/
        /*height: 1080px;*/
        /*margin: 0 auto;*/
        /*width: 1920px;*/
        /*margin: 0 auto;*/
        //height: 100vh;
        /*overflow-x: hidden;*/
    }

    .middle {
        background-color: #f0f6fb;
    }

    .header {
        /*height: 100px;*/
        /*width: 1920px;*/
        background: rgba(42, 46, 67, 1);
    }

    .w_1200 {
        width: 1200px;
        margin: 0 auto;
    }

    .w_12001 {
        width: 1200px;
        margin: 0 auto;
        background-color: white;
        box-sizing: border-box;
    }

    .changetab {
        padding-top: 40px;
        padding-left: 376px;
    }

    .changeColor {
        margin-bottom: 70px;
        width: 100px;
        height: 40px;
        background: rgba(233, 2, 29, 1);
        color: #fff;
        font-size: 20px;
        position: relative;
        border: 1px solid rgba(233, 2, 29, 1);
        top: -25px;
        left: 140px;
    }

    /deep/ .el-divider--horizontal {
        display: inline-block;
        width: 90%
    }

    .changetab /deep/ .el-radio-button__inner {
        padding: 25px 75px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        font-size: 16px;
        border-color: #e9021d;
    }

   .changetab /deep/ .is-active .el-radio-button__inner {
        color: rgba(255, 255, 255, 1);
        background-color: #e9021d;
        border-color: #e9021d;
        box-shadow: none;
    }

   .changetab /deep/ .el-radio-button:first-child .el-radio-button__inner {
        border-left: 1px solid red;
    }

   .changetab /deep/ .is-active .el-radio-button__inner:hover {
        color: rgba(255, 255, 255, 1);
    }

   .changetab /deep/ .el-radio-button__inner:hover {
        color: #e9021d;
    }

    .footer {
        height: 323px;
    }

    .title {
        position: relative;
        top: -20px;
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: rgba(0, 0, 0, 1);
    }

    /deep/ .el-divider__text {
        font-size: 14px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: rgba(233, 2, 29, 1);
        background-color: #f0f6fb;
        cursor: pointer;
    }

    /deep/ .el-image__inner--center {
        -ms-transform: none;
        top: 0;
        left: 0;
    }
    .total{
        position: absolute;
        top: 60px;
        left: 440px;
        width: 300px;
        height: 24px;
        font-size:16px;
        font-family:Source Han Sans SC;
        font-weight:400;
        color:rgba(0,0,0,1);
    }
    .black{
        position: absolute;
        top: 20px;
        left: 480px;
        width: 48px;
        height: 36px;
        background: url("../../assets/total/tubiao.png");
        color: white;
        text-indent: 12px;
        font-size:12px;
        font-family:Source Han Sans SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height: 22px;
    }
    .black:hover{
        background: url("../../assets/total/222.png");
        cursor: pointer;
    }
    .black1{
        position: absolute;
        top: 120px;
        left: 330px;
        width: 121px;
        height: 24px;
        background: url("../../assets/total/111.png");
        color: white;
        text-indent: 12px;
        font-size:12px;
        font-family:Source Han Sans SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height: 22px;
    }
    .black1:hover{
        background: url("../../assets/total/222.png");
        cursor: pointer;
    }
    .black2{
        position: absolute;
        top: 200px;
        left: 380px;
        width: 121px;
        height: 24px;
        background: url("../../assets/total/111.png");
        color: white;
        text-indent: 12px;
        font-size:12px;
        font-family:Source Han Sans SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height: 22px;
    }
    .black2:hover{
        background: url("../../assets/total/222.png");
        cursor: pointer;
    }
    .black3{
        position: absolute;
        top: 300px;
        left: 470px;
        width: 121px;
        height: 24px;
        background: url("../../assets/total/111.png");
        color: white;
        text-indent: 12px;
        font-size:12px;
        font-family:Source Han Sans SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height: 22px;
    }
    .black3:hover{
        background: url("../../assets/total/222.png");
        cursor: pointer;
    }
    .black4{
        position: absolute;
        top: 330px;
        left: 370px;
        width: 121px;
        height: 24px;
        background: url("../../assets/total/111.png");
        color: white;
        text-indent: 12px;
        font-size:12px;
        font-family:Source Han Sans SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height: 22px;
    }
    .black4:hover{
        background: url("../../assets/total/222.png");
        cursor: pointer;
    }
    .black5{
        position: absolute;
        top: 50px;
        left: 20px;
        width: 121px;
        height: 24px;
        background: url("../../assets/total/333.png");
        color: white;
        text-indent: 12px;
        font-size:12px;
        font-family:Source Han Sans SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height: 22px;
    }
    .black5:hover{
        background: url("../../assets/total/444.png");
        cursor: pointer;
    }
    .black6{
        position: absolute;
        top: 210px;
        left: 40px;
        width: 121px;
        height: 24px;
        background: url("../../assets/total/333.png");
        color: white;
        text-indent: 12px;
        font-size:12px;
        font-family:Source Han Sans SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height: 22px;
    }
    .black6:hover{
        background: url("../../assets/total/444.png");
        cursor: pointer;
    }
    .black7{
        position: absolute;
        top: 310px;
        left: 140px;
        width: 121px;
        height: 24px;
        background: url("../../assets/total/333.png");
        color: white;
        text-indent: 12px;
        font-size:12px;
        font-family:Source Han Sans SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height: 22px;
    }
    .black7:hover{
        background: url("../../assets/total/444.png");
        cursor: pointer;
    }
    .black8{
        position: absolute;
        top: 380px;
        left: 160px;
        width: 121px;
        height: 24px;
        background: url("../../assets/total/333.png");
        color: white;
        text-indent: 12px;
        font-size:12px;
        font-family:Source Han Sans SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height: 22px;
    }
    .black8:hover{
        background: url("../../assets/total/444.png");
        cursor: pointer;
    }


</style>
