<template>
  <div class="bg min-w-392px h-30px absolute bottom-0 left-1/2 z-999 footer flex items-end">
    <div class="h-27px w-full flex text-white text-12px font-bold px-18px">
      <div class="flex-1 flex">
        <div
          class="h-full flex items-center cursor-pointer justify-center px-10px flex-none"
          v-for="item in rFriendlinks"
          :key="item.id"
          @click="onClick(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="h-full flex items-center cursor-pointer justify-center">
        <Popover
          placement="topRight"
          trigger="click"
          overlayClassName="fotter-popover"
          color="rgba(28, 44, 52, .8)"
          :align="{
            overflow: { adjustX: true, adjustY: true },
          }"
          :get-popup-container="getPopupContainer"
        >
          <!-- :align="{ offset: [38, 0] }" -->
          <template #content>
            <div class="text-white">
              <div v-for="(item, key, index) in friendlinks" :key="index" class="mb-10px">
                <div
                  class="bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
                  >{{ key }}</div
                >
                <div class="flex -mr-10px flex-wrap">
                  <div
                    @click="onClick(a)"
                    class="text-12px mr-10px py-4px cursor-pointer"
                    v-for="a in item"
                    :key="a.id"
                  >
                    {{ a.name }}
                  </div>
                </div>
              </div>
            </div>
          </template>
          <SvgIcon name="more-icon" />
        </Popover>
      </div>
    </div>
    <LinkModal v-model:visible="visibleModal" :footer="null" :title1="current.name">
      <template #content>
        <div class="h-500px overflow-auto h-full">
          <div v-if="current.type == 3" v-html="current.content"> </div>
          <div v-if="current.type == 2" class="h-full">
            <video muted autoplay controls :src="current.content" class="w-full h-full"></video>
          </div>
        </div>
      </template>
    </LinkModal>
  </div>
</template>

<script setup>
  import { SvgIcon } from '/@/components/Icon'
  import { Popover } from 'ant-design-vue'
  import { getFriendLinks } from '/@/api/sys/other'
  import { onBeforeMount, ref } from 'vue'
  import LinkModal from '../LinkModal.vue'
  import { useVContext } from '../useVContext'
  const { rootEmitter } = useVContext()
  const getPopupContainer = (trigger) => {
    return trigger.parentElement
  }

  const _type = [
    {
      type: 1,
      value: '链接',
    },
    {
      type: 2,
      value: '视频',
    },
    {
      type: 3,
      value: '文章',
    },
  ]

  const friendlinks = ref([])
  const rFriendlinks = ref([])

  const visibleModal = ref(false)

  const current = ref({})

  async function getDataF() {
    const resData = await getFriendLinks({
      recommend: 1,
      show: 1,
    })
    rFriendlinks.value = resData
  }
  async function getData() {
    const resData = await getFriendLinks()
    friendlinks.value = resData.reduce((acc, item) => {
      const find = _type.find((e) => e.type == item.type)
      return {
        ...acc,
        [find?.value ?? '其他']: [...(acc[find.value] ?? []), item],
      }
    }, {})
  }

  function onClick(e) {
    current.value = e
    if (e.type == 1) {
      window.open(e.content)
    } else {
      visibleModal.value = true
    }
  }

  onBeforeMount(() => {
    getDataF()
    getData()
    rootEmitter.on('interval:auto', () => {
      getDataF()
      getData()
    })
  })
</script>

<style lang="less" scoped>
  .bg {
    background: url('../../../assets/images/footer.png') no-repeat;
    background-size: 100% 100%;
  }

  .footer {
    transform: translateX(-50%);
  }

  ::v-deep(.fotter-popover) {
    top: -85px !important;
    left: 10px !important;

    .ant-popover-inner-content {
      width: 375px;
      border: 1px solid rgba(57, 102, 132, 1);
    }

    .ant-popover-arrow {
      right: 20px;

      .ant-popover-arrow-content {
        background-color: rgba(57, 102, 132, 1) !important;
      }
    }
  }
</style>
