<script setup lang="ts">
import { onMounted, inject, ref } from 'vue'
const __sdk: any = inject('__sdk')

const types = ref(['blob', 'base64'])
const resolutions = ref([
  { width: 2048, height: 1024, name: '2k' },
  { width: 1024, height: 512, name: '1k' },
  { width: 128, height: 128, name: '128' },
  { name: '全部' },
])
const type = ref(0)
const resolution = ref(0)

const onEntry = async () => {
  let exports = types.value[type.value] === 'blob'
  let options: Array<any> = []
  let opiton = resolutions.value[resolution.value]
  if (opiton.name == '全部') {
    options = resolutions.value.filter((c) => c.name != '全部')
  } else {
    options = [opiton]
  }
  const images = await __sdk.Camera.screenshot(options, exports)
  const info = __sdk.Camera.getScreenshotInfo()
  console.log(images)
  console.log(info)
}
const onNormal = () => {
  let exports = types.value[type.value] === 'blob'
  let options: Array<any> = []
  let opiton = resolutions.value[resolution.value]
  if (opiton.name == '全部') {
    options = resolutions.value.filter((c) => c.name != '全部')
  } else {
    options = [opiton]
  }
  __sdk.Camera.screenshot(options, exports).then((result: any) => {
    result.forEach((item: any) => {
      window.KanKan.Utils.file.downloadFromURL(item.data, `${item.name}.jpg`)
    })
  })
}

onMounted(() => {
  __sdk.mount('#scene').render()
})
</script>

<template>
  <div id="tools">
    <div>
      <label for="">类型</label>
      <select v-model="type">
        <option v-for="(item, index) in types" :value="index">
          {{ item }}
        </option>
      </select>
    </div>
    <div>
      <label for="">分辨率</label>
      <select v-model="resolution">
        <option v-for="(item, index) in resolutions" :value="index">
          {{ item.name }}
        </option>
      </select>
    </div>
    <button @click="onEntry">首屏截图</button>
    <button @click="onNormal">普通截图</button>
  </div>
  <div id="scene"></div>
</template>

<style scoped>
#tools {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #444;
}
#scene {
  width: 100%;
  height: 100%;
  font-style: normal;
}
select {
  width: 60px;
}
</style>
