<script setup>
import spzz1 from '/images/spzz1.png'
import spzz2 from '/images/spzz2.png'
import { downLoadFile } from '~/utils/download'
// import { szr_list } from './api'
import { user } from '~/store'
const router = useRouter()
const catalog = ref('xnszr_make')
const params = ref({
  axm_status: '1',
  create_user_id: user.value.user_id,
})

const statusData = ref([
  {
    name: '我的视频',
    status: '1',
  },
  {
    name: '草稿箱',
    status: '2',
  },
])
const spzzListRef = ref()
const fields = ref({
  id: 'axm_id',
  name: 'axm_title',
  img: 'axm_fm_img',
  time: 'create_dateline',
  status: 'axm_upload_status',
  uploadValue: '2',
  audit: 'sh_status'
})
let moreVisible = $ref(false)
let twoData = $ref([])
let threeData = $ref([])
async function initSZRData(num) {
  const { code, data } = await request({ url: '/aimooc/xnszr_img/index', data: { axi_type: num, axi_status:1 } })
  if (code === '1') {
    if (num === 1)
      twoData = data.page_data
    else
      threeData = data.page_data
  }
}
initSZRData(1)
initSZRData(2)

function changeStatus(status) {
  params.value.axm_status = status
}

function linkTo(type) {
  router.push({
    path: 'spzz/create',
    query: {
      type,
    },
  })
}

function linkToSzr(axi_id) {
  router.push({
    path: `spzz/djszr/0`,
    query: { szr: axi_id }
  })
}

let checkedData = $ref([])
function initCheckData(data) {
   checkedData = [...data]
}

async function handleCreate() {
  if (checkedData.length === 0) {
    ElMessage.error('请先选择数据！')
    return
  }
  const arr = checkedData.map((item) => {
    return item[fields.value.id]
  })
  const { code, msg } = await request({ url: `/aimooc/${catalog.value}/submit_check`, data: { axm_ids: arr.join(',') } })
  if (code === '1') {
    ElMessageBox.alert('<div class="py-30px">创建成功，跳转到审核页面中</div>', null, {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '确定',
      center: true,
      showClose: false,
      customStyle: {"border-radius": "24px", "padding": "20px 30px 30px"},
      confirmButtonClass: 'w-full h-48px',
      callback: (action) => {
        ElMessage.success(msg)
        router.push('spsh')
      },
    })
    spzzListRef.value.initData()
  }
}
function handleEdit(data) {
  router.push({
    path: `spzz/djszr/${data.axm_id}`
  })
}
function handleDownload(item) {
  if (!item.axm_video) {
    ElMessage.error('视频未生成，暂无视频下载！')
    return
  }
  
  const arr = item.axm_video.split('.');
  const ext = arr[arr.length - 1].split("?")[0].toLowerCase();
  downLoadFile(item.axm_video, `${item.axm_title}.${ext}`)
}
function handleEnter(item) {
  if (!item.axm_video) {
    ElMessage.error('视频未生成，暂无视频查看！')
    return
  }
  router.push({
    path: `spzz/hjss`,
    query: {
      axm_id: item.axm_id
    }
  })
}

let activeName = $ref('1')
function handleMore(i) {
  moreVisible = true
  activeName = i
}
let index = $ref('')
let axi_id = $ref('')
function handleChoose(i, item) {
  index = i
  axi_id = item.axi_id
}
</script>

<template>
  <div class="h-full flex flex-col">
    <div class="flex items-center justify-center space-x-2">
      <img :src="spzz1" alt="">
      <div class="text-2xl">
        视频制作
      </div>
    </div>
    <div class="mt-10px text-center" style="font-size: 14px;">
      请选择您需要的人物形象!
    </div>

    <div class="mt-30px">
      <div class="mb-10px text-2xl">
        2D数字人
      </div>
      <div class="flex">
        <div class="mr-20px cursor-pointer rounded-10px bg-white px-30px py-15px text-center" @click="linkTo('1')">
          <div class="m-auto h-86px w-86px flex items-center justify-center rounded-50px bg-hex-f9f9f9">
            <img :src="spzz2" alt="">
          </div>
          <div class="mt-10px text-sm">
            定制个人2D形象
          </div>
        </div>
        <div
          v-for="(item, i) in twoData" v-show="i < 4"
          :key="i" class="w-183px mr-20px cursor-pointer rounded-10px bg-white px-30px py-15px text-center"
          @click="linkToSzr(item.axi_id)"
        >
          <div class="mx-auto h-86px w-86px flex items-center justify-center overflow-hidden rounded-1/2 bg-hex-f9f9f9 bg-cover bg-top" :style="{ backgroundImage: `url(${item.axi_img})` }">
            <!-- <img :src="item.axi_img" alt=""> -->
          </div>
          <div class="mt-10px text-sm">
            {{ item.axi_name }}
          </div>
        </div>
        <div
          v-if="twoData.length > 4" class="flex cursor-pointer items-center rounded-10px bg-white px-10px py-15px text-center"
          @click="handleMore('1')"
        >
          <p class="w-25px text-14px leading-20px write-orient-upright">
            查看更多
          </p>
          <span> 》 </span>
        </div>
      </div>
    </div>
    <div class="mt-30px">
      <div class="mb-10px text-2xl">
        3D数字人
      </div>
      <div class="flex">
        <div class="mr-20px cursor-pointer rounded-10px bg-white px-30px py-15px text-center" @click="linkTo('2')">
          <div class="m-auto h-86px w-86px flex items-center justify-center rounded-50px bg-hex-f9f9f9">
            <img :src="spzz2" alt="">
          </div>
          <div class="mt-10px text-sm">
            定制个人3D形象
          </div>
        </div>
        <div
          v-for="(item, i) in threeData"
          v-show="i < 4" :key="i" class="mr-20px cursor-pointer rounded-10px bg-white px-30px py-15px text-center w-183px"
          @click="linkToSzr(item.axi_id)"
        >
          <div class="m-auto h-86px w-86px flex items-center justify-center rounded-50px bg-hex-f9f9f9 bg-cover bg-top" :style="{backgroundImage: `url(${item.axi_img})`}">
            <!-- <img :src="item.axi_img" alt=""> -->
          </div>
          <div class="mt-10px text-sm">
            {{ item.axi_name }}
          </div>
        </div>
        <div
          v-if="threeData.length > 4" class="flex cursor-pointer items-center rounded-10px bg-white px-10px py-15px text-center"
          @click="handleMore('2')"
        >
          <p class="w-25px text-14px leading-20px write-orient-upright">
            查看更多
          </p>
          <span> 》 </span>
        </div>
      </div>
    </div>

    <div class="mb-15px mt-25px flex items-center justify-between">
      <div class="flex space-x-6">
        <div
          v-for="(item, index) in statusData" :key="index" class="pageTitle"
          :class="params.axm_status === item.status && 'active'" @click="changeStatus(item.status)"
        >
          {{ item.name }}
        </div>
      </div>
      <el-button v-if="params.axm_status === '1'" type="primary" class="h-42px w-130px" @click="handleCreate">
        创建审核
      </el-button>
    </div>

    <CommonList
      class="flex-1" ref="spzzListRef" :to="catalog" :d="params" :fields="fields" :show-check="params.axm_status === '1'? true: false"
      @checkValue="initCheckData" @edit="handleEdit" @download="handleDownload" @enter="handleEnter" 
    />
    <el-dialog v-model="moreVisible" title="查看更多">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="2D数字人" name="1" />
        <el-tab-pane label="3D数字人" name="2" />
      </el-tabs>
      <div class="flex flex-wrap">
        <div
          v-for="(item, i) in activeName === '1' ? twoData : threeData"
          :key="i"
          class="shadow_gray my-10px mr-20px h-154px w-183px cursor-pointer rounded-10px bg-white px-30px py-15px text-center"
          :class="axi_id === item.axi_id ? 'shadow_green' : 'shadow_gray'" @click="handleChoose(i, item)"
        >
          <div class="m-auto h-86px w-86px flex items-center justify-center overflow-hidden rounded-50px bg-hex-f9f9f9 bg-cover bg-top" :style="{ backgroundImage: `url(${item.axi_img})` }">
            <!-- <img :src="item.axi_img" alt=""> -->
          </div>
          <div class="mt-10px text-sm">
            {{ item.axi_name }}
          </div>
        </div>
      </div>
      <div class="w-full text-center">
        <el-button type="primary" class="h-42px w-314px" @click="linkToSzr(axi_id)">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<route lang="json">
{
  "meta": {
    "title": "视频制作",
    "img": "/images/spzz.png",
    "sort": 1,
    "hidden": true
  }
}
</route>

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

:deep {
  .el-tabs__nav-wrap::after {
    width: 0;
  }

  .el-tabs__active-bar {
    background-color: #CCEABB;
    height: 5px;
    border-radius: 8px;
    bottom: 8px;
  }

  .el-tabs__item:hover {
    color: #CCEABB;
    cursor: pointer;
  }

  .is-active {
    color: #000 !important;
    font-size: 16px;
  }
  .common_list{
    overflow: visible;
  }
}

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

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