<template>
  <div class="demo-select-multiple">
    <div class="demo-box">
      <ui-select
        v-model="value"
        :max-count="10"
        :max-tag-text-length="10"
        :options="groupOptions"
        :multiple-limit="3"
        filter-key="label"
        max-tag-width="200px"
        multiple-placeholder
        multiple>
      </ui-select>
    </div>
    <div class="demo-box">
      <ui-select
        v-model="value"
        :max-count="10"
        :max-tag-text-length="10"
        :options="groupOptions"
        :render-tag="renderTag"
        filter-key="label"
        max-tag-width="200px"
        multiple>
      </ui-select>
    </div>

    <div class="demo-box">
      <ui-select
        v-model="value"
        :max-count="10"
        :max-tag-text-length="10"
        :options="groupOptions"
        max-tag-width="200px"
        multiple
        disabled>
      </ui-select>
    </div>
  </div>
</template>

<script>
import { Select } from "amumu-ui"
export default {
  components: {
    "ui-select": Select,
  },
  data() {
    return {
      value: ["1-1"],
      groupOptions: [
        {
          label: "下拉选项1",
          options: [
            {
              label: "子选项1",
              value: "1-1",
              background: "rgba(216, 117, 56, 0.2)",
              color: "rgb(216, 117, 56)",
            },
            {
              label: "子选项子选项子选项子选项子选项子选项2",
              value: "1-2",
              background: "rgba(87, 192, 120, 0.2)",
              color: "rgb(87, 192, 120)",
            },
            {
              label: "子选项3",
              value: "1-3",
              background: "rgba(98, 97, 97, 0.2)",
              color: "rgb(98, 97, 97)",
            },
          ],
        },
        {
          label: "下拉选项下拉选项下拉选项2",
          options: [
            {
              label: "子选项1",
              value: "2-1",
              background: "rgba(141, 84, 189, 0.2)",
              color: "rgb(141, 84, 189)",
            },
            {
              label: "子选项2",
              value: "2-2",
              background: "rgba(238, 123, 123, 0.2)",
              color: "rgb(238, 123, 123)",
            },
            {
              label: "子选项子选项子选项子选项子选项子选项3",
              value: "2-3",
              background: "rgba(74, 168, 235, 0.2)",
              color: "rgb(74, 168, 235)",
            },
          ],
        },
        {
          label: "下拉选项3",
          options: [
            {
              label: "子选项1",
              value: "3-1",
              background: "rgba(188, 89, 89, 0.2)",
              color: "rgb(188, 89, 89)",
            },
            {
              label: "子选项2",
              value: "3-2",
              background: "rgba(75, 103, 157, 0.2)",
              color: "rgb(75, 103, 157)",
            },
            {
              label: "子选项子选项子选项子选项子选项子选项3",
              value: "3-3",
              background: "rgba(89, 93, 190, 0.2)",
              color: "rgb(89, 93, 190)",
            },
          ],
        },
        {
          label: "下拉选项4",
          options: [
            {
              label: "子选项子选项子选项子选项子选项子选项1",
              value: "4-1",
              background: "rgba(93, 137, 233, 0.2)",
              color: "rgb(93, 137, 233)",
            },
            {
              label: "子选项2",
              value: "4-2",
              background: "rgba(89, 93, 190, 0.2)",
              color: "rgb(89, 93, 190)",
            },
            {
              label: "子选项3",
              value: "4-3",
              background: "rgba(89, 93, 190, 0.2)",
              color: "rgb(89, 93, 190)",
            },
          ],
        },
      ],
    }
  },
  mounted() {
    setTimeout(() => {
      this.value.push("1-2")
    }, 1000)
  },
  methods: {
    renderTag(h, option) {
      return (
        <div
          class="custom-tag-style"
          style={{
            background: option.background,
          }}
        >
          <span
            style={{
              color: option.color,
            }}
          >
            {option.label}
          </span>
          &nbsp;
          <span onClick={option.remove} class="mm-selector-choice-remove">
            x
          </span>
        </div>
      )
    },
  },
}
</script>
<style lang="scss">
.custom-tag-style {
  padding: 0 10px;
  color: rgba(0, 0, 0, 0.65);
  background-color: #f3f3f3;
  border: 1px solid #f3f3f3;
  border-radius: 2px;
}
</style>
