<template>
  <el-dialog
    class="modify-marker-question"
    :visible.sync="modalIsShow"
    append-to-body
    top="20px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    @opened="visibleChange"
  >
    <div slot="title"></div>

    <el-row type="flex" :gutter="10">
      <el-col :span="12">
        <div class="marker-box">
          <div class="user-title">{{ roleName }}</div>
          <div class="user-search">
            <el-input
              v-model="filterLabel"
              :placeholder="`请输入${roleName}名称`"
              clearable
              size="mini"
              prefix-icon="el-icon-search"
              @input="labelChange"
            ></el-input>
          </div>
          <div class="user-tree">
            <el-tree
              ref="UserTree"
              :data="userTree"
              node-key="id"
              :default-checked-keys="selectedUserIds"
              :props="defaultProps"
              default-expand-all
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <el-checkbox
                  v-if="data.isUser"
                  v-model="node.checked"
                  @change="userChange"
                >
                  {{ node.label }}
                </el-checkbox>
                <span v-else>{{ node.label }}</span>
                <div title="全选" @click.stop>
                  <el-checkbox
                    v-if="!data.isUser && data.children.length"
                    v-model="data.selected"
                    @change="checked => selectNodeAll(checked, data)"
                  ></el-checkbox>
                </div>
              </span>
            </el-tree>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="marker-box marker-box-uq">
          <el-form
            ref="modalFormRef"
            :rules="rules"
            :model="{}"
            label-width="100px"
            label-position="top"
          >
            <el-form-item prop="users" :label="`已选${roleName}：`">
              <el-tag
                v-for="user in selectedUsers"
                :key="user.id"
                closable
                :disable-transitions="false"
                @close="toDeleteUser(user)"
              >
                {{ user.label }}
              </el-tag>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>

    <div class="marker-footer">
      <el-button type="primary" @click="confirm">确认</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>

    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
import { organizationList } from "../../base/api";

export default {
  name: "modify-marker-question",
  props: {
    specialPrivilege: {
      type: String,
      default: ""
    },
    userIds: {
      type: Array,
      default() {
        return [];
      }
    },
    userLimitCount: {
      type: Number,
      default: 5
    }
  },
  data() {
    const usersValidator = (rule, value, callback) => {
      if (!this.selectedUserIds.length) {
        callback(new Error("请选择用户"));
      } else if (
        this.userLimitCount &&
        this.selectedUserIds.length > this.userLimitCount
      ) {
        callback(new Error(`选择用户数不得超过${this.userLimitCount}`));
      } else {
        callback();
      }
    };

    return {
      modalIsShow: false,
      filterLabel: "",
      orgUsers: [],
      userTree: [],
      userList: [],
      selectedUsers: [],
      selectedUserIds: [],
      roleName: "",
      rolesNames: { SUBJECT_HEADER: "科组长" },
      defaultProps: {
        children: "children",
        label: "label"
      },
      rules: {
        users: [
          {
            required: true,
            validator: usersValidator,
            trigger: "change"
          }
        ]
      }
    };
  },
  mounted() {
    this.roleName = this.rolesNames[this.specialPrivilege];
    this.getOrgData();
  },
  methods: {
    visibleChange() {
      this.filterLabel = "";
      this.selectedUserIds = [...this.userIds];
      this.updateSelectedUsersFromUserIds();
      this.labelChange();
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    // user
    async getOrgData() {
      const data = await organizationList({
        specialPrivilege: this.specialPrivilege
      });
      this.parseUserData(data);
      this.getUserList();
    },
    parseUserData(data) {
      const parseUser = list => {
        return list.map(item => {
          // org
          let nitem = {
            id: item.id,
            label: item.name,
            isUser: false,
            selected: false,
            children: []
          };

          if (item["children"] && item["children"].length) {
            nitem.children = [...nitem.children, ...parseUser(item.children)];
          }
          // user
          if (item["sysUserList"] && item["sysUserList"].length) {
            let sysUserList = item.sysUserList;
            const users = sysUserList.map(user => {
              const nuser = {
                id: user.id,
                userId: user.id,
                label: user.realName,
                name: user.realName,
                orgName: item.name,
                loginName: user.loginName,
                selected: false,
                isUser: true
              };
              return nuser;
            });
            nitem.children = [...nitem.children, ...users];
          }
          return nitem;
        });
      };
      this.orgUsers = parseUser(data);
      this.userTree = this.orgUsers;
      this.getUserList();
    },
    getUserList() {
      let userList = [];
      const fetchUser = users => {
        users.forEach(item => {
          if (item["children"] && item["children"].length) {
            fetchUser(item.children);
          } else {
            if (item.isUser) {
              let nitem = { ...item };
              nitem.label = `${nitem.name}(${nitem.orgName})`;
              userList.push(nitem);
            }
          }
        });
      };
      fetchUser(this.orgUsers);

      this.userList = userList;
    },
    labelChange() {
      if (!this.filterLabel) {
        this.userTree = this.orgUsers;
      } else {
        const escapeRegexpString = (value = "") =>
          String(value).replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
        const reg = new RegExp(escapeRegexpString(this.filterLabel), "i");

        this.userTree = this.userList.filter(item => reg.test(item.name));
      }
      this.$refs.UserTree.setCheckedKeys(this.selectedUserIds);
    },
    selectNodeAll(checked, data) {
      let userIds = [];
      const getUserIds = list => {
        list.forEach(item => {
          item.selected = checked;
          if (item.children && item.children.length) {
            getUserIds(item.children);
          } else {
            if (item.isUser) userIds.push(item.userId);
          }
        });
      };
      getUserIds(data.children);

      userIds.forEach(userId => {
        const userPos = this.selectedUserIds.indexOf(userId);
        const includeUser = userPos !== -1;
        if (checked) {
          if (!includeUser) this.selectedUserIds.push(userId);
        } else {
          if (includeUser) {
            this.selectedUserIds.splice(userPos, 1);
          }
        }
      });

      this.$refs.UserTree.setCheckedKeys(this.selectedUserIds);
      this.updateSelectedUsersFromUserIds();

      this.$refs.modalFormRef.validateField("users");
    },
    updateSelectedUsersFromUserIds() {
      this.selectedUsers = this.userList.filter(user =>
        this.selectedUserIds.includes(user.id)
      );
    },
    userChange() {
      if (this.filterLabel) {
        let prevSelectUserIds = this.selectedUsers.map(item => item.id);
        const prevUserListSelectUserIds = this.userTree
          .filter(user => prevSelectUserIds.includes(user.id))
          .map(user => user.id);
        const selectedUsers = this.$refs.UserTree.getCheckedNodes(true);
        const sIds = selectedUsers.map(user => user.id);
        const prevDeletedUserIds = prevUserListSelectUserIds.filter(
          uid => !sIds.includes(uid)
        );
        this.selectedUsers = this.selectedUsers.filter(
          user => !prevDeletedUserIds.includes(user.id)
        );
        prevSelectUserIds = this.selectedUsers.map(item => item.id);

        selectedUsers.forEach(user => {
          if (prevSelectUserIds.includes(user.id)) return;
          const nuser = {
            id: user.id,
            name: user.name,
            label: `${user.name}(${user.orgName})`
          };
          this.selectedUsers.push(nuser);
        });
        this.selectedUserIds = this.selectedUsers.map(item => item.id);
      } else {
        const selectedUsers = this.$refs.UserTree.getCheckedNodes(true);
        this.selectedUsers = selectedUsers.map(user => {
          const nuser = {
            id: user.id,
            name: user.name,
            label: `${user.name}(${user.orgName})`
          };
          return nuser;
        });
        this.selectedUserIds = this.selectedUsers.map(item => item.id);
      }
      this.updateSelectedUsersFromUserIds();
    },
    toDeleteUser(user) {
      const pos = this.selectedUsers.findIndex(item => item.id === user.id);
      this.selectedUsers.splice(pos, 1);
      this.selectedUserIds = this.selectedUsers.map(item => item.id);
      this.$refs.UserTree.setCheckedKeys(this.selectedUserIds);
      this.$refs.modalFormRef.validateField("users");
    },
    // confirm
    async confirm() {
      const valid = await this.$refs.modalFormRef.validate().catch(() => {});
      if (!valid) return;

      this.$emit("confirm", this.selectedUsers);
      this.cancel();
    }
  }
};
</script>
