<template>
  <el-drawer
    direction="btt"
    size="90%"
    v-model="dialogShow"
    trigger="click"
    :title="t('visualization.multiplexing')"
    modal-class="custom-drawer"
    @closed="handleClose()"
  >
    <!-- 标识当前在复用页，用于作为轮播提示前缀 -->
    <div v-if="dialogShow" id="multiplexingDrawer" />
    <dashboard-preview-show
      v-if="dialogShow && curDvType === 'dashboard'"
      ref="multiplexingPreviewShowRef"
      class="multiplexing-area"
      no-close
      show-position="multiplexing"
      resource-table="snapshot"
    ></dashboard-preview-show>
    <preview-show
      v-if="dialogShow && curDvType === 'dataV'"
      ref="multiplexingPreviewShowRef"
      class="multiplexing-area"
      no-close
      show-position="multiplexing"
      resource-table="snapshot"
    ></preview-show>
    <template #footer>
      <el-row class="multiplexing-footer">
        <el-col class="adapt-count">
          <span>{{ t('visualization.multi_selected', [selectComponentCount]) }} </span>
        </el-col>
        <el-col class="adapt-select">
          <span class="adapt-text">{{ t('visualization.component_style') }} ： </span>
          <el-select
            style="width: 120px"
            v-model="multiplexingStyleAdapt"
            placeholder="Select"
            placement="top-start"
          >
            <el-option
              v-for="item in state.copyOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-button class="close-button" @click="dialogShow = false">{{
          t('visualization.close')
        }}</el-button>
        <el-button
          type="primary"
          :disabled="!selectComponentCount"
          class="confirm-button"
          @click="saveMultiplexing"
          >{{ t('visualization.multiplexing') }}</el-button
        >
      </el-row>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { computed, reactive, ref, nextTick } from 'vue'
import DashboardPreviewShow from '@/views/dashboard/DashboardPreviewShow.vue'
import { copyStoreWithOut } from '@/store/modules/data-visualization/copy'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import PreviewShow from '@/views/data-visualization/PreviewShow.vue'
import { useI18n } from '@/hooks/web/useI18n'
import ChartCarouselTooltip from '@/views/chart/components/js/g2plot_tooltip_carousel'
const dvMainStore = dvMainStoreWithOut()
const snapshotStore = snapshotStoreWithOut()
const dialogShow = ref(false)
const copyStore = copyStoreWithOut()
const multiplexingPreviewShowRef = ref(null)
const { multiplexingStyleAdapt, curMultiplexingComponents } = storeToRefs(dvMainStore)
const curDvType = ref('dashboard')
const { t } = useI18n()
const selectComponentCount = computed(() => Object.keys(curMultiplexingComponents.value).length)
const state = reactive({
  copyOptions: [
    { label: t('visualization.adapt_new_subject'), value: true },
    { label: t('visualization.keep_subject'), value: false }
  ]
})
const dialogInit = (dvType = 'dashboard') => {
  ChartCarouselTooltip.paused()
  curDvType.value = dvType
  dialogShow.value = true
  dvMainStore.initCurMultiplexingComponents()
}

const saveMultiplexing = () => {
  dialogShow.value = false
  const previewStateInfo = multiplexingPreviewShowRef.value.getPreviewStateInfo()
  const canvasViewInfoPreview = previewStateInfo.canvasViewInfoPreview
  nextTick(() => {
    copyStore.copyMultiplexingComponents(
      canvasViewInfoPreview,
      undefined,
      undefined,
      undefined,
      previewStateInfo.canvasStylePreview.scale
    )
    snapshotStore.recordSnapshotCache('saveMultiplexing')
  })
}
const handleClose = () => {
  ChartCarouselTooltip.closeEnlargeDialogDestroy()
}
defineExpose({
  dialogInit
})
</script>

<style lang="less" scoped>
.close-button {
  position: absolute;
  top: 18px;
  right: 120px;
}
.confirm-button {
  position: absolute;
  top: 18px;
  right: 20px;
}
.multiplexing-area {
  width: 100%;
  height: 100%;
}
.multiplexing-footer {
  position: relative;
}

.adapt-count {
  position: absolute;
  top: 18px;
  left: 20px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.adapt-select {
  position: absolute;
  top: 18px;
  right: 220px;
}
.adapt-text {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
}
</style>

<style lang="less">
.custom-drawer {
  .ed-drawer__footer {
    height: 64px !important;
    padding: 0px !important;
    box-shadow: 0 -1px 0px #3a3a3a;
  }

  .ed-drawer__body {
    padding: 0 0 64px 0 !important;
  }
}
.ed-select-dropdown__item{
  color: #ffffff;
}
.ed-select-dropdown__item.hover, .ed-select-dropdown__item:hover{
  background: rgb(61,61,61);
}
.ed-drawer__header{
  color: #fff;
  border-bottom: 1px solid #3a3a3a
}
.ed-drawer__close-btn:hover{
  background:rgb(61,61,61)
}
</style>
