<template>
  <div class="list">
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      v-if="list.length"
    >
      <card
        v-for="item in list"
        :data="item"
        :key="item.id"
        v-bind="page.card"
        @remove="onRemove"
      ></card>
    </van-list>
    <div class="empty" v-else>{{ page.emptyText }}</div>
    <div class="fixed-box">
      <div class="fixed-inner">
        <div class="fixed-button" @click="toCreatePage">
          {{ page.buttonText }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pages from '@/pages'
import Card from '@/components/Card.vue'
import * as api from '@/api/index'

export default {
  components: { Card },
  metaInfo() {
    return {
      title: this.page.title
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      pagination: { offset: 0, limit: 10 }
    }
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(route) {
        if (!route.query.channel) {
          this.$dialog
            .alert({
              message: '请选择事务'
            })
            .then(() => {
              this.$router.replace({
                name: 'index',
                query: this.$route.query
              })
            })
        }
      }
    }
  },
  computed: {
    // 页面配置
    page() {
      const channel = this.$route.query.channel
      return pages[channel] ? pages[channel]['list'] : {}
    },
    channelId() {
      return this.$route.query.channel_id
    }
  },
  methods: {
    getList() {
      const toast = this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const params = Object.assign(
        { affair_id: this.channelId },
        this.pagination
      )
      api
        .getAffairList(params)
        .then(response => {
          if (response.list.length) {
            this.list = this.list.concat(response.list)
          }
          this.loading = false
          this.finished = response.list.length < this.pagination.limit
          toast.clear()
        })
        .catch(() => {
          this.loading = false
          this.finished = true
          toast.clear()
        })
    },
    onLoad() {
      this.pagination.offset = this.pagination.offset + this.pagination.limit
      this.getList()
    },
    toCreatePage() {
      this.$router.push({ name: 'create', query: this.$route.query })
    },
    onRemove(data) {
      this.$dialog
        .confirm({
          confirmButtonText: '确定',
          message: '确定要删除吗？'
        })
        .then(() => {
          api.deleteAffair(data.id).then(response => {
            if (response.success) {
              this.list = this.list.filter(item => item.id !== data.id)
            } else {
              this.$toast(response.message)
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  beforeMount() {
    this.getList()
  }
}
</script>

<style lang="scss">
.list {
}
</style>
