<template>
  <view class="pageHome">
    <yx-navbar :isBack="false" title="分享给我"></yx-navbar>
    <view class="pageIndex">
      <view class="tabs">
        <view class="tab" :class="tabIndex == 0 ? 'active' : ''" @click="onClickTab(0)">可视化大屏</view>
        <view class="tab" :class="tabIndex == 1 ? 'active' : ''" @click="onClickTab(1)">自助报表</view>
      </view>
      <view class="search">
        <u-search
          :placeholder="placeholder" v-model="params.name" :show-action="false"
          search-icon-color='#eb5a10' bg-color="#fff" @change="onSearch"
        ></u-search>
      </view>
      <scroll-view class="content" scroll-y @scrolltolower="getData(false)">
        <view class="main" v-if="dataList.length > 0">
          <view class="infoList" v-for="(item, index) in dataList" :key="index" @click="goDetail(item)">
            <img v-if="item.visualData.backgroundUrl" class="infoImg" :src="item.visualData.backgroundUrl" alt="">
            <img v-else class="infoImg" src="../../static/img/no-bg-img.jpg" alt="">
            <view class="infoRight">
              <view class="name">{{ item.visualData.title }}</view>
              <view class="infoBottom">
                <view class="num"><i class="el-icon-view"></i> 访问量:0</view>
                <view class="dateTime">{{ item.date }}</view>
              </view>
            </view>
          </view>
        </view>
        <template v-if="!loading&&!dataList.length">
          <image v-if="params.name" src="../../static/img/no-search.png" style="width: 100%" mode="aspectFit"></image>
          <image v-else src="../../static/img/no-data.png" style="width: 100%" mode="aspectFit"></image>
        </template>
      </scroll-view>
      <tab-bar tabbarValue='分享给我'></tab-bar>
    </view>
  </view>
</template>
<script>
import {getShareList} from '@/common/api.js'
import moment from 'moment'
export default {
  data() {
    return {
      placeholder: "请输入大屏名称",
      tabIndex: 0,
      params: {
        size: 10,
        page: 1,
        name: "",
      },
      dataList: [],
      propsShow: false,
      loading: true,
    }
  },
  onShow() {
    this.getData(true)
  },
  methods: {
    getData(reload) {
      if (reload) {
        this.params.page = 1
      }
      this.loading = true
      if (this.tabIndex === 0) {
        getShareList({...this.params, type: 0}).then(res => {
          let data = res.data.records
          data.forEach(item => {
            item.date = moment(item.visualData.createTime).format('YYYY-MM-DD')
          })
          if (data.length) this.params.page++
          if (reload) {
            this.dataList = data
          } else {
            this.dataList = this.dataList.concat(data)
          }
        }).finally(() => this.loading = false)
      }
      if (this.tabIndex === 1) {
        getShareList({...this.params, type: 1}).then(res => {
          let data = res.data.records
          data.forEach(item => {
            item.date = moment(item.visualData.createTime).format('YYYY-MM-DD')
          })
          if (data.length) this.params.page++
          if (reload) {
            this.dataList = data
          } else {
            this.dataList = this.dataList.concat(data)
          }
        }).finally(() => this.loading = false)
      }
    },
    onClickTab(index) {
      this.placeholder = index ? '请输入报表名称' : '请输入大屏名称'
      this.tabIndex = index
      this.params.name = ''
      this.getData(true)
    },
    onSearch(e) {
      this.getData(true)
    },
    goDetail(item) {
      uni.navigateTo({url: '/pages/detail/bigdata?id=' + item.visualData.id + '&title=' + item.visualData.title})
    },
  },
}
</script>
<style lang="less">
@import "./home.less";
</style>