<script lang="ts" setup>
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import { guid } from '@/views/visualized/data/dataset/form/util.js'
import { useI18n } from '@/hooks/web/useI18n'
import { ElMessage } from 'element-plus-secondary'
import { ref, shallowRef, computed } from 'vue'
import { cloneDeep } from 'lodash-es'

const dialogVisible = ref(false)
const treeList = ref([])
const datasetMap = shallowRef([])
const emits = defineEmits(['saveTree'])
const { t } = useI18n()
const addCascadeItem = () => {
  treeList.value.push({
    field: {
      id: ''
    },
    id: guid()
  })
}
const handleBeforeClose = () => {
  dialogVisible.value = false
}
const init = (arr, treeArr) => {
  datasetMap.value = cloneDeep(arr)
  treeList.value = cloneDeep(treeArr).map(ele => ({ field: ele, id: ele.id }))
  dialogVisible.value = true
}

const disableFieldArr = computed(() => {
  return treeList.value.map(ele => ele.field).map(ele => ele.id)
})

const cancelClick = () => {
  handleBeforeClose()
}
const setCascadeArrBack = () => {
  let isError = false
  const arr = cloneDeep(treeList.value).map(item => {
    if (!item.field?.id) {
      isError = true
    }
    return item.field
  })

  return {
    arr,
    isError
  }
}
const confirmClick = () => {
  const { isError, arr } = setCascadeArrBack()
  if (isError) {
    ElMessage.error(t('v_query.select_a_field'))
    return
  }
  emits('saveTree', arr)
  handleBeforeClose()
}
const indexNumCascade = [
  t('visualization.number1'),
  t('visualization.number2'),
  t('visualization.number3'),
  t('visualization.number4'),
  t('visualization.number5')
]

const deleteCascade = idx => {
  treeList.value.splice(idx, 1)
}

defineExpose({
  init
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    width="600"
    modal-class="tree-field_dialog"
    :before-close="handleBeforeClose"
    @mousedown.stop
    @mousedup.stop
    :title="t('v_query.tree_structure_design')"
  >
    <div class="cascade-content">
      <div style="display: flex; align-items: center; justify-content: space-between">
        <el-button :disabled="treeList.length === 5" text @click="addCascadeItem">
          <template #icon>
            <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
          </template>
          {{ t('v_query.add_level') }}
        </el-button>
      </div>
      <div class="cascade-item">
        <div class="label">{{ t('visualization.level') }}</div>
        <div class="item-name">{{ t('v_query.tree_query_field') }}</div>
      </div>
      <div class="cascade-item" v-for="(ele, idx) in treeList" :key="ele.id">
        <div class="label">{{ t('visualization.level') }}{{ indexNumCascade[idx] }}</div>
        <div class="item-name">
          <el-select value-key="id" v-model="ele.field" style="width: 300px">
            <el-option
              :disabled="disableFieldArr.includes(item.id)"
              v-for="item in datasetMap"
              :key="item.id"
              :label="item.name"
              :value="item"
            />
          </el-select>
        </div>
        <el-button @click="deleteCascade(idx)" class="cascade-delete" text>
          <template #icon>
            <Icon name="icon_delete-trash_outlined"
              ><icon_deleteTrash_outlined class="svg-icon"
            /></Icon>
          </template>
        </el-button>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button secondary @click="cancelClick">{{ t('common.cancel') }}</el-button>
        <el-button type="primary" @click="confirmClick"> {{ t('pblink.sure_bt') }} </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="less">
.tree-field_dialog {
  .cascade-content {
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    border: 1px solid #e4e7ed;
    padding: 24px;
    padding-top: 8px;
    margin-top: 8px;

    .cascade-item {
      display: flex;
      align-items: center;
      width: 100%;
      height: 40px;
      .label {
        width: 100px;
      }

      .item-name {
        width: 300px;
      }
    }

    .cascade-delete-block,
    .cascade-delete {
      width: 40px;
      font-size: 20px;
      color: #646a73;
      margin-left: 20px;
    }
  }
}
</style>