<template>
  <div>
    <div :class="['ipub-select-option relative',
            (isArray(selectValue)?
            (selectValue.includes(isObject(value) ? value[optionKey] : value)):
            (selectValue === (isObject(value) ? value[optionKey] : value)))
              ? 'active'
              : '', theme.mode + (theme.tree?'-tree':''), disabled?'disabled':'']
          "
         @click="handleChange(value)"
         @click.stop>
      <ipub-radio v-if="theme.mode === 'multiple'"
                  checkBox
                  style="margin-right:4px"
                  :checked="(isArray(selectValue)?
            (selectValue.includes(isObject(value) ? value[optionKey] : value)):
            (selectValue === (isObject(value) ? value[optionKey] : value)))" />
      <slot>{{ isObject(value) ? value[optionTitle] : value }}</slot>
      <ipub-icon v-if="theme.tree && value.children && value.children.length"
                 @click="openChildren(!showChildren)"
                 @click.stop
                 style="right:10px;font-size:10px"
                 :class="['mar-l-10 rotate right-option',showChildren?'':'rotate-180']"
                 type="iconArrow" />
    </div>
    <div class="ipub-select-children"
         v-show="theme.tree && value.children && value.children.length && showChildren">
      <ipub-select-option v-for="(item, index) in value.children"
                          :key="'ipub-select__warp__item'+(item[optionKey]||item)+index"
                          :value="item"
                          :optionTitle="optionTitle"
                          :optionKey="optionKey"></ipub-select-option>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IpubSelectOption',
  props: {
    optionTitle: {
      type: String,
      default: 'name'
    },
    optionKey: {
      type: String,
      default: 'id'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: [String, Object, Number, Array, Boolean],
      default: ''
    },
  },
  inject: {
    theme: {
      //函数式组件取值不一样
      default: () => ({})
    }
  },
  data () {
    return {
      active: false,
      showChildren: false,
      parent: ''
    }
  },
  computed: {
    selectValue () {
      return this.theme.selectValue
    },
  },
  watch: {
    selectValue: {
      handler (val) {
        if (!this.parent) {
          if (this.theme.tree) {
            this.parent = this.findSelect(this.$parent)
          } else {
            this.parent = this.$parent
          }
        }
        if (!this.parent.getShowValue) {
          return
        }
        if (val === null || val === undefined) {
          this.parent.getShowValue(null)
          return
        }
        if (this.isObject(this.value)) {
          if (this.isArray(val) ? val.includes(this.value[this.optionKey]) : val === this.value[this.optionKey]) {
            this.parent.getShowValue(this.$slots.default || this.value[this.optionTitle])
            if (this.theme.tree) {
              this.openChildren(true, true)
            }
          }
        } else {
          if (this.isArray(val) ? val.includes(this.value) : val === this.value) {
            this.parent.getShowValue(this.$slots.default || this.value)
            if (this.theme.tree) {
              this.openChildren(true, true)
            }
          }
        }
      },
      immediate: true
    }
  },
  mounted () {
    if (this.theme.tree) {
      this.parent = this.findSelect(this.$parent)
    } else {
      this.parent = this.$parent
    }
  },
  methods: {
    handleChange (val) {
      if (this.disabled) {
        return
      }
      if (this.isObject(val)) {
        this.$emit('select', val[this.optionKey], val)
        if (!this.parent.handleChange) {
          return
        }
        this.parent.handleChange(val[this.optionKey], this.$slots.default || val[this.optionTitle])
      } else {
        this.$emit('select', val)
        if (!this.parent.handleChange) {
          return
        }
        this.parent.handleChange(val, this.$slots.default || val)
      }
    },
    openChildren (val, parent = false) {
      this.showChildren = val
      if (parent && !this.$parent.tree) {
        this.$parent.openChildren(true)
      }
    },
    isObject (obj) {
      return Object.prototype.toString.call(obj) === '[object Object]'
    },
    isArray (obj) {
      return Object.prototype.toString.call(obj) === '[object Array]'
    },
    findSelect (v) {
      if (v.tree) {
        return v
      }
      return this.findSelect(v.$parent)
    }
  }
}
</script>
