<template>
    <div class="over-view">
        <!-- <div class="ov-item">
            <div class="title">
                <img src="@/assets/images/btzs_img.png" alt="">
                <span>年径流总量控制率</span>
            </div>
            <v-category :data="data1" />
        </div>
        <div class="ov-item">
            <div class="title">
                <img src="@/assets/images/btzs_img.png" alt="">
                <span>地表水环境质量</span>
            </div>
            <v-radar :data="data2" />
        </div>
        <div class="ov-item">
            <div class="title">
                <img src="@/assets/images/btzs_img.png" alt="">
                <span>城市面源污染控制率</span>
            </div>
            <v-control />
        </div>
        <div class="ov-item">
            <div class="title">
                <img src="@/assets/images/btzs_img.png" alt="">
                <span>生态岸线恢复率</span>
            </div>
            <v-area />
        </div>
        <div class="ov-item">
            <div class="title">
                <img src="@/assets/images/btzs_img.png" alt="">
                <span>雨水资源利用率</span>
            </div>
            <v-bar />
        </div>
        <div class="ov-item">
            <div class="title">
                <img src="@/assets/images/btzs_img.png" alt="">
                <span>天然水域面积比</span>
            </div>
            <v-pie :data="data6" />
        </div>-->
        <div class="ov-item" v-for="(item, index) in menuList" :key="index">
            <div class="title">
                <img src="@/assets/images/btzs_img.png" alt />
                <span>{{ item.title }}</span>
            </div>
            <div class="img-cnt">
                <img
                    :src="item.imgUrl"
                    alt
                    class="img"
                    @click="onImage(item.type, item.title)"
                />
            </div>
        </div>
        <el-dialog
            :title="title"
            :visible.sync="visible"
            :modal-append-to-body="false"
        >
            <Runoff v-if="type === 1" />
            <Environment v-else-if="type === 2" />
            <Pollution v-else-if="type === 3" />
            <Ecological v-else-if="type === 4" />
            <Runoffrate v-else-if="type === 5" />
            <Shidi v-else-if="type === 6" />
        </el-dialog>
    </div>
</template>
<script>
import img01 from "@/assets/img/kh_01.png";
import img02 from "@/assets/img/kh_02.png";
import img03 from "@/assets/img/kh_03.png";
import img04 from "@/assets/img/kh_04.png";
import img05 from "@/assets/img/kh_05.png";
import img06 from "@/assets/img/kh_06.png";

import Runoff from "./components/overview/runoff";
import Environment from "./components/overview/environment";
import Pollution from "./components/overview/pollution";
import Runoffrate from "./components/overview/runoffrate";
import Ecological from "./components/overview/ecological";
import Shidi from "./components/overview/shidi";

import { runoffData, pollutionData, ecologicalData } from "@/services";

export default {
    name: "OverView",
    components: {
        Ecological,
        Runoffrate,
        Pollution,
        Environment,
        Runoff,
        Shidi
    },
    data() {
        return {
            menuList: [
                { title: "年径流总量控制率", type: 1, imgUrl: img01 },
                { title: "地表水环境质量", type: 2, imgUrl: img02 },
                { title: "城市面源污染控制率", type: 3, imgUrl: img03 },
                { title: "生态岸线恢复率", type: 4, imgUrl: img04 },
                { title: "雨水资源利用率", type: 5, imgUrl: img05 },
                { title: "湿地水环境指标评价", type: 6, imgUrl: img06 }
            ],
            title: "", // 弹框标题
            visible: false, // 弹框是否显示
            type: null // 点击的类型
        };
    },
    methods: {
        onImage(type, title) {
            this.visible = true;
            this.title = title;
            this.type = type;
        }
    }
};
</script>
<style lang="less" scoped>
@import "@/global.less";

.over-view {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    position: relative;

    .ov-item {
        box-sizing: border-box;
        width: 32.5%;
        margin-right: 0.83%;
        padding: 15px;
        margin-bottom: 20px;
        background-image: url("../../assets/images/mxpg_jcdwbjk_img.png");
        background-size: 100% 100%;

        .title {
            font-size: 14px;
            color: @border-color;
            font-weight: bold;
            display: flex;
            align-items: center;

            img {
                width: 25px;
                margin-right: 5px;
            }
        }

        .img-cnt {
            text-align: center;

            .img {
                cursor: pointer;
                transition: all 0.2s ease-out;
                width: 90%;
            }

            .img:hover {
                transform: scale(1.03);
            }
        }
    }
}
</style>