<template>
  <div class="h-full flex flex-col overflow-hidden pb-50px box-border">
    <van-nav-bar title="我的声音" @click-left="back">
      <template #left>
        <van-icon name="arrow-left" color="#ffffff" size="18px" />
      </template>
    </van-nav-bar>
    <div class="mx-20px mt-15px flex items-center p-4px box-border bg-hex-1A1B22 rounded-12px text-14px">
      <div class="type_item" :class="activeType==index?'active':''" v-for="(item, index) in typeData" :key="index" @click="handleTab(index)">{{item.name}}</div>
    </div>
    <div class="p-20px flex-1 overflow-auto">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad">
        <div class="grid grid-cols-2 gap-12px">
          <div v-for="(item, index) in listData" :key="index" @click="handleListen(item)">
            <div v-if="item.axa_img" class="h-110px rounded-14px text-center">
              <img class="max-w-full max-h-full rounded-14px" :src="item.axa_img" alt="图片" />
            </div>
            <img v-else class="w-full h-110px" :src="voiceImg" alt="" />
            <div class="text-center text-white mt-6px mb-10px">{{ item.axa_name }}</div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script setup>
import voiceImg from "~/assets/wode/voice.png";
import { user } from '~/store/user';
import { showFailToast } from 'vant';
const router = useRouter()

function back() {
  router.back();
}

const typeData = $ref([
  {
    name: "通过",
    value: "1"
  },
  {
    name: "不通过",
    value: "2"
  },
  {
    name: "待审核",
    value: "3"
  }
])
let activeType = $ref(0);
function handleTab(index) {
  activeType = index;
  reGetList()
}

let loading = $ref(false);
let finished = $ref(false);
let listData = $ref([]);
let page = $ref("1");
let limit = $ref("10");
async function onLoad() {
  let obj = {
    page,
    limit,
    axa_sycj_shzt_v2: typeData[activeType].value,
    create_user_id: user.value.user_id
  }
  loading = true;
  let { code, data } = await request({ url: '/aimooc/xnszr_audio/index', data: obj });
  if (code == 1) {
    listData = [...listData, ...data.page_data];
    finished = Number(data.total_page) === Number(page);
    page++
    loading = false;
  }
}

function reGetList() {
  page = 1;
  listData = [];
  finished = false;
  onLoad();
}


const handleListen = (item) => {
  if (activeType != 0) {
    return false
  }
  if (item.axa_file) {
    // let mp3 = new Audio(url);
    // mp3.play();
    router.push({ name: 'myVoice-id', params: { id: item.axa_id } })
  } else {
    showFailToast("暂无音频！")
  }
}
</script>

<style lang="scss" scoped>
.type_item {
  flex: 1;
  color: #808080;
  text-align: center;
  line-height: 40px;
  &.active {
    color: #fff;
    background: #db664d;
    border-radius: 8px;
  }
}
</style>