<template>
  <div
    class="bar-main"
    v-if="!mobileInPc && !isMobile()"
    :class="[
      showEditPosition,
      {
        'bar-main-background': mainBackgroundShow
      }
    ]"
    @mousedown="fieldsAreaDown"
  >
    <el-tooltip
      effect="dark"
      placement="top"
      :content="t('visualization.sort')"
      v-if="element.component === 'DeTabs' && showPosition === 'canvas'"
    >
      <el-icon class="bar-base-icon" @click="tabSort">
        <Sort />
      </el-icon>
    </el-tooltip>
    <template v-if="element.component === 'VQuery' && showPosition === 'canvas'">
      <span :title="t('visualization.add_query_filter')">
        <el-icon class="bar-base-icon" @click="addQueryCriteria">
          <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon
        ></el-icon>
      </span>
      <span :title="t('visualization.edit_query_filter')">
        <el-icon class="bar-base-icon" @click="editQueryCriteria">
          <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon
        ></el-icon>
      </span>
    </template>
    <el-tooltip
      effect="dark"
      placement="top"
      :content="t('visualization.enlarge')"
      v-if="element.innerType !== 'rich-text' && barShowCheck('enlarge')"
    >
      <span>
        <el-icon class="bar-base-icon" @click="userViewEnlargeOpen($event, 'enlarge')">
          <Icon name="dv-bar-enlarge"><dvBarEnlarge class="svg-icon" /></Icon>
        </el-icon>
      </span>
    </el-tooltip>
    <el-tooltip
      effect="dark"
      :placement="showBarTooltipPosition"
      :content="t('visualization.show_data_info')"
      v-if="!['picture-group', 'rich-text'].includes(element.innerType) && barShowCheck('details')"
    >
      <span>
        <el-icon class="bar-base-icon" @click="userViewEnlargeOpen($event, 'details')">
          <Icon name="dv-details"><dvDetails class="svg-icon" /></Icon>
        </el-icon>
      </span>
    </el-tooltip>
    <el-tooltip
      effect="dark"
      placement="top"
      :content="t('visualization.input_calc_data')"
      v-if="barShowCheck('datasetParams') && datasetParamsSetShow"
    >
      <span>
        <el-icon class="bar-base-icon" @click="datasetParamsInit">
          <Icon name="icon_params_setting"><icon_params_setting class="svg-icon" /></Icon>
        </el-icon>
      </span>
    </el-tooltip>

    <div v-if="barShowCheck('multiplexing')" class="bar-checkbox-area">
      <el-checkbox
        @click.stop
        style="height: 26px; padding: 5px"
        v-model="state.multiplexingCheckModel"
        @change="multiplexingCheck"
      />
    </div>
    <span
      :title="t('visualization.cancel_linkage')"
      v-if="barShowCheck('unLinkage') && existLinkage"
    >
      <el-icon class="bar-base-icon" @click="clearLinkage">
        <Icon name="dv-bar-unLinkage"><dvBarUnLinkage class="svg-icon" /></Icon>
      </el-icon>
    </span>
    <div v-if="barShowCheck('batchOpt')" class="bar-checkbox-area">
      <el-checkbox v-model="state.batchOptCheckModel" @change="batchOptChange" />
    </div>

    <el-dropdown
      trigger="click"
      placement="right-start"
      v-if="barShowCheck('setting')"
      ref="curDropdown"
    >
      <el-icon class="bar-base-icon">
        <el-tooltip :content="t('visualization.more')" effect="dark" placement="bottom">
          <icon name="icon_more_outlined"><icon_more_outlined class="svg-icon" /></icon>
        </el-tooltip>
      </el-icon>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="copyComponent" v-if="barShowCheck('copy')">{{
            t('visualization.copy')
          }}</el-dropdown-item>
          <template v-if="element.innerType !== 'rich-text' && barShowCheck('enlarge')">
            <el-dropdown-item
              :divided="showPosition === 'canvas'"
              @click="userViewEnlargeOpen($event, 'enlarge')"
              >{{ t('visualization.enlarge') }}</el-dropdown-item
            >
            <el-dropdown-item
              @click="userViewEnlargeOpen($event, 'details')"
              v-if="
                !['picture-group', 'rich-text'].includes(element.innerType) &&
                barShowCheck('details')
              "
              >{{ t('visualization.show_data_info') }}</el-dropdown-item
            >
            <el-dropdown-item
              style="padding: 0"
              v-if="
                !['picture-group', 'rich-text'].includes(element.innerType) &&
                barShowCheck('download') &&
                showDownload &&
                (exportPermissions[0] || exportPermissions[1])
              "
              @click.prevent
            >
              <el-dropdown style="width: 100%" trigger="hover" placement="right-start">
                <div
                  class="flex-align-center"
                  style="
                    position: relative;
                    width: 100%;
                    padding: 5px 32px 5px 16px;
                    line-height: 24px;
                  "
                >
                  {{ t('visualization.export_as') }}
                  <el-icon size="16px" style="position: absolute; right: 8px; margin-right: 0"
                    ><ArrowRight
                  /></el-icon>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item v-if="exportPermissions[1]" @click="exportAsExcel"
                      >Excel</el-dropdown-item
                    >
                    <el-dropdown-item
                      v-if="exportPermissions[1] && element.innerType === 'table-pivot'"
                      @click="exportAsFormattedExcel"
                    >
                      <span>{{ t('visualization.excel_with_format') }}</span>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="exportPermissions[0]" @click="exportAsImage">{{
                      t('visualization.image')
                    }}</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-dropdown-item>
          </template>
          <el-dropdown-item
            @click="hiddenComponent"
            v-if="barShowCheck('hidden') && isMainCanvas(canvasId)"
            >{{ t('visualization.hidden') }}</el-dropdown-item
          >

          <xpack-component
            :chart="element"
            resource-table="snapshot"
            jsname="L2NvbXBvbmVudC90aHJlc2hvbGQtd2FybmluZy9FZGl0QmFySGFuZGxlcg=="
            @close-item="closeItem"
          />
          <el-dropdown-item divided @click="deleteComponent" v-if="barShowCheck('delete')">{{
            t('visualization.delete')
          }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown
      trigger="click"
      placement="right-start"
      v-if="
        !['picture-group', 'rich-text'].includes(element.innerType) &&
        barShowCheck('previewDownload') &&
        showDownload &&
        (exportPermissions[0] || exportPermissions[1])
      "
    >
      <el-icon @click="downloadClick" class="bar-base-icon">
        <el-tooltip :content="t('chart.export')" effect="dark" placement="bottom">
          <icon name="dv-preview-download"><dvPreviewDownload class="svg-icon" /></icon>
        </el-tooltip>
      </el-icon>
      <template #dropdown>
        <el-dropdown-menu style="width: 118px">
          <el-dropdown-item @click="exportAsExcel" v-if="exportPermissions[1]"
            >Excel</el-dropdown-item
          >
          <el-dropdown-item
            v-if="exportPermissions[1] && element.innerType === 'table-pivot'"
            @click="exportAsFormattedExcel"
          >
            <span>{{ t('visualization.excel_with_format') }}</span>
          </el-dropdown-item>
          <el-dropdown-item v-if="exportPermissions[0]" @click="exportAsImage">{{
            t('visualization.image')
          }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-popover v-if="selectFieldShow" width="200" trigger="click" @mousedown="fieldsAreaDown">
      <template #reference>
        <el-icon class="bar-base-icon">
          <Icon name="database"><database class="svg-icon" /></Icon
        ></el-icon>
      </template>
      <fields-list :fields="state.curFields" :element="element" />
    </el-popover>
    <custom-tabs-sort ref="customTabsSortRef"></custom-tabs-sort>
  </div>
</template>

<script lang="ts" setup>
import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
import dvBarEnlarge from '@/assets/svg/dv-bar-enlarge.svg'
import dvDetails from '@/assets/svg/dv-details.svg'
import icon_params_setting from '@/assets/svg/icon_params_setting.svg'
import dvBarUnLinkage from '@/assets/svg/dv-bar-unLinkage.svg'
import database from '@/assets/svg/database.svg'
import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
import dvPreviewDownload from '@/assets/svg/icon_download_outlined.svg'
import { computed, h, onBeforeUnmount, onMounted, reactive, ref, toRefs, watch } from 'vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
import { useI18n } from '@/hooks/web/useI18n'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import eventBus from '@/utils/eventBus'
import { useEmitt } from '@/hooks/web/useEmitt'
import { copyStoreWithOut } from '@/store/modules/data-visualization/copy'
import { exportExcelDownload } from '@/views/chart/components/js/util'
import FieldsList from '@/custom-component/rich-text/FieldsList.vue'
import { RefreshLeft } from '@element-plus/icons-vue'
import { ElMessage, ElTooltip, ElButton } from 'element-plus-secondary'
import CustomTabsSort from '@/custom-component/de-tabs/CustomTabsSort.vue'
import { exportPivotExcel } from '@/views/chart/components/js/panel/common/common_table'
import { XpackComponent } from '@/components/plugin'
import { exportPermission, isMobile } from '@/utils/utils'
import { isMainCanvas } from '@/utils/canvasUtils'
const dvMainStore = dvMainStoreWithOut()
const snapshotStore = snapshotStoreWithOut()
const copyStore = copyStoreWithOut()
const customTabsSortRef = ref(null)
const exportPermissions = computed(() =>
  exportPermission(dvInfo.value['weight'], dvInfo.value['ext'])
)
const emits = defineEmits([
  'userViewEnlargeOpen',
  'datasetParamsInit',
  'closePreview',
  'showViewDetails',
  'amRemoveItem',
  'linkJumpSetOpen',
  'linkageSetOpen',
  'componentImageDownload'
])
const { t } = useI18n()
const { emitter } = useEmitt()
// bar所在位置可以显示的功能按钮
const positionBarShow = {
  canvas: [
    'datasetParams',
    'enlarge',
    'hidden',
    'details',
    'setting',
    'copy',
    'delete',
    'download',
    'unLinkage',
    'linkageSetting',
    'linkJumpSetting'
  ],
  preview: ['enlarge', 'details', 'download', 'unLinkage', 'previewDownload', 'datasetParams'],
  multiplexing: ['multiplexing'],
  batchOpt: ['batchOpt'],
  linkage: ['linkage']
}

// bar所属组件类型可以显示的功能按钮
const componentTypeBarShow = {
  UserView: [
    'datasetParams',
    'enlarge',
    'hidden',
    'details',
    'setting',
    'copy',
    'download',
    'previewDownload',
    'delete',
    'multiplexing',
    'batchOpt',
    'linkage',
    'unLinkage',
    'linkageSetting',
    'linkJumpSetting'
  ],
  default: ['setting', 'delete', 'copy', 'multiplexing', 'batchOpt', 'hidden']
}

const barShowCheck = barName => {
  return (
    positionBarShow[showPosition.value] &&
    positionBarShow[showPosition.value].includes(barName) &&
    (componentTypeBarShow[element.value.component]
      ? componentTypeBarShow[element.value.component]
      : componentTypeBarShow['default']
    ).includes(barName)
  )
}

const mainBackgroundShow = computed(() => {
  return !['batchOpt', 'multiplexing'].includes(showPosition.value)
})
const props = defineProps({
  element: {
    type: Object,
    required: true
  },
  active: {
    type: Boolean,
    required: false,
    default: false
  },
  index: {
    required: true,
    type: [Number, String],
    default: 0
  },
  showPosition: {
    required: false,
    type: String,
    default: 'canvas'
  },
  canvasId: {
    type: String,
    default: 'canvas-main'
  }
})

const { element, index, showPosition, canvasId } = toRefs(props)
const {
  batchOptStatus,
  pcMatrixCount,
  curComponent,
  componentData,
  canvasViewInfo,
  mobileInPc,
  dvInfo,
  isPopWindow,
  hiddenListStatus
} = storeToRefs(dvMainStore)

const state = reactive({
  systemOS: 'Mac',
  maxImageSize: 15000000,
  boardSetVisible: false,
  linkJumpSetVisible: false,
  linkJumpSetViewId: null,
  curFields: [],
  multiplexingCheckModel: false,
  // Currently selected Multiplexing components
  curMultiplexingComponents: {},
  barWidth: 24,
  componentType: null,
  linkageActiveStatus: false,
  editFilter: ['view', 'custom', 'custom-button'],
  timer: null,
  viewXArray: [],
  batchOptCheckModel: false
})
const showHiddenIcon = computed(() => hiddenListStatus.value && isMainCanvas(canvasId.value))

const tabSort = () => {
  customTabsSortRef.value.sortInit(element.value)
}

const downloadClick = () => {
  dvMainStore.setCurComponent({ component: element.value, index: index.value })
}

const addQueryCriteria = () => {
  emitter.emit(`addQueryCriteria${element.value.id}`)
}

const editQueryCriteria = () => {
  emitter.emit(`editQueryCriteria${element.value.id}`)
}

const showEditPosition = computed(() => {
  if (showPosition.value === 'canvas') {
    const baseLeft = element.value.x - 1
    const baseRight = pcMatrixCount.value.x - (element.value.x + element.value.sizeX - 1)
    if ((baseLeft === 0 && baseRight === 0) || baseRight < 0) {
      if (showHiddenIcon.value) {
        return 'bar-main-left-inner'
      } else {
        return 'bar-main-right-inner'
      }
    } else if (baseRight === 0) {
      return 'bar-main-left-outer'
    } else {
      return 'bar-main-right'
    }
  } else if (showPosition.value === 'preview') {
    return 'bar-main-right-inner'
  } else if (showPosition.value === 'canvasDataV') {
    return 'bar-main-right'
  } else {
    return 'bar-main-preview-right-inner'
  }
})

const showBarTooltipPosition = computed(() => {
  if (showEditPosition.value.indexOf('right') >= 0) {
    return 'right'
  } else {
    return 'left'
  }
})

const openMessageLoading = cb => {
  const iconClass = `el-icon-loading`
  const customClass = `de-message-loading de-message-export`
  ElMessage({
    message: h('p', null, [
      '后台导出中,可前往',
      h(
        ElButton,
        {
          text: true,
          size: 'small',
          class: 'btn-text',
          onClick: () => {
            cb()
          }
        },
        t('data_export.export_center')
      ),
      '查看进度，进行下载'
    ]),
    iconClass,
    icon: h(RefreshLeft),
    showClose: true,
    customClass
  })
}

const callbackExport = () => {
  useEmitt().emitter.emit('data-export-center', { activeName: 'IN_PROGRESS' })
}
const exportAsFormattedExcel = () => {
  const s2Instance = dvMainStore.getViewInstanceInfo(element.value.id)
  if (!s2Instance) {
    return
  }
  const chart = dvMainStore.getViewDetails(element.value.id)
  exportPivotExcel(s2Instance, chart)
}

const exportAsExcel = () => {
  const viewDataInfo = dvMainStore.getViewDataDetails(element.value.id)
  const chartExtRequest = dvMainStore.getLastViewRequestInfo(element.value.id)
  const viewInfo = dvMainStore.getViewDetails(element.value.id)
  const chart = { ...viewInfo, chartExtRequest, data: viewDataInfo, busiFlag: dvInfo.value.type }
  exportExcelDownload(chart, dvInfo.value.name, () => {
    openMessageLoading(callbackExport)
  })
}
const exportAsImage = () => {
  emits('componentImageDownload')
}
const deleteComponent = () => {
  eventBus.emit('removeMatrixItem-' + canvasId.value, index.value)
  dvMainStore.setCurComponent({ component: null, index: null })
  snapshotStore.recordSnapshotCache('deleteComponent')
}

const datasetParamsInit = () => {
  // do init
  emits('datasetParamsInit')
}

const copyComponent = () => {
  copyStore.copy()
  copyStore.paste(false)
}

const userViewEnlargeOpen = (e, opt) => {
  e.preventDefault()
  e.stopPropagation()
  emits('userViewEnlargeOpen', opt)
}

const hiddenComponent = () => {
  if (curComponent.value) {
    curComponent.value.dashboardHidden = true
    eventBus.emit('removeMatrixItemPosition-' + canvasId.value, curComponent.value)
    dvMainStore.setHiddenListStatus(true)
    snapshotStore.recordSnapshotCache('hide')
    dvMainStore.setLastHiddenComponent(curComponent.value.id)
  }
}

// 复用-Begin

const multiplexingCheckOut = () => {
  state.multiplexingCheckModel = !state.multiplexingCheckModel
  multiplexingCheck(state.multiplexingCheckModel)
}

const multiplexingCheck = val => {
  if (val) {
    // push
    dvMainStore.addCurMultiplexingComponent({
      component: element.value,
      componentId: element.value.id
    })
  } else {
    // remove
    dvMainStore.removeCurMultiplexingComponentWithId(element.value.id)
  }
}
// 复用-End

// 批量操作-Begin

const batchOptCheckOut = () => {
  if (showPosition.value === 'batchOpt') {
    state.batchOptCheckModel = !state.batchOptCheckModel
    batchOptChange(state.batchOptCheckModel)
  }
}

const batchOptChange = val => {
  if (val) {
    // push
    dvMainStore.addCurBatchComponent(element.value)
  } else {
    // remove
    dvMainStore.removeCurBatchComponentWithId(element.value.id)
  }
}
// 批量操作-End

const linkageChange = item => {
  let checkResult = false
  if (item.linkageFilters && item.linkageFilters.length > 0) {
    item.linkageFilters.forEach(linkage => {
      if (element.value.id === linkage.sourceViewId) {
        checkResult = true
      }
    })
  }
  return checkResult
}

const existLinkage = computed(() => {
  let linkageFiltersCount = 0
  componentData.value.forEach(item => {
    if (item.component === 'UserView' && item.innerType != 'VQuery') {
      if (linkageChange(item)) {
        linkageFiltersCount++
      }
    } else if (item.component === 'Group') {
      item.propValue.forEach(groupItem => {
        if (linkageChange(groupItem)) {
          linkageFiltersCount++
        }
      })
    } else if (item.component === 'DeTabs') {
      item.propValue.forEach(tabItem => {
        tabItem.componentData.forEach(tabComponent => {
          if (linkageChange(tabComponent)) {
            linkageFiltersCount++
          }
        })
      })
    }
  })
  return linkageFiltersCount
})

// 清除相同sourceViewId 的 联动条件
const clearLinkage = () => {
  dvMainStore.clearViewLinkage(element.value.id)
  useEmitt().emitter.emit('clearPanelLinkage', { viewId: element.value.id })
}

// 富文本-Begin

const fieldsAreaDown = e => {
  // ignore
  e.stopPropagation()
  e.preventDefault()
}

const selectFieldShow = computed(() => {
  return (
    ['canvasDataV', 'canvas'].includes(showPosition.value) &&
    curComponent.value?.innerType === 'rich-text' &&
    curComponent.value.editing &&
    state.curFields.length > 0
  )
})

const initCurFields = () => {
  if (element.value.component === 'UserView') {
    const chartInfo = canvasViewInfo.value[element.value.id]
    if (chartInfo) {
      state.curFields = []
      if (chartInfo.type === 'rich-text' && chartInfo.curFields) {
        state.curFields = chartInfo.curFields
      }
    }
  }
}

const showDownload = computed(
  () => canvasViewInfo.value[element.value.id]?.dataFrom !== 'template' && !isPopWindow.value
)
// 富文本-End

const datasetParamsSetShow = computed(() => {
  return canvasViewInfo.value[element.value.id]?.calParams?.length > 0
})

const curDropdown = ref()
const closeItem = () => {
  curDropdown.value.handleClose()
}

onMounted(() => {
  if (element.value.component === 'UserView') {
    eventBus.on('initCurFields-' + element.value.id, initCurFields)
  }
  initCurFields()
})

onBeforeUnmount(() => {
  if (element.value.component === 'UserView') {
    eventBus.off('initCurFields-' + element.value.id, initCurFields)
  }
})

defineExpose({
  multiplexingCheckOut,
  batchOptCheckOut
})

watch(
  () => batchOptStatus.value,
  () => {
    state.batchOptCheckModel = false
  }
)
</script>

<style lang="less" scoped>
.bar-main {
  position: absolute;
  float: right;
  z-index: 10;
  border-radius: 2px;
  cursor: pointer !important;
  font-size: 16px !important;
}
.bar-main-background {
  background-color: var(--ed-color-primary, #3370ff);
}

.bar-main-right {
  width: 24px;
  right: -26px;
}

.bar-main-preview-right-inner {
  right: 0px;
}

.bar-main-right-inner {
  width: 24px;
  right: 0px;
}

.bar-main-left-inner {
  width: 24px;
  left: 0px;
}

.bar-main-left-outer {
  width: 24px;
  left: -26px;
}

.bar-base-icon {
  height: 24px;
  width: 24px;
  font-size: 16px;
  color: #ffffff;
  &:hover {
    color: rgba(255, 255, 255, 0.5);
  }
  &:active {
    color: rgba(255, 255, 255, 0.7);
  }
}

.bar-checkbox-area {
  padding: 0 5px;
  height: 24px;
}
</style>
