<template>
  <el-dialog
    ref="enlargeDialog"
    destroy-on-close
    :append-to-body="true"
    :title="t('visualization.custom_sort')"
    v-model="dialogShow"
    width="30vw"
    top="10vh"
  >
    <div>
      <draggable :list="sortList" animation="300" class="drag-list">
        <template #item="{ element }">
          <span :key="element.name" class="item-dimension" :title="element.title">
            <el-icon size="20px">
              <Icon name="drag"><drag class="svg-icon" /></Icon>
            </el-icon>
            <span class="item-span">
              {{ element.title }}
            </span>
          </span>
        </template>
      </draggable>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="save">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import drag from '@/assets/svg/drag.svg'
import draggable from 'vuedraggable'
import { ref } from 'vue'
import { deepCopy } from '@/utils/utils'
import { ElButton } from 'element-plus-secondary'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import eventBus from '@/utils/eventBus'
const snapshotStore = snapshotStoreWithOut()

const config = ref(null)

const sortList = ref([])
const dialogShow = ref(false)
const sortInit = component => {
  init(component)
  dialogShow.value = true
}
const init = component => {
  config.value = component
  sortList.value = deepCopy(config.value.propValue)
}

const closeDialog = () => {
  dialogShow.value = false
}
const save = () => {
  config.value.propValue = deepCopy(sortList.value)
  snapshotStore.recordSnapshotCache('tab-sort-save')
  eventBus.emit('onTabSortChange-' + config.value.id)
  closeDialog()
}
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()

defineExpose({
  sortInit
})
</script>

<style scoped lang="less">
.drag-list {
  overflow: auto;
  height: 50vh;
}

.item-dimension {
  padding: 2px;
  margin: 2px;
  border: solid 1px #5f5f5f;
  text-align: left;
  color: #fff;
  background-color: rgba(35,46,64,.05);
  // background-color: white;
  display: flex;
  align-items: center;
}

.item-icon {
  cursor: move;
  margin: 0 2px;
}

.item-span {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.blackTheme .item-dimension {
  border: solid 1px;
  border-color: var(--TableBorderColor);
  color: var(--TextPrimary);
  background-color: var(--MainBG);
}

.item-dimension + .item-dimension {
  margin-top: 6px;
}

.item-dimension:hover {
  color: #0089ff;
  background: rgb(61,61,61);
  border-color: #0089ff;
  cursor: pointer;
}

.blackTheme .item-dimension:hover {
  color: var(--Main);
  background: var(--ContentBG);
  cursor: pointer;
}
</style>
