<template>
  <div class="AppSquare">
    <div class="item" v-for="(item, index) in list" :key="index">
      <image :src="item.accessUrl" mode="aspectFill" @click="preview(item.accessUrl)" />
      <div class="item-bottom">
        <div class="left">
          <image :src="item.avatarUrl || 'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" mode="aspectFill" />
          <span>{{ item.userName }}</span>
        </div>
        <p>{{ item.createTime }}</p>
      </div>
    </div>
    <AiEmpty v-if="!list.length && isMore"></AiEmpty>
  </div>
</template>

<script>
  import { mapActions, mapState } from 'vuex'

  export default {
    appName: '文明广场',
    name: 'AppSquare',
    enablePullDownRefresh: true,

    data () {
      return {
        current: 1,
        list: [],
        isMore: false,
        isFixed: false,
        statusBarHeight: 20,
      }
    },

    computed: {
      ...mapState(['user', 'token'])
    },

    onLoad () {
      this.getList()

      if (!this.token) {
        this.autoLogin()
      } else {
        this.getUserInfo()
      }
    },

    methods: {
      ...mapActions(['autoLogin', 'getUserInfo']),

      preview (url) {
        let imgs = this.list.map(v => v.accessUrl)

        uni.previewImage({
          urls: imgs,
          current: url
        })
      },

      getList () {
        if (this.isMore) {
          uni.stopPullDownRefresh()
          return
        }

        this.$loading()
        this.$instance.post(`/api/appwechatescalation/list`, null, {
          params: {
            current: this.current,
            size: 10,
            status: 1,
            openStatus: 1,
            listType: 0
          }
        }).then(res => {
          if (res.code === 0) {
            this.$hideLoading()
            uni.stopPullDownRefresh()
            if (this.current > 1) {
              this.list = [...this.list, ...res.data.records]
            } else {
              this.list = res.data.records
            }

            if (res.data.records.length < 10) {
              this.isMore = true

              return false
            }

            this.current = this.current + 1
          } else {
            this.isMore = true
          }
        }).catch(() => {
          uni.stopPullDownRefresh()
          this.$hideLoading()
        })
      }
    },

    onReachBottom () {
      this.getList()
    },

    onPullDownRefresh() {
      this.isMore = false
      this.current = 1
      this.getList()
    },
  }
</script>

<style scoped lang="scss">
  .AppSquare {
    margin: 0 32px;
    padding: 20px 0;

    .item {
      margin-bottom: 24px;
      padding: 24px 24px 0;
      background: #FFFFFF;
      box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
      border-radius: 16px;

      & > image {
        width: 100%;
        height: 360px;
      }

      .item-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 96px;

        .left {
          display: flex;
          align-items: center;

          image {
            width: 48px;
            height: 48px;
            margin-right: 16px;
            border-radius: 50%;
          }

          span {
            font-size: 28px;
            color: #333333;
          }
        }

        p {
          color: #999999;
          font-size: 28px;
        }
      }
    }
  }
</style>
