<template>
  <div class="container">
    <!-- 搜索表单区 -->
    <div class="form">
      <el-form :inline="true" ref="searchform" :model="searchForm" class="demo-form-inline">
        <el-form-item label="用户名称">
          <el-input v-model.trim="searchForm.userName" placeholder="用户名称" :size="searchSize"></el-input>
        </el-form-item>
        <el-form-item label="所在部门">
          <treeselect
            v-model="searchForm.deptId"
            :options="deptOptions"
            placeholder="选择所在部门"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSearchSubmit" :size="searchSize">查询</el-button>
          <el-button @click="onSearchReset" icon="el-icon-refresh" :size="searchSize">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格数据展示区 -->
    <div class="table">
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        ref="table"
        :data="list"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="序号"
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户名"
          align="center">
        </el-table-column>
        <el-table-column
          prop="nickName"
          label="用户昵称"
          align="center">
        </el-table-column>
        <el-table-column
          label="部门名称"
          align="center">
          <template slot-scope="scope">
            <div>{{scope.row.dept.deptName}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="function">
      <el-button style="margin-right:30px;" type="primary" @click="onSubmit" :size="buttonSize">确 定</el-button>
      <el-button @click="onCancel" :size="buttonSize">取 消</el-button>
    </div>
  </div>
</template>

<script>
/**
 * 使用文档
 * 1.引入组件并注册
 *  import UserSearch from '@/components/SysUserSearch/index.vue'
 * 2.使用组件
 *  <UserSearch @submit="onSelectUser" @cancel="() => {openUserSearch = false}" v-if="openUserSearch"></UserSearch>
 * 事件说明：
 *    submit: 点击“确认”后触发事件    返回选中用户信息
 *    cancel：点击“取消”后触发事件    返回数值 0
 */
import { search, deptTreeSelect } from '@/api/system/user.js'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: 'SysUser-Search',
  components: {
    Treeselect
  },
  data() {
    return {
      /** 配置 */
      searchSize: 'small', // 搜索表单大小
      buttonSize: 'default', // 按钮大小
      /** 表格 */
      loading: true, // 加载遮罩
      list: [],
      searchForm: {
        userName: null,
        deptId: null
      },
      // 部门树选项
      deptOptions: [],
      deptId: null,
      user: null
    }
  },
  methods: {
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    /** 用户搜索列表初始化 */
    getUserSearch() {
      search(this.searchForm).then(res => {
        this.loading = false
        this.list = res.data
        this.deptId = res.data[0].dept.deptId 
        this.searchForm.deptId = res.data[0].dept.deptId
      })
    },
    /** 搜索表单重置 */
    onSearchReset() {
      this.searchForm = {
        userName: null,
        deptId: this.deptId
      }
      this.onSearchSubmit()
    },
    /** 搜索表单提交 */
    onSearchSubmit() {
      this.loading = true
      search(this.searchForm).then(res => {
        this.loading = false
        this.list = res.data
      })
    },
    /** 表格选中 */
    handleSelectionChange(selection) {
      if (!selection.length) {
        this.user = null
        return
      }
      this.user = selection[selection.length - 1]
      selection.forEach((item) => {
        if (item.userId !== this.user.userId) {
          this.$refs.table.toggleRowSelection(item, false);
        }
      });
      console.log(this.user)
    },
    onSubmit() {
      if (this.user === null) {
        this.$modal.msgWarning("未选择用户");
        return
      }
      console.log('选中用户：', this.user)
      this.$emit('submit', this.user)
    },
    onCancel() {
      console.log('已取消')
      this.$emit('cancel', 0)
    }
  },
  created() {
    this.getDeptTree()
    this.getUserSearch()
  }
}
</script>

<style lang="less" scoped>
/deep/ .vue-treeselect {
  display: inline-block;
  width: 190px;
  height: 32px;
}
.function {
  margin-top: 30px;
  width: 100%;
  text-align: center;
}
</style>

