<template>
  <view style="height: 100%">
    <!-- <custom-nav-bar left-text="资讯" /> -->

    <scroll-view :scroll-y="true" :style="'height:' + (windowHeight + 'px')" @scrolltolower="headleTopLower">
      <view>
        <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
          <block v-for="(item, index) in imageList" :key="index">
            <swiper-item>
              <image :src="item.pic" mode="aspectFill"></image>
            </swiper-item>
          </block>
        </swiper>
      </view>
      <view class="consult-van-tabs">
        <van-tabs ref="tabs" v-model:active="tabs.active" :ellipsis="false"
          @click-tab="onClick($event, { tagId: 'consultTabs' })" :title-active-color="tabs.color"
          :title-inactive-color="inactiveColor">
          <block v-for="(item, index) in tabs.tabsList" :key="index">
            <van-tab :title="item.label" v-if="item.status === 0" :name="item.value" :id="item.value">
              <!-- 新闻列表 -->
              <view class="consult-list">
                <view class="mt-24" :data-item="key" @tap="headleDetails" v-for="(key, index1) in list" :key="index1">
                  <view class="consult-content">
                    <view>
                      <view class="consult-content-title multi-line">{{ key.title }}</view>
                      <view class="consult-content-block">
                        <!-- <text v-if="key.createTime">{{ toods.getDateTime(key.createTime) }}</text> -->
                        <text class="block-margin" v-if="key.publisher">{{ key.publisher }}</text>
                      </view>
                    </view>
                    <image v-if="key.pics" class="consult-image" :src="key.pics" mode="aspectFill"></image>
                  </view>

                  <view class="bor-but"></view>
                </view>
              </view>
            </van-tab>
          </block>
        </van-tabs>
      </view>
    </scroll-view>
  </view>
</template>
<script>
  //index.js
  import * as publicApi from '@/api/publicApi.js'; // 公共 API
  import * as consult from '@/api/consult'; // 咨询
  export default {
    components: {},
    data() {
      return {
        windowHeight: null,

        tabs: {
          tabsList: [],
          active: 0,
          color: '#FE3B53',
          inactiveColor: '#333333'
        },

        indicatorDots: false,
        vertical: false,
        autoplay: true,
        interval: 2000,
        duration: 500,
        imageList: [],
        list: [],
        consultList: [],

        page: {
          page: 1,
          pagesize: 15
        },

        type: '0',
        total: '',
        inactiveColor: ''
      };
    },
    onLoad() {
      const tath = this;
      const res = uni.getSystemInfoSync();
      this.windowHeight = res.windowHeight
      this.getConsultType();
      this.getNewsListApi(1);
      this.getBannerList();
      this.$nextTick(() => {
        this.$refs.tabs.resize();
      })
    },
    methods: {
      // 获取字典类型
      async getConsultType() {
        const res = await publicApi.getDictDataApi({
          dictType: 'consult_type'
        });
        if (res.data) {
          this.tabs = {
            tabsList: res.data.list
          }
        }
      },

      // 切换对应的tabs块
      onClick(event, _dataset) {
        this.$refs.tabs.resize();
        /* ---处理dataset begin--- */
        this.getNewsListApi(event.name, _dataset);
        /* ---处理dataset end--- */
        const {
          tabs
        } = this;
        this.tabs = {
          ...tabs,
          active: event.name
        }

        // 重新赋值给List
        this.getNewsListApi(event.name);
      },

      //  获取banner列表
      async getBannerList() {
        const res = await publicApi.getBannerApi({
          type: this.type
        });
        if (res.data) {
          this.imageList = res.data.list
        }
      },

      // 文章切换
      async getNewsListApi(categoryId) {
        const {
          page,
          pagesize
        } = this.page;
        const params = {
          categoryId: categoryId,
          pageNo: page,
          pageSize: pagesize
        };
        const res = await consult.getNewAPI(params);
        if (res.data) {
          this.list = res.data.list
          this.total = res.data.total
        }
      },

      // 点击进入详情页
      headleDetails(event) {
        const {
          id
        } = event.currentTarget.dataset.item;
        uni.navigateTo({
          url: `/packages/public/pages/details/details?name=咨询详情&referId=${id}`
        });
      },

      // 滑动底部显示
      headleTopLower(e) {}
    }
  };
</script>
<style lang="less">
  .ml-15 {
    margin-left: 30rpx;
  }

  .mt-24 {
    margin-bottom: 24rpx;
  }

  .bor-but {
    border-bottom: 1px solid #efefef;
  }

  page {
    --nav-bar-background-color: transparent;
    --nav-bar-text-color: #ffffff; // 导航栏左侧文案样式
  }

  swiper,
  swiper-item {
    width: 100%;
    height: 330rpx;
  }

  swiper-item>image {
    width: 100%;
    height: 100%;
  }

  .consult-van-tabs {
    margin-top: 24rpx;
  }

  .consult-list {
    padding: 37rpx 40rpx 0 40rpx;
  }

  .consult-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24rpx;
    flex: 1;
  }

  .consult-content>view:nth-child(1) {
    width: 100%;
    margin-right: 10rpx;
  }

  .consult-content>view>.consult-content-title {
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
    margin-bottom: 26rpx;
  }

  .consult-content-block {
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;

    .block-margin {
      margin-left: 24rpx;
    }
  }

  .consult-content>.consult-image {
    height: 150rpx;
    border-radius: 10rpx;
  }

  .loading {
    color: #fe3b53;
    margin: auto;
    text-align: center;
  }
</style>