<template>
  <div>
    <h1>{{ menuTitle }}</h1>
    <div class="space"/>
    <a-space>
      <a-button type="primary" @click="load">{{ action.refresh }}</a-button>
      <a-button @click="currentTitle=addTitle;showDrawer()">{{ action.add }}</a-button>
    </a-space>
    <div class="space"/>
    <a-row>
      <a-col :span="6">
        <a-input-search :placeholder="keywordPlaceHolder" @search="load" v-model="keyword"/>
      </a-col>
    </a-row>
    <div class="space"/>
    <a-spin :spinning="spinning" :delay="500">
      <List v-on:onEdit="onEdit"
            v-on:onDelete="onDelete"
            v-on:load="load"
            :data="data"
      />
    </a-spin>
    <a-drawer
        :title="action.edit"
        placement="right"
        :closable="false"
        :visible="visible"
        @close="onClose"
    >
      <Edit v-if="visible" :action="currentTitle" :form="currentForm"
            v-on:close="onClose"
            v-on:onAdd="onAdd"/>
    </a-drawer>
  </div>
</template>

<script>

import Edit from "./components/edit";
import List from "./components/list"
import Mock from "mockjs";

export default {
  name: "index.vue",
  components: {List, Edit},
  data() {
    return {
      //数据加载动画显示状态
      spinning: false,
      modelName: '活动记录',
      //抽屉布局显示状态
      visible: false,
      //表格数据
      data: [],
      action: {
        add: '新增',
        edit: '编辑',
        delete: '删除',
        refresh: '刷新'
      },
      menuTitle: '这是一个活动模块Demo',
      currentForm: {},
      currentIndex: -1,
      currentTitle: null,
      //关键字搜索
      keyword: '',
      keywordPlaceHolder: '输入主题关键字'
    }
  },
  methods: {
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
      this.currentForm = {}
      this.currentIndex = -1
      this.currentTitle = null
    },
    onDelete(id) {
      this.data = this.data.filter(item => item.id !== id);
    },
    onEdit(record, index) {
      console.info('编辑记录：%o', record)
      this.currentForm = record
      this.currentIndex = index
      this.currentTitle = this.editTitle
      this.showDrawer()
    },
    onAdd() {
      console.info('新增记录:%o', this.currentForm)
      this.data.push({...this.currentForm, ...{id: Mock.Random.id()}})
      this.onClose()
    },
    load() {
      this.spinning = true
      let that = this
      this.$api.customer.getActivityList().then(res => {
            if (res.errCode === 0) {
              that.data = res.data.filter(item => that.keyword === '' || item.subject.includes(that.keyword))
            } else {
              console.error('无法解析列表数据：%o', res)
            }
          }
      ).catch(err => {
        console.error(err)
      }).finally(() => this.spinning = false)
    }
  },
  computed: {
    editTitle: function () {
      return this.action.edit + this.modelName
    },
    addTitle: function () {
      return this.action.add + this.modelName
    }
  }
}
</script>

<style scoped>
.space {
  height: 10px;
}

.ant-table td {
  white-space: nowrap;
}
</style>