 <!--leixiaoyan-->
<template>
<div>
  <treeselect :multiple="true" :options.sync="options" placeholder="请选择"
              v-model="value" @select='select' :flat="true" :default-expand-level="1"
              @input='change'/>
</div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
export default {
  components: {
    Treeselect
  },
  name: 'selectProduct',
  data () {
    return {
      value: [],
      childrenId: []
    }
  },
  watch: {},
  props: {
    options: {
      type: Array,
      default: function () {
        return []
      }
    },
    selected: {
      type: [Array],
      default () {
        return []
      }
    },
    childrenAll: {
      type: [Array],
      default () {
        return []
      }
    }
  },
  mounted () {
    let arr1 = this.selected
    this.value = this.childrenAll.filter(function (v) {
      return arr1.indexOf(v) > -1 // 利用filter方法来遍历是否有相同的元素
    })
  },
  methods: {
    select (node, instanceId) {
      this.$nextTick(() => {
        if (this.value.indexOf('all') >= 0) {
          this.value = this.childrenAll
        }
      })
    },
    change () {
      this.$emit('change', this.value)
    },
    getSelect () {
      this.childrenId = []
      if (this.value.indexOf('all') >= 0) {
        this.options[this.value.indexOf('all')].children.forEach(element => {
          this.childrenId.push(element.id)
        })
        return this.childrenId
      }
      return this.value
    }
  }
}
</script>
