<template>
  <!-- 一张图 排水设施统计 -->
  <div class="partTitleHM">排水设施统计</div>
  <div class="ppssCount">
    <Vue3SeamlessScroll :hover="true" :list="tableData" :limitScrollNum="5" class="scrolla" direction="left">
      <div class="cenPart">
        <div class="part" v-for="(item, index) in tableData" :key="index" @click="changeLayer(item)">
          <div class="top">
            <div class="upper"><img :src="item.Imgurl" class="upImg" /></div>
            <div class="Major">{{ item.name }}</div>
            <div class="lower">{{ item.num }}</div>
          </div>
          <div class="below">
            <div class="handIn">{{ item.gm }}</div>
            <div class="oflower">{{ item.gmsj }}</div>
          </div>
        </div>
      </div>
    </Vue3SeamlessScroll>
  </div>
</template>

<script setup>
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import gsc from '@/assets/newImgs/HMScreen/gsc.png'; //供水厂
import hjbz from '@/assets/newImgs/HMScreen/hjbz.png'; //合建泵站
import hlgw from '@/assets/newImgs/HMScreen/hlgw.png'; //合流管网
import wsbz from '@/assets/newImgs/HMScreen/wsbz.png'; //污水泵站
import wsclz from '@/assets/newImgs/HMScreen/wsclz.png'; //污水处理厂
import wsgw from '@/assets/newImgs/HMScreen/wsgw.png'; //污水管网
import ysbz from '@/assets/newImgs/HMScreen/ysbz.png'; //雨水泵站
import ysgw from '@/assets/newImgs/HMScreen/ysgw.png'; //雨水管网
import bus from '@/bus/index';

const { proxy } = getCurrentInstance();
const isOpenIniteLayer = ref(true);
const tableData = ref([
  { name: '雨水泵站', num: '28座', gm: '总规模', gmsj: '167.32m³/s', Imgurl: ysbz, layername: 'YSBZ' },
  { name: '污水泵站', num: '8个', gm: '总规模', gmsj: '67.36m³/s', Imgurl: wsbz, layername: 'WSBZ' },
  { name: '合建泵站', num: '2个', gm: '总规模', gmsj: '17.41m³/s', Imgurl: hjbz, layername: 'combineBengZhan' },
  { name: '雨水管网', num: '', gm: '总长度', gmsj: '357km', Imgurl: ysgw, layername: 'ysLine1' },
  { name: '污水管网', num: '', gm: '总长度', gmsj: '275km', Imgurl: wsgw, layername: 'wsLine1' },
  { name: '合流管网', num: '', gm: '总长度', gmsj: '150km', Imgurl: hlgw, layername: 'hsLine1' },
  { name: '污水处理厂', num: '5座', gm: '总规模', gmsj: '41.82万吨/日', Imgurl: wsclz, layername: 'sewageFactory' },
  { name: '供水厂', num: '3座', gm: '总规模', gmsj: '68.7万吨/日', Imgurl: gsc, layername: 'waterFactory' },
]);
let legendList = [
  { layername: 'YSBZ', show: true },
  { layername: 'WSBZ', show: true },
  { layername: 'combineBengZhan', show: true },
  { layername: 'ysLine1', show: true },
  { layername: 'wsLine1', show: true },
  { layername: 'hsLine1', show: true },
  { layername: 'sewageFactory', show: true },
  { layername: 'waterFactory', show: true },
  { layername: 'pipeline_info_flow', show: true },
];
const changeLayer = item => {
  console.log('item---', item);
  isOpenIniteLayer.value = !isOpenIniteLayer.value;
  if (!isOpenIniteLayer.value) {
    legendList.forEach(element => {
      element.show = true;
      if (element.layername == item.layername) {
        element.show = false;
      }
    });
  } else {
    legendList.forEach(element => {
      element.show = false;
    });
  }

  bus.emit('setIniteLayer', legendList);
};
onMounted(() => {});
</script>

<style lang="scss" scoped>
.ppssCount {
  width: 460px;
  background: #004565;
  padding: 10px 15px 0px;
  margin-top: -3px;
  .scrolla {
    width: 100%;
    height: 230px;
    overflow: hidden;
    display: inline-block;
  }
  .cenPart {
    width: 100%;
    // background: red;
    display: flex;
    .part {
      width: 100px;
      height: 220px;
      margin-bottom: 10px;
      margin-right: 10px;
      align-items: center;
      background: url('@/assets/newImgs/HMScreen/beijing.png') no-repeat;
      background-size: 100% 100%;
      .top {
        height: 140px;
        .upper {
          height: 81px;
          .upImg {
            width: 28px;
            height: 24px;
            position: relative;
            top: 44px;
            left: 36px;
          }
        }
        .Major {
          height: 28px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .lower {
          height: 28px;
          font-family: YouSheBiaoTiHei;
          font-weight: bold;
          font-size: 24px;
          color: #ffffff;
          line-height: 23px;
          background: linear-gradient(0deg, #1698f3 0%, #ffffff 100%);
          background-clip: text;
          -webkit-text-fill-color: transparent;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .below {
        margin-top: 25px;
        height: 50px;
        // background: red;
        .handIn {
          height: 25px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #b8ecff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .oflower {
          height: 25px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #b8ecff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>