<!--
 * @Description: 
 * @Author: 陈长吉
 * @Date: 2018-10-29 16:30:28
 * @LastEditTime: 2019-07-29 17:46:37
 * @LastEditors: 陈长吉
 -->
<template>
  <div class="multiple-cascader">
    <el-cascader
      :style="cascaderStyle"
      ref="multipleCascader"
      v-model="selectValue"
      v-bind="$attrs"
      @change="handleChange"
    >
    </el-cascader>
    <div
      class="tag-list"
      ref="multipleTag"
      :style="{ 'max-width': inputWidth + 'px' }"
      v-show="myValue.length > 0"
    >
      <el-tag
        v-for="(tag, index) in myValue"
        :key="tag.value"
        closable
        :type="tagType"
        size="mini"
        @close="handleClose(index)"
      >
        {{ tag.label }}
      </el-tag>
    </div>
  </div>
</template>
<script>
export default {
  componentName: 'MultipleCascader',
  props: {
    value: {
      type: Array,
      default: () => []
    },
    type: {
      // value object
      type: [String],
      default: 'value'
    },
    tagType: {
      type: String,
      default: 'info'
    }
  },
  watch: {
    value() {
      if (this.type === 'object') {
        this.myValue = this.value
      }
    }
  },
  data() {
    return {
      myValue: this.type === 'object' ? this.value : [],
      cascaderStyle: {},
      selectValue: [],
      inputWidth: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.inputWidth = this.$refs.multipleCascader.$el.clientWidth
      this.cascaderStyle = this.setStyle()
    })
  },
  methods: {
    handleChange(val) {
      setTimeout(() => {
        this.getValue(val)
      }, 0)
    },
    /**
     * @method: 点击处理数据，获取点击最末级别文本
     * @param {type}
     * @return:
     * @Author: 陈长吉（chencj@yunjiglobal.com）
     * @Date: 2019-06-04 16:42:48
     */
    getValue(val) {
      if (!this.myValue.find((item) => item.value === val[val.length - 1])) {
        this.myValue.push({
          value: val[val.length - 1],
          label: this.$refs.multipleCascader.presentText.split('/')[val.length - 1]
        })
        this.returnValue()
      }
      this.$nextTick(() => {
        this.cascaderStyle = this.setStyle()
        this.selectValue = []
      })
    },
    /**
     * @method: 删除操作
     * @param {type}
     * @return:
     * @Author: 陈长吉（chencj@yunjiglobal.com）
     * @Date: 2019-06-04 16:43:10
     */
    handleClose(index) {
      this.myValue.splice(index, 1)
      this.returnValue()
      setTimeout(() => {
        this.cascaderStyle = this.setStyle()
      }, 300)
    },
    setStyle() {
      let height = this.$refs.multipleTag.clientHeight
      return {
        'margin-top': height + 'px'
      }
    },
    returnValue() {
      if (this.type === 'object') {
        this.$emit('input', this.myValue)
      } else {
        let val = []
        this.myValue.forEach((item) => {
          val.push(item.value)
        })
        this.$emit('input', val)
      }
    }
  }
}
</script>
<style lang="less">
@import '~styles/var';
.multiple-cascader {
  position: relative;
  .tag-list {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 5px 0 5px;
  }
  .el-cascader {
    width: 300px;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    .el-input__inner {
      border: 0;
      transform: none;
    }
  }
  .el-tag {
    margin-bottom: 5px;
    margin-right: 5px;
  }
}
</style>
