<template>
  <view class="custom-picker">
    <view class="picker-mask" @touchmove.stop.prevent></view>
    <picker-view
      :immediate-change="true"
      :value="currentIndex"
      :indicator-style="indicatorStyle"
      :style="{
        border: 'none',
        'border-top': 'none',
        'border-bottom': 'none',
      }"
      @change="handleChange"
      class="picker-view"
      :mask-class="'picker-mask'"
      :indicator-class="'picker-indicator'"
    >
      <picker-view-column class="border-none">
        <view
          v-for="(item, index) in formattedList"
          :key="index"
          class="picker-item"
          :class="{ 'picker-item-selected': currentIndex[0] === index }"
        >
          {{ item }}
        </view>
      </picker-view-column>
    </picker-view>
    <!-- <view class="picker-indicator-line"></view> -->
  </view>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: [String, Number, Object],
    default: '',
  },
  list: {
    type: Array,
    required: true,
    default: () => [],
  },
  valueKey: {
    type: String,
    default: '',
  },
  labelKey: {
    type: String,
    default: '',
  },
  indicatorStyle: {
    type: String,
    default: 'height: 50px;',
  },
})

const emit = defineEmits(['update:modelValue', 'change'])

// 格式化列表数据
const formattedList = computed(() => {
  if (!props.list.length) return []

  // 处理简单数组 ['123', '456']
  if (typeof props.list[0] !== 'object') {
    return props.list
  }

  // 处理对象数组，使用labelKey
  if (props.labelKey) {
    return props.list.map((item) => item[props.labelKey])
  }

  // 处理对象数组，使用valueKey作为显示
  if (props.valueKey) {
    return props.list.map((item) => item[props.valueKey])
  }

  // 默认显示整个对象
  return props.list
})

// 计算当前选中项的索引
const currentIndex = computed(() => {
  if (!props.modelValue || !props.list.length) return [0]

  let targetValue = props.modelValue
  if (typeof props.list[0] === 'object' && props.valueKey) {
    targetValue = props.modelValue[props.valueKey]
  }

  const index = props.list.findIndex((item) => {
    if (typeof item === 'object' && props.valueKey) {
      return item[props.valueKey] === targetValue
    }
    return item === targetValue
  })

  return [index > -1 ? index : 0]
})

// 处理选择变化
const handleChange = (e: any) => {
  const index = e.detail.value[0]
  const selectedItem = props.list[index]

  let value = selectedItem
  if (typeof selectedItem === 'object' && props.valueKey) {
    value = selectedItem[props.valueKey]
  }

  emit('update:modelValue', value)
  emit('change', {
    value,
    index,
    item: selectedItem,
  })
}
</script>

<style scoped>
.custom-picker {
  width: 100%;
  height: 400rpx;
  position: relative;
  background-color: #fff;
}

.picker-view {
  width: 100%;
  height: 100%;
}

/* 覆盖picker-view的默认边框 */
.picker-view :deep(.uni-picker-view-indicator),
.picker-view :deep(.uni-picker-view-column),
.picker-view :deep(.uni-picker-view-group) {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

.picker-mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
}

.picker-indicator {
  height: 112rpx;
}

.picker-indicator-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -40rpx;
  height: 112rpx;
  pointer-events: none;
  z-index: 1;
}

.picker-item {
  text-align: center;
  font-size: 34rpx;
  color: #7c7c7c;
  transition: all 0.2s;

  display: flex;
  justify-content: center;
  align-items: center;
}

.picker-item-selected {
  color: #000;
  font-weight: 500;
  transform: scale(1.05);
}

/* 添加触摸反馈 */
.picker-view :deep(.uni-picker-view-wrapper) {
  -webkit-overflow-scrolling: touch;
}

.picker-view :deep(.uni-picker-view-content) {
  touch-action: pan-y;
}
</style>
