<template>
<div :id="id">
   <ul>
      <li>
         <p>基础用法</p>
         <poi-tag>标签一</poi-tag>
         <poi-tag type="success">标签二</poi-tag>
         <poi-tag type="info">标签三</poi-tag>
         <poi-tag type="warning">标签四</poi-tag>
         <poi-tag type="danger">标签五</poi-tag>
      </li>
      <li>
         <p>可移除标签</p>
         <poi-tag
            v-for="tag in tags"
            :key="tag.name"
            closable
            :type="tag.type">
            {{tag.name}}
         </poi-tag>
      </li>
      <li>
         <p>不同尺寸</p>
         <poi-tag closable>默认标签</poi-tag>
         <poi-tag size="medium" closable>中等标签</poi-tag>
         <poi-tag size="small" closable>小型标签</poi-tag>
         <poi-tag size="mini" closable>超小标签</poi-tag>
      </li>
      <li>
         <p>动态编辑标签</p>
         <poi-tag
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)">
            {{tag}}
         </poi-tag>
         <poi-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
            >
         </poi-input>
         <poi-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</poi-button>
         <poi-upload></poi-upload>
      </li>
   </ul>   
</div>   
</template>
<script>
export default {
   data(){
      return{
         id:'radioText',

         tags: [
            { name: '标签一', type: '' },
            { name: '标签二', type: 'success' },
            { name: '标签三', type: 'info' },
            { name: '标签四', type: 'warning' },
            { name: '标签五', type: 'danger' }
         ],

         //动态编辑标签
         dynamicTags: ['标签一', '标签二', '标签三'],
         inputVisible: false,
         inputValue: ''
   
      }
   },

   methods: {
      handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },

      showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
         this.$refs.saveTagInput.$refs.input.focus();
      });
      },

      handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
         this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
      }
   }
 
}
</script>
<style scoped>
#radioText .w100{
 width:100px;
}

.poi-tag + .poi-tag {
   margin-left: 10px;
}
.button-new-tag {
   margin-left: 10px;
   height: 32px;
   line-height: 30px;
   padding-top: 0;
   padding-bottom: 0;
}
.input-new-tag {
   width: 90px;
   margin-left: 10px;
   vertical-align: bottom;
}

</style>
