<template>
  <Modal v-model="visible" title="选择人员" width="900" :mask-closable="false">
    <div class="search-div">
      <Row type="flex" :gutter="16" align="middle">
        <Col :span="12">
          <span>姓名：</span>
          <Input v-model="filters.name" placeholder="请输入姓名" @on-enter="handleSearch" />
        </Col>
        <Col :span="12" class="text-right">
          <Button type="primary" class="mr10" @click="handleSearch">搜索</Button>
          <Button @click="handleReset">重置</Button>
        </Col>
      </Row>
    </div>

    <Table
      :data="rows"
      :loading="loading"
      :columns="columns"
      @on-selection-change="onSelectionChange"
      border />

    <Page class="page_style" :total="pager.totalRecord" :current="pager.pageNo" :page-size="pager.pageSize" show-total show-sizer
      @on-change="pageChange" @on-page-size-change="sizeChange" />

    <div slot="footer">
      <Button @click="handleCancel">取消</Button>
      <Button type="primary" :loading="confirming" @click="handleConfirm">确定({{ selectedRows.length }})</Button>
    </div>
  </Modal>
</template>

<script>
import { getUserMultiSelectorList } from '@/api/key-dm-user'

export default {
  name: 'user-multi-selector',
  props: {
    // v-model: value 控制显示
    value: { type: Boolean, default: false }
  },
  data () {
    return {
      visibleInternal: false,
      filters: { name: '' },
      rows: [],
      loading: false,
      pager: { pageNo: 1, pageSize: 10, totalRecord: 0 },
      selectedRows: [],
      confirming: false,
      columns: [
        { type: 'selection', width: 60, align: 'center' },
        { title: '姓名', key: 'name', align: 'center', minWidth: 100 },
        { title: '工号', key: 'gh', align: 'center', minWidth: 120 },
        { title: '邮箱', key: 'email', align: 'center', minWidth: 150 },
        { title: '电话', key: 'phone', align: 'center', minWidth: 120 },
        { title: '手机', key: 'mobile', align: 'center', minWidth: 120 },
        { title: '归属部门', key: 'office_name', align: 'center', minWidth: 150 }
      ]
    }
  },
  computed: {
    visible: {
      get () { return this.value },
      set (v) { this.$emit('input', v) }
    }
  },
  watch: {
    visible (v) {
      if (v) {
        this.pager.pageNo = 1
        this.selectedRows = []
        this.filters.name = ''
        this.fetchList()
      }
    }
  },
  methods: {
    fetchList () {
      this.loading = true
      const payload = {
        pageNo: this.pager.pageNo,
        pageSize: this.pager.pageSize,
        params: this.filters
      }
      getUserMultiSelectorList(payload).then(ret => {
        if (ret.data && ret.data.errcode === 0) {
          const data = ret.data.data || {}
          this.rows = data.results || []
          this.pager.totalRecord = data.totalRecord || 0
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
        }
      }).finally(() => { this.loading = false })
    },
    handleSearch () {
      this.pager.pageNo = 1
      this.fetchList()
    },
    handleReset () {
      this.filters = { name: '' }
      this.pager.pageNo = 1
      this.fetchList()
    },
    pageChange (pageNo) {
      this.pager.pageNo = pageNo
      this.fetchList()
    },
    sizeChange (size) {
      this.pager.pageSize = size
      this.pager.pageNo = 1
      this.fetchList()
    },
    onSelectionChange (list) {
      this.selectedRows = list || []
    },
    handleCancel () {
      this.$emit('cancel')
      this.$emit('input', false)
    },
    handleConfirm () {
      if (this.selectedRows.length === 0) {
        this.$Message.warning('请先选择人员')
        return
      }
      this.confirming = true
      // emit selected users to parent
      this.$emit('on-ok', this.selectedRows)
      this.$emit('input', false)
      this.confirming = false
    }
  }
}
</script>

<style scoped>
.search-div { border: 1px solid #dce1e7; padding: 12px; margin-bottom: 12px; background-color: #f8fbff; }
.mr10 { margin-right: 10px; }
.page_style { margin-top: 12px; text-align: right; }
.text-right { text-align: right; }
</style>
