<script setup lang="ts">
const { t } = useI18n();
const show = ref(false);
const pickerValue = ref(0)
const emits = defineEmits(['confirm'])

function onOpen(value?: number) {
  if (value !== undefined && value !== null) {
    pickerValue.value = value;
  }
  show.value = true;
}
function handleClose() {
  show.value = false;
}
function handleSubmit() {
  emits('confirm', columns.value[pickerValue.value])
  handleClose()
}

const columns = ref([{
  value: 0,
  label: t('components.visit.leaveItToMePersonally'),
}, {
  value: 1,
  label: t('components.visit.putItAtTheDoor'),
}])

defineExpose({
  onOpen,
});
</script>

<template>
  <wd-popup
      v-model="show"
      position="bottom"
      @close="handleClose"
  >
    <view>
      <view class="flex-center-sb h-102rpx bg-#F7F7F7 px-30rpx">
        <view @click="handleClose" class="text-30rpx text-#999">{{ t('common.cancel') }}</view>
        <view class="text-34rpx text-#333">{{ t('common.select') }}</view>
        <view @click="handleSubmit" class="text-30rpx text-#FF6106">{{ t('common.confirm') }}</view>
      </view>
      <view class="bg-#fff px-54rpx py-56rpx">
        <wd-picker-view :columns="columns" v-model="pickerValue"/>
      </view>
    </view>
  </wd-popup>
</template>

<style scoped lang="scss">
:deep(.uni-picker-view-wrapper) {
  & > uni-picker-view-column:first-of-type .uni-picker-view-group {
    .uni-picker-view-indicator {
      border-radius: 20rpx 0 0 20rpx !important;
      &:after {
        border: none;
      }
      &:before {
        border: none;
      }
    }
  }
}
:deep(.wd-picker-view-column__item) {
  line-height: 94rpx !important;
}
:deep(.uni-picker-view-indicator) {
  height: 94rpx !important;
}
</style>