<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" size="small">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="queryParams.name" clearable placeholder="请输入部门名称" @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-if="refreshTable" v-loading="loading" :data="deptList" :default-expand-all="isExpandAll"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              highlight-current-row row-key="id"
              style="width: 100%"
              @current-change="handleCurrentChange" @selection-change="handleSelectionChange">
      <el-table-column
        v-if="!isSearchForm&&controlProp.multiple"
        type="selection" width="55">
      </el-table-column>
      <el-table-column label="部门编号" prop="id"></el-table-column>
      <el-table-column label="部门名称" prop="name"></el-table-column>
      <el-table-column :formatter="userNicknameFormat" label="负责人" prop="leader"/>
    </el-table>
  </div>
</template>

<script>
import {listDept, listSimpleUsers} from "../../api/system";

export default {
  name: "OrgChoose",
  props: ['controlProp', 'isSearchForm'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 表格树数据
      deptList: [],
      // 部门树选项
      deptOptions: [],
      // 用户下拉列表
      users: [],
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      // 是否展开
      expand: false,
      // 查询参数
      queryParams: {
        name: undefined,
        status: undefined
      },
      // 表单参数
      form: {},
      currentRow: {},
      multipleSelection: []
    };
  },
  created() {
    this.loadData();
    // 获得用户列表
    listSimpleUsers().then(response => {
      this.users = response.data;
    });
  },
  methods: {
    getData() {
      if (this.controlProp.multiple && !this.isSearchForm) {

        let data = []
        this.multipleSelection.forEach(item => {
          data.push({value: item.id, label: item.name})
        })
        return data;
      }
      return {value: this.currentRow.id, label: this.currentRow.name}
    },
    handleCurrentChange(row) {
      this.currentRow = row;
    },
    handleSelectionChange(row) {
      this.multipleSelection = row;
    },
    /** 查询部门列表 */
    loadData() {
      this.loading = true;
      listDept(this.queryParams).then(response => {
        this.deptList = this.handleTree(response.data, "id");
        this.loading = false;
      });
    },
    // 用户昵称展示
    userNicknameFormat(row, column) {
      if (!row.leaderUserId) {
        return '未设置';
      }
      for (const user of this.users) {
        if (row.leaderUserId === user.id) {
          return user.nickname;
        }
      }
      return '未知【' + row.leaderUserId + '】';
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.loadData();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs['queryForm'].resetFields();
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
};
</script>
