<template>
  <div class="mt-[30px] bg-[#14213d] px-[40px] pb-[20px] pt-[50px] text-white lg:px-[80px] sm:px-[60px]">
    <!-- 主内容区 -->
    <div class="mb-[40px] flex flex-col items-start justify-between gap-[30px] lg:flex-row">
      <!-- 左侧 Logo -->
      <div class="mx-auto w-[200px] shrink-0 lg:mx-0">
        <img src="~/assets/images/logo5.png" class="h-auto w-full" />
      </div>

      <!-- 中间部分 -->
      <div class="grid grid-cols-2 mx-[80px] flex-1 gap-[10px] lg:grid-cols-3">
        <div v-for="(col, index) in bannerList?.slice(0, 3)" :key="index">
          <h3 v-if="handle(col)" class="ma-[0px] mb-[20px] pa-[0px] text-[16px]">{{ handle(col) }}</h3>
          <ul>
            <li
              v-for="(item, i) in handle2(col)"
              :key="i"
              class="mb-[15px] cursor-pointer text-[15px] text-white/90"
              :class="{ 'cursor-pointer hover:text-blue-400!': item.url }"
              @click="handleClick(item)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>

      <!-- 右侧二维码 -->
      <div class="flex shrink-0 flex-row gap-[30px]">
        <div
          v-for="(qr, i) in bannerList?.[3]"
          :key="i"
          class="text-center"
          :class="{ 'cursor-pointer hover:text-blue-400!': qr.url }"
          @click="handleClick(qr)"
        >
          <el-image :src="qr.content" class="mx-auto mb-[10px] w-[120px] rounded-lg bg-gray-400/20" />
          <p class="text-[15px] text-white/90" :class="{ 'cursor-pointer hover:text-blue-400!': qr.url }">{{ qr.name }}</p>
        </div>
      </div>
    </div>

    <!-- 底部版权 -->
    <div class="border-t border-white/20 pt-[20px] text-center text-[14px] text-white/70">
      Copyright 2007-2025 图夕夕网络科技(成都)有限公司
      <a href="http://beian.miit.gov.cn/" target="_blank" class="text-white/90 hover:text-blue-400!"> 蜀ICP备2025141494号-1</a>
      <img src="~/assets/images/x.png" class="w-[20px] h-[20px] relative top-[2px]" />
      <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51010702043645" rel="noreferrer" target="_blank">川公网安备51010702043645号</a >
    </div>

    <el-image-viewer v-if="showViewer" :url-list="previewImgList" :url-index="0" @close="showViewer = false"></el-image-viewer>
  </div>
</template>
<script setup lang="ts">
  import { reactive, ref } from 'vue'

  import { getSettingPage } from '~/api/home/index'
  import type { PageResultIndexSettingRespVO } from '~/api/home/type'

  // 导航数据
  // const columns = [
  //   {
  //     title: '联系与合作',
  //     items: ['关于我们', '联系我们', '免责声明', '常见问题'],
  //   },
  //   {
  //     title: '关注我们',
  //     items: ['微信订阅号：多多机械', '微信服务号：多多网', '技术交流群：点此加入', '创收平台：为设计师创造收益'],
  //   },
  // ]

  // 二维码数据（需要替换真实图片路径）
  // const qrcodes = [
  //   {
  //     img: new URL('~/assets/images/logo2.png', import.meta.url).href,
  //     text: '抖音电商关注官方号',
  //   },
  //   {
  //     img: new URL('~/assets/images/logo2.png', import.meta.url).href,
  //     text: '微信扫码关注官方助手',
  //   },
  // ]

  const pageReq = reactive({
    type: 3,
    status: 0,
  })

  const bannerList = ref<Array<PageResultIndexSettingRespVO[]>>([])
  const getBanner = async () => {
    const res = await getSettingPage(pageReq)
    if (res.code === 0) {
      const arr = res.data || []
      const bannerListOne = arr.filter((item) => item.rowType === 1)?.sort((a, b) => a.sort - b.sort)
      const bannerListTwo = arr.filter((item) => item.rowType === 2)?.sort((a, b) => a.sort - b.sort)
      const bannerListThree = arr.filter((item) => item.rowType === 3)?.sort((a, b) => a.sort - b.sort)
      const bannerListFour = arr.filter((item) => item.rowType === 4)?.sort((a, b) => a.sort - b.sort)
      bannerList.value = [bannerListOne, bannerListTwo, bannerListThree, bannerListFour]
    }
  }
  getBanner()

  const handle = (col: PageResultIndexSettingRespVO[]) => {
    if (col?.length > 0) {
      return col[0].name
    }
    return ''
  }

  const handle2 = (col: PageResultIndexSettingRespVO[]) => {
    if (col?.length > 0) {
      return col.slice(1)
    }
    return []
  }

  /**
   *
   * @param item.innerType 区分 底部信息展示 0 文本 1 图片地址 2 站内链接地址 3 外部链接地址 4 富文本
   */
  const showViewer = ref(false)
  const previewImgList = ref<string[]>([])
  const handleClick = (item: PageResultIndexSettingRespVO) => {
    if (item.content && (item.innerType === 3 || item.innerType === 2)) {
      window.open(item.content, '_blank')
    } else if (item.content && (item.innerType === 4 || item.innerType === 0)) {
      navigateTo(`/editor-view?content=${encodeURIComponent(item.content)}`)
    } else if (item.innerType === 1 && item.content) {
      showViewer.value = true
      previewImgList.value = [item.content]
    }
  }
</script>

<style scoped lang="scss">
  ul {
    li {
      list-style: none;
    }
  }
</style>
