<template>
  <section class="mai-wrap">
    <div class="mai-container">
      <div class="mai-article py-5" v-for="(item, index) in content" :key="index">
        <div class="article mb-9">
          <div class="title flex items-center mb-5">
            <h3 class="text-2xl mr-4">{{ item.title }}</h3>
            <span class="category text-md px-4 py-1">{{ categoryNames[item.category_id] }}</span>
          </div>

          <p class="text-gray-400 ">{{ item.description }}</p>

        </div>
        <div class="article-bottom flex justify-between">
          <a target="_blank" class="article-link"
             :href="item.fromLink ? item.fromLink: 'javascript:void(0);'">文章来源: {{
              item.fromDesc
            }}</a>
          <span class="text-gray-400">{{ item.time }}</span>
        </div>
      </div>
    </div>
    <div class="mt-32">
      <Pagination
        :current="current"
        :limit="limit"
        :pages="pagesRef"
        :total="total"
        @change="onChangePage"
      />
    </div>
  </section>
</template>

<script setup lang="ts">
enum Category {
  index,
  inform,
  warning,
  rules,
  tptsps,
}

const categoryNames = reactive({
  "1": "动态资讯",
  "2": "预警信息",
  "3": "法律法规",
  "4": "TBT/SPS通报"
})

definePageMeta({
  hidden: true,
  middleware: ['is-search'],
  headerHost: true,
})
// const {searchVal} = props.searchVal
const route = useRoute()
const store = useAppStore()
const searchVal = computed(() => store.getSearchVal)
const {commonApi} = useApi()

const {setTotal, current, total, setCurrentPage, limit, pagesRef} = usePagination(1, 6, 0)
const content = ref([
  {
    title: '市场监管总局发布食品补充检验方法管理规定',
    type: 1,
    description: '12日，记者从北京海关获悉，今年前11个月，北京地区（含中央在京单位）进出口总值3.3万亿元人民币，超过去年全年水平，较去年同期增长19.4%，高于全国增速10.8个百分点。其中，进口2.78万亿元，增长26%；出口5242.4亿元，下降6.3%',
    time: '2022-11-12 12:23',
    fromLink: 'https://www.baidu.com',
    fromDesc: 'TSC技术性贸易措施资讯网',
    category_id: '1',
  }
])

const searchType = ref(0)

function onChangePage(val: number) {
  setCurrentPage(val)
  getList()
}

async function getList() {
  if (searchType.value === 0) {
    const {data} = await commonApi.searchApi({keyword: searchVal.value, page: current.value, limit})

    content.value = data.list;
    setTotal(data.total);
    if (data) {
      // loading.value = false;
    }
  }else {
    const {data} = await commonApi.searchApi({keyword: searchVal.value, page: current.value, limit, category_id: searchType.value})

    content.value = data.list;
    setTotal(data.total);
    if (data) {
      // loading.value = false;
    }
  }

}

watchEffect(() => {
  searchType.value = Category[route.params.id as unknown as any] as unknown as number;
  console.log(searchType.value )
  onChangePage(1)
})
</script>

<style lang="scss" scoped>
.mai-wrap {
  width: 1300px;
  margin: 0 auto;
  padding: 75px 0;

  .mai-article {
    border-bottom: 1px solid #F3F3F3;
  }

  .article-link {
    color: #0055AB;
  }
  .category {
    color: #022950;
    border-radius: 8px;
    border: 1px solid #022950;
  }
}
</style>
