<script setup lang="ts">
import {UserAddressType} from "@/constant/enums";

const { t } = useI18n();
const show = ref(false);
const value = ref('house')

const emit = defineEmits(['submit'])

function onOpen() {
  show.value = true;
}
function handleClose() {
  show.value = false;
}
function handleSubmit() {
  console.log('value', value.value)
  emit('submit', value.value)
  handleClose()
}

const columns = ref(
    [
      {
        label: t('pages.address.choose-type.house'),
        value: UserAddressType.HOUSE,
      },
      {
        label: t('pages.address.choose-type.apartment'),
        value: UserAddressType.APARTMENT,
      },
      {
        label: t('pages.address.choose-type.office'),
        value: UserAddressType.OFFICE,
      },
      {
        label: t('pages.address.choose-type.hotel'),
        value: UserAddressType.HOTEL,
      },
      {
        label: t('pages.address.choose-type.other'),
        value: UserAddressType.OTHER,
      },
    ]
)
function onChange({picker, value, index}) {
}

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.buildingType') }}</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="value" @change="onChange" label-key="label" value-key="value" />
      </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>