<script setup>
import { ArrowLeftBold } from '@element-plus/icons-vue'
import make1 from '/images/make1.png'
import make2 from '/images/make2.png'
import empty from '/images/empty.png'

const props = defineProps({
  type: String,
})
const route = useRoute()
console.log(route.query)
console.log(props)
let page = $ref(1)
const limit = $ref(8)
let total = $ref(0)
let twoData = $ref([])
async function initData() {
  const { code, data } = await request({ url: '/aimooc/xnszr_img/index', data: { page, limit, } })
  if (code === '1') {
    twoData = data.page_data
    total = data.total_rows * 1
  }
}
initData()
function handleCurrentChange(e) {
  page = e
  initData()
}
const router = useRouter()
function handleBack() {
  router.back()
}
function linkTo(name) {
  router.push({
    path: name,
    query: {
      type: route.query.type,
    },
  })
}
</script>

<template>
  <div class="">
    <div class="h-77px flex items-center bg-white px-20px">
      <el-icon class="mr-30px cursor-pointer" size="29" @click="handleBack">
        <ArrowLeftBold />
      </el-icon>
      <h3 class="text-24px">
        数字人定制
      </h3>
    </div>
    <div class="h-full min-w-800px flex flex-col px-40px py-60px">
      <!-- <img :src="swiper" class="h-270px w-full" alt=""> -->
      <div class="flex justify-between">
        <div class="h-417px max-w-666px min-w-571px w-46vw rounded-30px">
          <div class="max-h-340px w-full overflow-hidden">
            <img class="w-full" :src="make1" alt="">
          </div>
          <div class="w-full flex items-center justify-between rounded bg-white px-50px py-5px">
            <p>定制个人2D形象</p>
            <el-button type="primary" class="h-42px w-130px" @click="linkTo('/home/spzz/make')">
              去定制
            </el-button>
          </div>
        </div>
        <div class="h-417px max-w-666px min-w-571px w-46vw rounded-10px">
          <div class="max-h-340px w-full overflow-hidden">
            <img class="w-full" :src="make2" alt="">
          </div>
          <div class="w-full flex items-center justify-between rounded bg-white px-50px py-5px">
            <p>定制个人3D形象</p>
            <el-button type="primary" class="h-42px w-130px" @click="linkTo('/home/spzz/makeSzfs')">
              去定制
            </el-button>
          </div>
        </div>
      </div>
      <div class="mb-15px mt-25px">
        <div class="flex items-center justify-between">
          <div class="pageTitle active mb-10px w-120px">
            我的数字人
          </div>
          <div class="text-14px text-hex-FF6A55">提醒：审核失败的数字人将在三天后自动消失。</div>
        </div>

        <div v-if="twoData.length > 0" class="grid grid-cols-4 gap-4 bg-white px-50px py-30px">
          <div v-for="(item, i) in twoData" :key="i"
            class="shadow_gray my-10px mr-20px cursor-pointer rounded-10px bg-white px-30px py-25px text-center relative">
            <div class="m-auto h-8vw w-8vw flex items-center justify-center overflow-hidden rounded-1/2 bg-hex-f9f9f9">
              <img :src="item.axi_img" alt="">
            </div>
            <div class="mt-10px text-sm">
              {{ item.axi_name }}
            </div>
            <div v-if="item.axi_status !== '1'"
              class="absolute top-0 right-0 text-xs bg-hex-999999 px-10px py-5px rounded_sm"
              :class="(item.axi_status === '2' ? 'bg-hex-B5E4CA' : 'bg-hex-FF6A55 text-white')">
              {{ item.axi_status === '2' ? '审核中' : '审核失败' }}
            </div>
          </div>
        </div>
        <div v-else class="pt-30px text-center bg-white">
          <img :src="empty" alt="" class="m-auto mb-15px">
          <div>暂无数据</div>
        </div>
        <div class="flex justify-end px-80px pb-30px bg-white">
          <el-pagination v-model:current-page="page" v-model:page-size="limit" layout="total, prev, pager, next, jumper"
            :total="total" @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
  </div>
</template>

<route lang="json">
{
  "meta": {
    "hidden": true,
    "hideLayout": true
  }
}
</route>

<style lang="scss" scoped>
@use "~/styles/page.scss";

:deep {
  .el-input__wrapper {
    // background: #f7f7f7;
    box-shadow: none;
  }
}

.rounded {
  border-radius: 0 0 24px 24px;
}

.rounded_sm {
  border-radius: 0 10px 0 10px;
}

.shadow_gray {
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.14);
}

.shadow_green {
  box-shadow: 0px 0px 8px 2px #CCEABB;
}</style>
