<template>
    <div>
        <Row type="flex">
            <Col span="22">
                <Form :model="searchObj" inline>
                    <FormItem>
                        <Input type="text" clearable v-model="searchObj.loginName">
                            <span slot="prepend">登录名</span>
                        </Input>
                    </FormItem>
                    <FormItem>
                        <Input type="text" clearable v-model="searchObj.userName">
                            <span slot="prepend">名称</span>
                        </Input>
                    </FormItem>
                    <FormItem>
                        <Button :loading="tableLoading" type="success" @click="search">搜索</Button>
                    </FormItem>
                </Form>
            </Col>
        </Row>
        <Row>
            <Table border :loading="tableLoading" :columns="columns" :data="dataList">
                <template slot-scope="{ row }" slot="action">
                    <Button type="info" size="small" class="actionBtn" @click="info(row)">查看</Button>
                    <Button type="info" size="small" class="actionBtn" @click="update(row)">修改</Button>
                    <Button type="error" size="small" class="actionBtn" @click="remove(row)">删除</Button>
                </template>
            </Table>
        </Row>
        <br>
        <Row type="flex" justify="end">
            <Page show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord" @on-change="getPageNo"/>
        </Row>
    </div>
</template>

<script>
import {
  getUserInfoList,
  deleteUser
} from '../../../../../api/system/sys-staff-manager'
export default {
  name: 'staffList',
  props: {},
  data () {
    return {
      searchObj: {},
      dataList: [],
      columns: [
        {
          title: '登录名',
          key: 'login_name',
          width: 200,
          align: 'center'
        },
        {
          title: '名称',
          key: 'name',
          width: 200,
          align: 'center'
        },
        {
          title: '手机',
          key: 'mobile',
          width: 200,
          align: 'center'
        },
        {
          title: '拥有角色',
          key: 'role_name',
          width: 280,
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          minWidth: 200,
          align: 'center'
        }
      ],
      tableLoading: false,
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 1
      }
    }
  },
  mounted () {
    this.getUserInfoList(this.pageObj)
  },
  methods: {
    getUserInfoList (data) {
      let param = this.$common.xeUtils.isEmpty(data) ? this.pageObj : data
      this.tableLoading = true
      getUserInfoList(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.dataList = data.data.results
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    initPage () {
      this.pageObj.pageNo = 1
      this.pageObj.pageSize = 10
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.getUserInfoList(this.pageObj)
    },
    search () {
      this.initPage()
      const data = {
        ...this.pageObj,
        loginname: this.$common.xeUtils.trim(this.searchObj.loginName),
        username: this.$common.xeUtils.trim(this.searchObj.userName)
      }
      this.getUserInfoList(data)
    },
    info (row) {
      this.$emit('infoOption', row.id)
    },
    update (row) {
      this.$emit('updateOption', row.id)
    },
    remove (row) {
      this.$Modal.confirm({
        title: '确认删除此用户么？',
        content: '请仔细核对后再操作',
        loading: true,
        onOk: () => {
          this.deleteUser(row.id)
        }
      })
    },
    deleteUser (val) {
      deleteUser({ id: val }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Modal.remove()
          this.getUserInfoList(this.pageObj)
          this.success()
        } else {
          this.$Modal.remove()
          this.error(data)
        }
      })
    },
    success () {
      this.$Message.success('操作成功')
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  watch: {}
}
</script>

<style scoped>
    .actionBtn {
        margin-right: 5px;
        margin-bottom: 5px;
    }
</style>
