<template>
  <div
    v-if="existLinkage && (!dvMainStore.mobileInPc || isMobile())"
    class="bar-main-right"
    :class="{
      'bar-main-preview-fixed': dvPreviewMode,
      'bar-main-preview-fixed-fullscreen': fullscreenFlag
    }"
    @mousedown="handOptBarMousedown"
  >
    <el-button type="warning" @click="clearAllLinkage"
      ><el-icon class="bar-base-icon">
        <Icon name="dv-bar-unLinkage"><dvBarUnLinkage class="svg-icon" /></Icon></el-icon
      >{{ $t('visualization.remove_all_linkage') }}</el-button
    >
  </div>
</template>

<script lang="ts" setup>
import dvBarUnLinkage from '@/assets/svg/dv-bar-unLinkage.svg'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { computed } from 'vue'
import { isMainCanvas } from '@/utils/canvasUtils'
import { useEmitt } from '@/hooks/web/useEmitt'
import { isMobile } from '@/utils/utils'
import { storeToRefs } from 'pinia'
const dvMainStore = dvMainStoreWithOut()
const { fullscreenFlag } = storeToRefs(dvMainStore)

const props = defineProps({
  canvasStyleData: {
    type: Object,
    required: true
  },
  componentData: {
    type: Object,
    required: true
  },
  canvasId: {
    type: String,
    required: false,
    default: 'canvas-main'
  },
  isFixed: {
    type: Boolean,
    default: false
  }
})

const handOptBarMousedown = e => {
  e.preventDefault()
  e.stopPropagation()
}

const clearAllLinkage = () => {
  dvMainStore.clearPanelLinkageInfo()
  useEmitt().emitter.emit('clearPanelLinkage', { viewId: 'all' })
}

const dvPreviewMode = computed(() => {
  return dvMainStore.dvInfo.type === 'dataV' && props.isFixed
})

const existLinkage = computed(() => {
  if (isMainCanvas(props.canvasId)) {
    let linkageFiltersCount = 0
    props.componentData.forEach(item => {
      if (item.component === 'UserView') {
        if (item.linkageFilters && item.linkageFilters.length > 0) {
          linkageFiltersCount++
        }
      } else if (item.component === 'Group') {
        item.propValue.forEach(groupItem => {
          if (groupItem.linkageFilters && groupItem.linkageFilters.length > 0) {
            linkageFiltersCount++
          }
        })
      } else if (item.component === 'DeTabs') {
        item.propValue.forEach(tabItem => {
          tabItem.componentData?.forEach(tabComponent => {
            if (tabComponent.linkageFilters && tabComponent.linkageFilters.length > 0) {
              linkageFiltersCount++
            }
          })
        })
      }
    })
    return linkageFiltersCount
  } else {
    return false
  }
})
</script>

<style lang="less" scoped>
.bar-main-right {
  top: 2px;
  right: 2px;
  opacity: 0.8;
  z-index: 2;
  position: absolute;
}

.bar-main-edit-right {
  top: 8px;
  right: 102px !important;
}

.bar-main-left {
  left: 0px;
  opacity: 0;
  height: fit-content;
  &:hover {
    opacity: 0.8;
  }
}

.bar-main-preview-fixed {
  position: fixed;
  top: 120px;
  right: 5px;
}

.bar-main-preview-fixed-fullscreen {
  top: 5px !important;
}
</style>