<template>
  <view>
      <loading-view v-if="isFirstLoading"></loading-view>
    <!-- 导航栏 -->
    <u-navbar :border-bottom="false" :is-back="false"  :background="{ background: '#ffffff' }">
      <view class="pl-base w-full">
        <u-search @change="Change" @search="Search" placeholder="请输入内容" v-model="searchText" :show-action="false"></u-search>
      </view>
      <template #right>
        <view class="mx-base relative" @tap="$u.routeAuth('/pages/news/index')">
          <u-icon name="chat" size="48"></u-icon>
          <block v-if="news_num>0">
            <u-badge :is-dot="true" size="16" :offset="[0, 2]" class="badge"></u-badge>
          </block>
        </view>
      </template>
    </u-navbar>
      <!-- 广告位 -->
      <view   v-if="cpaceImage.image" @tap="jumpByOption(cpaceImage)" class="w-710rpx m-auto mt-base">
        <u-image border-radius="25rpx" width="100%" height="180rpx" :src="cpaceImage.image" :lazy-load="true"></u-image>
      </view>
      <!-- 有数据 -->
      <block v-if="dataList.length!=0" v-for="(item,index) in dataList" :key="index">
        <view @tap="$u.route('/pages/healthy/healthy',{id:item.id})" class="box-show w-710rpx rounded-xs  h-340rpx mt-base m-auto " >
          <image class="w-full h-full rounded-xs" :src="item.cover" ></image>
        </view>
      </block>
      <!-- 没有数据 -->
      <view v-if="dataList.length==0" class="flex items-center justify-center flex-col mt-80rpx">
        <image  class="w-300rpx h-254rpx" mode="scaleToFill" src="/static/images/user/empty.png"></image>
        <view class="mt-30rpx text-25rpx text-txGray">~ 空空如也 ~</view>
      </view>
  </view>
</template>

<script>
  import CartMixin from '@/pages/shop_cart/mixin';
  export default {
    mixins: [CartMixin],
    data() {
      return {
        isFirstLoading:true,
        article_banner:[],//广告位图片
        searchText: '',
       
        dataList: [], //获取到的数据
      };
    },
    computed: {
      cpaceImage(){
        return this.article_banner.length>0?this.article_banner[0]:{}
      }
    },
    onLoad() {
      this.getCpace()
      this.getclassList()
    },
    methods: {
      //获取广告位
      async getCpace(){
        try{
          let resDate = await this.$api.get('/v1/ads', {
            params: {
              keys: 'article_banner'
            }
          })
          this.article_banner=resDate.article_banner
        }catch(err){}
      },
     //获取文章分类
    async getclassList(){
     try{
       const res=await this.$api.get(`/v1/articles/health-category`, {params: { key:this.searchText}})
       this.dataList=res
     }catch(err){}finally{
       setTimeout(()=>{
          this.isFirstLoading=false
       },200)
      
     }
    },
      Search() {
        this.getclassList()
      },
      Change(e) {
        if (e == '')this.getclassList()
      },
      //跳转页面
      jumpByOption(e) {
        if (!!e.jump_link) {
          if (e.jump_type == 1) {
             this.$u.route(e.jump_link);
          } else if (e.jump_type == 2) {
            this.$u.route(`/pages/web_view/index?url=${e.jump_link}`);
          }
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .badge {
    @apply bg-badge;
  }
  .box-show {
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.12);
  }
</style>
