<template>
  <DialogCom
    title="选择人员"
    :visible.sync="isShow"
    class="g-dialog-select-safe-check"
    :close-on-click-modal="false"
    width="1100px"
    top="10vh"
    append-to-body
  >
    <div class="el-dialog-div">
      <el-row :gutter="20">
        <!--机构数据-->
        <el-col :span="6" :xs="24">
          <org-tree
            v-model="search.orgId"
            @defaultKey="getDefaultKey"
            @checkChange="checkChange"
            @click="clickTreeNode"
            :defuaultCheckSub="search.checkSub"
          ></org-tree>
        </el-col>
        <el-col :span="18" :xs="24">
          <g-search-table
            ref="searchTable"
            url="/system/user/list"
            method="get"
            :search-data="search"
            :manual="true"
            :pageable="true"
            :select="true"
            :select-default="selectList"
            :drag="false"
            :tableHeight="500"
            :selectLimit="selectLimit"
            @select="onSelect"
          >
            <!-- 搜索 -->
            <template slot="searchs">
              <el-form-item  prop="ruleId" label="用户账号">
                <el-input v-model="search.username"></el-input>
              </el-form-item>
              <el-form-item prop="name" label="用户姓名">
                <el-input v-model="search.name"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="refresh"
                  >搜索</el-button
                >
                <el-button
                  icon="el-icon-refresh"
                  size="mini"
                  @click="resetQuery"
                  >重置</el-button
                >
              </el-form-item>
            </template>

            <!-- 表格 -->
            <template slot="columns">
              <el-table-column                
                label="序号"
                type="index"
                align="center"
                width="50"
              ></el-table-column>
              <el-table-column
                label="用户账号"
                align="center"
                key="username"
                prop="username"
                width="120"
              />
              <el-table-column
                label="用户姓名"
                align="center"
                key="name"
                prop="name"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="所属机构"
                align="left"
                key="orgName"
                prop="orgName"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="状态"
                align="center"
                key="isLock"
                prop="isLock"
                width="80"
              >
              <template slot-scope="scope">
                {{ getLabel(dict.type.sys_user_is_lock,scope.row.isLock) }}
              </template>
              </el-table-column>
            </template>
          </g-search-table>
        </el-col>
      </el-row>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="onHide">关闭</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </div>
  </DialogCom>
</template>
<script>
import GSearchTable from "@/components/table/gx.search.table.vue";
import OrgTree from "@/components/orgTree";
import { mapGetters } from 'vuex'
import {getLabel} from '@/views/commonOption.js'
export default {
  components: { GSearchTable,OrgTree },
  data() {
    return {
      isShow: false,
      selectList: [],
      search: this.emptySearch(),
    };
  },
  dicts:["sys_user_is_lock"],
  computed: {
    ...mapGetters(["orgId"])
  },
  watch: {},
  props: {
    selectLimit: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    getLabel,
    // show(defaultSelect) {
    //   this.search = this.emptySearch();
    //   this.isShow = true;
    //   if (defaultSelect && defaultSelect.map) {
    //     this.selectList = defaultSelect.map((s) => ({ id: s }));
    //   }
    // },
    /**
     * 还没有调试默认选中
     * @param {} defaultSelect 
     */
    show(defaultSelect) {
      this.search = this.emptySearch();      
      this.isShow = true;   
      this.refresh()   
    },
    resetQuery() {
      this.resetForm("search");
      // this.queryParams.orgId = undefined;
      // this.$refs.tree.setCurrentKey(null);
      this.refresh();
    },
    onHide() {
      this.isShow = false;
    },
    onSelect(item) {
      this.selectList = item;
    },
    refresh(){
        this.$nextTick(()=>{
            this.$refs.searchTable.refresh();
        })
    },
    getList() {
        this.$nextTick(()=>{
            this.$refs.searchTable.search();
        })
    },
    onSubmit() {     
      this.$emit("select", this.selectList);
      this.onHide();
    },
    getDefaultKey(key) {
        // debugger
      this.search.orgId = key;      
    },
    //单选框状态改变
    checkChange(state) {
      this.search.checkSub = state;
      this.refresh();
    },
    clickTreeNode(data) {
      this.search.orgId = data.id;
      this.refresh();
    },
    emptySearch() {
      return {
        orgId: this.orgId,
        checkSub: false,
        username: null,
        name: null,
      };
    },
  },
  mounted() {

  },
};
</script>
<style lang="scss" scoped>

.el-dialog-div{
    height: 600px;

    ::v-deep .tree-container{
        height: 500px;
    }
}
</style>
