<template>
  <div class="demo-select-slot">
    <ui-select
      v-model="value"
      :options="options"
      :search-value.sync="searchValue"
      :filter-method="filterHandler"
      :keymap="{
        label: 'title',
      }"
      filterable>
      <div
        slot="option"
        slot-scope="{ title, remark }"
        class="custom-option">
        <span
          class="left"
          v-html="highlight(title)">
        </span>
        <span class="right">
          {{ remark }}
        </span>
      </div>
    </ui-select>
  </div>
</template>

<script>
import { Select } from "amumu-ui"
import { encode } from "amumu-ui/src/utils/reg"

export default {
  components: {
    "ui-select": Select,
  },
  data() {
    return {
      value: "",
      searchValue: "",
      options: [
        { title: "请选择", value: "", remark: "北京1号", disabled: true },
        { title: "pages", value: "1", remark: "苹果" },
        { title: "word", value: "2", remark: "微软" },
        { title: "wps", value: "3", remark: "金山", disabled: true },
      ],
    }
  },
  methods: {
    highlight(label) {
      return this.searchValue
        ? label.replace(new RegExp(encode(this.searchValue), "gi"), "<b>$&</b>")
        : label
    },
    filterHandler() {
      return true
    },
  },
}
</script>
<style lang="scss">
.custom-option {
  .left b {
    color: red;
    font-weight: normal;
  }
  .right {
    float: right;
    width: auto;
  }
}
</style>
