<script>
  import ElInput from 'modesign-ui/packages/input';
  export default {
    name: 'ElTag',
    
  components: { ElInput },

    data() {
      return {
        parentIsWhite: false,
        showInput: false,
        inputValue: ''
      }
    },
    props: {
      text: String,
      closable: Boolean,
      hit: Boolean,
      edit: Boolean,
      disableTransitions: Boolean,
      color: String,
      size: String,
      // 标签是否激活
      actived: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      },
      // 虚框按钮
      dashed: {
        type: Boolean,
        default: false
      },
      icon: {
        type: String,
        default: ''
      },
      bgType: {
        type: String,
        default: 'grey'
      },
      type: {
        type: String
      }
    },
    methods: {
      handleClose(event) {
        event.stopPropagation();
        this.$emit('close', event);
      },
      handleClick(event) {
        if (this.dashed) {
          this.showInput = true;
          this.$nextTick(() => {
            this.$refs.tag.style.visibility = 'hidden';
            this.$refs.content.style.display = 'none';
            this.$refs.saveTagInput.$refs.input.focus();
          });
        }
        this.$emit('click', event);
      },
      handleInputConfirm(e) {
        if (e.keyCode && e.keyCode === 13) {
          this.handleBlur();
        }
      },
      handleBlur() {
        if (this.showInput) {
          this.showInput = false;
          this.$refs.tag.style.visibility = 'visible';
          this.$refs.content.style.display = 'flex';
          this.$emit('addTag', this.inputValue);
          this.inputValue = '';
        }
      },
      input(e){
        this.inputValue = e;
      }
    },
    computed: {
      tagSize() {
        return this.size || (this.$ELEMENT || {}).size;
      }
    },
    mounted() {
      // 判断父级元素的背景色是不是白色的，根据此展示不同hover状态
      this.parentIsWhite = window.getComputedStyle(this.$parent.$vnode.elm, null).background.includes('rgba(0, 0, 0, 0)')
    },
    render() {
      const { tagSize, hit, icon, type, bgType, edit, parentIsWhite, actived, disabled, dashed, showInput, closable,
        inputValue, handleClick, handleClose, handleInputConfirm, input, handleBlur } = this;
      // 1.hit 2.actived 3.hit+actived 4.bgType=wathet 5.bgType=wathet + hit
      let tagClass = '';
      const score = {
        hit: 1,
        actived: 10,
        wathet: 100
      }
      const result = (hit ? score.hit : 0) + (actived ? score.actived : 0) + (bgType === 'wathet' ? score.wathet : '')
      switch(Number(result)) {
        case 1:
          tagClass = 'is-hit';
          break;
        case 10:
          tagClass = 'is-actived';
          break;
        case 11:
          tagClass = 'is-actived-hit';
          break;
        case 100:
          tagClass = 'is-wathet';
          break;
        case 101:
          tagClass = 'is-hit-wathet';
          break;
        default:
          tagClass = '';
      }
      const classes = [
        'el-tag',
        tagSize ? `el-tag--${tagSize}` : '',
        type ? `el-tag--${type}` : '',
        parentIsWhite ? 'bg-white' :  '',
        dashed ? 'is-dashed': '',
        edit ? 'is-edit': '',
        closable ? '' : 'is-notclosable',
        tagClass,
        disabled ? (actived ? (hit ? 'is-hit-disabled' : 'is-actived-disabled') : 'is-disabled') : ''
      ];
      const tagEl = (
        <span
          ref="tag"
          class={ classes }
          style={{ backgroundColor: this.color }}
          on-click={ handleClick }>
          <span class="el-tag__content" ref="content">
            {
              actived && hit && <i class="el-icon-checked"></i>
            }
            {
              icon && <i class={[`${icon}`, 'el-tag__icon']}></i>
            }
            {
              dashed && !inputValue && <i class='el-icon-plus' style='margin-right: 5px;'></i>
            }
            <span class="el-tag__text">
              {
                !showInput && this.$slots.default
              }
            </span>
            {
              !showInput && closable && <i class="el-tag__close el-icon-input-close" on-click={ handleClose }></i>
            }
          </span>
          {
            showInput &&
            <el-input
              class="el-tag__input"
              style="visibility: visible;"
              ref="saveTagInput"
              value={ inputValue }
              onInput={ input }
              size="small"
              nativeOnKeyup={ handleInputConfirm }
              on-blur={ handleBlur }
            >
            </el-input>
          }
        </span>
      );

      return this.disableTransitions ? tagEl : <transition name="el-zoom-in-center">{ tagEl }</transition>;
    }
  };
</script>
