<template>
    <div>
        <!--分頁下拉框-->
        <el-select
            v-model="value1"
            placeholder="選擇埋點"
            :clearable="false"
            style="width: 240px"
            size="mini"
            refs="mySelect"
            :reserve-keyword="true"
            filterable
            popper-class="sele"
            :filter-method="filter"
            @change="fun"
            @focus="funx"
            @blur="funb"
            @visible-change="hidden"
            >
            <el-option
                v-for="item in optionfen"
                :key="item.value"
                :label="item.value"
                remote
                :value="item.label"
                placeholder="請輸入"
            >
            </el-option>

            <div  style="bottom: -10px">
                <el-pagination
                small
                @current-change="handleCurrentChange"
                :current-page="currentpage"
                :page-size="pageSize"
                layout="prev, pager,next,total"
                :total="options.length"
                >
                </el-pagination>
            </div>
            </el-select>

    </div>
</template>
<script>
export default {
  data() {
    return {
      options: [],  //總數(shù)據(jù)
      options1: [],  //搜索的數(shù)據(jù)
      optionfen: [],  //當(dāng)前頁碼的數(shù)據(jù)
      value1: "",  //輸入框的值
      currentpage: 1,   //當(dāng)前頁碼
      pageSize: 10,   //每頁展示的條數(shù)
      val: "",   
    };
  },
  props: {
  //向父組件傳遞數(shù)據(jù)
    funName: {
      type: String,
      require: true,
    },
    //接收返回值
    renderingAllKeys: {
      type: Array,
      require: true,
    },
  },
  methods: {
  //分頁的實現(xiàn),currentpage 為頁碼，每頁展示的數(shù)據(jù)為10（可自行更改pageSize）條，分別是在總數(shù)據(jù)options中
  //下標(biāo)從(currentpage -1)*10開始的十條數(shù)據(jù)
    handleCurrentChange(val) {
      this.optionfen = [];
      this.currentpage = val;
      let start = (val - 1) * this.pageSize;
      let end = Number(start) + Number(this.pageSize);
      //此處需要判斷如果計算的結(jié)束下標(biāo)大于總數(shù)據(jù)的長度，則需要修改結(jié)束下標(biāo)
      if (end > this.options.length) {
        end = this.options.length;
      }
      for (let i = start; i < end; i++) {
      //將取到的數(shù)據(jù)展示在頁面
        this.optionfen.push(this.options[i]);
      }
    },
    //選擇數(shù)據(jù)后將相關(guān)數(shù)據(jù)發(fā)送給父組件
    fun() {
      let arr = [];
      this.val = this.value1;
      for (let j in this.optionfen) {
        if (this.value1 == this.optionfen[j].label) {
          arr.push(this.optionfen[j]);
        }
      }
      this.$emit(`${this.funName}`, arr);
    },
    // 獲得焦點
    //獲得焦點的時候跳轉(zhuǎn)到當(dāng)前value所在的頁碼
    funx() {
      this.val = this.value1;
      let flag = false;
      for (let i in this.options1) {
        if (this.options1[i].label == this.value1) {
          flag = true;
          if (i < 10) {
            this.currentpage = 1;
            this.handleCurrentChange(1);
          } else {
            let num = Math.floor((i + 10) / 10);
            this.currentpage = Number(num);
            this.handleCurrentChange(Number(num));
          }
        }
      }
      //如果沒有就默認(rèn)展示第一頁
      if (!flag) {
        this.currentpage = 1;
        this.handleCurrentChange(1);
      }
    },
    // 失去焦點
    //前面每次操作都將輸入框內(nèi)的value值存儲一份到val中，就是為了防止用戶搜索的時候中途關(guān)閉選擇框，這個時候輸入框顯示的就是
    //用戶輸入一半的value值，加上這層邏輯就可以在用戶輸入的數(shù)據(jù)在總數(shù)據(jù)中不存在的時候(也就是無效數(shù)據(jù))，關(guān)閉選擇框
    //之后讓輸入框依舊顯示上一次的正確value值
    funb() {
      this.value1 = this.val;
      $(".drop >>> .el-input__inner").css({
        color: "white",
      });
    },
    hidden(bool) {
      // 隱藏select列表
      if (!bool) {
      //關(guān)閉select下拉框的時候重置頁碼及數(shù)據(jù),并移除事件監(jiān)聽
        this.optionfen = [];
        this.options = this.options1;
        let start = 0;
        let end = Number(start) + Number(this.pageSize);
        if (end > this.options1.length) {
          end = this.options1.length;
        }
        for (let i = start; i < end; i++) {
          this.optionfen.push(this.options1[i]);
        }
        // 移除mousedown事件監(jiān)聽
        removeEventListener("mousedown", function () {}, false);
      } else {
        // 打開select列表
        // 增加mousedown事件監(jiān)聽  當(dāng)點擊分頁時移除輸入框的默認(rèn)事件 ，讓他不會失去焦點（blur),如果不加，就會
        //出現(xiàn)當(dāng)用戶點擊分頁之后，輸入框會失去焦點，這個時候如果用戶需要輸入數(shù)據(jù)進行搜索就需要先刪除輸入框的值再輸入，體驗不好。
        //（elementUI下拉框的默認(rèn)樣式，當(dāng)可搜索時點擊輸入框可直接輸入，不需要刪除上次數(shù)據(jù)）
        document.addEventListener(
          "mousedown",
          function (e) {
            // console.log(e)
            if (
              e.target.tagName === "LI" ||
              (e.target.tagName == "I" && e.target.localName == "i")
            ) {
              e.preventDefault();
            }
          },
          false
        );
        this.funx();
      }
    },
    //搜索方法,將符合的數(shù)據(jù)存入options中，并分頁展示
    filter(val) {
      this.optionfen = [];
      this.value1 = val;
      let arr = [];
      let value = val.toLowerCase();
      for (let i in this.options1) {
        if (this.options1[i].label.toLowerCase().indexOf(value) >= 0) {
          arr.push(this.options1[i]);
        }
      }
      this.options = arr;
      this.handleCurrentChange(1);
    },
  },
  //監(jiān)聽來自父組件的數(shù)據(jù)，當(dāng)數(shù)據(jù)更新時，重置展示
  watch: {
    renderingAllKeys: {
      //深度監(jiān)聽，可監(jiān)聽到對象、數(shù)組的變化
      handler(newV) {
         if(newV.length>0){
               this.options1 = newV;
               this.options = newV;
               this.optionfen=[]
               this.currentpage=1  //標(biāo)記重置
               let start=(this.currentpage-1)*this.pageSize
               let end=Number(start)+Number(this.pageSize)
               if(end>this.options1.length){
                   end=this.options1.length
               }
               for(let i=start;i<end;i++){
                   this.optionfen.push(this.options1[i])
               }
               this.value1 = newV[0].label;  //指標(biāo)重置
               this.val = newV[0].label;  //指標(biāo)重置
               this.fun()
           }else{
               this.options1=[]
               this.options=[]
               this.optionfen=[]
               this.value1=""
           }
              },
      deep: false,
    },
  },
};

</script>
<style lang="less" scoped>
.drop >>> .el-input__inner {
  background: #5183ff !important;
  color: white;
  border: none;
  height: 26px;
  padding: 10px 22px 10px 10px;
  text-align: center;
}
.drop {
  width: 250px;
}
.drop >>> .el-select .el-input .el-select__caret {
  display: none;
}

</style>