<template>
  <section class="th-textarea-tags el-textarea el-input--mini" :class="{'is-disabled': disabled}">
    <el-scrollbar class="el-textarea__inner" :style="{height: 24 * minRows + 'px'}">
      <ul>
        <li v-for="(item, index) in value" :key="index">
          <template v-if="typeof item === 'string'">
            <p class="tag-value" :style="{cursor: canDelete?'pointer':''}" @click="onClick(item, index)">
              {{ item }}
            </p>
          </template>
          <template v-else-if="item.label">
            <p class="tag-label">
              {{ item.label }}
            </p>
          </template>
          <template v-else>
            <p class="tag-value" :style="{cursor: canDelete?'pointer':''}" @click="onClick(item, index)">
              {{ item.value }}
            </p>
          </template>
        </li>
      </ul>
    </el-scrollbar>
  </section>
</template>
<script>
export default {
  name: 'ThTextareaTags',
  props: {
    value: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    minRows: {
      type: Number,
      default: 3
    },
    canDelete: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onClick(item, index) {
      if (this.canDelete) {
        const value = [...this.value]
        value.splice(index, 1)
        this.$emit('input', value)
        this.$emit('change', value)
        this.$emit('click', item, index)
      }
    }
  }
}
</script>
