<template>
  <u-popper class="uif-cascader" v-model="visible" placement="bottom-start" :transfer="transfer" :modifiers="modifiers">
    <template v-slot:reference>
      <u-input :value="showValue" :name="name" readonly :focus="visible"></u-input>
    </template>
    <template v-slot:popper>
      <div class="uif-cascader-options">
        <div class="header">
          <template v-for="(item, idx) in values">
            <u-button :key="idx" class="header-button" :class="{ active: index === idx }" size="small" suffix-icon="cheveron-s-bottom" @click="changeIndex(idx)">
              {{ item.label }}
            </u-button>
          </template>
          <u-button v-if="hasNext" class="header-button" :class="{ active: index >= values.length }" size="small" suffix-icon="cheveron-s-bottom" @click="changeIndex(values.length)">
            请选择
          </u-button>
        </div>
        <div class="option">
          <template v-for="option in currentOptions">
            <div :key="option.value" class="option-item ellipsis" :class="{ active: value.includes(option.value) }" :title="option.label" @click="onOptionClick(option)">{{ option.label }}</div>
          </template>
        </div>
      </div>
    </template>
  </u-popper>
</template>

<script>

import UPopper from '@uif/hq/src/components/popper'
import UInput from '@uif/hq/src/components/input'

function hasChildren (data) {
  return data.children && data.children.length > 0
}

export default {
  name: 'u-cascader',
  components: {
    UPopper,
    UInput
  },
  props: {
    name: {
      type: String
    },
    value: {
      type: Array,
      default () {
        return []
      }
    },
    values: {
      type: Array,
      default () {
        return []
      }
    },
    options: {
      type: Array,
      default () {
        return []
      }
    },
    transfer: {
      type: Boolean,
      default: false
    },
    // 单个自动选中
    auto: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      index: 0,
      visible: false,
      modifiers: [
        {
          name: 'offset',
          options: {
            offset: [0, -1]
          }
        }
      ]
    }
  },
  watch: {
    options () {
      this.createValues()
    },
    visible (visible) {
      this.$emit(visible ? 'focus' : 'blur')
      if (this.auto && visible) {
        this.autoSelect()
      }
    }
  },
  computed: {
    showValue () {
      return this.values.map(data => data.label).join('-')
    },
    hasNext () {
      if (this.values.length > 0) {
        return hasChildren(this.values[this.values.length - 1])
      }
      return true
    },
    currentOptions () {
      if (this.index <= 0) {
        return this.options
      }
      const data = this.values[this.index - 1]
      return (data && hasChildren(data)) ? data.children : []
    }
  },
  mounted () {
    this.createValues()
  },
  methods: {
    // 自动选择
    autoSelect () {
      if (this.visible && this.currentOptions.length === 1) {
        this.onOptionClick(this.currentOptions[0])
        this.$nextTick(() => this.autoSelect())
      }
    },
    onOptionClick (data) {
      this.pushValues(this.index, data)
      this.setValues2Value()
      if (hasChildren(data)) {
        this.index++
      } else {
        this.visible = false
      }
      this.$emit('u-change')
    },
    // values -> value
    setValues2Value () {
      const value = this.values.map(data => data.value)
      if (value.join('&') !== this.value.join('&')) {
        this.$emit('input', value)
      }
    },
    /**
     * 初始化
     * **/
    // 创建values
    createValues () {
      if (this.isCreated || this.options.length <= 0) {
        return false
      }
      this.isCreated = true
      let options = this.options
      for (let i = 0; i < this.value.length; i++) {
        const value = this.value[i]
        const data = options.find(data => data.value === value)
        if (data) {
          this.pushValues(i, data)
          options = hasChildren(data) ? data.children : []
        } else {
          break
        }
      }
      this.setValues2Value()
      this.createIndex()
    },
    // 自动更新Index
    createIndex () {
      const length = this.values.length
      if (length > 0) {
        const next = hasChildren(this.values[length - 1])
        this.changeIndex(next ? length : length - 1)
        return true
      }
      this.changeIndex(0)
    },
    /**
     * 其他
     * **/
    pushValues (index, data) {
      this.values.splice(index, this.values.length, data)
    },
    // index
    changeIndex (index) {
      this.index = index
    }
  }
}
</script>
