<template>
  <div v-if="tags.length">
    <el-radio-group
      class="tags"
      v-model="current"
      size="mini">
      <el-tabs
        v-model="activeName"
        @tab-click="handleChange">
        <el-tab-pane
          label="全部"
          name="all">
        </el-tab-pane>
        <el-tab-pane
          v-for="(item,index) in tags"
          :key="index"
          :label="item.name"
          :name="item.id+item.name">
          <el-radio
            v-for="tag in item.children"
            :key="tag.name"
            :value="tag.id"
            :label="tag.id"
            border>
            {{ tag.name }}
          </el-radio>
        </el-tab-pane>
      </el-tabs>
    </el-radio-group>
  </div>
</template>
<script>
import { getTicketTypeTagList } from '@/api/ticketTypeTag'
export default {
  props: {
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      tags: [],
      current: '',
      activeName: 'all'
    }
  },
  created () {
    this.getTags()
  },
  methods: {
    getTags () {
      getTicketTypeTagList({}).then(res => {
        console.log(res.children)
        this.tags = res.children

        // if (this.tags.length) {
        //   this.activeName = this.tags[0].id + this.tags[0].name
        // }
      })
    },
    handleChange (tab, e) {
      if (tab.index === '0') {
        this.current = ''
        return
      }

      const currentTag = this.tags[tab.index - 1]
      if (!currentTag) return

      if (currentTag.children.length) {
        this.current = currentTag.children[0].id
      } else {
        this.current = 0
      }
    }
  },
  watch: {
    value: {
      handler (val) {
        this.current = val
      },
      immediate: true
    },
    current (val) {
      this.$emit('input', val)
      this.$emit('change', val)
    }
  }
}
</script>
<style lang="scss" scoped>
.tags {
  width: 100%; margin-top: 5px;
  ::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
    margin-left: 0;
  }
  ::v-deep .el-radio.is-bordered.is-checked {
    background: #0075ff;
  }
  ::v-deep .el-radio__input.is-checked + .el-radio__label {
    color: #fff;
  }
  ::v-deep .el-radio.is-bordered {
    padding: 5px 10px;  margin: 5px 10px 2px 0;
  }
  ::v-deep .el-radio__input {
    display: none;
  }
  ::v-deep .el-radio__label {
    padding: 0;
  }
}
</style>
