<template>
  <view class="picker-container">
    <!-- 普通选择器 -->
    <picker
      v-if="mode === 'selector'"
      :value="selectorIndex"
      :range="range"
      :range-key="rangeKey"
      :disabled="disabled"
      @change="handleSelectorChange"
      @cancel="handleCancel"
    >
      <view class="picker-input" :class="{ disabled }">
        <text class="picker-text" :class="{ placeholder: !displayValue }">
          {{ displayValue || placeholder }}
        </text>
        <text class="picker-arrow">▼</text>
      </view>
    </picker>

    <!-- 多列选择器 -->
    <picker
      v-else-if="mode === 'multiSelector'"
      :value="multiIndex"
      :range="multiRange"
      :range-key="rangeKey"
      :disabled="disabled"
      mode="multiSelector"
      @change="handleMultiChange"
      @columnchange="handleColumnChange"
      @cancel="handleCancel"
    >
      <view class="picker-input" :class="{ disabled }">
        <text class="picker-text" :class="{ placeholder: !displayValue }">
          {{ displayValue || placeholder }}
        </text>
        <text class="picker-arrow">▼</text>
      </view>
    </picker>

    <!-- 时间选择器 -->
    <picker
      v-else-if="mode === 'time'"
      :value="timeValue"
      :start="start"
      :end="end"
      :disabled="disabled"
      mode="time"
      @change="handleTimeChange"
      @cancel="handleCancel"
    >
      <view class="picker-input" :class="{ disabled }">
        <text class="picker-text" :class="{ placeholder: !displayValue }">
          {{ displayValue || placeholder }}
        </text>
        <text class="picker-arrow">▼</text>
      </view>
    </picker>

    <!-- 日期选择器 -->
    <picker
      v-else-if="mode === 'date'"
      :value="dateValue"
      :start="start"
      :end="end"
      :fields="fields"
      :disabled="disabled"
      mode="date"
      @change="handleDateChange"
      @cancel="handleCancel"
    >
      <view class="picker-input" :class="{ disabled }">
        <text class="picker-text" :class="{ placeholder: !displayValue }">
          {{ displayValue || placeholder }}
        </text>
        <text class="picker-arrow">▼</text>
      </view>
    </picker>

    <!-- 地区选择器 -->
    <picker
      v-else-if="mode === 'region'"
      :value="regionValue"
      :custom-item="customItem"
      :disabled="disabled"
      mode="region"
      @change="handleRegionChange"
      @cancel="handleCancel"
    >
      <view class="picker-input" :class="{ disabled }">
        <text class="picker-text" :class="{ placeholder: !displayValue }">
          {{ displayValue || placeholder }}
        </text>
        <text class="picker-arrow">▼</text>
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  name: 'Picker',
  props: {
    // 选择器类型
    mode: {
      type: String,
      default: 'selector',
      validator: (value) => ['selector', 'multiSelector', 'time', 'date', 'region'].includes(value)
    },
    // 当前选中值
    value: {
      type: [String, Number, Array],
      default: ''
    },
    // 占位符
    placeholder: {
      type: String,
      default: '请选择'
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 普通选择器数据源
    range: {
      type: Array,
      default: () => []
    },
    // 对象数组时指定显示的key
    rangeKey: {
      type: String,
      default: ''
    },
    // 多列选择器数据源
    multiRange: {
      type: Array,
      default: () => []
    },
    // 时间选择器开始时间
    start: {
      type: String,
      default: ''
    },
    // 时间选择器结束时间
    end: {
      type: String,
      default: ''
    },
    // 日期选择器精度
    fields: {
      type: String,
      default: 'day',
      validator: (value) => ['year', 'month', 'day'].includes(value)
    },
    // 地区选择器自定义项
    customItem: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectorIndex: 0,
      multiIndex: [],
      timeValue: '',
      dateValue: '',
      regionValue: []
    }
  },
  computed: {
    displayValue() {
      switch (this.mode) {
        case 'selector':
          if (this.range.length && this.selectorIndex >= 0) {
            const item = this.range[this.selectorIndex]
            return this.rangeKey ? item[this.rangeKey] : item
          }
          return ''
        case 'multiSelector':
          if (this.multiRange.length && this.multiIndex.length) {
            return this.multiIndex.map((index, columnIndex) => {
              const column = this.multiRange[columnIndex]
              if (column && column[index]) {
                const item = column[index]
                return this.rangeKey ? item[this.rangeKey] : item
              }
              return ''
            }).join(' ')
          }
          return ''
        case 'time':
          return this.timeValue
        case 'date':
          return this.dateValue
        case 'region':
          return this.regionValue.join(' ')
        default:
          return ''
      }
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.initValue(newVal)
      },
      immediate: true
    }
  },
  methods: {
    // 初始化值
    initValue(value) {
      switch (this.mode) {
        case 'selector':
          if (typeof value === 'number') {
            this.selectorIndex = value
          } else if (typeof value === 'string' && this.range.length) {
            const index = this.range.findIndex(item => {
              return this.rangeKey ? item[this.rangeKey] === value : item === value
            })
            this.selectorIndex = index >= 0 ? index : 0
          }
          break
        case 'multiSelector':
          this.multiIndex = Array.isArray(value) ? [...value] : []
          break
        case 'time':
          this.timeValue = value || ''
          break
        case 'date':
          this.dateValue = value || ''
          break
        case 'region':
          this.regionValue = Array.isArray(value) ? [...value] : []
          break
      }
    },
    // 普通选择器改变
    handleSelectorChange(e) {
      const index = e.detail.value
      this.selectorIndex = index
      const item = this.range[index]
      const value = this.rangeKey ? item[this.rangeKey] : item
      this.$emit('change', {
        value: value,
        index: index,
        item: item
      })
    },
    // 多列选择器改变
    handleMultiChange(e) {
      const indexes = e.detail.value
      this.multiIndex = [...indexes]
      const values = indexes.map((index, columnIndex) => {
        const column = this.multiRange[columnIndex]
        if (column && column[index]) {
          const item = column[index]
          return this.rangeKey ? item[this.rangeKey] : item
        }
        return ''
      })
      this.$emit('change', {
        value: values,
        index: indexes
      })
    },
    // 多列选择器列改变
    handleColumnChange(e) {
      this.$emit('columnchange', e.detail)
    },
    // 时间选择器改变
    handleTimeChange(e) {
      const value = e.detail.value
      this.timeValue = value
      this.$emit('change', {
        value: value
      })
    },
    // 日期选择器改变
    handleDateChange(e) {
      const value = e.detail.value
      this.dateValue = value
      this.$emit('change', {
        value: value
      })
    },
    // 地区选择器改变
    handleRegionChange(e) {
      const value = e.detail.value
      this.regionValue = [...value]
      this.$emit('change', {
        value: value
      })
    },
    // 取消选择
    handleCancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
.picker-container {
  width: 100%;
}

.picker-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  background-color: #fff;
  border: 2rpx solid #e5e5e5;
  border-radius: 12rpx;
  min-height: 88rpx;
  box-sizing: border-box;
  transition: all 0.3s ease;

  &:active {
    border-color: #2e8b57;
    background-color: #f8f9fa;
  }

  &.disabled {
    background-color: #f5f5f5;
    border-color: #d9d9d9;
    opacity: 0.6;
  }
}

.picker-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;

  &.placeholder {
    color: #999;
  }
}

.picker-arrow {
  font-size: 24rpx;
  color: #999;
  margin-left: 16rpx;
  transition: transform 0.3s ease;
}

.picker-input:active .picker-arrow {
  transform: rotate(180deg);
}
</style>