<template>
  <div class="category">
    <div class="category-title">
      <span>类目管理</span>
      <el-icon v-if="!props.view" class="pointer" @click="openDialog">
        <CirclePlus />
      </el-icon>
    </div>
    <!--loading-->
    <div
      v-if="loading"
      v-loading="loading"
      class="loading-page"
      element-loading-text="正在加载..."
      style="width: 100%; height: calc(100vh - 250px)"
    ></div>
    <div class="empty"  v-else-if="!categoryData.length && !loading">
      <el-empty description="请先添加类目数据">
        <template #image>
          <lz-svg-icon icon-class="empty2" style="font-size: 102px;" />
        </template>
      </el-empty>
    </div>
    <ul class="category-list" v-else>
      <li
        v-for="(item, i) in categoryData"
        :key="i"
        :class="{ active: active === item.id }"
        class="category-list-item"
        @click="handleChangeActive(item)"
        @mouseenter="hoverId = item.id"
        @mouseleave="hoverId = null"
      >
        <span class="ellipsis">{{ item.name }}</span>
        <el-space v-if="!props.view && item.categoryType !== '01' && hoverId === item.id">
          <lz-svg-icon icon-class="bianji" class="pointer el-icon" @click.stop="editCategory(item)" />
          <lz-svg-icon icon-class="shanchu" class="pointer el-icon" @click.stop="deleteCategory(item)" />
        </el-space>
      </li>
    </ul>
  </div>
  <DialogForm
    ref="dialogFormRef"
    :title="dialogTitle"
    move-label="目标类目"
    type="category"
    @submit-handle="submitHandle"
  />
</template>
<script lang="ts" setup>
import DialogForm from '@/views/knowledge/components/DialogForm.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { computed, defineEmits, onMounted, ref } from 'vue'
import api from '@/servers/finyx/api/index'
import useStore from '@/stores'

const { knowledge } = useStore()

const hoverId: any = ref('')

const props = withDefaults(defineProps<{ view?: boolean }>(), {
  view: false
})
const emit = defineEmits(['changeActive'])

const loading = ref<boolean>(false)

const categoryData = ref<any>([])

const getCategoryList = async () => {
  try {
    loading.value = true
    categoryData.value = await api.leimu.list({})
    if ((categoryData.value || []).length > 0 && !active.value) {
      knowledge.setCategory(categoryData.value[0])
      emit('changeActive', categoryData.value[0])
    } else {
      emit('changeActive', { id: knowledge.category, name: knowledge.categoryName })
    }
  } catch (e: any) {
    ElMessage.error('获取类目列表失败')
  } finally {
    loading.value = false
  }
}
onMounted(getCategoryList)

const handleChangeActive = (item: any) => {
  knowledge.setCategory(item)
  emit('changeActive', item)
}

const dialogFormRef = ref<any>(null)
const dialogTitle = ref<string>('')

const editCategory = (item: any) => {
  dialogTitle.value = '编辑类目'
  dialogFormRef.value.open(item)
}
const deleteCategory = async (item: any) => {
  const confirm = await ElMessageBox.confirm('标签删除后，该类目下所有文件将同步删除且不可恢复，确定删除？', {
    title: '确认删除类目',
    type: 'warning'
  })
  if (confirm) {
    try {
      await api.leimu.delete11([item.id])
      ElMessage.success('删除类目成功！')
      await getCategoryList()
    } catch (e: any) {
      ElMessage.success('删除类目失败！')
    }
  }
}

const openDialog = () => {
  dialogTitle.value = '新建类目'
  dialogFormRef.value.open()
}
const closeDialog = () => {
  dialogFormRef.value.close()
}

const submitHandle = async (data: any) => {
  try {
    if (data?.id) {
      await api.leimu.update11(data)
    } else {
      await api.leimu.save11({ ...data, categoryType: '02' })
    }
    ElMessage.success('操作成功！')
    await getCategoryList()
    closeDialog()
  } catch (e: any) {
    if (e?.response?.data.errorMsg) {
      ElMessage.error(e?.response?.data.errorMsg)
      return
    }
    ElMessage.error('操作失败！')
  }
}

const active = computed(() => knowledge?.category)
</script>
<style lang="scss" scoped>
.category {
  width: 15%;
  padding: 12px 10px;
  background: #f6f6f6;
  border-radius: 4px;
  position: relative;
  box-sizing: border-box;

  .category-title {
    font-weight: 500;
    font-size: 14px;
    color: #191919;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;

    .el-icon {
      color: #3067ef;
    }
  }

  .category-list {
    overflow-y: auto;
    height: calc(100% - 20px);

    &-item {
      cursor: pointer;
      padding: 4px 10px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 3px;

      &:hover {
        background: #e2e8f5;
        color: #3067ef;
        .el-icon {
          color: #333333;
        }
      }
    }

    .active {
      color: #3067ef;
      background: #e2e8f5;
      .el-icon {
        color: #333333;
      }
    }
  }
}
</style>
