<template>
  <Dialog v-model="visible" :diaTitle="$t('工况库.删除库')" :width="500" :height="600">
    <template #default>
      <div v-loading="queryLoading" class="pool-wrapper">
        <div class="pool-list">
          <template v-if="poolList.length > 0">
            <div v-for="item in poolList" :key="item.id" class="pool-item">
              <div class="pool-header">
                <OverflowTooltip :content="item.poolName" class="name" />
                <el-popconfirm
                  :title="$t('知识库.确认删除')"
                  :cancelButtonText="$t('通用.取消')"
                  :confirmButtonText="$t('通用.确定')"
                  popperClass="super-z-index"
                  @confirm="onDelPoolFun(item)"
                >
                  <template #reference>
                    <el-button type="danger" link :loading="delLoadingKey === `pool-${item.id}`">
                      {{ $t('工况库.删除') }}
                    </el-button>
                  </template>
                </el-popconfirm>
              </div>
              <div v-if="item.versions?.length" class="version-list">
                <el-tag v-for="ver in item.versions" :key="ver" :disable-transitions="false">
                  {{ ver }}
                  <el-popconfirm
                    :title="$t('知识库.确认删除')"
                    :cancelButtonText="$t('通用.取消')"
                    :confirmButtonText="$t('通用.确定')"
                    popperClass="super-z-index"
                    @confirm="onDelVersionFun(item, ver)"
                  >
                    <template #reference>
                      <el-icon class="tag-close"><Close /></el-icon>
                    </template>
                  </el-popconfirm>
                </el-tag>
              </div>
            </div>
          </template>
          <el-empty v-else-if="!queryLoading" />
        </div>
      </div>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { computed, ref, watch, type Ref } from 'vue';
import { Close } from '@element-plus/icons-vue';
import Dialog from '@/components/common/dialog/index.vue';
import OverflowTooltip from '@/components/common/text/overflowTooltip.vue';
import { getAllTaskPoolApi, cleanTaskPoolApi } from '@/api/task/taskpool';
import { ElMessage } from 'element-plus';
import type { Pool } from './types.ts';

interface Props {
  modelValue: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
});

const emits = defineEmits(['update:modelValue', 'confirm']);

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emits('update:modelValue', val),
});
watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      poolList.value = [];
      queryListFun();
    }
  }
);
const poolList: Ref<Pool[]> = ref([]);
const queryLoading = ref(false);
const delLoadingKey = ref<string>();
const queryListFun = async () => {
  queryLoading.value = true;
  try {
    const req = { bCurrent: false };
    const res: any = await getAllTaskPoolApi(req);
    if (res.code === 200 && Array.isArray(res.data)) {
      poolList.value = res.data.reverse();
    } else {
      poolList.value = [];
    }
  } catch {
    poolList.value = [];
  } finally {
    queryLoading.value = false;
  }
};
const onDelPoolFun = async (pool: Pool) => {
  const req = {
    poolName: pool.poolName,
  };
  delLoadingKey.value = `pool-${pool.id}`;
  try {
    const res: any = await cleanTaskPoolApi(req);
    if (res.code === 200) {
      ElMessage.success(res.message);
      queryListFun();
      emits('confirm');
    }
  } finally {
    delLoadingKey.value = undefined;
  }
};
const onDelVersionFun = async (pool: Pool, version: string) => {
  const req = {
    poolName: pool.poolName,
    version,
  };
  delLoadingKey.value = `ver-${pool.id}-${version}`;
  try {
    const res: any = await cleanTaskPoolApi(req);
    if (res.code === 200) {
      ElMessage.success(res.message);
      queryListFun();
      emits('confirm');
    }
  } finally {
    delLoadingKey.value = undefined;
  }
};
</script>
<style scoped lang="scss">
.pool-wrapper {
  height: 100%;
}
.pool-list {
  height: 100%;
  overflow-y: auto;
}
.pool-item {
  margin-bottom: 12px;
  padding: 10px 15px;
  border-radius: 5px;
  background: var(--el-fill-color-light);
}
.pool-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.name {
  flex: 1;
  min-width: 0;
  margin-right: 12px;
  font-weight: 500;
}
.version-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-close {
  margin-left: 4px;
  cursor: pointer;
  vertical-align: middle;
  &:hover {
    color: var(--el-color-danger);
  }
}
</style>
<style lang="scss">
.super-z-index {
  z-index: 9999;
}
</style>
