<script setup>
import ToastCreator from '~/components/daisy/DToast/toastCreator'
const showToast = () => {
  const toast = new ToastCreator({
    message: '截图成功',
    type: 'success',
    duration: 1500,
  })
  toast.createToast()
}
const { t } = useI18n()

const imgType = reactive({
  name: '图片载入方式',
  status: [
    {
      name: '居中裁剪成224*224',
      status: false,
    },
    {
      name: '居中裁剪成320*320',
      status: true,
    },
  ],
})
// 找到imgType的status为true的name
const imgTypeStatus = computed(() => {
  const opt = imgType.status.find(option => option.status === true)
  return opt ? opt.name : '居中裁剪成320*320'
})
let currentImgUrl = $ref('')
let ImgLength = $ref(0)
const timer = setInterval(async () => {
  const imgBase64 = await window.pywebview.api.getPrimaryImg(imgTypeStatus.value)
  currentImgUrl = `data:image/jpg;base64,${imgBase64}`
}, 50)
const getImgLength = async () => {
  ImgLength = (await window.pywebview.api.getPersonalizationPrimaryImg())[0]
}
const setImg = async () => {
  ImgLength = (await window.pywebview.api.setPersonalizationPrimaryImg(imgTypeStatus.value))[0]
  showToast()
}
const openImgFiles = async () => {
  await window.pywebview.api.openPrimaryImgFiles()
}
onBeforeUnmount(() => {
  clearInterval(timer)
})
onBeforeMount(async () => {
  await getImgLength()
})
</script>

<template>
  <div>
    <div class="hero justify-start">
      <div class="hero-content flex-col items-end !pb-0">
        <div class=" flex">
          <router-link to="/" class="text-3xl">
            <div i-carbon-arrow-left class="mr-2 hover:bg-primary" />
          </router-link>
          <div>
            <ul class="steps">
              <li class="step step-primary">
                {{ t('Personalization.Collect') }}
              </li>
              <li class="step">
                {{ t('Personalization.Annotations') }}
              </li>
              <li class="step">
                {{ t('Personalization.Train') }}
              </li>
            </ul>
          </div>
        </div>
        <!-- <div class="text-gray-500">
          修改后重启生效
        </div> -->
      </div>
    </div>

    <div class="flex justify-center flex-col items-center">
      <div class="collect-title flex items-end">
        <div text-3xl>
          实时图像
        </div>
        <div flex items-center ml-3>
          <div class="badge badge-primary">
            已采集<span class="countdown">
              <span :style="`--value:${ImgLength};`" />
            </span>张图片
          </div>
          <div>
            <d-select v-model:options="imgType.status" class="select select-sm  max-w-xs" />
          </div>
        </div>
      </div>
      <div class="collect-imgs stack mt-4">
        <div class="collect-img">
          <img class="max-w-full h-100 rounded-lg bg-contain bg-clip-border" :src="currentImgUrl" alt="image description">
        </div>
        <div class="collect-img">
          <img class="max-w-full h-100 rounded-lg bg-contain bg-clip-border" :src="currentImgUrl" alt="image description">
        </div>
        <div class="collect-img">
          <img class="max-w-full h-100 rounded-lg bg-contain bg-clip-border" :src="currentImgUrl" alt="image description">
        </div>
      </div>
      <div flex mt-3>
        <button class="btn btn-primary" @click="setImg">
          截图
        </button>
        <button class="btn btn-primary ml-10" @click="openImgFiles">
          打开文件夹
        </button>
      </div>
    </div>

    <div class="hero justify-end">
      <div class="hero-content flex-col items-end">
        <div class=" flex">
          <router-link to="/Personalization/annotations">
            <button class="btn btn-primary ">
              标注<div i-carbon-arrow-right />
            </button>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<style  scoped>
.hero {
  display: grid;
  width: 100%;
  place-items: center;
  background-size: cover;
  background-position: center;
}
.hero > * {
  grid-column-start: 1;
  grid-row-start: 1;
}

.hero-content {
  z-index: 0;
  display: flex;
  align-items: left;
  justify-content: center;
  max-width: 80rem/* 1280px */;
  gap: 1rem/* 16px */;
  padding: 1rem/* 16px */;
}

.input-group > *,
  .input-group > .input,
  .input-group > .select {
  border-radius: 0px;
}
.select {
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  appearance: none;
  height: 3rem/* 48px */;
  padding-left: 1rem/* 16px */;
  padding-right: 2.5rem/* 40px */;
  padding-right: 2.5rem/* 40px */;
  font-size: 0.875rem/* 14px */;
  line-height: 1.25rem/* 20px */;
  line-height: 2;
  min-height: 3rem/* 48px */;
  border-width: 1px;
  border-color: hsl(var(--bc) / var(--tw-border-opacity));
  --tw-border-opacity: 0;
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b1) / var(--tw-bg-opacity));
  font-weight: 600;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--rounded-btn, 0.5rem);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16px) calc(1px + 50%);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.select[multiple] {
  height: auto;
}
.select:focus {
  outline: 0px solid hsla(var(--bc) / 0.2);
  outline-offset: 2px;
}
.select-disabled,
  .select[disabled] {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
  --tw-text-opacity: 0.2;
}
.select-disabled::placeholder,
  .select[disabled]::placeholder {
  color: hsl(var(--bc) / var(--tw-placeholder-opacity));
  --tw-placeholder-opacity: 0.2;
}
.select-multiple,
  .select[multiple],
  .select[size].select:not([size="1"]) {
  background-image: none;
  padding-right: 1rem/* 16px */;
}
.select-multiple,
  .select[multiple],
  .select[size].select:not([size="1"]) {
  background-image: none;
  padding-right: 1rem/* 16px */;
}
.select-multiple,
  .select[multiple],
  .select[size].select:not([size="1"]) {
  background-image: none;
  padding-right: 1rem/* 16px */;
}

.select-sm {
  height: 2rem/* 32px */;
  padding-left: 0.75rem/* 12px */;
  padding-right: 2rem/* 32px */;
  font-size: 0.875rem/* 14px */;
  line-height: 2rem/* 32px */;
  min-height: 2rem/* 32px */;
}
[dir="rtl"] .select-sm {
  padding-right: 0.75rem/* 12px */;
  padding-left: 2rem/* 32px */;
}

.stack {
  display: inline-grid;
  place-items: center;
  align-items: flex-end;
}
.stack > * {
  grid-column-start: 1;
  grid-row-start: 1;
  transform: translateX(10%) scale(0.9);
  z-index: 1;
  width: 100%;
  opacity: 0.6;
}
.stack > *:nth-child(2) {
  transform: translateX(5%) scale(0.95);
  z-index: 2;
  opacity: 0.8;
}
.stack > *:nth-child(1) {
  transform: translateX(0) scale(1);
  z-index: 3;
  opacity: 1;
}
</style>
