<template>
  <div class="hsTags" :id='elId' style="{width:100%;height:100%}">
      <el-tag :style="style" :size='configData.size' @click="clickTagItem(item)" class="hsTagsItem" v-for="(item,index) in tagsList" :key="index" :type="item.type">
        {{item.title}}
      </el-tag>
      <jsoneditor
                v-model='jsoneditorVisible'
                :elInfo='elInfo'
                :layout='layout'
                :jsoneditorCloseAfter='jsoneditorCloseAfter'
                :jsoneditorOpenAfter='jsoneditorOpenAfter'
                >
    </jsoneditor>
  </div>
</template>
<script>
import jsoneditor from '../common/jsoneditor'
import ucComponent from '../ucClass/uc_component'
import uuidv1 from 'uuid/v1'
import _ from 'lodash'
export default {
  mixins: [ucComponent],
  components: {
    jsoneditor
  },
  name: 'hsTags',
  props: {
    value: '',
    elInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    allSourceData: {
      type: Object,
      default() {
        return {}
      }
    },

    jsoneditorCloseAfter: {
      type: Function
    },
    jsoneditorOpenAfter: {
      type: Function
    },
    layout: {},
    layoutChagneDate: {},
    pageSource: {},
    pageThis: {},
    active_manager: {}
  },
  watch: {
    allSourceData: {
      handler: function(newVal, oldVal) {
        this.initConfigData(newVal)
      },
      deep: true
    },
    value(val) {
      this.value_inner = val
      this.setDefaultVal(val)
    },
    value_inner(val) {
      this.$emit('input', val)
    }
  },
  data() {
    return {
      tagsList: [],
      elId: '',
      jsoneditorVisible: false,
      buttonText: '操作',
      clickTimer: null,
      configData: {
        type: 'primary',
        size: 'medium'
      },
      style: {},
      value_inner: ''
    }
  },
  created() {
    this.elId = uuidv1() // 获取随机id
  },
  mounted() {
    this.initConfigData(this.allSourceData)
  },
  methods: {
    setDefaultVal(val) {
      this.tagsList.forEach(item => {
        if (item.title === val) {
          item.type = 'success'
        } else {
          item.type = 'primary'
        }
      })
    },
    initConfigData(data = {}) {
      const config = data.config || {}
      const style = config.style || {}
      this.style = style
      const sourceData = data.sourceData || []
      this.tagsList = sourceData.length ? sourceData : [{ title: '测试' }]
      this.configData = Object.assign(_.cloneDeep(this.configData), _.cloneDeep(config))
    },
    clickTagItem(item) {
      this.tagsList.forEach(x => {
        x.type = 'primary'
        if (x.title === item.title) {
          item.type = 'success'
        } else {
          x.type = 'primary'
        }
      })
      const parm = {}
      parm[this.elInfo.prop] = item.title || item.id
      this.$emit('clickTagItem', parm)
    }
  }
}
</script>
<style scoped>
.hsTags{
  padding: 2px 1px 1px 1px;
  width:90%;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hsTagsItem{
margin-left: 10px;
}
/* .hsTags>>>.el-tag--medium{
    width: 100%;
    height: 100%;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
} */
</style>
