<script setup lang="ts">
import ComponentWrapper from '@/components/data-visualization/canvas/ComponentWrapper.vue'
import { storeToRefs } from 'pinia'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import dvHidden from '@/assets/svg/dv-hidden.svg'
import { computed } from 'vue'
import Icon from '../icon-custom/src/Icon.vue'
import EmptyBackground from '../empty-background/src/EmptyBackground.vue'
const dvMainStore = dvMainStoreWithOut()
const { componentData, canvasStyleData, canvasViewInfo, dvInfo } = storeToRefs(dvMainStore)
const emit = defineEmits(['cancelHidden'])
const componentsHidden = computed(() => {
  return componentData.value.filter(ele => ele.dashboardHidden)
})

const addToDashboard = item => {
  item.dashboardHidden = false
  emit('cancelHidden', item)
}
</script>

<template>
  <div class="config-hidden">
    <template v-if="componentsHidden?.length > 0">
      <div
        :style="{ height: '180px', width: '260px' }"
        class="wrapper-inner-adaptor"
        v-for="item in componentsHidden"
        :key="item.id"
      >
        <div class="component-outer">
          <ComponentWrapper
            canvas-id="canvas-main"
            :canvas-style-data="canvasStyleData"
            :dv-info="dvInfo"
            :canvas-view-info="canvasViewInfo"
            :view-info="canvasViewInfo[item.id]"
            :config="item"
            class="wrapper-design"
            show-position="viewDialog"
            :search-count="0"
            :scale="canvasStyleData.scale"
          />
        </div>
        <div class="select-to-dashboard" @click="addToDashboard(item)">
          <el-tooltip effect="dark" :content="$t('visualization.cancel_hidden')" placement="bottom">
            <el-icon style="font-size: 16px">
              <Icon name="dvHidden"><dvHidden class="svg-icon" /></Icon>
            </el-icon>
          </el-tooltip>
        </div>
      </div>
    </template>
    <template v-else>
      <empty-background
        :description="$t('visualization.no_hidden_components')"
        img-type="noneWhite"
      />
    </template>
  </div>
</template>

<style scoped lang="less">
.config-hidden {
  position: relative;
  padding: 16px 0;
  .wrapper-inner-adaptor {
    position: relative;
    margin-left: 8px;
    margin-bottom: 8px;
    float: left;
    background: #fff;
    padding: 4px;
    border-radius: 6px;
    border: 1px solid #dee0e3;
    &:nth-child(2n) {
      margin-right: -1px;
    }

    .select-to-dashboard {
      position: absolute;
      width: 16px;
      height: 16px;
      top: 4px;
      right: 8px;
      z-index: 24;
      cursor: pointer;
      &:hover {
        color: var(--ed-color-primary-99, #3370ff99);
      }
    }

    .component-outer {
      position: relative;
      width: 100%;
      height: 100%;
      .wrapper-design {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }

    &:hover {
      border-color: var(--ed-color-primary-99, #3370ff99);
    }
  }
}
</style>