<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";
import logon from "@/assets/static/logo_icon.png";

defineOptions({
  name: "AlgorithmCard"
});

const props = defineProps({
  modelInfo: {
    type: Object
  }
});
console.log(props);

const loading = ref(true);
const checked = ref(false);
function selectCard() {
  checked.value = !checked.value;
}
setTimeout(() => {
  loading.value = !loading.value;
}, 800);
</script>

<template>
  <div>
    <div
      :class="checked ? 'algorithm-card-select' : 'algorithm-card'"
      @click="selectCard"
    >
      <div class="algorithm-card-header">
        <img :src="logon" />
        <el-checkbox
          v-model="checked"
          @change="selectCard"
          fill="#1C0D82"
          size="large"
        />
      </div>
      <div class="algorithm-card-content">
        <div class="algorithm-card-content-title">
          <span class="algorithm-card-content-title-left">{{
            "苏胜天文字OCR识别模型"
          }}</span>
          <span class="algorithm-card-content-title-right">{{
            "经典算法"
          }}</span>
        </div>
        <div class="algorithm-card-content-version">
          {{ "v1.6.25" }}
        </div>
        <div class="algorithm-card-content-update">
          更新时间：<span>{{ "2023.09.10" }}</span>
        </div>
        <div class="algorithm-card-content-update">
          提供方：<span>{{ "v1.6.25" }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.algorithm-card,
.algorithm-card-select {
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: space-between;
  box-sizing: border-box;
  width: 250px;
  height: 160px;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  border: 1px solid #e0e0e0;
  border-radius: 4px;

  .algorithm-card-header {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;

    .el-checkbox__inner {
      border-radius: 50%;
    }
  }

  .algorithm-card-content {
    .algorithm-card-content-title {
      display: flex;
      align-items: center;
      height: 28px;

      .algorithm-card-content-title-left {
        height: 24px;
        margin-right: 8px;
        // font-family: "PingFang SC";
        font-size: 14px;
        font-weight: 800;
        line-height: 24px;
        color: #333;
      }

      .algorithm-card-content-title-right,
      .deep-learn {
        box-sizing: border-box;
        width: 56px;
        height: 24px;
        // font-family: "PingFang SC";
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
        color: #fff;
        text-align: center;
        background: #67c23a;
        border-radius: 2px;
      }

      .deep-learn {
        background: #f56c6c;
      }
    }
  }

  .algorithm-card-content-version {
    height: 24px;
    // font-family: "PingFang SC";
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    color: #666;
  }

  .algorithm-card-content-update {
    height: 24px;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    color: #666;

    & span {
      color: #333;
    }
  }

  &:nth-of-type(odd) {
    margin-right: 15px;
  }
}

.algorithm-card-select {
  border: 1px solid #1c0d82;
}
</style>
