<template>
  <el-select
    v-model="childSelectedValue"
    :filterable="remote"
    multiple
    :loading="loading"
    :remote="remote"
    :size="size"
    :remote-method="remoteMethod"
    :clearable="clearable"
    @change="handleChange"
    @clear="handleClear"
    @focus="handleFocus"
    :style="{ width: '93%' }"
    :placeholder="placeholder"
  >
    <el-option
      v-for="item in optionSource"
      :key="item[valueKey]"
      :label="item[labelKey]"
      :value="item[valueKey]"
    >
    </el-option>
    <!-- {{ optionSource }} -->

    <el-pagination
      small
      layout="prev, pager, next"
      @current-change="changeNumber"
      :hide-on-single-page="true"
      :page-size="paginationOption.pageSize"
      :current-page="paginationOption.currentPage"
      :pager-count="paginationOption.pagerCount"
      :total="paginationOption.total"
    >
    </el-pagination>
  </el-select>
</template>

<script>
export default {
  name: "PaginationSelect",
  props: {
    //此参数只是为了父组件实现 v-model指令接受参数用，子组件中无实际意义
    // 在子组件中通过监听childSelectedValue值，来触发 input 事件，实现子父组件数据绑定
    value: {
      type: String | Array,
      default: "",
    },
    valueKey: {
      //传入的option数组中，要作为最终选择项的键值名称
      type: String,
    },
    labelKey: {
      //传入的option数组中，要作为显示项的键值名称
      type: String,
    },
    clearable: {
      //是否支持清除，默认支持
      type: Boolean,
      default: true,
    },
    remote: {
      //是否支持远程搜索，默认支持
      type: Boolean,
      default: false,
    },
    size: {
      //组件尺寸，配置项同select  String | medium/small/mini
      type: String,
      default: "medium",
    },
    loading: {
      //远程数据加载状态显示
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "选择用户",
    },
    optionSource: {
      //下拉框组件数据源
      type: Array,
      required: true,
    },
    paginationOption: {
      //分页配置项
      type: Object,
      default: function () {
        return {
          pageSize: 5, //每页显示条数  6条刚好
          currentPage: 1, //当前页
          pagerCount: 5, //按钮数，超过时会折叠
          total: 10, //总条数
        };
      },
    },
  },
  data() {
    return {
      childSelectedValue: this.value,
    };
  },
  watch: {
    //监听子组件中选择的值得变化，每当选择一个项后，触发input事件，
    // 将子组件中选择的值通过input事件传递给父组件，实现父组件中v-model绑定的值的双向绑定
    childSelectedValue(val) {
      this.$emit("input", val);
    },
    value(val) {
      if (val != null && val.length < 1) {
        this.childSelectedValue = "";
      }
    },
  },
  mounted() {},
  methods: {
    //子组件分页器，页码选择事件，父组件中监听子组件的 pageNationChange 事件，获取当前页码
    changeNumber(val) {
      //此处的val是页码
      this.$emit("pageNationChange", val);
    },
    // 远程调用方法，在父组件中实现远程方法
    remoteMethod(val) {
      if (val != null && val.length > 0) {
        //只有输入的字符串长度大于1时，触发
        this.$emit("remote-method", val);
      } else {
        this.childSelectedValue = " ";
      }
    },
    //使组件支持change事件
    handleChange(val) {
      this.$emit("change", val);
    },
    //使组件支持clear事件
    handleClear(val) {
      this.$emit("clear", val);
    },
    //解决远程搜索无结果时，显示清除按钮问题
    handleFocus() {
      if (this.childSelectedValue.length < 1) {
        this.childSelectedValue = "";
      }
    },
  },
};
</script>

<style scoped></style>
