<template>
  <!-- 海绵综合一张图 项目建设 -->
  <div class="publicContainer">
    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
      <!-- 建设状态 -->
      <ConstructionStatus></ConstructionStatus>
      <!-- 降雨日历 -->
      <CaldarRain class="mt-5"></CaldarRain>
      <!--  项目展示-->
      <ProjectDisplay @qipaoDateMeth="qipaoDateMeth" class="mt-5"></ProjectDisplay>
    </div>
    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
      <!--项目评估  -->
      <ProjectEvaluation></ProjectEvaluation>
    </div>

    <!-- 典型项目CAD图例说明 -->
    <div :class="['tuli_data_list', showPanel ? 'left20' : 'left480']" v-if="showLegendXM">
      <div class="tuli_title">
        图例说明 <el-icon style="float: right; margin: 10px 10px" @click="showLegendXM = false"><CircleCloseFilled /></el-icon>
      </div>
      <div class="tuli_content">
        <div class="flex list flex-justcontent-start flex-align-center" v-for="(item, index) in tuLiList" :key="index">
          <div class="img_icon flex" v-if="item.icon">
            <img :src="getImageUrl(item.icon, 'newImgs/layerIcon')" />
          </div>
          <div v-else :class="item.iconName"></div>
          <p class="title" :title="item.layerName">{{ item.layerName }}</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 项目详情 -->
  <qipao v-if="visibleqipao" @closed="closed" :allDateList="allData"></qipao>
</template>
<script setup>
import { getImageUrl } from '@/utils/ruoyi';
import CaldarRain from '@/views/sponeScreen/waterFlood/rainCaldar.vue'; //降雨日历
import ConstructionStatus from '@/views/sponeScreen/projectHM/ConstructionStatus.vue'; //建设状态
import ProjectDisplay from '@/views/sponeScreen/projectHM/ProjectDisplay.vue'; //项目展示
import ProjectEvaluation from '@/views/sponeScreen/projectHM/ProjectEvaluation.vue'; //项目评估
import qipao from '@/views/sponeScreen/projectHM/gongchenkanbani_comp/qipao.vue';
import bus from '@/bus/index';

const { proxy } = getCurrentInstance();
const showPanel = ref(true); //面板展开收起
const visibleqipao = ref(false);
const allData = ref({});
const showLegendXM = ref(false);
//项目及设施图例
const tuLiList = [
  { icon: '', layerName: '红线范围', iconName: 'hongXianFanWei' },
  { icon: '', layerName: '生态停车位（透水铺装）', iconName: 'shengTaiTingCheWei' },
  { icon: '', layerName: '植草沟-CG', iconName: 'zhiCaoGou' },
  { icon: '', layerName: '雨水花园-YH', iconName: 'yuShuiHuaYuan' },
  { icon: '', layerName: '透水铺装', iconName: 'touShuiPuZhuang' },
  { icon: '', layerName: '蓄水池', iconName: 'xuShuiChi' },
  { icon: 'xiaChenShiLvDi.png', layerName: '下沉市绿地-AD', iconName: '' },
  { icon: '', layerName: '非直排雨水管', iconName: 'feiZhiPaiYuShuiGuan' },
  { icon: '', layerName: '直排雨水管', iconName: 'zhiPaiYuShuiGuan' },
];

// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
});
watch(
  () => props.showPanel,
  () => {
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);
function qipaoDateMeth(v, isShow) {
  visibleqipao.value = false;
  allData.value = v;
  setTimeout(() => {
    if (isShow) {
      visibleqipao.value = true;
    }
  }, 10);
}
function closed(v) {
  visibleqipao.value = v;
  newfiberMapbox.map.easeTo({
    center: [114.345, 34.801],
    zoom: 13.8,
    pitch: 30,
  });
}

onMounted(() => {
  // 显示图例控制
  bus.on('ifShowLegendXM', e => {
    showLegendXM.value = e;
  });
});
onBeforeUnmount(() => {
  bus.emit('removeMapDatas', ['warning_monitor']);
  bus.emit('setLayerVisible', { layername: 'warning_monitor', isCheck: false });
  bus.off('ifShowLegendXM');
});
</script>

<style lang="scss" scoped>
.publicContainer {
  position: relative;
  .left20 {
    left: 20px;
  }
  .left480 {
    left: 480px;
  }
  .tuli_data_list {
    position: fixed;
    width: auto;

    bottom: 60px;
    z-index: 99;
    background: linear-gradient(0deg, rgba(11, 71, 113, 0.9) 0%, rgba(22, 83, 126, 0.8) 100%);
    border-radius: 4px;
    border: 1px solid #42a4ef;
    transition: all 0.5s;
    background-size: 100% 100%;

    .tuli_title {
      line-height: 40px;
      text-align: center;
      font-size: 16px;
      color: #ffffff;
    }

    .tuli_content {
      padding: 0 10px 10px 10px;
      height: 100%;
      overflow: auto;

      .list {
        width: 100%;
        color: #dfdada;
        font-size: 14px;
        height: 30px;

        .img_icon {
          width: 35px;

          img {
            width: 100%;
          }
        }

        .hongXianFanWei {
          width: 35px;
          height: 3px;
          border: 3px dashed #e30013;
        }

        .shengTaiTingCheWei {
          width: 35px;
          height: 8px;
          background-color: #514cff;
        }

        .zhiCaoGou {
          width: 35px;
          height: 8px;
          background-color: #7cc961;
        }

        .yuShuiHuaYuan {
          width: 35px;
          height: 8px;
          background-color: #ff4cff;
        }

        .touShuiPuZhuang {
          width: 35px;
          height: 8px;
          background-color: #9b9b9b;
        }

        .xuShuiChi {
          width: 35px;
          height: 8px;
          background-color: #fed65d;
        }

        .lvDi {
          width: 35px;
          height: 8px;
          background-color: #2398d4;
        }

        .feiZhiPaiYuShuiGuan {
          width: 35px;
          height: 18px;
          position: relative;

          &::after {
            position: absolute;
            left: 50%;
            margin-left: -9px;
            content: '';
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background-color: #fd00fc;
          }
        }

        .zhiPaiYuShuiGuan {
          width: 35px;
          height: 18px;
          position: relative;

          &::after {
            position: absolute;
            left: 50%;
            margin-left: -9px;
            content: '';
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background-color: #22cf3f;
          }
        }

        .title {
          margin-left: 8px;
        }
      }
    }
  }
}
</style>