<template>
    <div class="over-view">
        <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)" />
            </div>
        </div>
    </div>
    <div class="dalgo">
        <el-dialog :title="tittle" v-model="visible" :modal-append-to-body="false">
        <Runoff v-if="typelsit === 1" />
        <Environment v-else-if="typelsit === 2" />
        <Pollution v-else-if="typelsit === 3" />
        <Ecological v-else-if="typelsit === 4" />
        <Runoffrate v-else-if="typelsit === 5" />
        <Shidi v-else-if="typelsit === 6" />
    </el-dialog>
    </div>

</template>
<script  setup name="SpongeOverview">
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";
import { ref, reactive, toRefs } from 'vue'
const menuList = reactive(
    [
        { 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 }
    ],
)
let flag = reactive({
    visible: false,
    typelsit: '',
    tittle: '',
})
let { visible, typelsit, tittle } = toRefs(flag)
const onImage = ({ type, title }) => {
    console.log(type, title);
    visible.value = true
    tittle.value = title + ''
    typelsit.value = type
}
</script>
<style lang="less" scoped>
@import "@/global.less";

.over-view {
    width: 100%;
    display: flex;
    height: 91vh;
    flex-wrap: wrap;
    position: relative;
    padding: 10px;
    .ov-item {
        box-sizing: border-box;
        width: 32.5%;
        margin-right: 0.83%;
        padding: 15px;
        margin-bottom: 20px;
        background-image: url("@/assets/images/bj_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);
            }
        }
    }
}
.el-dialog {
    background-color: rgba(50, 50, 80, 0.8) !important;
}
.el-table thead {
    color: #0ff !important;
}
.el-dialog__title {
    color: #00e4ff;
}
</style>