<template>
  <div class="v-component v-user-manage">
    <search-input v-on:searchList="searchList"></search-input>
    <div class="main-box">
      <Table :columns="columns" :data="content" no-data-text="您暂无邀请的用户">
        <template slot-scope="{ row }" slot="useStatus">
          <Tag v-if="row.useStatus==0" color="green">正常</Tag>
          <Tag v-if="row.useStatus==1" color="red">禁用</Tag>
          <Tag v-if="row.useStatus==2" color="orange">未注册</Tag>
        </template>
        <template slot-scope="{ row }" slot="crtDateTime">
          {{row.crtDateTime | $date}}
        </template>
        <template slot-scope="{ row }" slot="inviteDateTime">
          {{row.inviteDateTime | $date}}
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <div class="control">
            <span class="action-item" v-if="row.useStatus==0&&!row.admin" @click="control(index, row)">禁用</span>
            <span class="action-item" v-if="row.useStatus==1&&!row.admin" @click="control(index, row)">启用</span>
            <span class="action-item" v-if="!row.admin" @click="edit(index, row)">编辑</span>
          </div>
        </template>
      </Table>
    </div>
    <div class="page-box">
      <Page :total="total" :page-size="pageSize" :current="page" show-total show-elevator show-sizer @on-change="changePage"
        @on-page-size-change="changePageSize" />
    </div>
    <edit-modal ref="edit-modal" :user-id='userId'></edit-modal>
    <Spin size="large" fix v-if="loading"></Spin>
  </div>
</template>
<script>
import user from '../../apis/user'
import editModal from './edit-modal'
import searchInput from './search-input'
export default {
  name: 'UserManage',
  data () {
    return {
      platId: window.$CONFIG.platId,
      content: [],
      userId: '',
      useStatus: -1,
      userName: '',
      page: 1,
      pageSize: 10,
      total: 0,
      headColumn: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '用户姓名',
          key: 'userName',
          align: 'center',
          width: 100
        },
        {
          title: '微信昵称',
          key: 'nickname',
          align: 'center',
          minWidth: 150
        },
        {
          title: '手机号',
          key: 'phone',
          align: 'center',
          width: 150
        }
      ],
      emailColumn: [
        {
          title: '邮箱',
          key: 'email',
          align: 'center',
          width: 200
        }
      ],
      tailColumn: [
        {
          title: '用户状态',
          key: 'useStatus',
          align: 'center',
          slot: 'useStatus',
          width: 100
        },
        {
          title: '邀请人',
          key: 'inviteUserName',
          align: 'center',
          width: 100
        },
        {
          title: '邀请时间',
          key: 'inviteDateTime',
          align: 'center',
          slot: 'inviteDateTime',
          width: 200
        },
        {
          title: '注册时间',
          key: 'crtDateTime',
          align: 'center',
          slot: 'crtDateTime',
          width: 200
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center',
          width: 120,
          fixed: 'right'
        }
      ],
      loading: false
    }
  },
  computed: {
    columns () {
      let { platId, headColumn, emailColumn, tailColumn } = this
      if (platId === 'general') {
        return headColumn.concat(tailColumn)
      } else {
        return headColumn.concat(emailColumn, tailColumn)
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.loading = true
      user
        .user(this.page, this.pageSize, this.userName, this.useStatus)
        .then(res => {
          let { content = [], totalElements = 0 } = res.data
          this.content = content
          this.total = totalElements
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    searchList ({ userName, useStatus }) {
      this.userName = userName
      this.useStatus = useStatus
      this.changePage(1)
    },
    control (index, row) {
      this.loading = true
      let useStatus = row.useStatus === 0 ? 1 : 0
      let obj = { id: row.id, useStatus: useStatus }
      user
        .changeUserStatus(obj)
        .then(res => {
          this.$Message.success('修改成功')
          this.changePage(1)
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    edit (index, row) {
      this.userId = row.id
      this.$nextTick(() => {
        this.$refs['edit-modal'].openModal()
      })
    },
    changePage (page) {
      this.page = page
      this.getList()
    },
    changePageSize (pageSize) {
      this.pageSize = pageSize
      this.getList()
    }
  },
  components: {
    searchInput,
    editModal
  }
}
</script>