<template>
  <div class="slot-box padding-16">
    <el-form v-if="showSearch" inline label-width="100px" class="search-form">
      <el-form-item label="会员ID">
        <el-input v-model="query.uid" class="width-200" size="mini" placeholder="会员ID" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="query.phone" class="width-200" size="mini" placeholder="手机号码" />
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="query.nickname" class="width-200" size="mini" placeholder="会员昵称" />
      </el-form-item>
      <el-form-item label="等级">
        <el-select v-model="query.level" class="width-200" size="mini">
          <el-option value="" label="全部" />
          <el-option v-for="item in selectData.levelList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item class="ml-100">
        <button class="blue-btn" @click.prevent="handleSubmit">提交</button>
        <button class="gray-btn ml-10" @click="resetQuery">重置</button>
      </el-form-item>
    </el-form>
    <div v-if="showSearch"
         class="line" />
    <div class="operate-box operate-dialog-margin">
      <button class="refresh menu" @click.prevent="getList">
        <i class="el-icon-refresh-right" />
      </button>
      <button class="search" @click.prevent="showSearch = !showSearch">
        <i class="el-icon-search" />
      </button>
    </div>

    <el-table v-loading="loading"
              border
              :data="list"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}">
      <el-table-column label="昵称" prop="nickname" />
      <el-table-column label="头像">
        <template slot-scope="scope">
          <img v-if="scope.row.avatarUrl" :src="scope.row.avatarUrl" class="circle-box size-35" alt="avatar" />
          <img v-else :src="defaultAvatar" class="circle-box size-35" alt="avatar" />
        </template>
      </el-table-column>
      <el-table-column label="手机号" prop="phone" />
      <el-table-column label="会员ID" prop="uid" />
      <el-table-column label="等级" prop="levelName" />
      <el-table-column label="选择">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="onPick(scope.row.uid)">
            <svg-icon icon-class="list" />
            选择
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination :total="paginate.total"
                :page.sync="paginate.p"
                :limit.sync="paginate.limit"
                @pagination="handleSubmit" />

  </div>
</template>

<script>
import Pagination from '@/components/Pagination/index'
import request from '@/utils/request'
import { postConvertGet } from '@/utils/tools'

/**
 * 用户选择器
 */
export default {
  name: 'UserPicker',
  components: {
    Pagination
  },
  props: {
    source: {
      type: String,
      required: true
    },
    currentUid: { // 当前被编辑的用户id
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      defaultAvatar: './pic/default/default_avatar.png',
      loading: false,
      showSearch: true,
      list: [],
      selectData: [],
      paginate: {
        'limit': 10,
        'p': 1,
        'total': 0
      },
      query: {}
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.getList()
    },
    handleSubmit() {
      this.getList()
    },
    getList() {
      this.loading = true
      const obj = Object.assign({}, this.paginate, this.query, { currentUid: this.currentUid })
      if (obj.createTime) delete obj.createTime
      if (obj.latestLoginTime) delete obj.latestLoginTime

      this.request(obj).then(resp => {
        const data = resp.data
        this.list = data.lists
        this.selectData = data.selectData
        this.paginate = data.paginate
        this.loading = false
      })
    },
    resetQuery() {
      this.query = {}
      this.handleSubmit()
    },
    onPick(uid) {
      this.$emit('on-pick', uid)
    },

    // 数据源
    request(obj) {
      const params = postConvertGet(obj)
      return request({
        url: `${this.source}${params}`,
        method: 'get'
      })
    }
  }
}
</script>

<style scoped>
.slot-box {
  margin: 16px;
}
.search-form {
  margin-bottom: 10px;
}

.line {
  margin-bottom: 25px;
  background-color: #f2f2f2;
  height: 1px;
}
.operate-box {
  margin-bottom: 20px;
}
</style>
