<template>
  <div class="container-htgj-index">
    <div class="top-box">
      <topbar showText="查研观向" />
      <div class="seach" @click="goSearch">
        <div class="seach-top">
          <Icon name="search" color="#8D8D8D" />
          <span>搜索您想要的纪要</span>
        </div>
      </div>
      <div>
        <Tabs v-model:active="tabActive" title-active-color="#2C83FF" title-inactive-color="#707070" @click-tab="onClickTabs">
          <Tab v-for="item in tabBars" :key="item.ChartPermissionId" :name="item.ChartPermissionId" :title="item.PermissionName"></Tab>
        </Tabs>
      </div>
    </div>
    <div>
      <PullRefresh v-model="refreshing" @refresh="onRefresh" v-if="tabActive !== 0">
        <List v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div class="data-cont">
            <div class="report-ul">
              <template v-for="(report, index) in dataList" :key="index">
                <div class="report-item" v-if="index % 2 === 0" @click="goDetail(report)">
                  <div class="item-title">
                    <span class="text-Line">{{ report.Title }}</span>
                  </div>
                  <div class="item-content-img" v-if="report.BodyHtml">
                    <img :src="report.BodyHtml" mode="" />
                  </div>
                  <div class="item-content" v-if="report.Annotation">
                    <p>{{ report.ArticleResponse == 4 ? "核心观点" : "核心结论" }}:</p>
                    <p v-html="report.Annotation"></p>
                  </div>
                  <div class="item-abstract text-Line" v-if="report.Abstract && report.ArticleResponse != 1">摘要：{{ report.Abstract }}</div>
                  <div class="item-createtime">
                    <span>{{ report.PublishDate }}</span>
                    <div class="item-examine" v-if="report.IsResearch">
                      <img src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/examine_icon.png" />
                      <span>{{ report.Pv }}</span>
                    </div>
                  </div>
                </div>
              </template>
            </div>
            <div class="report-ul">
              <template v-for="(report, index) in dataList" :key="index">
                <div class="report-item" v-if="index % 2 != 0" @click="goDetail(report)">
                  <div class="item-title">
                    <span class="text-Line">{{ report.Title }}</span>
                  </div>
                  <div class="item-content-img" v-if="report.BodyHtml">
                    <img :src="report.BodyHtml" mode="" />
                  </div>
                  <div class="item-content" v-if="report.Annotation">
                    <p>{{ report.ArticleResponse == 4 ? "核心观点" : "核心结论" }}:</p>
                    <p v-html="report.Annotation"></p>
                  </div>
                  <div class="item-abstract text-Line" v-if="report.Abstract && report.ArticleResponse != 1">摘要：{{ report.Abstract }}</div>
                  <div class="item-createtime">
                    <span>{{ report.PublishDate }}</span>
                    <div class="item-examine" v-if="report.IsResearch">
                      <img src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/examine_icon.png" />
                      <span>{{ report.Pv }}</span>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </List>
      </PullRefresh>
    </div>
  </div>
</template>
<script>
export default {
  name: "htgjIndex",
};
</script>
<script setup>
import { reactive, onMounted, toRefs, ref } from "vue";
import { Icon, Tab, Tabs, List, PullRefresh } from "vant";
import { report } from "@/api/htgj/api.js";
import { useRoute, useRouter } from "vue-router";
import topbar from "./topbar.vue";
const router = useRouter();
const tabState = reactive({
  tabActive: 0,
  tabBars: [],
});
/* 获取tab分类 */
const getTabs = async () => {
  const res = await report.Tab({});
  if (res.Ret === 200) {
    tabState.tabBars = res.Data.List || [];
    tabState.tabActive = tabState.tabBars[0].ChartPermissionId;
  }
};
/* tab点击 事件 */
const onClickTabs = (e) => {
  listState.finished = false;
  listState.pageNum = 1;
  listState.dataList = [];
  onLoad();
};

const listState = reactive({
  pageSize: 30,
  pageNum: 1,
  loading: false,
  finished: false,
  refreshing: false, //下拉组件
  dataList: [],
});

/* 获取列表 */
const getReportList = async () => {
  const res = await report.getList({
    PageSize: listState.pageSize,
    CurrentIndex: listState.pageNum,
    ChartPermissionId: tabState.tabActive,
  });
  if (res.Ret === 200) {
    listState.loading = false;
    listState.refreshing = false;
    if (res.Data.Paging.IsEnd) {
      listState.finished = true;
    }
    if (res.Data.List) {
      listState.dataList = listState.dataList.concat(res.Data.List);
    }
  }
};

/* 下拉刷新 */
const onRefresh = async () => {
  listState.finished = false;
  listState.pageNum = 1;
  listState.dataList = [];
  onLoad();
};

//触底加载
const onLoad = () => {
  getReportList();
  listState.pageNum++;
};

/* 去往详情 */
const goDetail = (item) => {
  if (item.IsNeedJump) {
    router.push({
      path: "/htgj/strategyDetail",
      query: {
        id: item.ArticleId,
      },
    });
  } else {
    router.push({
      path: "/htgj/detail",
      query: {
        id: item.ArticleId,
      },
    });
  }
};

/* 去往搜索 */
const goSearch = () => {
  router.push("/htgj/search");
};

getTabs();

const { tabActive, tabBars } = toRefs(tabState);
const { dataList, refreshing, loading, finished } = toRefs(listState);
</script>

<style lang="scss">
.container-htgj-index {
  background: #f7f7f7;
  @import "./index.scss";
  .tabs-img {
    padding-top: 16px;
    margin-left: -15px;
    width: 46px;
    height: 26px;
  }
}
</style>
