<template>
  <div>
    <Row>
      <!--查询条件-->
      <Col v-if="uid===''" span="24">
      <Form id="user-marshalling-form" onsubmit="return false">
        <Form-item>
          <Input
            v-model="groupName"
            placeholder="请输入组名称,回车查询"
            style="width:100%"
            icon="ios-search-strong"
            @on-enter="_search()"
            @on-click="_search"
          />
        </Form-item>
      </Form>
      </Col>
      <Col span="24" style="margin-bottom: 10px">
      <el-table
        stripe
        border
        size="small"
        highlight-current-row
        :data="getPage.records"
        style="width: 100%"
        :height="tableHeight"
        @row-click="_rowChange"
      >
        <el-table-column
          v-for="item in pageColumns"
          :key="item.key"
          show-overflow-tooltip
          :prop="item.key"
          :label="item.title"
          :min-width="item.width"
          :fixed="item.fixed?item.fixed:undefined"
        >
          <template slot-scope="scope">
            <span>{{ scope.row[item.key] }}</span>
          </template>
        </el-table-column>
      </el-table>
      </Col>
      <Col span="24">
      <page :get-page="getPage" @on-result-change="_pageChange" />
      </Col>
    </Row>
  </div>
</template>
<script>
/**
 * 用户编组
 */
import page from '../table/page'
import { lmsMarshalManage } from '../../api'

export default {
  components: { page },
  data() {
    return {
      pageParams: { rows: 20 },
      pageColumns: [
        { title: '组名称', key: 'name', width: 120, fixed: true },
        { title: '描述', key: 'decp', width: 170 },
        { title: '用户数', key: 'num', width: 120 }
      ],
      getPage: {},
      groupName: '',
      uid: '',
      tableHeight: 310
    }
  },
  methods: {
    _open() {
      this.groupName = ''
      this._page()
    },
    _uidOpen(uid) {
      this.uid = uid
      this._page()
    },
    _page: async function() {
      if (this.uid) {
        this.tableHeight = 360
        const result = await lmsMarshalManage.getGroup({ uid: this.uid })
        if (result) {
          this.getPage = result
          if (this.getPage.records.length) {
            this.$emit('on-result-change', this.getPage.records[0])
          }
        }
      } else {
        const result = await lmsMarshalManage.page(this._searchParams())
        if (result) {
          this.getPage = result
        }
      }
    },
    _pageChange(page) {
      this.pageParams.page = page
      this._page()
    },
    _searchParams() {
      const data = this.$serialize('user-marshalling-form')
      if (this.groupName !== '') {
        data.name = this.groupName
      }
      return this.$extend(data, this.pageParams)
    },
    _search() {
      this._page()
    },
    _rowChange(data, event) {
      this.$emit('on-result-change', data)
    }
  }
}
</script>
