<template>
  <div>
    <template v-if="!lookflag">
      <el-select
        v-loading="selLoading"
        class="w-100"
        v-model="selectValue"
        :placeholder="placeholder"
        :clearable="false"
        style="width: 240px"
        size="mini"
        ref="mySelect"
        :reserve-keyword="true"
        :disabled="disabled"
        filterable
        popper-class="sele"
        :filter-method="filter"
        @change="fun"
        @focus="funx"
        @blur="funb"
        @visible-change="hidden"
        clearable
      >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="`左:${item.leftNames}-右:${item.rightNames}`"
          remote
          :value="item.codes"
          placeholder="请输入"
        >
          <template v-slot>
            <div class="content">
              <div class="left">{{ item.leftNames }}</div>
              <div class="right">{{ item.rightNames }}</div>
            </div>
          </template>
        </el-option>
        <!-- <div class="options">
          <div class="title">
            <div class="left">左</div>
            <div class="right">右</div>
          </div>
          <div class="content">
            <div
              class="box"
              v-for="item in options"
              @click="clickBoxHandle(item)"
              :key="item.id"
              @mouseenter="mouseenter"
              @mouseleave="mouseleave"
            >
              <div class="left">{{ item.leftNames }}</div>
              <div class="right">{{ item.rightNames }}</div>
            </div>
          </div>
        </div> -->
        <div style="bottom: -10px">
          <el-pagination
            v-if="pageModel.total > pageModel.limit"
            small
            @current-change="handleCurrentChange"
            :current-page="pageModel.pageIndex"
            :page-size="pageModel.limit"
            layout="prev, pager,next,total"
            :total="pageModel.total"
          >
          </el-pagination>
        </div>
      </el-select>
    </template>
    <template v-else
      ><div v-loading="selLoading">{{ showValue }}</div></template
    >
  </div>
</template>



<style scoped lang="scss">
.el-select-dropdown__item {
  //   height: 0px !important;
}

.content {
  display: flex;
  .left {
    width: 100%;
    flex: 1;
    text-align: center;
    display: -webkit-box; /*作为弹性伸缩盒子模型显示。*/
    -webkit-box-orient: vertical; /*作为弹性伸缩盒子模型显示。*/
    -webkit-line-clamp: 1; //*显示的行*/
    overflow: hidden; /*溢出隐藏*/
    /* 对于连字情况或者纯字母，可以解决 */
    word-break: break-all;
  }
  .right {
    width: 100%;
    flex: 1;
    text-align: center;
    display: -webkit-box; /*作为弹性伸缩盒子模型显示。*/
    -webkit-box-orient: vertical; /*作为弹性伸缩盒子模型显示。*/
    -webkit-line-clamp: 1; //*显示的行*/
    overflow: hidden; /*溢出隐藏*/
    /* 对于连字情况或者纯字母，可以解决 */
    word-break: break-all;
  }
}
::v-deep .el-input--mini .el-input__inner {
  height: 38px;
}
.w-100 {
  width: 100% !important;
}
.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>


<script>
import debounce from "lodash/debounce";
import { getUserModuleApi } from "@/api/integrationOption/integrationOption.js";
export default {
  props: {
    ruleForm: {
      type: Object,
      default: () => {
        return {};
      },
    },
    selectInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    placeholder: String,
    value: {
      type: [String, Number],
    },
    itemObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
    lookflag: {
      type: Boolean,
      default: false,
    },
    idKey: {
      type: [Number, String],
      default: 0,
    },
    journalingType: {
      type: [String, Number],
      default: "subject",
    },
  },
  data() {
    return {
      pageModel: {
        total: 0,
        pageIndex: 1,
        limit: 10,
      },
      selLoading: false,
      showValue: "",
      lookLoading: false,
      options: [],
    };
  },
  computed: {
    selectValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  created() {
    if (this.value) {
      // console.log(this.value, "查询");
      this.searchCodes(this.value);
    }
  },
  mounted() {},
  methods: {
    mouseenter(e) {
      e.target.classList.add("active");
    },
    mouseleave(e) {
      e.target.classList.remove("active");
    },
    clickBoxHandle(item) {
      this.selectValue = item.id;
      this.$refs.mySelect.blur();
    },
    // 页码改变事件
    handleCurrentChange(val) {
      this.pageModel.pageIndex = val;
      this.getUserModuleHandle();
    },
    // select选中更改事件
    fun(val) {
      this.$emit(`selectChange`, val);
      this.searchShowValue(val);
      this.$nextTick(() => {
        this.$emit("blur");
      });
    },
    searchShowValue(val) {
      this.options.forEach((item) => {
        if (item.codes == val) {
          this.showValue = item.names;
          this.$nextTick(() => {
            this.$emit("showValue", this.showValue, this.itemObj, this.idKey);
          });
        }
      });
    },
    // 获得焦点
    funx() {
      this.getUserModuleHandle();
    },
    // 失去焦点
    funb() {
      // this.$nextTick(() => {
      // this.$emit("blur");
      // });
    },
    hidden(val) {
      if (!val) {
        this.$nextTick(() => {
          this.$emit("blur");
        });
      }
    },
    //搜索方法,将符合的数据存入options中，并分页展示
    filter: debounce(function (val) {
      this.pageModel.pageIndex = 1;
      this.getUserModuleHandle(val);
    }, 300),
    // filter(val) {

    // },
    focus() {
      this.$refs.mySelect.focus();
    },
    async getUserModuleHandle(val = null) {
      this.selLoading = true;
      const res = await getUserModuleApi(
        {
          tl: "sys_proofService",
          as: "sys_proofService",
          dj: "getJournalingPage",
        },
        {
          journalingType: this.journalingType,
          names: val,
          pageNum: this.pageModel.pageIndex,
          pageSize: 10,
        }
      );
      this.selLoading = false;
      if (res.status == 200) {
        this.options = [];
        this.pageModel.total = res.attribute.total;
        this.options = res.attribute.list;
      }
    },
    async searchCodes(codes) {
      const res = await getUserModuleApi(
        {
          tl: "sys_proofService",
          as: "sys_proofService",
          dj: "getJournaling",
        },
        {
          journalingType: this.journalingType,
          codes: codes,
        }
      );
      if (res.status == 200 && res.attribute) {
        if (!this.options.length) {
          this.options.push({ ...res.attribute });
        }
        if (res.attribute) {
          //   this.showValue = `左:${res.attribute.leftNames}-右:${res.attribute.rightNames}`;
          this.showValue = res.attribute.leftNames
            ? res.attribute.leftNames
            : res.attribute.rightNames;
        }
        this.$nextTick(() => {
          this.$emit("showValue", this.showValue, this.itemObj, this.idKey);
        });
      }
    },
  },
  beforeDestroy() {},
  //监听来自父组件的数据，当数据更新时，重置展示
  watch: {
    value(newv, oldv) {
      if (this.lookflag) {
        this.searchCodes(this.value);
      }
    },
  },
};
</script>
