<template>
  <div>
    <Row>
      <!--查询条件-->
      <Col span="24" />
      <Form :id="keyUserName" onsubmit="return false">
        <Form-item>
          <Input
            v-model="realname"
            placeholder="请输入姓名,回车查询"
            style="width:100%"
            icon="ios-search-strong"
            @on-enter="_pageChange(1)"
          />
        </Form-item>
      </Form>
      <Form :id="keyMaName">
        <input name="groupId" type="hidden">
      </Form>
      </Col>
      <Col span="24" style="margin-bottom: 10px" />
      <el-table
        border
        size="small"
        highlight-current-row
        :data="getPage.records"
        style="width: 100%"
        :height="310"
        class="user-table-selected"
        @row-click="_rowChange"
        @row-dblclick="_dbClick"
      >
        <el-table-column
          v-for="item in pageColumns"
          :key="item.key"
          show-overflow-tooltip
          :prop="item.key"
          :label="item.title"
          :min-width="item.width"
        >
          <template slot-scope="scope">
            <span v-if="item.sex">{{ scope.row[item.key] === 1 ? '女' : '男' }}</span>
            <span v-else>{{ scope.row[item.key] }}</span>
          </template>
        </el-table-column>
      </el-table>
      </Col>
      <Col span="24" />
      <Page
        :total="getPage.total"
        :page-size="getPage.size"
        :current="getPage.current"
        @on-change="_pageChange"
        @on-result-change="_pageChange"
      />
      </Col>
    </Row>
  </div>
</template>
<script>
/**
 * 人员列表
 */
import { userGroup, sysUser } from '../../api'

export default {
  components: {},
  data() {
    return {
      pageParams: { page: 1, rows: 20 },
      pageColumns: [
        { title: '姓名', key: 'realname' },
        { title: '性别', key: 'sex', sex: true, width: 100 }
      ],
      getPage: {},
      selectIds: [],
      selectData: [],
      // 判断是按组织查询还是按照用户编组查询
      type: 0,
      realname: '',
      currentRowData: {},
      keyUserName: 'search-user-info',
      keyMaName: 'search-marshalling-info',
      orgId: ''
    }
  },
  methods: {
    _open(id, keyUserName) {
      this.realname = ''
      this.orgId = id
      if (keyUserName === undefined) {
        this.keyUserName = 'search-user-info'
      } else {
        this.keyUserName = keyUserName
      }
      this.selectIds = []
      this.$emit('on-result-change', this.selectIds)
      this.type = 1
      this._pageChange(1)
    },
    _marshallingOpen(id, keyMaName) {
      $('input[name=groupId]').val(id)
      if (keyMaName === undefined) {
        this.keyMaName = 'search-marshalling-info'
      } else {
        this.keyMaName = keyMaName
      }
      this.selectIds = []
      this.type = 2
      this.$emit('on-result-change', this.selectIds)
      this._pageChange(1)
    },
    _page: async function() {
      const result = await sysUser.pageByOrgId(this._searchParams())

      console.log(result)
      if (result) {
        this.getPage = result
      }
    },
    _searchParams() {
      const data = this.$serialize(this.keyUserName)
      data.orgId = this.orgId
      if (this.realname !== '') {
        data.realname = this.realname
      }
      return this.$extend(data, this.pageParams)
    },
    _pageMa: async function() {
      const result = await userGroup.userPage(this._searchParamsMa())
      if (result) {
        this.getPage = result
      }
    },
    _searchParamsMa() {
      const data = this.$serialize(this.keyMaName)
      if (this.realname !== '') {
        data.realname = this.realname
      }
      if ($('input[name=groupId]').val()) {
        data.groupId = $('input[name=groupId]').val()
      }
      return this.$extend(data, this.pageParams)
    },
    _pageChange(page) {
      this.pageParams.page = page
      if (this.type === 1) {
        this._page()
      } else {
        this._pageMa()
      }
    },
    _rowChange(data, event) {
      this.currentRowData = data // 选中的行数据;
      this.$emit('on-result-change', this.currentRowData)
    },
    // 双击
    _dbClick(data, event) {
      this.currentRowData = data // 选中的行数据;
      this.$emit('on-result-change', this.currentRowData, 'dbClick')
    },
    // 重置
    _refresh() {
      this.getPage = {}
      this.realname = ''
    }
  }
}
</script>
