<script setup lang="ts">
import { ref } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import BarDetail from "./BarDetail.vue";
import Radar from "./Radar.vue";
import AddFill from "@iconify-icons/ri/add-circle-line";

defineOptions({
  name: "ModelCard"
});

// interface CardProductType {
//   type: number;
//   isSetup: boolean;
//   description: string;
//   name: string;
// }
// const modelStep = ref(1);
const props = defineProps({
  modelInfo: {
    type: Object
  }
});
console.log(props);

const loading = ref(true);
const emit = defineEmits(["btn-type"]);
const handleClickBtn = type => {
  emit("btn-type", type);
};

setTimeout(() => {
  loading.value = !loading.value;
}, 800);
</script>

<template>
  <div>
    <div class="list-item">
      <div class="list-item-header mb-[18px]">
        <span class="font-bold"
          >{{ "苏胜天OCR文字识别模型" }}<i>v1.6.25</i>
        </span>
        <!-- <span>{{ "算力设备：" }}</span> -->
        <span>
          <el-button
            link
            type=""
            :icon="useRenderIcon(AddFill)"
            text
            @click="handleClickBtn('history')"
            >历史推理</el-button
          >
          <el-button
            v-if="false"
            link
            :icon="useRenderIcon(AddFill)"
            text
            @click="handleClickBtn('model')"
            >模型测试</el-button
          >
          <el-button
            link
            :icon="useRenderIcon(AddFill)"
            text
            @click="handleClickBtn('alarm')"
            >告警设置</el-button
          >
          <el-button
            link
            :icon="useRenderIcon(AddFill)"
            text
            @click="handleClickBtn('algorithm')"
            >算法配置</el-button
          >
        </span>
      </div>
      <div class="list-item-content">
        <div class="list-item-content-box">
          <el-skeleton animated :loading="loading">
            <template #default>
              <BarDetail style="width: 100%; height: 240px" />
            </template>
          </el-skeleton>
        </div>
        <div class="list-item-content-box">
          <el-skeleton animated :loading="loading">
            <template #default>
              <Radar style="width: 100%; height: 240px" />
            </template>
          </el-skeleton>
        </div>
        <div class="list-item-content-box-pic">
          <el-skeleton animated :loading="loading">
            <template #default>
              <el-image
                preview-teleported
                loading="lazy"
                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
                :preview-src-list="[
                  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
                ]"
                :initial-index="1"
                fit="cover"
                class="list-item-image"
              />
              <el-image
                preview-teleported
                loading="lazy"
                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
                :preview-src-list="[
                  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
                ]"
                :initial-index="1"
                fit="cover"
                class="list-item-image"
              />
              <el-image
                preview-teleported
                loading="lazy"
                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
                :preview-src-list="[
                  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
                ]"
                :initial-index="1"
                fit="cover"
                class="list-item-image"
              />
              <el-image
                preview-teleported
                loading="lazy"
                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
                :preview-src-list="[
                  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
                ]"
                :initial-index="1"
                fit="cover"
                class="list-item-image"
              />
            </template>
          </el-skeleton>
          <!-- <div class="list-item-content-box-top"> -->

          <!-- </div> -->
        </div>
        <!-- <div class="list-item-content-left">
          <div class="list-item-content-left-bottom">
            <el-skeleton animated :loading="loading">
              <template #default>
                <Bar style="width: 240px; height: 240px" />
              </template>
            </el-skeleton>
            <el-skeleton animated :loading="loading">
              <template #default>
                <Radar style="width: 240px; height: 240px" />
              </template>
            </el-skeleton>
          </div>
        </div> -->
        <!-- <div class="list-item-content-right">
          <div class="list-item-content-right-first" v-if="modelStep == 1">
            <el-button
              size="large"
              type="success"
              :icon="useRenderIcon(AddFill)"
              @click="modelStep = 2"
            >
              添加推理图片或视频
            </el-button>
          </div>
          <div class="list-item-content-right-second" v-if="modelStep == 2">
            <div>
              <span class="mr-10">{{ "待处理文件：99999" }}</span>
              <el-button
                size="large"
                type="success"
                :icon="useRenderIcon(AddFill)"
              >
                继续上传
              </el-button>
            </div>
            <div>
              <el-button
                size="large"
                type="success"
                :icon="useRenderIcon(AddFill)"
                @click="modelStep = 3"
              >
                开始推理
              </el-button>
            </div>
          </div>
          <div class="list-item-content-right-third" v-if="modelStep == 3">
            <div class="list-item-content-right-third-header">
              <div class="w-60">
                <span>{{ "snadjkas" }}</span>
                <el-progress
                  :text-inside="true"
                  :stroke-width="40"
                  :percentage="50"
                  striped
                  striped-flow
                  status="exception"
                >
                  <span>推理中···</span>
                </el-progress>
              </div>
              <div>
                <span>{{ "缺陷数：99999" }}</span>
              </div>
              <div>
                <el-button
                  size="large"
                  type="danger"
                  :icon="useRenderIcon(AddFill)"
                  @click="modelStep = 2"
                >
                  终止推理
                </el-button>
              </div>
            </div>
            <div class="list-item-content-right-third-image">
              <el-image
                style="width: 100px; height: 100px"
                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
                :zoom-rate="1.2"
                :initial-index="1"
                :preview-src-list="[
                  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
                ]"
                fit="cover"
              />
              <el-image
                style="width: 100px; height: 100px"
                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
                :zoom-rate="1.2"
                :initial-index="1"
                :preview-src-list="[
                  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
                ]"
                fit="cover"
              />
              <el-image
                style="width: 100px; height: 100px"
                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
                :zoom-rate="1.2"
                :initial-index="1"
                :preview-src-list="[
                  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
                ]"
                fit="cover"
              />
              <el-image
                style="width: 100px; height: 100px"
                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
                :zoom-rate="1.2"
                :initial-index="1"
                :preview-src-list="[
                  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
                ]"
                fit="cover"
              />
              <el-image
                style="width: 100px; height: 100px"
                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
                :zoom-rate="1.2"
                :initial-index="1"
                :preview-src-list="[
                  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
                ]"
                fit="cover"
              />
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.list-item {
  display: flex;
  flex-direction: column;
  // height: 300px;
  padding: 10px;
  margin-bottom: 10px;
  // background: #fafafa;
}
// .list-item + .list-item {
//   margin-top: 10px;
// }
.list-item .list-item-header {
  display: flex;
  justify-content: space-between;
}

.list-item .list-item-content {
  display: flex;
  flex: 1;
  justify-content: space-between;
}

.list-item .list-item-content .list-item-content-left {
  display: flex;
  flex-direction: column;
  width: 60%;
}

.list-item
  .list-item-content
  .list-item-content-left
  .list-item-content-left-top {
  display: flex;
  justify-content: center;
  // flex-wrap: wrap;
  width: 100%;
  margin-right: 50px;
}

.list-item
  .list-item-content
  .list-item-content-left
  .list-item-content-left-progress {
  flex: 50%;
}

.list-item
  .list-item-content
  .list-item-content-left
  .list-item-content-left-bottom {
  display: flex;
  justify-content: space-around;
  // flex-wrap: wrap;
  width: 100%;
  margin-right: 50px;
}

.list-item .list-item-content .list-item-content-right {
  display: flex;
  flex: 1;
}

.list-item
  .list-item-content
  .list-item-content-right
  .list-item-content-right-first {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.list-item
  .list-item-content
  .list-item-content-right
  .list-item-content-right-second {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-around;
}

.list-item
  .list-item-content
  .list-item-content-right
  .list-item-content-right-third {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.list-item
  .list-item-content
  .list-item-content-right
  .list-item-content-right-third
  .list-item-content-right-third-header {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-around;
  height: 30%;
}

.list-item
  .list-item-content
  .list-item-content-right
  .list-item-content-right-third
  .list-item-content-right-third-image {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-around;
}

.list-item .list-item-content .list-item-content-box,
.list-item .list-item-content .list-item-content-box-pic {
  box-sizing: border-box;
  flex: 1;
  height: 260px;
  padding: 16px;
  background: #f2f6ff;
}

.list-item .list-item-content .list-item-content-box:nth-of-type(2) {
  margin: 0 16px;
}

.list-item .list-item-content .list-item-content-box-pic {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: 260px;
  padding: 0;
  background: #fff;

  .list-item-image {
    flex: 40%;
    height: 120px;

    &:nth-of-type(odd) {
      margin-right: 10px;
    }
  }
}
</style>
