<script setup>
import liveBroadcast from '@/components/liveBroadcast/index.vue'
import {useRect} from '@vant/use';
import LiveRoom  from '@/pages/LiveRoom/index.client.vue'
import itemDetail from '@/components/itemDetail/index.vue'

import { homeStore } from "@/stores/home/index.js";
const { fullLive } = homeStore()
definePageMeta({
  layout: 'default',
  i18n: 'menu.home',
})
const liveRef = ref(null)
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const list = ref([{
  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
  title: '张天赐 | 日出而作,日落而息',
  startingPrice: 'RMB 1,000',
  transactionPrice: 'RMB 10,000',
}, {
  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/f7b65e23-ce21-41b4-8e58-9e6dc6950727.png',
  title: '张天赐 | 日出而作,日落而息',
  startingPrice: 'RMB 1,000',
  transactionPrice: '',
}, {
  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/41eceb23-d168-4049-ae8e-48c5328b192f.png',
  title: '张天赐 | 日出而作,日落而息',
  startingPrice: 'RMB 1,000',
  transactionPrice: '',
}, {
  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
  title: '张天赐 | 日出而作,日落而息',
  startingPrice: 'RMB 1,000',
  transactionPrice: '',
}, {
  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
  title: '张天赐 | 日出而作,日落而息',
  startingPrice: 'RMB 1,000',
  transactionPrice: '',
}, {
  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
  title: '张天赐 | 日出而作,日落而息',
  startingPrice: 'RMB 1,000',
  transactionPrice: '',
},{
  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
  title: '张天赐 | 日出而作,日落而息',
  startingPrice: 'RMB 1,000',
  transactionPrice: 'RMB 10,000',
},{
  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
  title: '张天赐 | 日出而作,日落而息',
  startingPrice: 'RMB 1,000',
  transactionPrice: 'RMB 10,000',
}])
const page = ref(1)

// 加载数据
async function loadData() {
  // try {
  //   loading.value = true
  //   // 模拟API请求
  //   const {data} = await fetchAuctionList({page: page.value})
  //
  //   if (refreshing.value) {
  //     list.value = []
  //     refreshing.value = false
  //   }
  //
  //   list.value.push(...data)
  //   page.value++
  //
  //   // 如果没有更多数据了
  //   if (data.length < 10) {
  //     finished.value = true
  //   }
  // } catch (error) {
  //   console.error(error)
  // } finally {
  //   loading.value = false
  // }
}

// 下拉刷新
function onRefresh() {
  finished.value = false
  page.value = 1
  refreshing.value = true
  loadData()
}

const leftColumn = computed(() => {
  return list.value.filter((_, index) => index % 2 === 0)
})
const rightColumn = computed(() => {
  return list.value.filter((_, index) => index % 2 === 1)
})
const show = ref(false)
const showHeight = ref('')
const openShow = () => {
  const rect = useRect(liveRef.value.$el);
  showHeight.value = rect.height
  nextTick(() => {
    show.value = true
  })
}
const changeLive=()=>{
  fullLive.value=true
}
</script>

<template>
  <div class="flex-grow-1">
    <div
        @click="changeLive"
        :class="[
          'changeLive',
          fullLive ? 'expanded' : 'collapsed'
        ]"
    >
      <client-only>
        <LiveRoom ref="liveRef" :fullLive="fullLive" />
      </client-only>
    </div>
    <transition name="fade">
    <div v-show="!fullLive" class="bg-#fff" >
      <van-tabs sticky animated>
        <van-tab title="拍品列表">
          <div class="px-[16px] pt-[16px]">
            <van-pull-refresh>
              <van-list
                  v-model:loading="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="loadData"
              >
                <div class="w-full flex gap-[16px]">
                  <div class="flex flex-1 flex-col gap-[16px]">
                    <div
                        v-for="(item, index) in leftColumn"
                        :key="index"
                        class="w-full"
                        @click="openShow"
                    >
                      <div class="relative w-full">
                        <van-image
                            :src="item.image"
                            :style="{ aspectRatio: item.ratio }"
                            fit="cover"
                            class="w-full"
                        />
                        <div
                            class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]">
                          LOT{{ index * 2 + 1 }}
                        </div>
                      </div>
                      <div class="pt-[8px]">
                        <div class="text-[14px] text-[#000000] leading-[20px]">
                          {{ item.title }}
                        </div>
                        <div class="mt-[4px] text-[12px] text-[#575757]">
                          起拍价:{{ item.startingPrice }}
                        </div>
                        <div
                            v-if="item.transactionPrice"
                            class="mt-[4px] text-[12px] text-[#b58047]"
                        >
                          成交价:{{ item.transactionPrice }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="flex flex-1 flex-col gap-[16px]">
                    <div
                        v-for="(item, index) in rightColumn"
                        :key="index"
                        class="w-full"
                        @click="openShow"
                    >
                      <div class="relative w-full">
                        <van-image
                            :src="item.image"
                            :style="{ aspectRatio: item.ratio }"
                            fit="cover"
                            class="w-full"
                        />
                        <div
                            class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]">
                          LOT{{ index * 2 + 2 }}
                        </div>
                      </div>
                      <div class="pt-[8px]">
                        <div class="text-[14px] text-[#000000] leading-[20px]">
                          {{ item.title }}
                        </div>
                        <div class="mt-[4px] text-[12px] text-[#575757]">
                          起拍价:{{ item.startingPrice }}
                        </div>
                        <div
                            v-if="item.transactionPrice"
                            class="mt-[4px] text-[12px] text-[#b58047]"
                        >
                          成交价:{{ item.transactionPrice }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </van-list>
            </van-pull-refresh>
          </div>
        </van-tab>
        <van-tab title="拍卖说明">
          <div class="px-16px pt-14px">
            <div class="text-#575757 text-14px">
              这里是后台富文本配置的说明,啊即可打开三等奖撒度老师的湿答答是快乐的阿四大皆空
            </div>
            <div></div>
          </div>
        </van-tab>
      </van-tabs>
      <van-back-top right="15vw" bottom="10vh"/>
      <van-action-sheet :round="false" v-model:show="show" title="拍品详情">
        <div class="content bg-[#F0F0F0]" :style="`height: calc(100vh - ${showHeight+85}px)`">
          <itemDetail></itemDetail>
        </div>
      </van-action-sheet>
    </div>
    </transition>
  </div>
</template>

<style>
:root:root {
  --van-action-sheet-header-height: 39px;
}
</style>

<style scoped lang="scss">
:deep(.van-swipe__indicator) {
  width: 8px;
  height: 8px;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
:deep(.van-swipe__indicator:not(.van-swipe__indicator--active) ) {
  background: rgba(0, 0, 0, 0.8);
}
.changeLive {
  width: 100%;
  overflow: hidden;
  transition: height 0.5s ease, transform 0.5s ease;
}

.changeLive.collapsed {
  height: 188px;
}

.changeLive.expanded {
  height: calc(100vh - var(--van-nav-bar-height));
  transform: translateY(0);
}
</style>