<template>
  <div id="shuiwuyuansu">
    <div class="boxitem" v-for="item in leftList" :key="item">
      <div class="leftbox">
        {{ item.pointTypeName }}
      </div>
      <div class="rightbox">
        <div
          class="pumpName"
          :class="p.id == getdataid ? 'actived' : ''"
          @click="pumpclick(p)"
          :title="p.name"
          v-for="p in item.data"
          :key="p"
        >
          {{ p.name }}
        </div>
      </div>
    </div>

    <div class="dialog" v-if="showdia">
      <div class="closedia" @click="showdia = false">x</div>
      <JichuXinxi :dataID="getdataid" :dataCode="getdataCode"></JichuXinxi>
    </div>
  </div>
</template>

<script setup name="shuiwuyuansu">
import JichuXinxi from '@/views/pictureOnMap/page/components/DialogTabs/component/JichuXinxi.vue';
import { getWaterRegionData, getRegionData, getReservoirData } from '@/api/MonitorAssetsOnMap';

const props = defineProps({
  // 数据id
  dataID: {
    type: [String, Number],
  },
  dataCode: {
    type: String,
  },
});

const getdataCode = ref('');
const getdataid = ref('');
const leftList = ref([
  // {
  //   pointTypeName: '泵站',
  //   type: 'bengzhan',
  //   data: [
  //     { name: '泵站1xxxxxxxxxx', value: '1' },
  //     { name: '泵站2', value: '2' },
  //     { name: '泵站3', value: '3' },
  //     { name: '泵站3', value: '3' },
  //     { name: '泵站3', value: '3' },
  //     { name: '泵站3', value: '3' },
  //   ],
  // },
]);

const showdia = ref(false);

function pumpclick(item) {
  console.log('点击的每一项', item);
  showdia.value = false;
  getdataid.value = item.id;
  getdataCode.value = item.pointType;
  showdia.value = true;
}

function Getlist() {
  let params = {
    id: props.dataID,
  };
  let api = '';
  if (props.dataCode == 'region_info') {
    api = getRegionData;
  }
  if (props.dataCode == 'water_region_info') {
    api = getWaterRegionData;
  }

  if (props.dataCode == 'lake_info') {
    api = getReservoirData;
  }

  api(params).then(res => {
    console.log(res);
    leftList.value = res.data;
  });
}

onMounted(() => {
  console.log('props', props);
  Getlist();
});
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mapcss.scss';

#shuiwuyuansu {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  padding: 0 20px;
  position: relative;
  color: #ccefff;

  .dialog {
    padding-top: 20px;
    position: absolute;
    width: 75%;
    height: 95%;
    right: 2%;
    bottom: 2%;
    z-index: 999;
    background: rgba(51, 95, 141, 0.9);
    border-radius: 5px;
    overflow: hidden;

    .closedia {
      cursor: pointer;
      position: absolute;
      right: 10px;
      top: 5px;
    }
  }
}
</style>