<script setup lang="ts">
import { message } from "@/utils/message";
import { ref, onMounted, reactive, markRaw } from "vue";
// import { useRenderIcon } from "@/components/ReIcon/src/hooks";
// import Search from "@iconify-icons/ep/search";
// import AddFill from "@iconify-icons/ri/add-circle-line";
import emptyPic from "@/assets/static/project_empty.png";
import dayjs from "dayjs";
import { PureTable } from "@pureadmin/table";
import { type PaginationProps } from "@pureadmin/table";
import { getAlgorithmList } from "@/api/list";
import { ElMessageBox } from "element-plus";
import { QuestionFilled } from "@element-plus/icons-vue";

defineOptions({
  name: "platformAlgorithm"
});

const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

// const dataLoading = ref(false);
const dataList = ref([]);
const dataStaticList = ref([]);
const loading = ref(true);
const pagination = reactive<PaginationProps>({
  total: 0,
  pageSize: 10,
  currentPage: 1,
  background: false
});
const columns: TableColumnList = [
  // {
  //   label: "项目编号",
  //   prop: "id",
  //   minWidth: 100
  // },
  {
    label: "名称",
    prop: "name",
    minWidth: 150,
    slot: "name"
  },
  {
    label: "方向",
    prop: "industry"
  },
  {
    label: "类型",
    prop: "function"
  },
  {
    label: "版本",
    prop: "version"
  },
  {
    label: "更新时间",
    prop: "updateTime",
    formatter: ({ updateTime }) =>
      dayjs(updateTime).format("YYYY-MM-DD HH:mm:ss")
  },
  {
    label: "操作",
    fixed: "right",
    slot: "operation"
  }
];
// const buttonClass = computed(() => {
//   return [
//     "!h-[20px]",
//     "reset-margin",
//     "!text-gray-500",
//     "dark:!text-white",
//     "dark:hover:!text-primary"
//   ];
// });

function handleDelete(row) {
  // message(`您删除了角色名称为${row.name}的这条数据`, { type: "success" });
  // onSearch();
  console.log(row);
  ElMessageBox.confirm(
    "确定删除这个算法吗，删除后将无法找回，请谨慎操作",
    "确定删除这个算法吗？",
    {
      showClose: false,
      type: "warning",
      icon: markRaw(QuestionFilled),
      customClass: "msg-box-style",
      confirmButtonClass: "btn-custom-confirm",
      cancelButtonClass: "btn-custom-cancel"
    }
  )
    .then(() => {
      dataStaticList.value = dataStaticList.value.filter(function (val) {
        return val.num !== row.num; // 过滤掉前台传过来的id对应的相应数据，并重新返回
      });
      const list = getPagedData(
        dataStaticList.value,
        pagination.currentPage,
        pagination.pageSize
      );
      dataList.value = list.data;
      pagination.total = dataStaticList.value.length;
      message("删除成功", { type: "success" });
    })
    .catch(() => {});
}

function searchValue() {
  dataStaticList.value = dataStaticList.value.filter(function (val) {
    return val.type == algorithmValue.value; // 过滤掉前台传过来的id对应的相应数据，并重新返回
  });
  // dataStaticList.value = dataStaticList.value.filter(function (val) {
  //   return val.industry == typeValue.value; // 过滤掉前台传过来的id对应的相应数据，并重新返回
  // });
  // dataStaticList.value = dataStaticList.value.filter(function (val) {
  //   return val.function == defectValue.value; // 过滤掉前台传过来的id对应的相应数据，并重新返回
  // });
  console.log(dataStaticList.value);
  const list = getPagedData(
    dataStaticList.value,
    pagination.currentPage,
    pagination.pageSize
  );
  dataList.value = list.data;
  pagination.total = dataStaticList.value.length;
}

function handleSizeChange(val: number) {
  console.log(`${val} items per page`);
  onSearch(pagination.currentPage, val);
}

function handleCurrentChange(val: number) {
  console.log(`current page: ${val}`);
  onSearch(val, pagination.pageSize);
}

function handleSelectionChange(val) {
  console.log("handleSelectionChange", val);
}

async function onSearch(page = 1, size = 10) {
  loading.value = true;
  const { data } = await getAlgorithmList();
  console.log(data);
  // productList.value = data.list;
  //   pagination.value = {
  //     ...pagination.value,
  //     total: data.list.length
  //   };
  dataStaticList.value = data.list;
  const list = getPagedData(data.list, page, size);
  console.log(list);
  dataList.value = list.data;
  pagination.total = data.list.length;
  // pagination.pageSize = data.pageSize;
  // pagination.currentPage = data.currentPage;
  setTimeout(() => {
    loading.value = false;
  }, 500);
}
// 生成分页数据函数
const getPagedData = (listData, page = 1, size = 10) => {
  const start = (page - 1) * size;
  const end = start + size;
  const pageData = listData.slice(start, end);
  return {
    data: pageData,
    total: listData.length
  };
};
const algorithmValue = ref("");
const typeValue = ref("");
const defectValue = ref("");
const options = [
  {
    value: "全部",
    label: "全部"
  },
  {
    value: "经典算法",
    label: "经典算法"
  },
  {
    value: "深度学习",
    label: "深度学习算法"
  },
  {
    value: "通用类",
    label: "通用类"
  },
  {
    value: "OCR文字识别",
    label: "OCR文字识别"
  }
];
onMounted(() => {
  onSearch();
});

const formDialogVisible = ref(false);
// const searchValue = ref("");
</script>

<template>
  <div class="main">
    <div class="w-full flex justify-between mb-4">
      <h2>平台算法库</h2>
    </div>
    <div
      v-loading="loading"
      :element-loading-svg="svg"
      element-loading-svg-view-box="-10, -10, 50, 50"
    >
      <el-card
        class="box-card"
        :body-style="{
          height: '462px',
          display: 'flex',
          'justify-content': 'center',
          'align-items': 'center'
        }"
        v-show="false"
      >
        <el-empty description="暂未添加任何项目" :image="emptyPic">
          <el-button
            type="primary"
            color="#1C0D82"
            @click="formDialogVisible = true"
          >
            新建项目
          </el-button>
        </el-empty>
      </el-card>
      <template v-if="pagination.total > 0">
        <el-card shadow="never">
          <template #header>
            <div>
              <span class="font-bold">苏胜天算法库</span
              ><span class="font-bold">({{ pagination.total }})</span>
            </div>
          </template>
          <div class="w-full flex justify-stretch mb-4">
            <el-select
              v-model="algorithmValue"
              clearable
              placeholder="请选择算法"
              class="mr-3"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select
              v-model="typeValue"
              clearable
              placeholder="请选择"
              class="mr-3"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select
              v-model="defectValue"
              clearable
              placeholder="请选择"
              class="mr-3"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-button type="primary" color="#1C0D82" @click="searchValue()">
              查询
            </el-button>
            <el-button type=""> 重置 </el-button>
          </div>
          <pure-table
            border
            align-whole="left"
            showOverflowTooltip
            table-layout="auto"
            :loading="loading"
            adaptive
            :data="dataList"
            :columns="columns"
            :pagination="pagination"
            :paginationSmall="false"
            :header-cell-style="{
              background: 'var(--el-table-row-hover-bg-color)',
              color: 'var(--el-text-color-primary)'
            }"
            @selection-change="handleSelectionChange"
            @page-size-change="handleSizeChange"
            @page-current-change="handleCurrentChange"
          >
            <template #name="{ row }">
              <span class="mr-2">{{ row.name }}</span>
              <el-tag
                class="mx-1"
                :type="row.type == '经典算法' ? 'success' : 'danger'"
                effect="plain"
              >
                {{ row.type }}
              </el-tag>
            </template>
            <template #operation="{ row }">
              <el-button
                class="reset-margin"
                link
                type="danger"
                @click="handleDelete(row)"
              >
                删除
              </el-button>
            </template>
          </pure-table>
        </el-card>
      </template>
    </div>
  </div>
</template>
<style lang="scss">
// :deep(.el-dialog, .is-draggable, .el-dialog__header) {
//   border-bottom: 1px solid #eee !important;
// }
.msg-box-style {
  // --el-messagebox-width: 580px;
  // height: 184px;
  .btn-custom-cancel:hover {
    color: #fff;
    // color: skyblue;
    background-color: #1c0d82;
    opacity: 0.5;
  }

  .btn-custom-confirm {
    color: #fff;
    background-color: #1c0d82;
    border: #1c0d82;

    &:hover {
      color: #fff;
      // color: skyblue;
      background-color: #1c0d82;
      opacity: 0.5;
    }
  }
}
</style>
