<template>
  <div class="user-list-con">
    <Card>
      <div class="search-con">
        <Input
          placeholder="请输入用户ID"
          class="search-input"
          v-model="searchContent.uid"
          style="width: 200px"
          clearable
        />
        <Input
          placeholder="请输入登录账号"
          class="search-input"
          v-model="searchContent.account"
          style="width: 200px"
          clearable
        />
        <ButtonGroup class="search-btngroup">
          <Button @click="handleSearch" type="primary">查找</Button>
          <Button type="primary" @click="handleRefresh">
            <Icon type="md-refresh" />
          </Button>
        </ButtonGroup>
      </div>
      <tables
        ref="tables"
        editable
        pagable
        v-model="tableData"
        :columns="columns"
        :currentPage="searchContent.pageNum"
        :pageSize="searchContent.pageSize"
        :totalSize="totalSize"
        :loading="loading"
        @on-change="handleCurrentChange"
      />
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
import { UserStatus, UserStatusObject } from '@/enums'
export default {
  inject: ['reload'],
  components: {
    Tables
  },
  computed: {
    isBrand () {
      return this.$store.getters.isBrand
    }
  },
  data () {
    return {
      UserStatus,
      UserStatusObject,

      searchContent: {
        uid: '',
        account: '',
        pageNum: 1,
        pageSize: 10
      },
      createTime: [],

      columns: [
        { title: 'UID', key: 'uid', align: 'left', minWidth: 180 },
        { title: '手机号', key: 'phone', align: 'center', width: 120 },
        {
          title: '用户昵称',
          key: 'nickName',
          align: 'center',
          minWidth: 100,
          render: (h, params) => {
            return h('span', params.row.nickName ? params.row.nickName : '--')
          }
        },
        { title: '注册码',
          key: 'registerCode',
          align: 'center',
          width: 140,
          render: (h, params) => {
            return h('span', params.row.registerCode ? params.row.registerCode : '--')
          }
        },
        { title: '邀请码', key: 'inviteCode', align: 'center', width: 140 },
        { title: '用户等级',
          key: 'level',
          align: 'center',
          width: 140,
          render: (h, params) => {
            return h('span', '普通会员')
          }
        },
        { title: '状态',
          key: 'status',
          align: 'center',
          width: 140,
          render: (h, params) => {
            // let statusObj = UserStatusObject[params.row.status]
            return h('span', params.row.status == 1 ? '正常' : '冻结')
          }
        },
        { title: '注册时间',
          key: 'createTime',
          align: 'center',
          width: 150,
          render: (h, params) => {
            return h('span', formatTime(params.row.createTime))
          }
        },
        { title: '最近登录时间',
          key: 'lastLogin',
          align: 'center',
          width: 150,
          render: (h, params) => {
            return h('span', params.row.lastLogin ? formatTime(params.row.lastLogin) : '--')
          }
        },
        {
          title: '操作',
          key: 'status',
          align: 'left',
          fixed: 'right',
          minWidth: 100,
          render: (h, params) => {
            let status = params.row.status
            const statusBtn = h(
              'Button',
              {
                props: {
                  type: params.row.status == UserStatus.NORMAL ? 'primary' : 'primary',
                  size: 'small'
                }
              },
              params.row.status == UserStatus.NORMAL ? '锁 定' : '解 锁'
            )
            const statusPoptip = h(
              'Poptip',
              {
                props: {
                  confirm: true,
                  title: `确定要 ${
                    status == UserStatus.NORMAL ? '锁定' : '解锁'
                  } 该用户？`,
                  transfer: true
                },
                on: {
                  'on-ok': () => {
                    this.handleUpdateStatus(params.row)
                  }
                }
              },
              [statusBtn]
            )
            return h('div', [statusPoptip])
          }
        }
      ],
      tableData: [],
      totalSize: 0,
      loading: false,

      newRecommend: ''
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.api({
        apiName: 'getUserList',
        postdata: this.searchContent,
        success: (res) => {
          this.totalSize = res.data.total
          this.tableData = res.data.records
        },
        complete: () => {
          this.loading = false
        }
      })
    },
    handleDateChange (createTime) {
      if (
        createTime &&
        createTime.length == 2 &&
        createTime[0] &&
        createTime[1]
      ) {
        this.searchContent.startTime = new Date(createTime[0]).getTime()
        this.searchContent.endTime =
          new Date(createTime[1]).getTime() + 24 * 60 * 60 * 1000 - 1
      } else {
        this.searchContent.startTime = ''
        this.searchContent.endTime = ''
      }
    },
    handleSearch () {
      this.searchContent.pageNum = 1
      this.requestData()
    },
    handleRefresh () {
      this.reload()
    },
    handleCurrentChange (pageNum) {
      this.searchContent.pageNum = pageNum
      this.requestData()
    },
    handleUpdateStatus (row) {
      let uid = row.uid
      let lock =
        row.status == UserStatus.NORMAL ? UserStatus.FORZEN : UserStatus.NORMAL

      this.api({
        apiName: 'updateUserStatus',
        postdata: {
          uid,
          lock
        },
        success: () => {
          row.status = status
          this.requestData()
          this.$Notice.success({ title: '修改成功！' })
        }
      })
    }
  },
  created () {
    this.requestData()
  }
}
</script>
<style lang="less">
.user-list-con .search-con {
  padding: 10px 0;
  .search {
    &-col {
      display: inline-block;
      width: 150px;
      margin-right: 5px;
    }
    &-input {
      display: inline-block;
      width: 150px;
      margin-right: 5px;
    }
    &-date {
      margin-right: 5px;
    }
    &-btngroup {
      margin-right: 5px;
    }
  }
}
</style>
