<template>
  <div class="home">
    <div class="left">
      <img src="../assets/bg.png" alt="" />
      <div class="hot" v-for="(item, i) in menus" :class="'hot' + i" :key="i" @click="go(item)"></div>
    </div>
    <ul class="menus">
      <li class="one-card" v-for="(item, i) in menus" :key="i" @click="go(item)">
        <div class="one-card-left" :class="'menu' + i" >{{ item.name }}</div>
        <div class="one-card-right" :class="'color' + i"></div>
      </li>
    </ul>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
import { useRouter } from "vue-router";
import {useStore} from 'vuex';
export default {
  name: 'home',
  setup() {
    const router = useRouter();
    const store = useStore();
    const state = reactive({
      menus: [{
        name: '处理&回用系统',
        url: 'page'
      }, {
        name: '屋顶绿化系统',
        url: 'green'
      }, {
        name: '生物滞留&净化系统',
        url: 'biology'
      }, {
        name: '透水铺装&入渗系统',
        url: 'shentou'
      }, {
        name: '调蓄系统&逆流监测系统',
        url: 'chuxu'
      }, {
        name: '气象监测系统',
        url: 'weather'
      }]
    })

    onMounted(() => {
      store.commit("setModelName", '');
    })
    const go = (item) => {
      store.commit("setModelName", item.name);
      router.push(item.url);
    }
    return {
      ...toRefs(state),
      go
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  // background: url(../assets/bg2.png) left top no-repeat;
  // background-size: 100% 100%;
  // border: 1px solid rgb(180, 20, 180);
  display: flex;
  justify-content: space-between;

  .left {
    width: 80%;
    height: 100%;
    // border: 1px solid red;
    display: flex;
    justify-content: center;
    position: relative;

    img {
      height: 100%;
    }
  }

  .hot {
    width: 150px;
    height: 150px;
    // border: 1px solid blue;
    position: absolute;
    cursor: pointer;
  }
    .hot0 {
      top: 0px;
    left: 597px;
    }

    .hot1 {
      top: 133px;
    left: 1051px;
    }

    .hot4 {
      top: 524px;
    left: 301px;
    }
    .hot5 {
      top: 172px;
    left: 300px;
    }
    .hot2 {
      top: 580px;
    left: 1061px;
    }

    .hot3 {
      top: 757px;
    left: 647px;
    }
  
  .menus {
    float: right;
    width: 20%;
    display: flex;
    flex-direction: column;
    // border: 1px solid rgb(27, 187, 21);
    justify-content: space-between;
    .one-card {
      width: 100%;
      height: 140px;
      // border: 1px solid red;
      display: flex;
      justify-content: space-between;
      box-shadow: 0 0 8px #99ACB0 inset;
      cursor: pointer;
      .one-card-left {
        width: 80%;
        padding: 10px;
        font-weight: 800;
        
      }
      .menu0 {
        background: url(../assets/p1.png) center 40px no-repeat;
        background-size: 50% auto;
      }
      .menu1 {
        background: url(../assets/p2.png) center 40px no-repeat;
        background-size: 50%  auto;
      }
      .menu2 {
        background: url(../assets/p3.png) center 40px no-repeat;
        background-size: 50%  auto;
      }
      .menu3 {
        background: url(../assets/p4.png) center 40px no-repeat;
        background-size: 50%  auto;
      }
      .menu4 {
        background: url(../assets/p5.png) center 40px no-repeat;
        background-size: 50% auto;
      }
      .menu5 {
        background: url(../assets/p6.png) center 40px no-repeat;
        background-size: 50% auto;
      }
      .color0 {
        background: linear-gradient(to right, rgb(171, 187, 187), #7BB7B7);
      }
      .color1 {
        background: linear-gradient(to right, #e2eff1, #99ACB0);
      }
      .color2 {
        background: linear-gradient(to right, #b8e5f5, #6ED2F6);
      }
      .color3 {
        background: linear-gradient(to right, #bfdad9, #A3D8D6);
      }
      .color4 {
        background: linear-gradient(to right, #c3d4cb, #81CFA3);
      }
      .color5 {
        background: linear-gradient(to right, #c3d4cb, #81CFA3);
      }
      .one-card-right {
        width: 20%;
      }
    }
    
  }
}
</style>