<template>
  <div id="PanelDisplayHidden">
    <!-- 面板显示隐藏 -->
    <img
      v-show="Gettype == 'another'"
      id="ShowComVs"
      :class="[showPanel ? 'ShowComVsTrue' : 'ShowComVsFalse']"
      @click="ShowComvsClick()"
      :src="showPanel ? ZuoYou2 : ZuoYou1"
    />

    <img
      v-show="Gettype == 'WaterAssets'"
      id="ShowComVs"
      :class="[showPanel ? 'ShowComVsTrue' : 'ShowComVsFalse']"
      @click="ShowComvsClick()"
      :src="showPanel ? WaterAssetsZuoYou2 : WaterAssetsZuoYou1"
    />
  </div>
</template>

<script setup name="PanelDisplayHidden">
import { ref, reactive, toRefs, onMounted } from 'vue';
import { defineEmits } from 'vue';

const props = defineProps({
  Gettype: {
    type: String,
    default: 'another',
  },
});

const emit = defineEmits(['showPanelChange']);
// 左右滑动
import ZuoYou1 from '@/assets/images/pictureOnMap/ZuoYou1.png';
import ZuoYou2 from '@/assets/images/pictureOnMap/ZuoYou2.png';
import WaterAssetsZuoYou1 from '@/assets/images/pictureOnMap/WaterAssetsZuoYou1.png';
import WaterAssetsZuoYou2 from '@/assets/images/pictureOnMap/WaterAssetsZuoYou2.png';
const showPanel = ref(false); //面板展开收起
const AllData = reactive({});
const ShowComvsClick = () => {
  showPanel.value = !showPanel.value;
  emit('showPanelChange', showPanel.value);
};
onMounted(() => {});
</script>

<style lang="scss" scoped>
#ShowComVs {
  position: absolute;
  top: 480px;
  left: 468px;
  width: 15px;
  height: 56px;
  // background: #00cee0;
  cursor: pointer;
}
.ShowComVsTrue {
  transition: all 0.5s;
  transform: translateX(-468px);
}
.ShowComVsFalse {
  transition: all 0.5s;
  transform: translateX(0px);
}
</style>