<template>
  <div
    class="bx-picker"
    >
    <transition name="bx-picker">
      <div class="bx-picker-body">
        <div
          class="bx-picker-header bx-hairline--bottom"
          v-if="showToolbar"
          >
          <p
            class="bx-picker-cancel"
            @click="cancel()"
            >
            取消
          </p>
          <p class="bx-picker-title">
            {{ title }}
          </p>
          <p
            class="bx-picker-sure"
            @click="confirm()"
            >
            确定
          </p>
        </div>
        <div class="bx-picker-content">
          <div
            class="bx-picker-wrapper"
            ref="pickerWrapper"
            >
            <picker-item
              v-for="(data,index) in pickerDataList"
              :key="index"
              :values="(pickerDataType ? data : data.values)"
              :class-name="data.className"
              :default-index="data.defaultIndex"
              :value-key="valueKey"
              @change="onChange(index)"
              />
          </div>
          <div class="bx-picker-center-highlight" />
        </div>
        <div class="bx-picker-footer" />
      </div>
    </transition>
  </div>
</template>
<script>
import { create } from '../utils/index'
import pickerItem from './picker-item'

export default create({
  name: 'picker',
  props: {
    title: {
      // 选择展示标题
      type: String,
      default: '',
    },
    valueKey: {
      // 传递对象显示的值
      type: String,
      default: 'text',
    },
    pickerData: {
      type: Array,
      default: () => [],
    },
    showToolbar: {
      type: Boolean,
      default: false,
    },
    value: Array,
  },
  components: {
    [pickerItem.name]: pickerItem,
  },
  data() {
    return {
      children: [],
    }
  },
  computed: {
    pickerDataType() {
      return !!(this.pickerData.length && !this.pickerData[0].values)
    },
    pickerDataList() {
      return this.pickerData.length && !this.pickerData[0].values
        ? [this.pickerData]
        : this.pickerData
    },
  },
  watch: {
    pickerData() {
      this.setColumns()
    },
  },
  methods: {
    setColumns() {
      const columnsItem = this.pickerDataType
        ? [{ values: this.pickerData }]
        : this.pickerData
      columnsItem.forEach((columnValue, index) => {
        this.setColumnValues(
          index,
          JSON.parse(JSON.stringify(columnValue.values)),
        )
      })
    },
    onChange(columnIndex) {
      if (this.pickerDataType) {
        this.$emit(
          'change',
          this,
          this.getColumnValue(0),
          this.getColumnIndex(0),
        )
      } else {
        this.$emit(
          'change',
          this,
          this.getValues(),
          columnIndex,
          this.getIndexes(),
        )
      }
      this.$emit('input', this.getValues())
    },
    cancel() {
      this.$emit('cancel', false)
    },
    confirm() {
      if (this.pickerDataType) {
        this.$emit(
          'confirm',
          this,
          this.getColumnValue(0),
          this.getColumnIndex(0),
        )
      } else {
        this.$emit('confirm', this, this.getValues(), this.getIndexes())
      }
    },
    getColumnValue(index) {
      const column = this.getColumn(index)
      return column && column.getValue()
    },
    setColumnValue(index, value) {
      const column = this.getColumn(index)
      if (column) {
        return column.setValue(value)
      }
      return false
    },
    getColumn(index) {
      return this.children[index]
    },
    getColumnIndex(columnIndex) {
      return (this.getColumn(columnIndex) || {}).currentIndex
    },
    setColumnIndex(columnIndex, optionIndex) {
      const column = this.getColumn(columnIndex)
      if (column) {
        return column.setOptionIndex(optionIndex)
      }
      return false
    },
    getColumnValues(index) {
      return (this.children[index] || {}).options
    },
    setColumnValues(index, options) {
      const column = this.children[index]
      if (
        column &&
        JSON.stringify(column.options) !== JSON.stringify(options)
      ) {
        column.options = options
        column.setOptionIndex(0)
        this.onChange(index)
      }
    },
    getValues() {
      return this.children.map(child => child.getValue())
    },
    setValues(values) {
      values.forEach((value, index) => {
        this.setColumnValue(index, value)
      })
    },
    getIndexes() {
      return this.children.map(child => child.currentIndex)
    },
    setIndexes(indexes) {
      indexes.forEach((optionIndex, columnIndex) => {
        this.setColumnIndex(columnIndex, optionIndex)
      })
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (this.value && this.value.length) {
        this.setValues(this.value)
      }
    })
  },
})
</script>
<style lang="postcss">
@import './index.css';
</style>
