<template>
  <div style="display:flex;row nowrap">
    <!-- <el-tag
      v-for="user in userData"
      :key="user.id"
    >
      {{ user.name }}
    </el-tag>-->
    <el-button
      v-if="selectable"
      type="primary"
      circle
      size="mini"
      icon="el-icon-plus"
      @click="showDialog()"
    />
  </div>

  <el-dialog
    title="选择人员"
    width="80%"
    height="100px"
    v-model="dialoguser"
    :before-close="handleClose"
    :append-to-body="true"
    :close-on-click-modal="false"
  >
    <el-row>
      <el-col :md="8" :sm="24">
        <el-main class="nopadding">
          <el-tabs type="border-card" stretch="true">
            <el-tab-pane label="按部门分类">
              <el-input placeholder="输入关键字进行过滤" v-model="filterText">
              </el-input>

              <el-tree
                class="filter-tree"
                style="padding-top: 15px"
                :data="deptdata"
                default-expand-all
                :filter-node-method="filterNode"
                ref="tree"
                @node-click="handleNodeClick"
              >
              </el-tree>
            </el-tab-pane>
            <el-tab-pane label="按岗位分类">
              <el-input placeholder="输入关键字进行过滤" v-model="filterTexts">
              </el-input>

              <el-tree
                class="filter-tree"
                style="padding-top: 15px"
                :data="postdata"
                default-expand-all
                :filter-node-method="filterNodes"
                ref="tree"
                @node-click="handleNodeClicks"
              >
              </el-tree>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-col>
      <el-col :md="16" :sm="24">
        <el-header style="border-bottom: none">
          <div class="left-panel">
            <el-input
              v-model="search.keyword"
              placeholder="姓名"
              clearable
              @click="upsearch"
            ></el-input>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="upsearch"
            ></el-button>
          </div>
          <div class="right-panel">
            <el-button type="primary" icon="el-icon-plus" @click="addUser"
              >添加选择</el-button
            >
          </div>
        </el-header>
        <el-main class="nopadding">
          <scTable
            ref="table"
            :data="apiObj"
            row-key="id"
            @selection-change="selectionChange"
            stripe
            hideDo
            @resetQuery="resetQuery"
          >
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column
              label="#"
              type="index"
              width="50"
            ></el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>

            <el-table-column label="手机号" prop="phone"></el-table-column>
            <el-table-column label="部门" prop="belong_dept">
              <template #default="scope">
                <span v-if="scope.row.belong_dept_">{{
                  scope.row.belong_dept_.name
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              prop="create_time"
            ></el-table-column>
          </scTable>
        </el-main>
        <el-row style="padding-top: 8px">
          <el-col :md="16" :sm="24">
            <span style="font-weight:bold">已选人员:</span>{{username}}
          </el-col>
          <el-col :md="8" :sm="24" style="text-align:right">
            <el-button @click="visible = false"
            >取 消</el-button>
          <el-button
            v-if="mode != 'show'"
            type="primary"
            :loading="isSaveing"
            @click="submitfrom()"
            >提 交</el-button >
          </el-col>
          </el-row>
      </el-col>
    </el-row>
  </el-dialog>
</template>
    <script>
import { genTree } from "@/utils/verificate";
export default {
  name: "employee",
  components: {},
  props: {
    value: {
      // 接受外部v-model传入的值
      type: [String],
      default: "",
    },
    user: {
      // 接受外部v-model传入的值
      type: [String],
      default: "",
    },
    closable: {
      // 是否可以关闭标签
      type: Boolean,
      default: () => {
        return true;
      },
    },
    selectable: {
      // 是否可选人员
      type: Boolean,
      default: () => {
        return true;
      },
    },
    multiple: {
      // 是否多选,默认可以多选
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      apiObj: [],
      query: {},
      selection: [],
      search: {
        keyword: null,
      },
      filterText: "",
      filterTexts: "",
      deptdata: [],
      postdata: [],
      username: [],
      userData: [],
      dialoguser: false,
      dataValue: this.value,
    };
  },
  mounted() {
    this.getUser();
    this.getDept();
    this.getPost();
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    filterTexts(val) {
      this.$refs.tree.filter(val);
    },
    dataValue(val) {
      this.$emit("input", val);
      console.log(val);
    },
    userData(val) {
      if (val) {
        this.change();
      }
    },
  },
  methods: {
    showDialog() {
      this.dialoguser = true;
      this.$nextTick(function () {
        this.apiObj.map((item) => {
          if (item.id === this.user) {
            this.$refs.table.toggleRowSelection(item, true);
          }
        });
      });
    },
    //加载人员
    getUser() {
      this.$API.system.user.list.req({ page: 0 }).then((res) => {
        this.apiObj = res;
      });
    },
    upsearch() {
      this.$API.system.user.list
        .req({ name: this.search.keyword, page: 0 })
        .then((res) => {
          this.apiObj = res;
        });
    },
    //加载部门树数据
    async getDept() {
      let res = await this.$API.system.dept.list.req({ page: 0 });
      this.deptdata = genTree(res);
    },
    //加载部门树数据
    async getPost() {
      let res = await this.$API.system.post.list.req({ page: 0 });
      this.postdata = genTree(res);
    },
    filterNode(value, data) {
      console.log(value);
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    filterNodes(value, data) {
      console.log(value);
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //部门点击显示对应的人员
    handleNodeClick(data) {
      this.$API.system.user.list
        .req({ belong_dept: data.id, page: 0 })
        .then((res) => {
          this.apiObj = res;
        });
    },
    //岗位点击显示对应的人员
    handleNodeClicks(data) {
      this.$API.system.user.list.req({ post: data.id, page: 0 }).then((res) => {
        this.apiObj = res;
      });
    },
    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection;
    },
    //删除Tag
    closeTag(name) {
      this.userData.splice(this.userData.indexOf(name), 1);
    },

    addUser() {
      this.username = [];
      this.userData = [];
      if (!this.multiple && this.selection.length > 1) {
        this.$message.error("对应的人员只允许选择一人！");

        return;
      }
      if (!this.selection || this.selection.length === 0) {
        this.msgError("请选择至少一个人员！");
        return;
      }
      this.selection.forEach((item) => {
        this.username.push(item.name);

        this.userData.push({ id: item.id, name: item.name });
      });
      console.log(this.userData);
    },

    change() {
      if (this.tags) {
        alert(1);
        this.dataValue = this.userData.map((e) => e.id).join(",");
        console.log(this.dataValue);
        this.$emit("change", this.dataValue);
      }
    },
    submitfrom() {
      this.dialoguser = false;
      this.change(); // 触发值变化
      this.dataValue = this.userData.map((e) => e.id).join(",");
      this.$emit("submit", this.dataValue);
    },
    //权限设置
    permission() {
      this.dialog.permission = true;
      this.$nextTick(() => {
        this.$refs.permissionDialog.open();
      });
    },

    resetQuery() {
      this.query = {};
    },
  },
};
</script>
