<template>
  <div class="home">
    <div class="left">
      <div class="left_top animate__fadeInDown animate__animated animate__slow">
        <contentTitle title="企业抵况" />
        <div class="left_top_content">
          <lineLeft :lineHeight="left_top_height" />
          <div class="itemContent">
            <div v-for="item in 5" :key="item" class="item_value">
              <div class="item_value_title">企业名称</div>
              <div class="item_value_detail">这里是企业的详细信息</div>
            </div>
          </div>
          <lineRight :lineHeight="left_top_height" />
          <bottomLine />
        </div>
      </div>
      <div class="left_center animate__fadeInDown animate__animated animate__slow">
        <contentTitle title="单位信息" />
        <div class="left_top_content">
          <lineLeft :lineHeight="left_center_height" />
          <div class="itemContent">
            <div v-for="item in 5" :key="item" class="item_value">
              <div class="item_value_title">企业名称</div>
              <div class="item_value_detail">这里是企业的详细信息</div>
            </div>
          </div>
          <lineRight :lineHeight="left_center_height" />
          <bottomLine />
        </div>
      </div>
      <div class="left_bottom animate__fadeInDown animate__animated animate__slow">
        <contentTitle title="预警信息" />
        <div class="left_top_content left_bottom_content">
          <lineLeft :lineHeight="left_bottom_height" />
          <div @mouseenter="clearScroll" @mouseleave="startScroll" class="itemContent left_bottom_itemcontent">
            <div v-for="item in 8" :key="item" class="item_value"
              :style="{ background: item % 2 === 0 ? 'rgba(48,142,255,0)' : 'rgba(48,142,255,.24)' }" @click="togglePop">
              <div class="item_value_title">{{ item }}</div>
              <div class="item_value_detail">这里是企业的详细信息</div>
            </div>
            <div v-for="item in 8" :key="item" class="item_value"
              :style="{ background: item % 2 === 0 ? 'rgba(48,142,255,0)' : 'rgba(48,142,255,.24)' }" @click="togglePop">
              <div class="item_value_title">{{ item }}</div>
              <div class="item_value_detail">这里是企业的详细信息</div>
            </div>
          </div>
          <lineRight :lineHeight="left_bottom_height" />
          <bottomLine />
        </div>
      </div>
    </div>
    <div class="center">
      <div class="center_top animate__fadeInDown animate__animated animate__slow">
        <img src="@/assets/home/big.jpg" alt="">
      </div>
      <div class="center_bottom">
        <contentTitle title="形象进度" />
        <div class="center_bottom_content">
          <lineLeft :lineHeight="center_bottom_height" />
          <el-image :src="img1" :zoom-rate="2" :max-scale="7" :min-scale="0.2" :preview-src-list="[img1]" fit="cover" />
          <el-image :src="img2" :zoom-rate="2" :max-scale="7" :min-scale="0.2" :preview-src-list="[img2]" fit="cover" />
          <el-image :src="img3" :zoom-rate="2" :max-scale="7" :min-scale="0.2" :preview-src-list="[img3]" fit="cover" />
          <lineRight :lineHeight="center_bottom_height" />
          <bottomLine />
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right_top animate__fadeInDown animate__animated animate__slow">
        <contentTitle title="检查情况" />
        <div class="right_top_content">
          <lineLeft :lineHeight="center_bottom_height" />
          <div class="item">
            <div class="icon-bg">
              <div class="icon-bg-box"></div>
              <img src="@/assets/home/xiangmu.svg" alt="">
            </div>
            <div>
              <div class="item_value_title">检查情况</div>
              <div class="item_value_num">5</div>
            </div>
          </div>
          <div class="item">
            <div class="icon-bg">
              <div class="icon-bg-box"></div>
              <img src="@/assets/home/jichu.svg" alt="">
            </div>
            <div>
              <div class="item_value_title">项目标准化月评数</div>
              <div class="item_value_num">5</div>
            </div>
          </div>
          <div class="item">
            <div class="icon-bg">
              <div class="icon-bg-box"></div>
              <img src="@/assets/home/qiye.svg" alt="">
            </div>
            <div>
              <div class="item_value_title">企业检查数</div>
              <div class="item_value_num">5</div>
            </div>
          </div>
          <div class="item">
            <div class="icon-bg">
              <div class="icon-bg-box"></div>
              <img src="@/assets/home/kaohe.svg" alt="">
            </div>
            <div>
              <div class="item_value_title">项目安标考评数</div>
              <div class="item_value_num">5</div>
            </div>
          </div>
          <lineRight :lineHeight="center_bottom_height" />
          <bottomLine />
        </div>
      </div>
      <div class="right_center animate__fadeInDown animate__animated animate__slow">
        <contentTitle title="现场人员数量" />
        <div class="right_center_content">
          <lineLeft :lineHeight="right_center_height" />
          <div class="right_center_left">
            <div class="right_center_left_top">
              劳务人员 23人
            </div>
            <div class="right_center_left_bottom">
              班组长 23人
            </div>
          </div>
          <div class="right_center_center">
            <div id="echartsBox"></div>
          </div>
          <div class="right_center_right">
            <div class="right_center_right_top">
              特种作业 36人
            </div>
            <div class="right_center_right_bottom">
              安管人员 61人
            </div>
          </div>
          <lineRight :lineHeight="right_center_height" />
          <bottomLine />
        </div>
      </div>
      <div class="right_bottom animate__fadeInDown animate__animated animate__slow">
        <contentTitle title="安全管理" />
        <div class="right_bottom_content">
          <lineLeft :lineHeight="right_bottom_height" />
          <div class="right_bottom_left">
            <div id="chart"></div>
          </div>
          <div class="right_bottom_right">
            <div class="right_bottom_right_item">
              <div class="right_bottom_right_item_title">项目自查</div>
              <div class="right_bottom_right_item_num">98/52%</div>
            </div>
            <div class="right_bottom_right_item">
              <div class="right_bottom_right_item_title">随手拍隐患</div>
              <div class="right_bottom_right_item_num">98/52%</div>
            </div>
            <div class="right_bottom_right_item">

              <div class="right_bottom_right_item_title">移动巡检</div>
              <div class="right_bottom_right_item_num">98/52%</div>
            </div>
          </div>
          <lineRight :lineHeight="right_bottom_height" />
          <bottomLine />
        </div>
      </div>
    </div>
  </div>
  <pop v-if="isShow" @close="togglePop" />
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from 'vue';
import contentTitle from '@/components/contentTitle.vue';
import lineLeft from '@/components/lineLeft.vue';
import lineRight from '@/components/rightLine.vue';
import bottomLine from '@/components/bottomLine.vue';
// 弹窗
import pop from '@/components/pop.vue';
const left_top_height = ref(0);
const left_center_height = ref(0);
const left_bottom_height = ref(0);
const center_bottom_height = ref(0);
const right_center_height = ref(0);
const right_bottom_height = ref(0);
const isShow = ref(false);
const togglePop = (newShow:any) => {
  isShow.value = !isShow.value;
  if (newShow) {
    isShow.value = newShow;
  }
};
var intervalId: any = null;
import img1 from "../../assets/home/1.png"
import img2 from "../../assets/home/2.png"
import img3 from "../../assets/home/3.png"
onMounted(() => {
  const left_top = document.querySelector('.left_top');
  const left_center = document.querySelector('.left_center');
  const left_bottom = document.querySelector('.left_bottom');
  const center_bottom = document.querySelector('.center_bottom');
  const right_center = document.querySelector('.right_center');
  const right_bottom = document.querySelector('.right_bottom');
  if (left_top) {
    left_top_height.value = left_top.clientHeight - 40;
  }
  if (left_center) {
    left_center_height.value = left_center.clientHeight - 40;
  }
  if (left_bottom) {
    left_bottom_height.value = left_bottom.clientHeight - 40;
  }
  if (center_bottom) {
    center_bottom_height.value = center_bottom.clientHeight - 40;
  }
  if (right_center) {
    right_center_height.value = right_center.clientHeight - 40;
  }
  if (right_bottom) {
    right_bottom_height.value = right_bottom.clientHeight - 40;
  }
  // 列表向滚动
  const left_bottom_itemcontent = document.querySelector('.left_bottom_itemcontent');
  if (left_bottom_itemcontent) {
    left_bottom_itemcontent.scrollTop = 0;
  }
  // 定时器
  intervalId = setInterval(() => {
    if (left_bottom_itemcontent) {
      left_bottom_itemcontent.scrollTop += 1;
      if (left_bottom_itemcontent.scrollTop >= left_bottom_itemcontent.scrollHeight - left_bottom_itemcontent.clientHeight) {
        left_bottom_itemcontent.scrollTop = 0;
      }
    }
  }, 50);
  init();
  initC();
});
const clearScroll = function () {
  clearInterval(intervalId);
};
const startScroll = function () {
  // 列表向滚动
  const left_bottom_itemcontent = document.querySelector('.left_bottom_itemcontent');
  // 定时器
  intervalId = setInterval(() => {
    if (left_bottom_itemcontent) {
      left_bottom_itemcontent.scrollTop += 1;
      if (left_bottom_itemcontent.scrollTop >= left_bottom_itemcontent.scrollHeight - left_bottom_itemcontent.clientHeight) {
        left_bottom_itemcontent.scrollTop = 0;
      }
    }
  }, 50);
};
function init() {
  const chartDom = document.getElementById('echartsBox');
  if (!chartDom) return;
  const myChart = echarts.init(chartDom);
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c}' // 鼠标hover时展示啥数据
    },

    series: [
      {
        label: {
          show: false,
        },
        name: '',
        type: 'pie',
        radius: ['70%', '90%'],
        avoidLabelOverlap: false,
        data: [
          { value: 1048, name: '劳务人员' },
          { value: 735, name: '班组长' },
          { value: 580, name: '特种作业' },
          { value: 484, name: '安管人员' },
        ]
      }
    ]
  };
  myChart.setOption(option);
}
function initC() {
  const ring = 1048 + 735 + 580 + 484; // 总数
  const chartDom = document.getElementById('chart');
  if (!chartDom) return;
  const myChart = echarts.init(chartDom);
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c}' // 鼠标hover时展示啥数据
    },
    graphic: [
      {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: `${ring}\n` +
            `总数`,
          textAlign: 'center',
          fill: '#fff', // 文字的颜色
          fontSize: 14,
          lineHeight: 20,
          fontWeight: 'bold',
        },
      },
    ],
    series: [
      {
        label: {
          show: false,
        },
        name: '',
        type: 'pie',
        radius: ['80%', '90%'],
        avoidLabelOverlap: false,
        data: [
          { value: 1048, name: '劳务人员' },
          { value: 735, name: '班组长' },
          { value: 580, name: '特种作业' },
          { value: 484, name: '安管人员' },
        ]
      }
    ]
  };
  myChart.setOption(option);
}
</script>

<style scoped>
@keyframes rotateIcon {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.home {
  height: calc(100vh - 85px);
  display: flex;
  justify-content: space-around;
  padding: 5px 10px;
  cursor: pointer;
}

.left {
  width: 21%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.center {
  width: 52%;
  height: 100%;
}

.right {
  width: 23%;
  height: 100%;
}

.left_top {
  height: 25%;

  .left_top_content {
    height: 81%;
    position: relative;
    background-color: rgba(3, 51, 130, .4);
    .itemContent {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 0 12px 12px 12px;
      color: #fff;

      .item_value {
        display: flex;
        justify-content: start;
        padding-left: 35px;
        background: url("../../assets/home/item_bg.png") no-repeat 12px center;
        background-size: 15px 18px;

        .item_value_title {
          color: #9ab6cc;
          margin-right: 12px;
        }
      }
    }
  }
}

.left_center {
  height: 36%;

  .left_top_content {
    height: 88%;
    position: relative;
    background-color: rgba(3, 51, 130, .4);

    .itemContent {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 0 12px 12px 12px;
      color: #fff;

      .item_value {
        display: flex;
        justify-content: start;
        padding-left: 35px;
        background: url("../../assets/home/item_bg.png") no-repeat 12px center;
        background-size: 15px 18px;

        .item_value_title {
          color: #9ab6cc;
          margin-right: 12px;
        }
      }
    }
  }
}

.left_bottom {
  height: 35%;

  .left_top_content {
    overflow: hidden;
    height: 88%;
    position: relative;
    background-color: rgba(3, 51, 130, .4);
    .itemContent {
      height: 94%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      color: #fff;
      padding-right: 10px;

      .item_value {
        display: flex;
        padding: 10px 0 10px 35px;
        background-size: 15px 18px;

        .item_value_title {
          color: #9ab6cc;
          margin-right: 12px;
        }

        &:hover {
          border: 1px solid #0a7cb1;
        }
      }

    }
  }
}

.center {
  display: flex;
  justify-content: space-between;
  flex-direction: column;

  .center_top {
    height: 69%;
    background-color: rgba(3, 51, 130, .4);

    img {
      width: 100%;
      height: 100%;
    }
  }

  .center_bottom {
    height: 30%;

    .center_bottom_content {
      height: 86%;
    background-color: rgba(3, 51, 130, .4);
      position: relative;
      padding: 12px 6px 12px 0;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .el-image {
        height: 100%;
        width: 32%;
      }
    }
  }
}

.right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .right_top {
    height: 30%;

    .right_top_content {
    background-color: rgba(3, 51, 130, .4);
      position: relative;
      height: 86%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      padding: 0 12px;

      .item {
        width: 50%;
        display: flex;
        color: #fff;

        .icon-bg {
          width: 50px;
          height: 50px;
          margin-right: 12px;
          position: relative;

          .icon-bg-box {
            background: url("../../assets/home/icon_bg.png") no-repeat center center;
            background-size: 50px 50px;
            height: 100%;
            width: 100%;
            animation: rotateIcon 2s linear infinite;
          }

          img {
            width: 18px;
            height: 18px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
          }
        }

        .item_value_title {
          color: #fff;
          font-size: 14px;
        }

        .item_value_num {
          font-family: 'YouSheBiaoTiHei';
          font-size: 25px;
          font-weight: bold;
          background: linear-gradient(to bottom, #fff, #8fdcff);
          background-clip: text;
          color: transparent;
        }
      }
    }
  }

  .right_center {
    height: 30%;

    .right_center_content {
    background-color: rgba(3, 51, 130, .4);
      height: 87%;
      position: relative;
      display: flex;
      justify-content: space-between;

      .right_center_left {
        height: 100%;
        width: 35%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .right_center_left_top {
          font-size: 14px;
          position: relative;
          display: flex;
          align-items: center;
          color: #ffffffde;
          width: 100%;
          height: 25%;
          background: url("../../assets/home/r_c_lt.png") no-repeat center center;
          background-size: 100% 100%;
          padding-left: 20px;
        }

        .right_center_left_top::after {
          content: "";
          width: 5px;
          height: 5px;
          background: red;
          border-radius: 50%;
          position: absolute;
          right: 28px;
        }

        .right_center_left_bottom {
          font-size: 14px;
          position: relative;
          display: flex;
          align-items: center;
          color: #ffffffde;
          width: 100%;
          padding-left: 20px;
          height: 25%;
          background: url("../../assets/home/r_c_lb.png") no-repeat center center;
          background-size: 100% 100%;
          margin-top: 20%;
        }

        .right_center_left_bottom::after {
          content: "";
          width: 5px;
          height: 5px;
          background: red;
          border-radius: 50%;
          position: absolute;
          right: 28px;
        }
      }

      .right_center_center {
        height: 100%;
        width: 30%;
        background: url("../../assets/home/r_c_cbg.png") no-repeat center center;
        background-size: 100% 60%;
        display: flex;
        justify-content: center;
        align-items: center;

        #echartsBox {
          height: 80%;
          width: 80%;
        }
      }

      .right_center_right {
        height: 100%;
        width: 35%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .right_center_right_top {
          position: relative;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          color: #ffffffde;
          width: 100%;
          height: 25%;
          background: url("../../assets/home/r_c_rt.png") no-repeat center center;
          background-size: 100% 100%;
          padding-right: 20px;
        }

        .right_center_right_top::after {
          content: "";
          width: 5px;
          height: 5px;
          background: red;
          border-radius: 50%;
          position: absolute;
          left: 28px;
        }

        .right_center_right_bottom {
          position: relative;
          font-size: 14px;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          color: #ffffffde;
          width: 100%;
          height: 25%;
          background: url("../../assets/home/r_c_rb.png") no-repeat center center;
          background-size: 100% 100%;
          margin-top: 20%;
          padding-right: 20px;
        }

        .right_center_right_bottom::after {
          content: "";
          width: 5px;
          height: 5px;
          background: red;
          border-radius: 50%;
          position: absolute;
          left: 28px;
        }
      }
    }
  }

  .right_bottom {
    height: 36%;
    align-items: center;

    .right_bottom_content {
    background-color: rgba(3, 51, 130, .4);
      height: 86%;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .right_bottom_left {
        width: 50%;
        height: 100%;
        background: url("../../assets/home/r_b_lbg.svg") no-repeat center center;
        background-size: 70% 70%;
        display: flex;
        justify-content: center;
        align-self: center;

        #chart {
          width: 90%;
          height: 100%;
        }
      }
    }

    .right_bottom_right {
      font-size: 14px;
      font-weight: bold;
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .right_bottom_right_item {
        position: relative;
        width: 100%;
        color: #fff;
        display: flex;
        padding-left: 12px;
        align-items: center;

        /* Added alignment for items */
        .right_bottom_right_item_title {
          margin-left: 10px;
        }

        .right_bottom_right_item_num {
          margin-left: 40px;
        }
      }

      .right_bottom_right_item::after {
        content: "";
        width: 10px;
        height: 10px;
        background: yellow;
        /* Corrected background color */
        border-radius: 50%;
        position: absolute;
        left: 0;
      }

    }
  }
}
</style>