<template>
  <div>
    <van-sticky>
      <NavBar :is-custom="true" @go-back="handleGoBack">
        <template slot="title">新闻公告</template>
      </NavBar>
      <van-search
        placeholder="请输入标题搜索..."
        v-model="searchValue"
        @search="onSearchChange"
        @input="onSearch"
      />
    </van-sticky>
    <div class="roadWrapper flow_list">
      <van-pull-refresh v-model="isDownLoading" @refresh="onRefresh()">
        <van-list
          v-if="itemList && itemList.length > 0"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          :offset="20"
          @load="onLoad"
          class="new-matter-list"
        >
          <template v-if="itemList.length > 0">
            <template v-for="item in itemList">
              <div
                v-if="compareDate(item.endTime)"
                :key="item.id"
                class="mobile-news-item"
                :class="{ 'readed-wrap': item.reader }"
              >
                <div @click="handleReadNews(item, 'mobile')">
                  <div class="new-title-content">
                    <i
                      v-if="item.icon && item.icon.indexOf('icon-') > -1"
                      :style="{ color: item.iconColor }"
                      :class="[item.icon, { leftIcon: !item.iconColor }]"
                    ></i>
                    <a
                      class="link-dot readed"
                      :class="{
                        'no-icon':
                          !item.icon ||
                          (item.icon && item.icon.indexOf('icon-') == -1),
                      }"
                      :title="item[showFields.title]"
                    >
                      {{ item[showFields.title] }}
                    </a>
                  </div>
                  <div class="news-date readed">
                    <span>{{ dateTimeFormat(item[showFields.date]) }}</span>
                    <span style="margin-left: 32px">{{ item.drafter }}</span>
                  </div>
                </div>
              </div>
            </template>
          </template>
        </van-list>
      </van-pull-refresh>
      <van-empty
        v-if="itemList.length == 0 && finished"
        class="custom-image"
        :image="noDataImage"
        description="暂无内容"
      />
    </div>
    <MobileNewsRead
      ref="mobileNewsRead"
      :news-item="newsItem"
      @refresh="refresh"
    />
  </div>
</template>

<script>
  import moment from 'moment'
  import vanListCommon from '@/mixins/vanListCommon.js'
  import { getColumnByAlias } from '@/api/portal.js'
  import MobileNewsRead from './mobileNewsRead.vue'
  export default {
    name: 'NewsList',
    mixins: [vanListCommon],
    components: { MobileNewsRead },
    props: {
      showFields: {
        type: Object,
        default: () => {
          return {
            title: 'title',
            date: 'createTime',
          }
        },
      },
      formatDateStr: {
        type: String,
        default: 'YYYY-MM-DD',
      },
    },
    data() {
      return {
        searchValue: '',
        ids: [],
        newsItem: {},
        noDataImage: require('@/assets/images/no_data.png'),
      }
    },
    computed: {
      dateTimeFormat() {
        return (item) => {
          return moment(item).format(this.formatDateStr) || '-'
        }
      },
      alias() {
        return this.$route.query.alias
      },
    },
    mounted() {
      this.load()
    },
    methods: {
      compareDate(date) {
        if (date) {
          const endTime = new Date(Date.parse(date))
          const currentDate = Date.parse(new Date())
          return endTime > currentDate
        } else {
          return true
        }
      },
      handleGoBack() {
        this.$router.push({
          path: '/home',
        })
      },
      //上拉加载
      //异步请求数据 ，我们的项目时封装好的方法，此处只是调用
      // 获取新闻列表, 轮播图
      onLoad() {
        let params = {
          pageBean: {
            page: this.page,
            pageSize: this.pageSize,
            showTotal: true,
          },
          querys: [
            {
              property: 'classifyId',
              value: this.ids,
              group: 'advance',
              relation: 'AND',
              operation: 'IN',
            },
          ],
        }
        if (this.searchValue) {
          params.querys.push({
            property: 'title',
            value: this.searchValue,
            operation: 'LIKE',
            relation: 'OR',
            group: 'quickSearch',
          })
        }
        let _self = this
        this.$requestConfig
          .getListAndImg(params)
          .then((response) => {
            _self.loadData(response, _self)
          })
          .catch((error) => {})
          .finally(() => {
            _self.isDownLoading = false
            _self.isUpLoading = false
          })
      },
      load() {
        if (!this.alias) {
          return
        }
        getColumnByAlias(this.alias).then((response) => {
          let params = JSON.parse(response.dataParam)
          this.ids = params.announcementOrPictures || []
          if (this.ids.length > 0) {
            this.onRefresh()
          }
        })
      },
      handleReadNews(newsItem, type) {
        this.newsItem = newsItem
        this.$emit('newUnread')
        this.$refs.mobileNewsRead.showDialog()
      },
      async refresh() {
        this.onRefresh()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .van-search {
    padding: 16px 16px 8px;
    .van-search__content {
      border-radius: 8px;
    }
  }
  //手机端样式
  .mobile-news-item {
    padding: 16px;
    font-size: 16px;
    color: #262626;
    font-weight: bold;
    border-bottom: 0.5px solid #e6e6e6;
    .new-title-content {
      margin-bottom: 12px;
    }
    .news-date {
      font-size: 12px;
      font-weight: 400;
      color: #8c8c8c;
    }
  }
  .mobile-news-content {
    padding: 6px 12px;
  }
  .roadWrapper {
    height: calc(#{$vh} - 104px);
    overflow: scroll;
    background-color: #fff;
  }
  .readed-wrap {
    .readed {
      color: #d5d5d5 !important;
      &:before {
        background-color: #d5d5d5;
      }
    }
  }
</style>