<template>
    <div>
        <Row>
            <Form :model="selectObj" inline>
                <FormItem>
                    <Input v-model="selectObj.loginname" clearable placeholder="登录名"/>
                </FormItem>
                <FormItem>
                    <Input v-model="selectObj.mobile" clearable placeholder="手机号"/>
                </FormItem>
                <FormItem>
                    <Button type="primary" :loading="tableLoading" @click="searchAction">搜索</Button>
                </FormItem>
            </Form>
        </Row>
        <Row>
            <Table :loading="tableLoading" border :columns="tableColumns" :data="tableData">
                <template slot-scope="{ row }" slot="action">
                    <Button type="primary" class="actionBtn" size="small" @click="updateAction(row)">修改</Button>
                    <Button v-has="'SYS_user_shanchu'" type="error" class="actionBtn" size="small" @click="delAction(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 {
  getUserList,
  setUserInfo
} from '../../../../../api/system/system'

export default {
  name: 'UserList',
  props: {
    companyId: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      tableLoading: false,
      tableColumns: [
        {
          title: '归属公司',
          key: 'company_name',
          align: 'center'
        },
        {
          title: '登录名',
          key: 'login_name',
          align: 'center'
        },
        {
          title: '名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '手机',
          key: 'mobile',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      tableData: [],
      selectObj: {},
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 1
      }
    }
  },
  watch: {
    companyId (val) {
      if (val) {
        const param = {
          id: val,
          ...this.pageObj
        }
        this.getUserListAction(param)
      }
    }
  },
  methods: {
    success () {
      this.$Message.success('操作成功')
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getUserListAction (data) {
      const obj = {
        id: this.companyId,
        ...this.pageObj
      }
      let param = this.$common.xeUtils.isEmpty(data) ? obj : data
      this.tableLoading = true
      getUserList(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    searchAction () {
      this.pageObj.pageNo = 1
      const param = {
        id: this.companyId,
        ...this.selectObj,
        ...this.pageObj
      }
      this.getUserListAction(param)
    },
    updateAction (row) {
      this.$emit('updateOption', row.id)
    },
    delAction (row) {
      this.$Modal.confirm({
        title: '确认删除此用户么？',
        content: '请仔细核对后再操作',
        loading: true,
        onOk: () => {
          this.deleteUser(row.id)
        }
      })
    },
    deleteUser (val) {
      setUserInfo({ id: val, del: '1' }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Modal.remove()
          const param = {
            id: this.companyId,
            ...this.selectObj,
            ...this.pageObj
          }
          this.getUserListAction(param)
          this.success()
        } else {
          this.$Modal.remove()
          this.error(data)
        }
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      const param = {
        id: this.companyId,
        ...this.selectObj,
        ...this.pageObj
      }
      this.getUserListAction(param)
    }
  },
  mounted () {
  }
}
</script>

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