<template lang="html">
<div class="selector" :class="['selector-'+size, 'selector-'+theme, underline!=''?'selector-underline':'']">
  <h3 class="selector-title" v-show="title!=''">
    {{title}}
  </h3>
  <ul class="selector-list" :style="listHeight">
    <li v-for="item in options"
        :class="[item.value==value?'selected':'']"
        @click="handleClick(item)"
    >
      {{item.text}}
    </li>
    <slot ref="options" />
  </ul>
</div>
</template>

<script>
import selectorItem from './selector-item'

/* eslint-disable */
export default {
  item: selectorItem,
  props: {
    title: {
      type: String,
      default: ''
    },
    multi: { // 是否支持多选
      default: false
    },
    value: {
      default: ''
    },
    theme: {
      type: String,
      default: 'default' // check | check-right | box
    },
    underline: { // 选项是否有下划线
      default: false
    },
    size: { // 尺寸
      type: String,
      default: 'normal'
    },
    options: {
      type: Array,
      default() {
        /**
         * [{value,text}]
         */
        return []
      }
    },
    maxHeight: {
      default: ''
    },
    unselected: { // 再次点击是否可以取消选中
      default: false
    }
  },
  computed: {
    listHeight() {
      if (this.maxHeight !== '') {
        return { maxHeight: this.maxHeight }
      }
      return {}
    }
  },
  data() {
    return {

    }
  },
  mounted() {
    // console.log(this.$children.length) // eslint-disable-line
    this.updateSlot()
  },
  watch: {
    value() {
      this.updateSlot()
    }
  },
  methods: {
    /**
     * 选择事件
     */
    handleClick(value) {
      if (this.multi) {
        let arr = this.valueArray()
        if (!this.valueExsit(value.value)) {
          arr.push(value.value)
          const val = arr.join(',')
          value.value = val
          this.$emit('on-change', value)
          this.$emit('input', val)
        } else {
          let index = arr.findIndex(item => {
            return item == value.value
          })
          arr.splice(index, 1)
          value.value = arr.join(',')
          this.$emit('on-change', value)
          this.$emit('input', arr.join(','))
        }
      } else if (this.unselected && (value.value === this.value)) {
        this.$emit('on-change', {})
        this.$emit('input', null)
      } else {
        this.$emit('on-change', value)
        this.$emit('input', value.value)
      }
      this.updateSlot()
    },
    /**
     * 获取输入值
     */
    getValue() {
      return this.value
    },
    /**
     * 获取输入值
     */
    setValue(val) {
      console.log('警告：selector:setValue()是一个向前兼容的方法，不推荐使用') // eslint-disable-line
      this.$emit('input', val)
      // this.valueSelf = val
    },
    /**
     * 判断value中是否包含某个值
     */
    valueExsit(value) {
      let val = `${this.value}`
      const v = val.split(',')

      return v.find(item => {
        return item == value
      })
    },
    valueArray() {
      let val = `${this.value}`
      return val !== ''? val.split(','):[]
    },
    /**
     * 更新slot选项选中状态
     */
    updateSlot() {
      //console.log('updateslot')
      //console.log(this.$children)
      if (this.$children && this.$children.length > 0) {
        this.$children.forEach((item) => {
          /* eslint-disable */
          // console.log(this.valueExsit(item.value))
          if (this.valueExsit(item.value)) {
            item.selected = true
          } else {
            item.selected = false
          }
        })
      }
    }
  },
  components: {}
}
</script>
