<template>
  <div>
    <Row>
      <!--查询条件-->
      <Col span="24" />
      <Form id="user-check-form-user-info" onsubmit="return false">
        <Form-item>
          <Input
            v-model="realname"
            name="realname"
            placeholder="请输入姓名,回车查询"
            style="width:100%"
            icon="ios-search-strong"
            @on-enter="_pageChange(1)"
            @on-click="_pageChange(1)"
          /></Input>
          <input name="orgId" type="hidden">
        </Form-item>
      </Form>
      <Form id="search-marshalling-user-info">
        <input name="groupId" type="hidden">
        <input v-model="realname" name="realname" type="hidden">
      </Form>
      </Col>
      <Col span="24" style="margin-bottom: 10px" />
      <Table
        :loading="loading"
        :columns="pageColumns"
        :data="getPage.records"
        size="small"
        border
        highlight-row
        :height="300"
        class="tableClassName"
        @on-row-click="_rowChange"
      />
      </Col>
      <Col span="24" />
      <Page
        :total="getPage.total"
        :page-size="getPage.size"
        placement="top"
        show-total
        @on-change="_pageChange"
      />
      </Col>
    </Row>
  </div>
</template>
<script>
/**
 * 用户编组
 */
export default {
  components: {},
  data() {
    return {
      loading: true,
      pageParams: { rows: 20 },
      pageColumns: [
        {
          title: '姓名',
          key: 'realname',
          ellipsis: true
        },
        {
          title: '用户名',
          key: 'username',
          width: 150,
          ellipsis: true
        },
        {
          title: '性别',
          key: 'sex',
          ellipsis: true,
          render: (h, params) => {
            const operate = []
            if (this.index === params.row._index) {
              operate.push(
                h('div', [
                  h('strong', params.row.sex === 1 ? '女' : '男'),
                  h('Icon', {
                    style: {
                      float: 'right'
                    },
                    props: {
                      type: 'checkmark',
                      color: '#19be6b',
                      size: '17'
                    }
                  })
                ])
              )
            } else {
              operate.push(h('div', params.row.sex === 1 ? '女' : '男'))
            }
            return h('div', operate)
          }
        }
      ],
      getPage: {},
      selectIds: [],
      selectData: [],
      type: 0,
      realname: '',
      index: '-1',
      currentRowData: {}
    }
  },
  methods: {
    _open(id) {
      $('input[name=orgId]').val(id)
      this.selectIds = []
      this.$emit('on-result-change', this.selectIds)
      this.type = 1
      this._page()
    },
    _indexChange() {
      this.index = -1
    },
    _openClear() {
      $('input[name=realname]').val('')
    },
    _marshallingOpen(data) {
      $('input[name=groupId]').val(data)
      this.selectIds = []
      this.type = 2
      this.$emit('on-result-change', this.selectIds)
      this._page1()
    },
    _page() {
      this.$store
        .dispatch('SysUser/userSelect', this._searchParams())
        .then(() => {
          this.loading = false
          this.getPage = this.$store.state.SysUser.userList
        })
    },
    _page1() {
      this.$store
        .dispatch('LmsMarshalManage/userPage', this._searchParams1())
        .then(() => {
          this.loading = false
          this.getPage = this.$store.state.LmsMarshalManage.userPage
        })
    },
    _searchParams1() {
      const data = this.$serialize('search-marshalling-user-info')
      return this.$extend(data, this.pageParams)
    },
    _pageChange(page) {
      this.pageParams.page = page
      if (this.type === 1) {
        this._page()
      } else {
        this._page1()
      }
    },
    _rowChange(data, index) {
      this.currentRowData = data // 选中的行数据;
      this.index = index
      this.$emit('on-result-change', this.currentRowData)
    },
    _searchParams() {
      const data = this.$serialize('user-check-form-user-info')
      return this.$extend(data, this.pageParams)
    },
    _search() {
      this._page()
    },
    _refresh() {
      this.getPage.records = []
      this.realname = ''
      $('input[name=realname]').val('')
    },
    _deleteAll() {
      this.getPage = {}
      this.loading = true
    }
  }
}
</script>
