<template>
  <div>
    <el-select
      ref="selectRef"
      :disabled="disabled"
      :multiple="multiple"
      clearable
      filterable
      remote
      :remote-method="remoteSearch"
      placeholder="请选择"
      v-model.trim="selectValue"
      @change="handleChange"
      @visible-change="handleVisible"
      :loading="loading"
    >
      <div class="option">
        <el-option
          v-for="(item, index) in options"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </div>
      <div class="pagin" v-if="pageNumberAll > 30">
        <el-pagination
          small
          background
          layout="prev, pager, next, total"
          :page-size="pageSize"
          :total="pageNumberAll"
          :current-page="pageNumber"
          @current-change="page"
        >
        </el-pagination>
      </div>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "PageSelect",
  props: {
    // 绑定的值（双向绑定显示的值）
    select: {
      type: [String, Array, Number],
      default: "",
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false,
    },
    // 请求地址
    url: {
      type: String,
      required: true,
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 模糊查询关键字
    filterKey: {
      type: String,
      default: "",
    },
    // 下拉修改时使用到的参数
    editinfo: {
      type: Object,
      default: () => {},
    },
    // 行下标唯一标识
    rowIndex: {
      type: Number,
      default: undefined,
    },
    // 下拉显示的文字
    label: {
      type: String,
      default: "",
    },
    // 下拉选择的值
    value: {
      type: [String, Array, Number],
      default: "",
    },
  },
  data() {
    // 这里存放数据
    return {
      options: [],
      selectValue: "",
      pageNumber: 1,
      pageSize: 30,
      pageNumberAll: 0,
      loading: false,
    };
  },
  mounted() {
    // 函数调用顺序要在options赋值为空数组之后
    this.initData();
    this.getOptionList();
  },
  // 方法集合
  methods: {
    // 处理值改变事件
    handleChange(value) {
      this.$emit("update:select", value);
      this.$emit("getStationType", this.rowIndex, this.tableData);
    },
    // 下拉框隐藏事件
    handleVisible(val) {
      // 下拉框隐藏后重新加载下拉数据
      console.log(this.$refs.selectRef.visible);
      if (!val) {
        this.getOptionList();
      }
    },
    // 过滤，实现模糊查询
    remoteSearch(value = "") {
      let params = {};
      let that = this;
      if (value) {
        params = {
          //   queryConfig: [
          //     {
          //       name: that.filterKey,
          //       condition: "like",
          //       value: value,
          //     },
          //   ],
          name: that.filterKey,
          //   condition: "like",
          //   value: value,
        };
      }
      this.getOptionList(params);
    },
    // 获取列表数据
    getOptionList(query = {}) {
      this.loading = true;
      this.options = [];
      let that = this;
      let params = Object.assign(
        {
          limit: 30,
          page: 1,
        },
        query
      );
      //   this.$http.post(this.url, params).then(({ data: d }) => {
      //     if (d.code == 0) {
      //       this.pageNumberAll = d.data.total;
      //       this.tableData = d.data.records;
      //       d.data.records.forEach((item) => {
      //         that.options.push({
      //           label: item[that.label],
      //           value: item[that.value],
      //         });
      //       });
      //       this.loading = false;
      //     }

      axios
        .post(this.url, params, {
          headers: {
            authorization: getToken(),
          },
        })
        .then((res) => {
          //   if (response.code == 0) {
          this.pageNumberAll = res.data.total;
          this.tableData = res.data.records;
          res.data.records.forEach((item) => {
            that.options.push({
              label: item[that.name],
              value: item[that.crId],
            });
          });
          this.loading = false;
          //   }
        })
        .catch((error) => {
          reject(error);
        });
      //   });
      //   })
      // 这里主要针对修改操作，如果当前下拉显示的值没有在下拉选项数组里（因为options数组里的值是会变化的）
      // 显示时会将value转换成字符串然后显示，所有将这条修改的数据添加到选项数组中
      if (this.editinfo && JSON.stringify(this.editinfo) != "{}") {
        this.options.push(this.editinfo);
      }
    },
    // 初始化数据
    initData() {
      // 当父组件上存在值时，对select值进行初始化
      this.selectValue = this.select;
    },
    // 主表格分页点击事件
    page(page) {
      this.pageNumber = page;
      this.getOptionList(); // 更新
    },
  },
};
</script>
<style lang="scss" scoped>
.option {
  min-height: 50px;
  height: auto;
  max-height: 150px;
  overflow-y: auto;
}
.pagin {
  background: #fff;
}
::-webkit-scrollbar {
  width: 2px;
}
</style>
