<script setup lang="ts">
import {onMounted, ref} from "vue";
import {download, windows} from "@/http/apis/commonApi.ts";
import {useRoute, useRouter} from "vue-router";

const route = useRoute()
const router = useRouter()
const tabList = ref([
  {
    title: '服务事项',
    icon: '../../assets/service/shixiang.png'
  },
  {
    title: '特色场景',
    icon: '../../assets/service/changjiang.png'
  }
])

function getLocalImage(localurl: string) {
  return new URL(localurl, import.meta.url).href
}

const tabActive = ref(0)

function tabCkecked(index: number) {
  tabActive.value = index

  if (index === 1) {
    downloadFile()
  }
}


const menuList = ref([])

const name = route.query.name || ''
const filesString = route.query.files || ''
const files = ref(JSON.parse(filesString as string))
console.log(files.value)
document.title = name as string
onMounted(() => {
  getMenus()
})

function getMenus() {
  windows({zoneName: name}).then(({data}) => {
    menuList.value = data
  })
}

function menuItemClick(item: any) {
  router.push({name: 'servicelist', query: {name: item.name, windowName: name}})
}

const pdfUrl = ref('')
const loading = ref(false)

async function downloadFile() {
  if (files.value.length>0&&['pdf'].includes(files.value[0]?.suffix)) {
    if (!pdfUrl.value) {
      loading.value = true
      const res = await download(files.value[0].id)
      const blob = window.URL.createObjectURL(new Blob([res], {type: 'application/pdf'}))
      pdfUrl.value = 'pdfjs/web/viewer.html?file=' + blob
      loading.value = false
    }
  }
}

</script>

<template>
  <div>
    <div class="grid-content">
      <van-grid :border="false" :column-num="2" :center="false" :gutter="7" class="my-grid">
        <van-grid-item v-for="(item,index) in tabList" @click="tabCkecked(index)">
          <div class="menyItem1" :class="tabActive === index?'menyItemChecked':''">
            <van-image
                class="icon"
                :src="getLocalImage(item.icon)"
            />
            <span class="title" :class="tabActive ===index?'titleChecked':''">{{ item.title }}</span>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="menu-content" v-show="tabActive===0">
      <van-grid :border="false" :column-num="4" :center="false" :gutter="7" class="my-grid">
        <van-grid-item v-for="(item,index) in menuList" @click="menuItemClick(item)">
          <div class="serviceItem">
            <van-image
                class="icon"
                :src="getLocalImage('../../assets/service/kechuang.png')"
            />
            <span class="title">{{ item.name }}</span>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 特色场景 -->
    <div v-show="tabActive===1" style="display: flex;justify-content: center;align-items: center">
      <van-loading type="spinner" color="#1989fa" class="loading" v-if="loading"/>
      <template v-if="files?.length&&!loading">
        <video controls v-if="files?.[0]?.suffix === 'mp4'">
          <source :src="files?.[0]?.url" type="video/mp4"/>
        </video>
        <iframe
            v-if="['pdf'].includes(files?.[0]?.suffix)"
            :src="pdfUrl"
            class="pdfview"
            frameborder="0"
        >
        </iframe>
      </template>
      <van-empty description="暂无数据" v-if="!files?.length||files.length===0"/>
    </div>

  </div>
</template>

<style lang="less">

.video {
  width: 95%;
}

.loading {
  margin-top: 40vh;
}

.pdfview {
  width: 95%;
  height: calc(100vh - 300px);
}

.menu-content {
  padding-top: 30px;
  padding-bottom: 30px;
  margin: 35px;
  background: #FFFFFF;
  border-radius: 12px;
}

.serviceItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #F2F4FD;
  border-radius: 12px;
  padding: 40px 47px;

  .title {
    margin-top: 20px;
    font-weight: 400;
    font-size: 42px;
    color: #006FFF;
    text-align: center;
    font-style: normal;
  }

  .icon {
    width: 136px;
    height: 136px;
  }
}


.menyItemChecked {
  background: #006FFF !important;
}

.grid-content {
  margin: 30px;
}

.menyItem1 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #DAE6F8;
  padding-bottom: 44px;
  padding-top: 44px;
  border-radius: 12px;

  .title {
    margin-left: 20px;
    font-weight: 400;
    font-size: 40px;
    color: #2F313D;
    text-align: left;
  }

  .titleChecked {
    color: #FFFFFF !important;
  }

  .icon {
    width: 72px;
    height: 72px;
  }
}


.my-grid .van-grid-item__content {
  padding: 0;
}
</style>