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

interface PickerOption {
  label: string
  value: any
}

interface Props {
  show: boolean
  options: PickerOption[]
  title?: string
  autoConfirm?: boolean
  selectedValue?: any
}

interface Emits {
  (e: 'update:show', value: boolean): void
  (e: 'confirm', option: PickerOption): void
  (e: 'cancel'): void
}

const props = withDefaults(defineProps<Props>(), {
  title: '请选择',
  autoConfirm: false,
})

const emit = defineEmits<Emits>()

const selectedIndex = ref(0)

function syncSelectedIndex() {
  if (!props.options.length) {
    selectedIndex.value = 0
    return
  }

  const matchedIndex = props.options.findIndex(option => option.value === props.selectedValue)
  selectedIndex.value = matchedIndex >= 0 ? matchedIndex : 0
}

watch(() => props.show, (show) => {
  if (show) {
    syncSelectedIndex()
  }
}, { immediate: true })

watch(() => props.selectedValue, () => {
  if (props.show) {
    syncSelectedIndex()
  }
})

watch(() => props.options, () => {
  if (props.show) {
    syncSelectedIndex()
  }
}, { deep: true })

// 关闭弹窗
function close() {
  emit('update:show', false)
}

// 取消
function handleCancel() {
  emit('cancel')
  close()
}

// 确认
function handleConfirm() {
  if (props.options.length > 0) {
    emit('confirm', props.options[selectedIndex.value])
  }
  close()
}

// 选择选项
function selectOption(index: number) {
  selectedIndex.value = index

  if (props.autoConfirm && props.options[index]) {
    emit('confirm', props.options[index])
    close()
  }
}
</script>

<template>
  <view
    v-if="show"
    class="simple-picker-overlay"
    @click="handleCancel"
  >
    <view
      class="simple-picker-content"
      @click.stop
    >
      <!-- 头部 -->
      <view class="simple-picker-header">
        <view class="simple-picker-cancel" @click="handleCancel">
          <text class="text-sm text-[#666]">取消</text>
        </view>
        <view class="simple-picker-title">
          <text class="text-base font-600 text-[#1e293b]">{{ title }}</text>
        </view>
        <view
          v-if="!autoConfirm"
          class="simple-picker-confirm"
          @click="handleConfirm"
        >
          <text class="text-sm text-brand font-600">确定</text>
        </view>
        <view
          v-else
          class="simple-picker-confirm"
        />
      </view>

      <!-- 选项列表 -->
      <scroll-view
        class="simple-picker-list"
        scroll-y
      >
        <view
          v-for="(option, index) in options"
          :key="index"
          class="simple-picker-item"
          :class="{ 'simple-picker-item-active': selectedIndex === index }"
          @click="selectOption(index)"
        >
          <text class="simple-picker-item-text">{{ option.label }}</text>
          <i
            v-if="selectedIndex === index"
            class="i-mdi-check text-lg text-brand"
          />
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style scoped>
.simple-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.simple-picker-content {
  background-color: #ffffff;
  border-radius: 16px 16px 0 0;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
}

.simple-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.simple-picker-cancel,
.simple-picker-confirm {
  min-width: 60px;
  padding: 4px 8px;
}

.simple-picker-cancel {
  text-align: left;
}

.simple-picker-confirm {
  text-align: right;
}

.simple-picker-title {
  flex: 1;
  text-align: center;
}

.simple-picker-list {
  flex: 1;
  overflow-y: auto;
  max-height: calc(60vh - 57px);
}

.simple-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #f8fafc;
  transition: background-color 0.2s;
}

.simple-picker-item:active {
  background-color: #f8fafc;
}

.simple-picker-item-active {
  background-color: #fef3f2;
}

.simple-picker-item-text {
  font-size: 15px;
  color: #1e293b;
  flex: 1;
}

.simple-picker-item-active .simple-picker-item-text {
  color: var(--brand-primary, #1677ff);
  font-weight: 600;
}
</style>
