<script setup lang="ts">
import dialogForm from "./components/DialogForm.vue";
import { isEmpty } from "@pureadmin/utils";
import { ref, onMounted, computed } from "vue";
import { useWindowSize } from "@vueuse/core";
import { useRoute } from "vue-router";
// import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import ModelCard from "./components/ModelCard.vue";
import Bar from "./components/Bar.vue";
import Pie from "./components/Pie.vue";
// import AddFill from "@iconify-icons/ri/add-circle-line";
import { Back } from "@element-plus/icons-vue";
import emptyPic from "@/assets/static/project_empty.png";
defineOptions({
  name: "ProjectDetails"
});
const route = useRoute();
const getParameter = isEmpty(route.params) ? route.query : route.params;
console.log(getParameter);
const INITIAL_DATA = {
  name: "",
  status: "",
  description: "",
  type: "",
  mark: "",
  leader: "",
  phone: ""
};
const formDialogVisible = ref(false);
const formData = ref({ ...INITIAL_DATA });
const { height } = useWindowSize();
const count = ref(2);
const echartsLoading = ref(true);
const loading = ref(false);
const noMore = computed(() => count.value >= 5);
const disabled = computed(() => loading.value || noMore.value);
const load = () => {
  loading.value = true;
  setTimeout(() => {
    count.value += 2;
    loading.value = false;
  }, 2000);
};
setTimeout(() => {
  echartsLoading.value = !echartsLoading.value;
}, 800);
const customType = ref("");
function openDialog(type) {
  console.log(type);
  customType.value = type;
  formDialogVisible.value = true;
}

onMounted(() => {
  // formDialogVisible.value = true;
});
</script>

<template>
  <div class="main">
    <div class="w-full flex justify-between mb-4">
      <el-button :icon="Back" key="项目详情" text class="btn-style"
        >项目详情</el-button
      >
    </div>
    <el-row :gutter="24">
      <el-col :value="24" :xs="24" :sm="24" class="mb-[18px]">
        <el-card shadow="never">
          <template #header>
            <div>
              <span class="font-bold">项目信息</span>
            </div>
          </template>
          <div class="flex justify-stretch">
            <span class="mr-4">项目名称：{{ "文字识别" }}</span>
            <span class="mr-4">负责人：{{ "识别线主管" }}</span>
            <span class="mr-4">联系方式：{{ "13811111111" }}</span>
          </div>
          <div class="project-info">
            <div class="project-info-box">
              <el-skeleton animated :loading="echartsLoading">
                <template #default>
                  <Pie style="width: 100%; height: 240px" />
                </template>
              </el-skeleton>
            </div>
            <div class="project-info-box">
              <el-skeleton animated :loading="echartsLoading">
                <template #default>
                  <Bar style="width: 100%; height: 240px" />
                </template>
              </el-skeleton>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :value="24" :xs="24" :sm="24">
        <el-card
          shadow="never"
          :style="{ height: `calc(${height}px - 35vh - 100px)` }"
        >
          <template #header>
            <div class="flex justify-between">
              <span class="font-bold">算法应用</span>
              <el-button
                type="primary"
                color="#1C0D82"
                @click="openDialog('newBuilt')"
                >新建算法应用</el-button
              >
            </div>
          </template>
          <el-empty
            description="暂未添加任何项目"
            :image="emptyPic"
            v-show="count < 1"
          >
            <el-button
              type="primary"
              color="#1C0D82"
              @click="openDialog('newBuilt')"
            >
              新建算法应用
            </el-button>
          </el-empty>
          <el-scrollbar
            class="infinite-list-wrapper"
            :height="`calc(${height}px - 35vh - 200px)`"
          >
            <div
              v-infinite-scroll="load"
              class="list"
              :infinite-scroll-disabled="disabled"
            >
              <template v-for="i in count" :key="i">
                <ModelCard :modelInfo="INITIAL_DATA" @btn-type="openDialog" />
              </template>
            </div>
            <p v-if="loading">Loading...</p>
            <p v-if="noMore">No more</p>
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>
    <dialogForm
      v-model:visible="formDialogVisible"
      :data="formData"
      :type="customType"
    />
  </div>
</template>
<style scoped lang="scss">
.infinite-list-wrapper {
  // height: 720px;
  text-align: center;
}

.btn-style {
  // font-family: "PingFang SC";
  font-size: 20px;
  font-weight: 400;
  color: #333;

  &:hover {
    color: #333;
    opacity: 0.5;
  }
}

.row-bg {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.col-bg {
  background: #f2f6ff;
}

.project-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  .project-info-box {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-right: 16px;
    background: #f2f6ff;
    border-radius: 4px;

    &:last-child {
      margin-right: 0;
    }
  }
}
</style>
