<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- 没有更多了 -->
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="listLength ? $t('common.l5') : ''"
        @load="onLoad"
      >
        <div class="item" v-for="(li, key) in dataObj" :key="key">
          <div class="date-box flex">
            <div class="left">
              <div class="line"></div>
              <div>{{ getDate(key) }}</div>
            </div>
            <div>{{ dateFormat(key) }}</div>
          </div>
          <div class="box">
            <div class="li" v-for="(item, index) in li" :key="index">
              <div class="line"></div>
              <div class="top flex">
                <div class="radius"></div>
                <div>{{ getTime(item.created_at) }}</div>
              </div>
              <div class="title">{{ item.title }}</div>
              <div class="share-box flex">
                <div class="flex" @click="shareLink(item.title)">
                  <img class="share" src="/img/icon/share1.png" alt="极度证券">
                  <div>
                    <!-- 分享 -->
                    {{ $t('common.l53') }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
      <NoData v-if="listLength == 0 && !loading"/>
    </van-pull-refresh>
  </div>
</template>
<script>
import NativeShare from 'nativeshare'
import { copyText } from '@/utils/index'
import { getNews } from "@/api/market";
export default {
  props: ['category'],
  data () {
    return {
      loading: false,
      finished: false,
      refreshing: false,
      pageNum: 0,
      pageSize: 15,
      listLength: 0,
      languageSign: '',
      dataObj: {
      }
    }
  },
  activated() {
    if (this.languageSign != this.language) {
      this.languageSign = this.language
      this.onRefresh()
    }
  },
  created () {
    this.languageSign = this.language
  },
  methods: {
    onLoad() {
      if (this.refreshing) {
        this.listLength = 0;
        this.dataObj = {}
        this.refreshing = false;
      }
      this.pageNum += 1;
      var data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        language: (this.language == 'zh-CN' || this.language == 'zh-TW') ? 'zh' : this.language
      }
      if (['港股','美股','A股', '沪深'].indexOf(this.category) !== -1) {
        data.market = this.category
      } else if (this.category == '综合'){
        data.market = 'crypto'
      } else {
        data.category = this.category
      }
      getNews(data).then((res) => {
        if (Array.isArray(res)) {
          this.loading = false;
          this.finished = true;
          return
        }
        var list = res.list || [];
        list.forEach(item => {
          if (item.created_at) {
            var date = item.created_at.split(' ')[0]
            if (this.dataObj[date]) {
              this.dataObj[date].push(item)
            } else {
              this.$set(this.dataObj, date, [item])
            }
          }
        })
        if (this.pageNum == 1) {
          this.listLength = list.length;
        } else {
          this.listLength += list.length;
        }
        this.loading = false;
        if (this.listLength >= res.total) {
          this.finished = true;
        }
      }).catch(() => {
        this.loading = false;
        this.finished = true;
      })
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.refreshing = true;
      this.pageNum = 0;
      this.onLoad();
    },
    dateFormat(val) {
      var n = this.$parseTime(new Date(), '{y}-{m}-{d}')
      // 今天
      return val == n ? this.$t('common.l60') : this.$parseTime(new Date(val.replace(new RegExp(/-/gm), "/")), '{m}-{d}')
    },
    getDate(val) {
      return val.split('-')[2]
    },
    getTime(val) {
      return this.$parseTime(new Date(val.replace(new RegExp(/-/gm), "/")), '{h}:{i}')
    },
    shareLink(title) {
      try {
        this.nativeShare = new NativeShare()
        var shareData = {
          title: title,
          // desc: '极度证券',
          // img: '',
          // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
          link: window.location.href,
          icon: window.location.origin + '/logo.png',
        }
        this.nativeShare.setShareData(shareData)
        this.nativeShare.call()
      } catch (err) {
        copyText(window.location.href)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.van-pull-refresh {
  height: calc(100vh - 176px);
  overflow-y: auto;
}
.van-list {
  padding: 0 13px 10px;
}
.date-box {
  padding-top: 12px;
  padding-bottom: 14px;
  column-gap: 9px;
  color: #232323;
  font-size: 12px;
  .left {
    border-radius: 3px;
    border: 1px solid #DADADA;
    background-color: #fff;
    width: 21px;
    height: 21px;
    text-align: center;
    font-weight: 600;
    position: relative;
    padding-top: 5px;
  }
  .line {
    position: absolute;
    left: 50%;
    top: 3px;
    transform: translateX(-50%);
    width: 8px;
    height: 1px;
    background-color: var(--color-);
  }
}
.box {
  position: relative;
  .line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    left: 12.5px;
    background-image: linear-gradient(to bottom, #D5D5D5 0%, #D5D5D5 50%, transparent 50%);
    background-size: 1px 8px;
    background-repeat: repeat-y;
  }
  .li {
    padding-bottom: 16px;
  }
  .top {
    padding-left: 8px;
    font-size: 10px;
    color: var(--color-);
    margin-bottom: 4px;
    background-color: #fff;
    position: relative;
    z-index: 2;
    .radius {
      width: 10px;
      height: 10px;
      border: 1px solid #FF6F30;
      background-color: #fff;
      margin-right: 12px;
      position: relative;
      z-index: 2;
      border-radius: 50%;
    }
  }
  .title {
    color: #232323;
    line-height: 25px;
    font-size: 14px;
    padding-left: 28px;
    margin-bottom: 8px;
  }
  .share-box {
    justify-content: flex-end;
    color: #7E7E7E;
    font-size: 10px;
    .flex {
      cursor: pointer;
    }
  }
  .share {
    width: 12px;
    margin-right: 3px;
  }
}
</style>