<template>
  <Dialog v-model="visible" :diaTitle="$t('工况库.删除库')" :height="800" @show="onShowFun">
    <template #default>
      <div v-if="poolList.length > 0">
        <div v-for="item in poolList" :key="item.id" class="pool-item">
          <div class="name">{{ item.poolName }}</div>
          <div class="btn">
            <el-popconfirm
              :title="$t('知识库.确认删除')"
              :cancelButtonText="$t('通用.取消')"
              :confirmButtonText="$t('通用.确定')"
              @confirm="onDelPoolFun(item)"
            >
              <template #reference>
                <el-link type="danger">{{ $t('工况库.删除') }}</el-link>
              </template>
            </el-popconfirm>
          </div>
        </div>
      </div>
      <el-empty v-else />
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { computed, ref, type Ref } from 'vue';
import Dialog from '@/components/common/dialog/index.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),
});
const onShowFun = () => {
  queryListFun();
};
const poolList: Ref<Pool[]> = ref([]);
const queryListFun = async () => {
  const res: any = await getAllTaskPoolApi();
  if (res.code === 200 && Array.isArray(res.data)) {
    poolList.value = res.data.reverse();
  } else {
    poolList.value = [];
  }
};
const onDelPoolFun = async (pool: Pool) => {
  const req = {
    poolName: pool.poolName,
  };
  const res: any = await cleanTaskPoolApi(req);
  if (res.code === 200) {
    ElMessage.success(res.message);
    queryListFun();
    emits('confirm');
  } else {
    ElMessage.error(res.message);
  }
};
</script>
<style scoped lang="scss">
.pool-item {
  width: 100%;
  height: 50px;
  margin-bottom: 8px;
  display: flex;
  padding: 0 15px;
  line-height: 50px;
  border-radius: 5px;
  justify-content: space-between;
  align-items: center;
}

.name {
  flex: 1;
}

.btn {
  width: 50px;
}

</style>
