<template>
  <div class="demo-tag-closable">
    <div class="demo-box">
      <ui-tag
        v-for="(tag, index) in tags"
        :key="index"
        :type="tag.type"
        :radius="tag.radius"
        closable
        @close="removeTag(index)">
        {{ tag.name }}
      </ui-tag>
    </div>
    <div>
      <ui-button @click="updateHandler">
        更新
      </ui-button>
    </div>
  </div>
</template>
<script>
import sampleSize from "lodash/sampleSize"
import random from "lodash/random"
import { Tag, Button } from "amumu-ui"

const tags = [
  { id: 1, name: "标签一", type: "" },
  { id: 2, name: "标签二", type: "success" },
  { id: 3, name: "标签三", type: "info" },
  { id: 4, name: "标签四", type: "warning" },
  { id: 5, name: "标签五", type: "danger" },
  { id: 6, name: "标签六", type: "system" },
  { id: 7, name: "标签七", type: "danger", radius: "true" },
]
export default {
  components: {
    "ui-tag": Tag,
    "ui-button": Button,
  },
  data() {
    return {
      tags: tags.slice(),
    }
  },
  methods: {
    removeTag(index) {
      this.tags.splice(index, 1)
    },
    updateHandler() {
      this.tags = sampleSize(tags, random(1, 5)).reverse()
    },
  },
}
</script>
<style lang="scss">
.demo-tag-closable {
  .mm-tag {
    margin-right: 20px;
  }
}
</style>
