<template>
  <div class="page py-24 px-32">
    <div class="mb-30 flex items-center">
      <router-link to="/dashboard" class="flex items-center text-#000 decoration-none">
        <LeftOutlined class="text-24px pt-4px" />
        <span class="text-30px fw-700 !mb-0 ml-12">Natural Resources</span>
      </router-link>
    </div>
    <div class="mt-24">
      <div class="p-24 mb-24 flex bg-#fff b-rd-6px">
        <img src="@/assets/images/oversea.jpg" class="w-600 h-340 b-rd-6px mr-36" alt="" srcset="" />
        <div>
          <h3 class="text-24px fw-700 text-#3d3d3d">去海外，书写一个时代</h3>
          <div class="mt-24 mb-40px text-14px text-#555">
            <p>易杰出海是易杰集团旗下专注供应链品牌出海的内容媒体和全链路服务平台。</p>
            <p>易杰出海的使命是，成为中国企业跨境出海的忠实记录者与有力推动者。</p>
            <p>
              我们时刻关注全球市场的动向，为您透视海外市场情况，将提供有价值的资讯、深入的分析和切实可行的解决方案视为己任，尽力抹平海外信息差，与您共同寻找和探索下一个市场机遇。
            </p>
            <p>
              我们深耕跨境，聚集了工厂主、品牌方、海外客户、采购商、投资人、行业协会代表、媒体等优质的人脉资源，诚邀您加入易杰出海圈，与我们抱团取暖，共享圈层资源，建立更多合作，拓展更多业务。
            </p>
            <p>我们将为您提供品牌出海的内容信息、出海营销运营、海外资源对接、采购订单合作等全链路服务，助力您在海外扎根发展，乘风破浪。</p>
          </div>
        </div>
      </div>
      <div class="p-24 mb-24 bg-#fff b-rd-6px">
        <div class="flex gap-20">
          <div
            v-for="item in areaList"
            @click="onResourceClick(item)"
            :class="activeId === item.id && 'bg-#00DD99 fw-500 text-#fff b-rd-8px'"
            :key="item.id"
            class="text-#666 py-8 px-20 cursor-pointer text-18px"
          >
            {{ item.name }}
          </div>
        </div>
        <div v-if="resourcesList.length" class="mt-24">
          <div v-for="(item, index) in resourcesList" :key="index" class="mb-20px">
            <div class="flex justify-between items-center bg-#fff b-rd-12px p-24 pr-40px line-box-shadow">
              <div class="flex items-center p-10px b-rd-6px">
                <img src="https://picsum.photos/200/200" class="w-100px h-100px b-rd-6px overflow-hidden" alt="" srcset="" />
                <div class="ml-16px">
                  <div class="text-20px fw-700 mb-14px">{{ item.name }}</div>
                  <div class="text-14px c-#999 mb-8px">{{ item.des || '-' }}</div>
                  <div class="text-14px c-#999">{{ item.createTime }}</div>
                </div>
              </div>
              <a-button type="primary" class="w-100px h-40px !mb-0 !mt-0 b-rd-6px text-18px">View</a-button>
            </div>
          </div>
        </div>
        <a-empty v-else class="py-100px" :image="simpleImage" />
        <div class="mt-24 text-end" v-if="filesParams.total > 0">
          <a-pagination v-model:current="filesParams.pageNo" @change="onChangeFilePage" :total="filesParams.total" :show-less-items="true" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { LeftOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { getAreaListApi, getArticlesListApi, getDownloadCountApi, getPdfListApi } from '@/api/oversea'
import { downloadFileByA } from '@/utils'
import { Empty } from 'ant-design-vue'
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE

const areaList = ref<any>([
  {
    name: 'All',
    id: '',
  },
])
const activeId = ref('')
const resourcesList = ref<any>([])
const params = ref({
  pageNo: 1,
  pageSize: 12,
  total: 0,
  category: '',
})
const filesParams = ref({
  pageNo: 1,
  pageSize: 20,
  total: 0,
})
const onDownload = (item: any) => {
  downloadFileByA(item.url, item.name)
  getDownloadCountApi({ id: item.id })
}
const onResourceClick = (item: any) => {
  activeId.value = item.id
  params.value.pageNo = 1
  getPdfList()
}

const onChangeFilePage = (page: number) => {
  filesParams.value.pageNo = page
  getPdfList()
}

const getPdfList = async () => {
  try {
    const { data } = await getPdfListApi(filesParams.value)
    resourcesList.value = data.result.records
    filesParams.value.total = data.result.total
  } catch (error) {
    console.log(error)
  }
}
onMounted(async () => {
  await getPdfList()
})
</script>
<style lang="less" scoped>
.line-box-shadow {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
</style>
