<script setup>
import { getChuanKitDesignList } from '../api'
import { useUserStore } from '@/stores/user'
import { uploadFileByUrl } from '@/utils/upload'

const ChuangKitDesign = defineAsyncComponent(() => import('./ChuangKitDesign.vue'))

const userStore = useUserStore()

const model = defineModel()
const active = ref('')
const designVisible = ref(false)
const data = reactive({
  list: [],
  count: 0
})
async function fetchList() {
  const res = await getChuanKitDesignList({ user_flag: userStore.user.id, page_no: 1, page_size: 1000, time_order: 1 })
  Object.assign(data, res.data)
}
onMounted(fetchList)

async function handleClick(item) {
  active.value = item.designId
  model.value = await uploadFileByUrl(item.thumbUrl)
}

function onClose() {
  designVisible.value = false
  fetchList()
}
</script>

<template>
  <div class="image-design">
    <el-button type="primary" @click="designVisible = true">打开编辑器</el-button>
    <ul>
      <li v-for="item in data.list" :key="item.designId" :class="{ active: item.designId === active }" @click="handleClick(item)">
        <img :src="item.thumbUrl" />
      </li>
    </ul>
    <ChuangKitDesign v-model="model" @close="onClose" v-if="designVisible"></ChuangKitDesign>
  </div>
</template>

<style lang="scss">
.image-design {
  width: 100%;
  ul {
    margin: 30px auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
  }
  li {
    width: 200px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
    &.active {
      border: 5px solid var(--main-color);
    }
  }
  img {
    width: 100%;
  }
}
</style>
