<template>
  <div>
    <van-nav-bar title="首页" fixed placeholder safe-area-inset-top />
    <van-swipe class="my-swipe">
      <van-swipe-item v-for="item in homeList" :key="item.linkUrl" @click="$router.push({path:'/text',query:{id:item.linkUrl,title:'新闻资讯'}})">
        <img :src="item.imgUrl" alt="">
      </van-swipe-item>
      <!-- <van-swipe-item><img src="../../assets/swiper1.jpg" alt=""></van-swipe-item>
      <van-swipe-item><img src="../../assets/swiper2.jpg" alt=""></van-swipe-item>
      <van-swipe-item><img src="../../assets/swiper3.jpg" alt=""></van-swipe-item> -->
    </van-swipe>
    <div class="category">
      <!-- 其它 -->
      <div v-if="roleIdStr!=14" @click="$router.push({path:'/followUp/historySupervisor'})">
        <img src="../../assets/icon1.png" alt="">
        <div>随访关爱</div>
      </div>
      <!-- 主任 -->
      <div v-else class="" @click="$router.push({path:'/followUp/director'})">
        <img src="../../assets/icon1.png" alt="">
        <div>随访关爱</div>
      </div>
      <div class="" @click="$router.push({path:'/specialServices/index'})">
        <img src="../../assets/icon2.png" alt="">
        <div>专项服务</div>
      </div>
      <div class="" @click="$router.push({path:'/loveHelp/index'})">
        <img src="../../assets/icon3.png" alt="">
        <div>爱心帮扶</div>
      </div>
      <div v-if="roleIdStr!=21&&roleIdStr!=23" @click="$router.push({path:'/consultation/index'})">
        <img src="../../assets/icon4.png" alt="">
        <div>个案会商</div>
      </div>
      <div v-if="roleIdStr!=21&&roleIdStr!=23" @click="$router.push({path:'/reporting/index'})">
        <img src="../../assets/icon5.png" alt="">
        <div>强制报告</div>
      </div>
    </div>
    <div class="main">
      <van-sticky>
        <van-tabs v-model="active" @change="changeTab">
          <van-tab title="通知公告"></van-tab>
          <van-tab title="政策文件"></van-tab>
          <van-tab title="新闻资讯"></van-tab>
        </van-tabs>
      </van-sticky>
      <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> -->
      <van-list v-model="loading" :immediate-check="false" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <noticeAnnouncement :noticeList="noticeList" v-if="active==0"></noticeAnnouncement>
        <policyDocument :policyList="policyList" v-if="active==1"></policyDocument>
        <newsInformation :newsList="newsList" v-if="active==2"></newsInformation>
      </van-list>
      <!-- </van-pull-refresh> -->
    </div>
  </div>
</template>
<script>
import { pageNews, pagePolicy, pageNotice, homeData } from '../../api/index.js'
import noticeAnnouncement from '../../components/noticeAnnouncement.vue'
import policyDocument from '../../components/policyDocument.vue'
import newsInformation from '../../components/newsInformation.vue'
export default {
  components: { noticeAnnouncement, policyDocument, newsInformation },
  data() {
    return {
      roleIdStr: JSON.parse(sessionStorage.getItem('userInfo')).roleIdStr,
      homeList: '',
      active: 0,
      loading: false,
      finished: false,
      isLoading: false,
      newsform: {
        pageNum: 1,
        pageSize: 20,
      },
      policyform: {
        pageNum: 1,
        pageSize: 20,
      },
      noticeform: {
        pageNum: 1,
        pageSize: 20,
      },
      newsList: '',
      policyList: '',
      noticeList: '',
    }
  },
  created() {
    this.onLoad()
    this.homeData()
  },
  methods: {
    async homeData() {
      const res = await homeData({ operatorId: 1 })
      console.log(res)
      this.homeList = res.data
    },
    async pageNews() {
      const res = await pageNews(this.newsform)
      this.loading = false
      if (this.newsform.pageNum == 1) {
        this.newsList = res.data.records
      } else {
        console.log(this.newsList, '1')
        this.newsList = this.newsList.concat(res.data.records)
      }
      this.newsform.pageNum = this.newsform.pageNum + 1
      if (this.newsList.length >= res.data.total) {
        this.finished = true
      } else {
        this.finished = false
      }
    },
    async pageNotice() {
      const res = await pageNotice(this.noticeform)
      this.loading = false
      if (this.noticeform.pageNum == 1) {
        this.noticeList = res.data.records
      } else {
        this.noticeList = this.noticeList.concat(res.data.records)
      }
      this.noticeform.pageNum = this.noticeform.pageNum + 1
      if (this.noticeList.length >= res.data.total) {
        this.finished = true
      } else {
        this.finished = false
      }
    },
    async pagePolicy() {
      const res = await pagePolicy(this.policyform)
      this.loading = false
      if (this.policyform.pageNum == 1) {
        this.policyList = res.data.records
      } else {
        console.log(this.policyList, '1')
        this.policyList = this.policyList.concat(res.data.records)
      }
      this.policyform.pageNum = this.policyform.pageNum + 1
      if (this.policyList.length >= res.data.total) {
        this.finished = true
      } else {
        this.finished = false
      }
    },
    onLoad() {
      if (this.active == 0) {
        this.pageNotice()
      } else if (this.active == 1) {
        this.pagePolicy()
      } else if (this.active == 2) {
        this.pageNews()
      }
    },
    changeTab() {
      if (this.active == 0) {
        this.noticeform.pageNum = 1
        this.pageNotice()
      } else if (this.active == 1) {
        this.policyform.pageNum = 1
        this.pagePolicy()
      } else if (this.active == 2) {
        this.newsform.pageNum = 1
        this.pageNews()
      }
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false
      }, 1000)
    },
  },
}
</script>
<style lang="scss" scoped>
.my-swipe {
  width: 100%;
  height: 300px;
  overflow: hidden;
  margin: 0 auto;
  transform: translateY(0);
  /deep/.van-swipe-item {
    text-align: center;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
/deep/ .van-swipe__indicator {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.65);
}

/deep/.van-swipe__indicator--active {
  width: 70px;
  border-radius: 8px;
}
.category {
  margin: 24px 5px;
  display: flex;
  justify-content: center;
  > div {
    flex: 1;
    text-align: center;
    img {
      width: 80px;
      height: 80px;
      //   border-radius: 50%;
    }
    div {
      margin-top: 8px;
      font-size: 30px;
      color: #333;
    }
  }
}
.main {
  margin-top: 24px;
}
.van-tabs {
  border-bottom: 1px solid #eee;
}
.van-list {
  padding: 0 30px;
}
</style>
