<template>
    <el-container class="container">
        <el-header class="header">
            <div class="header-left">
                <!-- <el-cascader
                    v-model="companyId"
                    :options="options"
                    :show-all-levels="false"
                    clearable
                    :props="{
                        expandTrigger: 'hover',
                        checkStrictly: true,
                        value: 'id',
                        label: 'name',
                        children: 'children',
                    }"
                    style="width: 190px; margin-right: 10px"
                    ref="cascader"
                    @change="handleCascaderChange"
                ></el-cascader> -->

                <!-- <el-date-picker
                    v-model="issueDate"
                    type="month"
                    placeholder="选择月"
                    format="yyyy-MM"
                    value-format="yyyy-MM"
                    @change="handleTimeChange"
                    style="width: 120px"
                >
                </el-date-picker> -->
            </div>
            <div class="header-center">
                <div class="title" @click="goIndex">基础数据统计</div>
                <!-- <div class="logo" @click="goIndex"></div> -->
            </div>
            <div class="header-right">
                <div class="header-right-min">
                    <span>
                        <i></i>
                        <p>{{ nowDate && nowDate.split(' ')[1] }}</p>
                    </span>
                    <span class="icon-back" @click="back">
                        <el-tooltip effect="dark" content="返回" placement="bottom">
                            <i></i>
                        </el-tooltip>
                        <!-- <font>返回</font> -->
                    </span>
                </div>
            </div>
        </el-header>
        <el-main>
            <!-- <el-button
                type="primary"
                icon="el-icon-back"
                class="back_btn"
                @click="handleReset"
            >
                返回
            </el-button> -->
            <div
                class="table_box"
                v-loading="loading"
                element-loading-background="rgba(73, 93, 122, 0.3)"
            >
                <!-- <el-table
                    :data="tableData"
                    style="width: 100%"
                    v-loading="loading"
                    element-loading-background="rgba(73, 93, 122, 0.6)"
                    @row-click="hanldeRowClick"
                    @cell-click="handleCellClick"
                    header-cell-class-name="cellClassName"
                    row-class-name="rowClassName"
                >
                    <el-table-column
                        align="center"
                        prop="name"
                        label="名称"
                        column-key="sectionManagement"
                    >
                        <template v-slot="{row}">
                            <i class="el-icon-arrow-down" style="margin-right: 10px"></i>
                            {{ row.name }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="roadCount"
                        column-key="sectionManagement"
                        label="路段数量"
                    >
                        <template v-slot="{row}">
                            {{ utils.thousandBit(row.roadCount) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="tollGateCount"
                        column-key="3"
                        label="收费站"
                    >
                        <template v-slot="{row}">
                            {{ utils.thousandBit(row.tollGateCount) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="serviceCount"
                        label="服务区"
                        column-key="4"
                    >
                        <template v-slot="{row}">
                            {{ utils.thousandBit(row.serviceCount) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="interworkingCount"
                        label="互通"
                        column-key="1"
                    >
                        <template v-slot="{row}">
                            {{ utils.thousandBit(row.interworkingCount) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="bridgeCount"
                        label="桥梁"
                        column-key="bridgeManagement"
                    >
                        <template v-slot="{row}">
                            {{ utils.thousandBit(row.bridgeCount) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="tunnelCount"
                        column-key="tunnelManagement"
                        label="隧道"
                    >
                        <template v-slot="{row}">
                            {{ utils.thousandBit(row.tunnelCount) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="culvertCount"
                        column-key="culvertManagement"
                        label="涵洞"
                    >
                        <template v-slot="{row}">
                            {{ utils.thousandBit(row.culvertCount) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="workCount"
                        column-key="maintenanceWorkArea"
                        label="工区"
                    >
                        <template v-slot="{row}">
                            {{ utils.thousandBit(row.workCount) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="carCount"
                        column-key="carManagement"
                        label="车辆"
                    >
                        <template v-slot="{row}">
                            {{ utils.thousandBit(row.carCount) }}
                        </template>
                    </el-table-column>
                </el-table> -->
                <div class="bottom form_label">
                    <span class="item">名称</span>
                    <span class="item">路段数量</span>
                    <span class="item">收费站</span>
                    <span class="item">服务区</span>
                    <span class="item">互通</span>
                    <span class="item">桥梁</span>
                    <span class="item">隧道</span>
                    <span class="item">涵洞</span>
                    <span class="item">工区</span>
                    <span class="item">车辆</span>
                </div>
                <div class="bottom" v-for="item in tableData" :key="item.id">
                    <span class="item">
                        {{ item.name }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(item.roadCount) }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(item.tollGateCount) }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(item.serviceCount) }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(item.interworkingCount) }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(item.bridgeCount) }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(item.tunnelCount) }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(item.culvertCount) }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(item.workCount) }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(item.carCount) }}
                    </span>
                </div>
                <div class="bottom">
                    <span class="item">总数</span>
                    <span class="item">{{
                        utils.thousandBit(total.roadCount) || 0
                    }}</span>
                    <span class="item">{{
                        utils.thousandBit(total.tollGateCount) || 0
                    }}</span>
                    <span class="item">{{
                        utils.thousandBit(total.serviceCount) || 0
                    }}</span>
                    <span class="item">{{
                        utils.thousandBit(total.interworkingCount) || 0
                    }}</span>
                    <span class="item">{{
                        utils.thousandBit(total.bridgeCount) || 0
                    }}</span>
                    <span class="item">{{
                        utils.thousandBit(total.tunnelCount) || 0
                    }}</span>
                    <span class="item">{{
                        utils.thousandBit(total.culvertCount) || 0
                    }}</span>
                    <span class="item">{{
                        utils.thousandBit(total.workCount) || 0
                    }}</span>
                    <span class="item">{{ utils.thousandBit(total.carCount) || 0 }}</span>
                </div>
                <div class="charts">
                    <div class="pie">
                        <Title :text="'基础信息数量分析'" />
                        <div id="pie" style="height: 100%; width: 100%"></div>
                    </div>
                    <div class="column">
                        <Title :text="'各部门基础信息数量统计'" />
                        <div id="column" style="height: 100%; width: 100%"></div>
                    </div>
                </div>
            </div>
        </el-main>
    </el-container>
</template>

<script>
import _utils from '@/utils.js'
import orgData from './orgData.json'
import utils from '@/utils' // thousandBit格式化千分位
const BigNumber = require('bignumber.js')
import * as echarts from 'echarts'
import Title from './components/Title.vue'
export default {
    name: 'statisticsBasicDataManagementAI',
    components: {
        Title,
    },
    data() {
        return {
            nowDate: null,
            options: orgData.list,
            year: new Date().getFullYear(),
            mouth: new Date().getMonth(),
            companyId: ['1419863231459102720'], // 组织id(做为查询参数)
            companyIds: [],
            issueDate: '', // 时间范围(做为查询参数)
            tableData: [],
            data: [],
            loading: false,
            pathName: '',
            type: '',
            total: {},
            utils: utils,
        }
    },
    created() {
        let {year, mouth} = this
        mouth = mouth + 1
        this.issueDate = `${year}-${mouth > 10 ? mouth : '0' + mouth}`
        this.loadData()
    },
    watch: {
        tableData(newVal) {
            this.total.roadCount = this.calculation('roadCount', newVal)
            this.total.tollGateCount = this.calculation('tollGateCount', newVal)
            this.total.serviceCount = this.calculation('serviceCount', newVal)
            this.total.interworkingCount = this.calculation('interworkingCount', newVal)
            this.total.bridgeCount = this.calculation('bridgeCount', newVal)
            this.total.tunnelCount = this.calculation('tunnelCount', newVal)
            this.total.culvertCount = this.calculation('culvertCount', newVal)
            this.total.workCount = this.calculation('workCount', newVal)
            this.total.carCount = this.calculation('carCount', newVal)
            this.pieCharts(this.total)
            this.cloumnCharts(newVal)
        },
    },
    mounted() {
        let _this = this // 声明一个变量指向Vue实例this，保证作用域一致
        this.timer = setInterval(function () {
            _this.nowDate = _utils.formatDate(new Date()) //修改数据date
        }, 1000)
    },
    methods: {
        handleCascaderChange(val) {},
        handleTimeChange() {},
        back() {
            this.$router.go(-1)
        },
        calculation(key, arr) {
            let total = 0
            if (!key || arr.length === 0) return total
            arr.forEach((item) => {
                total += parseInt(item[key])
            })
            return total
        },
        handleReset() {
            let length = this.data.length - 1
            if (length === 0) return
            this.tableData = this.data[this.data.length - 2]
            this.data.splice(length, 1)
        },
        hanldeRowClick(row) {
            if (row.chirldren.length == 0 && row.roadSegmentId) {
                return this.$router.push({
                    name: this.pathName,
                    params: {
                        value: row,
                        type: this.type,
                    },
                })
            }
            this.tableData = row.chirldren
            this.data.push(row.chirldren)
        },
        handleCellClick(row, column) {
            if (
                column.columnKey == '1' ||
                column.columnKey == '3' ||
                column.columnKey == '4'
            ) {
                this.type = column.columnKey
                this.pathName = 'roadsideFacilitiesManagement'
            } else {
                this.pathName = column.columnKey
            }
        },
        loadData() {
            this.loading = true
            this.$http
                .post('${yhxt}/bizBridgeInformation/v1/getBridgeCountVoAI')
                .then((res) => {
                    this.tableData = (res && res.status == 200 && res.data) || []
                    this.data = []
                    this.data.push(this.tableData)
                    this.loading = false
                })
                .catch(() => {
                    this.loading = false
                })
        },
        pieCharts(obj) {
            var chartDom = document.getElementById('pie')
            var myChart = echarts.init(chartDom)
            let data = [
                {
                    name: '路段数量',
                    value: obj.roadCount || 0,
                },
                {
                    name: '收费站',
                    value: obj.tollGateCount || 0,
                },
                {
                    name: '服务区',
                    value: obj.serviceCount || 0,
                },
                {
                    name: '互通',
                    value: obj.interworkingCount || 0,
                },
                {
                    name: '桥梁',
                    value: obj.bridgeCount || 0,
                },
                {
                    name: '隧道',
                    value: obj.tunnelCount || 0,
                },
                {
                    name: '涵洞',
                    value: obj.culvertCount || 0,
                },
                {
                    name: '工区',
                    value: obj.workCount || 0,
                },
                {
                    name: '车辆',
                    value: obj.carCount || 0,
                },
            ]
            var option
            let total = new BigNumber(0)
            data.forEach((item) => {
                total = total.plus(item.value)
            })
            // let formatNumber = num =>
            //   num.toString().replace(/(?=(\B)(\d{3})+$)/g, ',')
            option = {
                title: [
                    {
                        text: `{name|总数量}\n{val|${this.utils.thousandBit(
                            total
                        )}}`,
                        top: 'center',
                        left: 'center',
                        textStyle: {
                            rich: {
                                name: {
                                    fontSize: 14,
                                    color: '#fff',
                                    padding: [10, 0],
                                },
                                val: {
                                    fontSize: 32,
                                    fontWeight: 'bold',
                                    color: '#fff',
                                },
                            },
                        },
                    },
                ],
                tooltip: {
                    trigger: 'item',
                    formatter: (a) => {
                        return `${a.marker} ${a.data.name} ${a.data.value}个 ${a.percent}%`
                    },
                },
                color: [
                    '#5b8ff9',
                    '#5ad8a6',
                    '#5d7092',
                    '#f6bd16',
                    '#6f5ef9',
                    '#6dc8ec',
                    '#945fb9',
                    '#ff9845',
                    '#1e9493',
                ],
                legend: {
                    icon: 'circle',
                    orient: 'vertical',
                    right: 50,
                    top: 'center',
                    bottom: 20,
                    textStyle: {
                        color: '#ccc',
                    },
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['50%', '78%'],
                        center: ['45%', '50%'],
                        data: data,
                        label: {
                            // alignTo: 'edge',
                            formatter: (a) => {
                                return `{percent|${a.percent}%}`
                            },
                            rich: {
                                percent: {
                                    fontSize: 15,
                                    color: '#fff',
                                },
                            },
                        },
                    },
                ],
            }

            option && myChart.setOption(option)
        },
        cloumnCharts(data) {
            var chartDom = document.getElementById('column')
            var myChart = echarts.init(chartDom)
            var option
            let xData = []
            let roadData = []
            let tollGateData = []
            let serviceData = []
            let interData = []
            let bridgeData = []
            let tunnelData = []
            let culvertData = []
            let workData = []
            let carData = []
            data.forEach((item) => {
                xData.push(item.name)
                roadData.push(item.roadCount)
                tollGateData.push(item.tollGateCount)
                serviceData.push(item.serviceCount)
                interData.push(item.interworkingCount)
                bridgeData.push(item.bridgeCount)
                tunnelData.push(item.tunnelCount)
                culvertData.push(item.culvertCount)
                workData.push(item.workCount)
                carData.push(item.carCount)
            })
            option = {
                title: {
                    textStyle: {
                        color: '#fff',
                    },
                },
                grid: {
                    left: '6%'
                },
                legend: {
                    itemHeight: 10,
                    itemWidth: 10,
                    bottom: 'bottom',
                    bottom: 10,
                    textStyle: {
                        color: '#fff',
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none',
                    },
                },
                color: [
                    '#5b8ff9',
                    '#5ad8a6',
                    '#5d7092',
                    '#f6bd16',
                    '#6f5ef9',
                    '#6dc8ec',
                    '#945fb9',
                    '#ff9845',
                    '#1e9493',
                ],
                xAxis: {
                    type: 'category',
                    data: xData,
                    axisLabel: {
                        fontSize: 14,
                        color: '#cefff2',
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                        },
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                        },
                    },
                },
                yAxis: {
                    type: 'value',
                    splitLine: {show: true}, //去除网格线
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                        },
                    },
                    axisTick: {
                        //y轴刻度线
                        show: true,
                        lineStyle: {
                            color: '#fff',
                        },
                    },
                    axisLine: {
                        //y轴
                        show: false,
                        lineStyle: {
                            color: '#fff',
                        },
                    },
                },
                series: [
                    {
                        name: '路段数量',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: '15%',
                        data: roadData,
                    },
                    {
                        name: '收费站',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: '15%',
                        data: tollGateData,
                    },
                    {
                        name: '服务区',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: '15%',
                        data: serviceData,
                    },
                    {
                        name: '互通',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: '15%',
                        data: interData,
                    },
                    {
                        name: '桥梁',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: '15%',
                        data: bridgeData,
                    },
                    {
                        name: '隧道',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: '15%',
                        data: tunnelData,
                    },
                    {
                        name: '涵洞',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: '15%',
                        data: culvertData,
                    },
                    {
                        name: '工区',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: '15%',
                        data: workData,
                    },
                    {
                        name: '车辆',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: '15%',
                        data: carData,
                    },
                ],
            }

            option && myChart.setOption(option)
        },
        // 去首页
        goIndex() {
            window.location.href = 'http://183.64.175.153:20003/#/business'
            // this.$router.go(-1)
        },
        //退出系统
        handleLogout() {
            this.$store.dispatch('menu/clearMenus')
            this.$store.dispatch('user/clearUser')
            this.$store.dispatch('menu/setCopyMenus', []) //菜单
            let loginRouthPath =
                localStorage.getItem(
                    this.$store.state.login.currentUser.account + 'loginRoutePath'
                ) || '/login'
            this.$store.dispatch('login/logoutAndCleanUp').then(() => {
                switch (window.ssoConfig.mode) {
                    case 'cas':
                    case 'oauth':
                        window.sessionStorage.removeItem('currentUser')
                        window.location.href =
                            window.ssoConfig.logout +
                            '?service=' +
                            window.location.href.split('?')[0]
                        break
                    default:
                        this.$router.push({
                            path: loginRouthPath,
                        })
                        break
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
@import './css/common.scss';
.header .logo {
    background: none;
    // background-position-x: -80px;
}
.header-center .title {
    cursor: pointer;
    font-family: 'fz_black_blod';
    font-size: 30px;
}
.icon-back {
    display: block;
    width: 40px;
    height: 34px;
    i {
        width: 100% !important;
        background: url('./img/icon_back.png') no-repeat !important;
        background-size: 100% 100%;
    }
}
.container {
    width: 100vw;
    height: 100vh;
    background: url('./img/bg_.png') no-repeat 100% 100%;
    //   background-color: rgba($color: #0f2a3f, $alpha: 1);
}
.el-main {
    background-color: transparent;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
}
.el-date-editor.el-input {
    margin-right: 0;
    margin-bottom: 0;
}
/deep/ .rowClassName:hover {
    cursor: pointer;
}
/deep/ .rowClassName .cell {
    font-size: 20px;
}
/deep/ .cellClassName .cell {
    font-size: 22px;
    font-weight: bold;
}
/deep/ .el-table tr {
    height: 60px;
}
/deep/ .el-table th.is-leaf {
    background-color: transparent !important;
}
/deep/ .el-table__row,
/deep/ .el-table tr {
    background-image: linear-gradient(to right, #0c1019, #495e7b, #080c15);
}
/deep/ .el-table__empty-block {
    background-color: #495e7b;
}
/deep/ .el-table__empty-text {
    color: #fff;
}
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #495e7b !important;
}
/deep/ .el-table td {
    border-bottom: #495e7b !important;
}
/deep/ .el-table::before {
    background-color: transparent !important;
}
.back_btn {
    width: 100px;
    padding: 9px 15px;
    background-color: rgba(73, 93, 122, 0.7);
    border: none;
    &:hover {
        background-color: #495e7b;
    }
}
.table_box {
    padding-top: 10px;
    margin-top: 10px;
    flex: 1;
}
.form_label span.item {
    color: #2187ff;
    font-size: 18px;
    font-family: 'Microsoft Yahei';
}
.bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    background-color: transparent;
    // background-image: linear-gradient(to right, #0c1019, #495e7b, #080c15);
    .item {
        margin: 10px;
        padding: 5px;
        background-color: rgba(23, 36, 51, 0.6);
        display: block;
        border-radius: 5px;
        flex: 1;
        text-align: center;
        margin-left: 10px;
        font-size: 16px;
        font-family: 'Microsoft Yahei';
    }
}
.charts {
    height: 450px;
    width: 100%;
    display: flex;
    margin-top: 60px;

    .column,
    .pie {
        height: 100%;
        flex: 1;
        padding: 0 20px;
    }
    .charts_top {
        display: flex;
        position: relative;
        height: 35px;
        margin-left: 30px;
        align-items: flex-end;
        background-image: linear-gradient(to right, #336da2, #1c3c60);
        p {
            position: absolute;
            left: -18px;
            top: -14px;
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #6184ac;
            background-color: #304e7b;
            transform: rotate(45deg);
            border-radius: 5px;
            i {
                font-size: 25px;
                color: #91f5f3;
                transform: rotate(-45deg);
            }
        }
        h1 {
            margin-left: 25px;
            font-size: 24px;
            margin-bottom: 0px;
            font-weight: bold;
        }
    }
}
</style>
<style lang="scss">
.el-popper {
    background-color: rgba($color: #112b44, $alpha: 0.9) !important;
}
.el-cascader-menu {
    //   border: 1px solid #fff;
    &:nth-child(n + 1) {
        border-right: 1px solid #fff;
    }
    &:nth-child(n + 2) {
        border-left: none;
    }
    &:last-child {
        border-right: none;
    }
}
// .el-scrollbar {
//   background-color: transparent;
// }
.el-cascader-panel {
    border-radius: 5px;
    border: 1px solid #fff;
}
.el-select-dropdown .el-scrollbar {
    border: 1px solid #0283fc;
    //   padding-left: 10px;
    border-radius: 5px;
}
.in-active-path span {
    color: #0283fc;
}
.el-month-table td .cell {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}
.el-month-table td.current:not(.disabled) .cell {
    color: #d7ef05;
}
.el-date-picker__header--bordered {
    border-bottom-color: #0283da;
}

.el-cascader-node__label {
    font-size: 16px;
}
.el-radio.is-checked + .el-cascader-node__label {
    color: #409eff;
}
.el-scrollbar__view .el-cascader-node > .el-radio {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 10px;
    right: -8px;
}
.el-picker-panel__body {
    border-radius: 5px;
    background-color: rgba($color: #2c6d89, $alpha: 0.8);
}
.el-scrollbar__view .el-cascader-node:not(.is-disabled):hover,
.el-select-dropdown__item:hover {
    background: #fff !important;
}
.el-select-dropdown__item {
    padding-left: 10px;
}
.el-select-dropdown__item:hover span {
    color: #0283fc;
}
.el-scrollbar__view .el-cascader-node:not(.is-disabled):hover .el-cascader-node__label,
.el-scrollbar__view .el-cascader-node:not(.is-disabled):hover .el-icon-arrow-right {
    color: #0283fc !important;
    font-weight: bold;
}
.el-cascader-node.is-selectable.in-active-path {
    color: #0283fc !important;
}
</style>
