<template>
  <div class="homeContainer">
    <div class="title">守信企业</div>
    <div class="carouselContainer">
      <div>
        <el-carousel :interval="5000" arrow="always" :height="'500px'">
          <el-carousel-item>
            <img src="@/assets/images/2222.jpg" style="width: 50vw;" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="@/assets/images/1111.jpg" style="width: 50vw;" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="@/assets/images/3333.jpg" style="width: 50vw;" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="listContainer" ref="listContainer">
      <div class="listContent" ref="listContent" :style="{transform:'translateY('+moveValue+'px)'}">
        <div class="lsitItem" v-for="(item,index) in homeList" :key="index" style="position: relative"><span style="position: absolute;left: 10px;">{{ index + 1 + '、' }}</span>{{item.enterpriseName}}</div>
      </div>
    </div>
    <div class="footerContianer">
      <div class="block text-center" m="t-4">
        <el-carousel trigger="click" height="230px">
          <el-carousel-item>
            <div style="display: flex;justify-content: space-around">
              <div class="imgContainer" @click="toLink(1)">
                <img src="@/assets/images/666.jpg" />
                <div class="textContainer">工业和信息化</div>
              </div>
              <div class="imgContainer" @click="toLink(2)">
                <img src="@/assets/images/777.jpg" />
                <div class="textContainer">工信厅项目管理</div>
              </div>
              <div class="imgContainer" @click="toLink(3)">
                <img src="@/assets/images/999.jpg" />
                <div class="textContainer">财政厅项目资金管理</div>
              </div>
              <div class="imgContainer" @click="toLink(4)">
                <img src="@/assets/images/888.jpg" />
                <div class="textContainer">工信厅项目</div>
              </div>
              <div class="imgContainer" @click="toLink(5)">
                <img src="@/assets/images/888.jpg" />
                <div class="textContainer">可视化入口</div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>


  </div>
</template>

<script setup>
// import Cookies from 'js-cookie'

// const imgUrl = new URL('../../assets/logo/logo.png', import.meta.url).href

import {nextTick, onMounted, onUnmounted, watch} from "vue";
import {getHomeList} from "../../api/home/home";

const username = localStorage.getItem('username')
const toLink = (index)=>{
  switch (index) {
    case 1:
      window.open('https://gxt.hunan.gov.cn/gxt/ztzl/zxzj/zdbf/202404/t20240403_33269363.html');
      break;
    case 2:
      window.open('http://222.240.80.54:8086/pmp/a/login');
      break;
    case 3:
      window.open('http://220.168.30.70:28889');
      break;
    case 4:
      window.open('http://222.240.80.54:18080/hnibdp-daq/login');
      break
    case 5:
      window.open('../visualization/index.vue');
  }
}
const moveList = ()=>{
  // console.log(listContent.value.offsetHeight);
  // console.log(listContainer.value.offsetHeight);
  // console.log(limitRange.value);
  if(moveValue.value<=-limitRange.value){
    moveValue.value = 0;
  }
  moveValue.value = moveValue.value - 0.5;
}
const listContent = ref(null);
const listContainer = ref(null);
const limitRange = ref(0);
const moveValue = ref(0);
const homeList = ref([]);

onMounted(()=>{
  getHomeList().then(res=>{
    if(res.code == 200){
      homeList.value = res.data;
      nextTick(()=>{
        limitRange.value = listContent.value.offsetHeight-listContainer.value.offsetHeight;
      })
    }
  })
})
let interval = setInterval(moveList,16.6);
onUnmounted(()=>{
  clearInterval(interval);
})

</script>

<style scoped lang="scss">

.user__info {
  display: flex;
  align-items: center;
  padding: 20px;
  .user__info--right {
    margin-left: 20px;
    span {
      font-size: 26px;
    }
    div {
      font-size: 14px;
    }
  }
}
.homeContainer{
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  .title{
    position: absolute;
    z-index: 9999;
    left: 51.5vw;
    top: 0;
    background-color: #EEF2FBFF;
    width: 28vw;
    height: 4vh;
    line-height: 4vh;
    font-size: 26px;
    border-radius: 10px;
    text-align: center;
    box-shadow: #EEF2FBFF 0 0 5px;
  }
  //background-color: #EEF2FBFF;
  .carouselContainer{
    width: 50vw;
  }
  .listContainer{
    margin-top: 50px;
    height: 450px;
    width: 30vw;
    overflow: hidden;
    .listContent{
      //height: 100px;
      .lsitItem{
        width: 95%;
        height: 40px;
        margin-bottom: 10px;
        margin-left: 30px;
        line-height: 40px;
        text-align: center;
        //border: 1px solid #8492a6;
        box-shadow: #EEF2FBFF 0 0 5px;
        border-radius: 10px;
        background-color: #EEF2FBFF;
        cursor: pointer;
      }
    }
  }
  .footerContianer{
    margin-top: 70px;
    width: 80vw;
  }
}
.imgContainer{
  position: relative;
  cursor: pointer;
  width: 23%;
  img{
    width: 100%;
  }
  .textContainer{
    position: absolute;
    bottom: 10px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: white;
    opacity: 0.55;
  }
}
</style>
