<template>
  <div class="v-component v-whitelist-manage">
    <div class="search-group-wrap">
      <search-input @searchList="searchList"></search-input>
      <Button type="primary" @click='addWhiteList'>添加白名单</Button>
    </div>

    <div class="main-box">
      <Table :columns="columns" :data="content">
        <template slot-scope="{ row }" slot="invitedStatus">
          <Tag v-if="row.status==0" color="red">未邀请</Tag>
          <Tag v-if="row.status==1" color="green">已邀请</Tag>
        </template>
        <template slot-scope="{ row }" slot="registerStatus">
          <Tag v-if="row.registerStatus==0" color="red">未注册</Tag>
          <Tag v-if="row.registerStatus==1" color="green">已注册</Tag>
        </template>
        <template slot-scope="{ row }" slot="action">
          <div class="control">
            <span class="action-item" @click="openModal('delete-modal', row)" v-if="row.registerStatus===0||row.status===0">删除</span>
          </div>
        </template>
      </Table>
    </div>
    <div class="page-box">
      <Page :total=total @on-change="changePage" @on-page-size-change="changePageSize" :current="page" show-total
        show-elevator show-sizer />
    </div>
    <invite-general-modal ref="invite-general-modal" @success="changePage(1)"></invite-general-modal>
    <invite-other-modal ref="invite-other-modal" @success="changePage(1)"></invite-other-modal>
    <delete-modal ref="delete-modal" @delete="deleteWhiteList" title="删除白名单" content="确定要删除该白名单吗？"></delete-modal>
    <Spin size="large" fix v-if="loading"></Spin>
  </div>
</template>

<script>
import user from '../../apis/user'
import whiteList from '../../apis/whiteList'
import inviteGeneralModal from './invite-general-modal'
import inviteOtherModal from './invite-other-modal'
import searchInput from './search-input'
import deleteModal from '../delete-modal'
export default {
  data () {
    return {
      platId: window.$CONFIG.platId,
      page: 1,
      pageSize: 10,
      total: 0,
      registerStatus: -1,
      phone: '',
      content: [],
      userId: '',
      indexColumn: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        }
      ],
      basicColumn: [
        {
          title: '姓名',
          key: 'userName',
          width: 100,
          align: 'center'
        },
        {
          title: '手机号',
          key: 'phone',
          align: 'center'
        },
        {
          title: '邮箱',
          key: 'email',
          align: 'center'
        }
      ],
      phoneColumn: [
        {
          title: '手机号',
          key: 'phone',
          align: 'center'
        }
      ],
      otherColumn: [
        {
          title: '是否邀请',
          key: 'invitedStatus',
          align: 'center',
          slot: 'invitedStatus'
        },
        {
          title: '是否注册',
          key: 'registerStatus',
          align: 'center',
          slot: 'registerStatus'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      loading: false
    }
  },
  computed: {
    columns () {
      let { platId, indexColumn, basicColumn, phoneColumn, otherColumn } = this
      if (platId === 'general') {
        return indexColumn.concat(phoneColumn, otherColumn)
      } else {
        return indexColumn.concat(basicColumn, otherColumn)
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.loading = true
      whiteList
        .whiteList(this.page, this.pageSize, this.phone, this.registerStatus)
        .then(res => {
          let { content, totalElements } = res.data
          this.content = content
          this.total = totalElements
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    searchList ({ registerStatus, phone }) {
      this.registerStatus = registerStatus
      this.phone = phone
      this.changePage(1)
    },
    addWhiteList () {
      if (this.platId === 'general') {
        this.$refs['invite-general-modal'].openModal()
      } else {
        this.$refs['invite-other-modal'].openModal()
      }
    },
    openModal (modal, row) {
      this.userId = row.id
      this.$nextTick(() => {
        this.$refs[modal].openModal()
      })
    },
    deleteWhiteList () {
      this.loading = true
      whiteList
        .whiteListDel(this.userId)
        .then(res => {
          this.changePage(1)
          this.$Message.success('删除成功')
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    changePage (page) {
      this.page = page
      this.getList()
    },
    changePageSize (pageSize) {
      this.pageSize = pageSize
      this.getList()
    }
  },
  components: {
    searchInput,
    inviteGeneralModal,
    inviteOtherModal,
    deleteModal
  }
}
</script>