<template>
  <div class="cascader">
    <div class="title" @click="showBox">
      {{ checkArray.length ? setCheckName(checkArray) : "点击选择教研室范围" }}
    </div>
    <div class="box" v-if="show" v-loading="loading">
      <div class="inputBox">
        <input v-model="searchTerm" placeholder="输入教师名字搜索" />
        <i class="search" @click="searchTeacher"></i>
      </div>
      <div class="options">
        <div v-if="filteredOptions.length" class="ul">
          <div
            @click="selectOption(option)"
            v-for="(option, index) in filteredOptions"
            :key="index"
            class="li"
            :class="{ active: checkF === option.id }"
          >
            <span>{{ option.name }}</span>
          </div>
        </div>
        <div v-if="children.length" class="ul">
          <div
            v-for="(option, index) in children"
            :key="index"
            class="li"
            @click="selectOption2(option)"
            :class="{ active: checkF2 === option.id }"
          >
            <span>{{ option.name }}</span>
          </div>
        </div>
        <div v-else-if="checkF" class="ul">
          <div class="liNone">无子分类</div>
        </div>
        <div v-if="teacher.length" class="ul">
          <div
            class="li"
            @click="checkAll()"
            :class="{ active: panCheckAll === 1 }"
          >
            <span>全部</span>
          </div>
          <div
            v-for="(teacher, index) in teacher"
            :key="index"
            class="li"
            @click="selectOption3(teacher)"
            :class="{ active: checkTeacher(teacher) === 2 }"
          >
            <span>{{ teacher.name }}</span>
          </div>
        </div>
        <div v-else-if="checkF2" class="ul">
          <div class="liNone">暂无教师</div>
        </div>
      </div>
      <div class="button">
        <el-button size="small" @click="reset">重置</el-button>
        <el-button type="primary" size="small" @click="confirm">确认</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Cascader",
  props: {
    options: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      searchTerm: "",
      filteredOptions: this.options,
      checkF: "",
      checkF2: "",
      children: [],
      teacher: [],
      loading: false,
      show: false,
      checkArray: [],
      checkArray2: []
    };
  },
  computed: {
    setCheckName() {
      return function(arr) {
        let content = "";
        if (arr.length < 3) {
          content = arr.map(item => item.name).join(" 、 ");
        } else {
          content =
            arr
              .slice(0, 2)
              .map(item => item.name)
              .join(" 、 ") +
            "...共" +
            arr.length +
            "位老师";
        }
        return content;
      };
    },
    checkTeacher() {
      return function(teacher) {
        let a = 1;
        this.checkArray2.forEach(element => {
          if (element.userid == teacher.userid) {
            a = 2;
          }
        });
        return a;
      };
    },
    panCheckAll() {
      if (this.teacher.length && this.checkArray2.length) {
        let userid = this.checkArray2.map(item => item.userid);
        let userid2 = this.teacher.map(item => item.userid);
        let userid3 = this.arrayToArray(userid, userid2);
        if (userid2.length == userid3.length) {
          return 1;
        } else {
          return 2;
        }
      } else {
        return 2;
      }
    }
  },
  methods: {
    showBox() {
      if (this.show) {

        this.reset();
      } else {
				
        this.checkArray2 = JSON.parse(JSON.stringify(this.checkArray));
				if (this.filteredOptions.length && this.checkF=='') {
					this.selectOption(this.filteredOptions[0]);
					if(this.filteredOptions[0].child.length){
						this.selectOption2(this.filteredOptions[0].child[0]);
					}
        }
        
      }
      this.show = !this.show;
    },
    arrayToArray(arrayo, arrayt) {
      let array1 = arrayo;
      let array2 = arrayt;

      let commonElements = [];

      for (let i = 0; i < array1.length; i++) {
        for (let j = 0; j < array2.length; j++) {
          if (array1[i] === array2[j]) {
            commonElements.push(array1[i]);
          }
        }
      }
      return commonElements;
    },
    reset() {
      this.checkArray2 = [];
      this.checkF = "";
      this.checkF2 = "";
      (this.teacher = []), (this.children = []);
    },
    confirm() {
      this.checkArray = JSON.parse(JSON.stringify(this.checkArray2));
      let array = this.checkArray.map(item => item.userid);
      this.$emit("setTeacher", array);
      this.show = false;
    },
    selectOption(option) {
      if (this.checkF == option.id) {
        return;
      }
      console.log(option);
      this.checkF2 = "";
      this.teacher = [];
      this.checkF = option.id;
      this.children = option.child;
      if (option.child.length) {
        this.selectOption2(option.child[0]);
      }
      this.$forceUpdate();
    },
    selectOption2(option) {
      if (this.checkF2 == option.id) {
        return;
      }
      this.checkF2 = option.id;
      this.teacher = [];
      this.loading = true;
      let params = {
        cid: option.id,
        name: this.searchTerm,
        userid: this.$route.query.userid
      };
      this.ajax
        .get(this.$store.state.api + "getTypeTeacher", params)
        .then(res => {
          this.teacher = res.data[0];
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
          console.error(err);
        });
    },
    searchTeacher() {
      if (!this.checkF2) {
        this.$message.error("请先选择子分类");
      }
      this.teacher = [];
      this.loading = true;
      let params = {
        cid: this.checkF2,
        name: this.searchTerm,
        userid: this.$route.query.userid
      };
      this.ajax
        .get(this.$store.state.api + "getTypeTeacher", params)
        .then(res => {
          this.teacher = res.data[0];
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
          console.error(err);
        });
    },
    selectOption3(teacher) {
      if (this.checkTeacher(teacher) == 1) {
        this.checkArray2.push(teacher);
      } else {
        this.checkArray2 = this.checkArray2.filter(
          item => item.userid != teacher.userid
        );
      }
    },
    checkAll() {
      let userid = this.checkArray2.map(item => item.userid);
      let userid2 = this.teacher.map(item => item.userid);
      if (this.panCheckAll == 1) {
        this.checkArray2 = this.checkArray2.filter(
          item => !userid2.includes(item.userid)
        );
      } else {
        let userAarray = this.arrayToArray(userid, userid2);
        let teacher = this.teacher.filter(
          item => !userAarray.includes(item.userid)
        );
        teacher.forEach(item => {
          this.checkArray2.push(item);
        });
      }
    }
  }
};
</script>

<style scoped>
.cascader {
  position: relative;
}

.cascader > .title {
  min-width: 300px;
  background: #fff;
  border-radius: 5px;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  cursor: pointer;
  color: #00000066;
}

.box {
  position: absolute;
  z-index: 999;
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 3px 2px #0000002b;
}

.inputBox {
  padding: 5px 8px;
  border-bottom: 1px solid #c4c4c4;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  align-items: center;
  position: relative;
}

.inputBox > input {
  width: 100%;
  background: #fff;
  border-radius: 5px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #c4c4c4;
  outline: none;
}

.inputBox > .search {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  background: url("../../../../assets/icon/test/test_search.png") no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

.options {
  height: 200px;
  display: flex;
}

.options > .ul {
  height: 100%;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  width: 135px;
  border-right: 1px solid #c4c4c4;
  /* width: 100%; */
  text-align: center;
}

.options > .ul:nth-child(3) {
  border-right: none;
}

.options > .ul > .li.active,
.options > .ul > .li:hover {
  color: #3681fc;
}

.options > .ul > .li,
.options > .ul > .liNone {
  cursor: pointer;
  padding: 10px 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.button {
  padding: 5px 8px;
  border-top: 1px solid #c4c4c4;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  width: 100%;
}
</style>
