<template>
  <div class="publicContainerA">
    <div class="partTitleHM">项目展示列表</div>
    <div class="ConstrucClass">
      <div class="HeadContent">
        <el-form-item>
          <el-select
          v-model="searvhDate"
          clearable
          filterable
          remote
          placeholder="请输入项目名称"
          :remote-method="blurMethod"
          @change="stationListChange"
          style="width: 95%;"
        >
          <el-option v-for="item in listDataXm" :key="item.projectNo" :label="item.projectName" :value="item.projectNo" />
        </el-select>
        </el-form-item>
      </div>
      <div class="ConstrucNr">
        <Vue3SeamlessScroll  :list="listDataXm"   :singleHeight="55" :singleWaitTime="1500" :hover="true"   class="scroll">
          <div class="listXm" v-for="item in listDataXm" :title="item.projectName" @click="ProjectClick(item)">
            <img class="Icon_zp" :src="getIcon(item.projectTypeName)" alt="" />
            <div :class="{activeConstruListA: listActive.projectNo==item.projectNo}"   class="XmName ellipsis" >{{ item.projectName }}</div>
          </div>
        </Vue3SeamlessScroll>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import { projectInfoNew } from '@/api/sponeScreen/gcpjApi.js'
import bus from '@/bus';
import dlgc from '@/assets/images/zonglan/2.png';
import gyld from '@/assets/images/zonglan/3.png';
import hmsx from '@/assets/images/zonglan/8.png';
import gwpc from '@/assets/images/zonglan/5.png';
import gwpz from '@/assets/images/zonglan/4.png';
import ptss from '@/assets/images/zonglan/1.png';
import jzsq from '@/assets/images/zonglan/6.png';
import qt from '@/assets/images/zonglan/7.png';
import Architectural from '@/assets/newImgs/HMScreen/Architectural_icon.png';
import { nextTick } from 'vue';
const emitM = defineEmits();
const listDataXm = ref([]);
const listActive = ref({});
const searvhDate=ref('')
const obj = {
  海绵建筑与社区: jzsq,
  海绵型道路广场: dlgc,
  海绵型公园绿地: gyld,
  海绵型水系: hmsx,
  管网排查与修复: gwpc,
  管网及泵站: gwpz,
  GIS平台建设与监测设施: ptss,
  其他: qt,
};
const getIcon = name => {
  return obj[name];
};
async function projectInfoNewM(p) { 
  let { data, code } = await projectInfoNew(p)
  if (code == 200) { 
    listDataXm.value = data
  }
}
const AllData = reactive({
  queryParams: {},
});
const ProjectClick = (row) => { 
  listActive.value = row
  listDataXm.value.map(i => {
    if (row.id == i.id) {
      i.checked = !i.checked;
    } else {
      i.checked = false;
    }
  });
  let arr = listDataXm.value.filter(i => i.checked);
  emitM('qipaoDateMeth', arr[0], arr[0]?.checked);
}
const { queryParams } = toRefs(AllData);
function stationListChange(v) {
  projectInfoNewM({ projectNo: v });
}

projectInfoNewM()
bus.on('getProjectList', (i) => { 
    projectInfoNewM({projectTypeId:i.typeId})
})
</script>

<style lang="scss" scoped>
.publicContainerA {
  margin-top: 10px;
}
.ConstrucClass {
  width: 100%;
  height: calc(100vh - 530px);
  background: #003b6d;
  opacity: 0.8;
  .HeadContent {
    width: 100%;
    height: 65px;
    // background: red;
    align-items: center;
    line-height: 25px;
    margin-top: 2px;
  }
  .ConstrucNr {
    width: 100%;
    height: calc(100% - 17%);
    // background: #2790fb;
    .scroll {
      width: 95%;
      height: calc(100% - 1%);
      overflow: hidden;
      // display: inline-block;
      // background: red;
      margin: auto;
    }
    .listXm {
      position: relative;
      width: 95%;
      height: 50px;
      background: url('@/assets/newImgs/HMScreen/ujnasf.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      margin: 5px auto;
      .Icon_zp {
        width: 32px;
        height: 32px;
        position: relative;
        top: 9px;
        left: 20px;
        // background: red;
      }
      .XmName {
        position: relative;
        left: 70px;
        top: 15px;
        width: 315px;
        height: 50px;
        // background: red;
        overflow: hidden;
       white-space: nowrap; /* 防止文字换行 */
         text-overflow: ellipsis; 
      }
      
    }
  }
}

:deep(.el-input__inner) {
  background: #11559b !important;
  // box-shadow: 0 0 0 0.00521rem #066592 inset !important;
  color: #fff !important;
  width: 390px !important;
}
:deep(.el-input__wrapper, .el-textarea__inner) {
    background:#11559b  !important;
    // box-shadow: 0 0 0 0.00521rem  inset !important;
    color: #fff !important;
}
:deep(.el-form-item__content) {
    margin: 10px;
}
.activeConstruListA
{ 
  color: #cbc05a;
}
:deep(.scroll >div>:nth-child(2)){display: none !important}

</style>