<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="请输入姓名" style="width: 200px" />
        </Col>
        <Col :span="12" class="text-right">
          <Button type="primary" class="mr10" @click="handleSearch">搜索</Button>
          <Button type="primary" @click="handleReset">重置</Button>
        </Col>
      </Row>
    </div>

    <Table
      :data="rows"
      :loading="loading"
      :columns="columns"
      border
      highlight-row
      @on-current-change="onCurrentRowChange"
      @on-row-dblclick="onRowDblclick" />

    <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" :disabled="!selectedRow">确定</Button>
    </div>
  </Modal>
</template>

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

export default {
  name: 'user-selector',
  props: {
    // v-model: value 控制显示
    value: { type: Boolean, default: false },
    // 权限参数
    permission: { type: String, default: '' }
  },
  data () {
    return {
      visibleInternal: false,
      filters: { name: '' },
      rows: [],
      loading: false,
      pager: { pageNo: 1, pageSize: 10, totalRecord: 0 },
      selectedRow: null,
      confirming: false,
      columns: [
        { title: '归属部门', key: 'office_name', align: 'center', minWidth: 150 },
        { 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 }
      ]
    }
  },
  computed: {
    visible: {
      get () { return this.value },
      set (v) { this.$emit('input', v) }
    }
  },
  watch: {
    visible (v) {
      if (v) {
        this.pager.pageNo = 1
        this.selectedRow = null
        this.filters.name = ''
        this.fetchList()
      }
    }
  },
  methods: {
    fetchList () {
      this.loading = true
      const payload = Object.assign({},
        { pageNo: this.pager.pageNo, pageSize: this.pager.pageSize, office_code: this.officeCode, permission: this.permission },
        this.filters)
      getUserSelectorList(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()
    },
    onCurrentRowChange (currentRow, oldCurrentRow) {
      this.selectedRow = currentRow
    },
    onRowDblclick (row, index) {
      this.selectedRow = row
      this.handleConfirm()
    },
    handleCancel () {
      this.$emit('cancel')
      this.$emit('input', false)
    },
    handleConfirm () {
      if (!this.selectedRow) {
        this.$Message.warning('请先选择人员')
        return
      }
      this.confirming = true
      // emit selected user to parent
      this.$emit('on-ok', this.selectedRow)
      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>
