<script setup lang="ts">
import { useConfigStore } from "@/store";
const configStore = useConfigStore();
import  Config from '@/config'
const { t } = useI18n()

const emit = defineEmits(['confirm']);
const areaCode = ref<string>('+1');
const columns = ref<string[]>(Config.phoneCodeList);
const localPhoneValue = ref('');

function confirmRide() {
  emit('confirm', {
    phone: localPhoneValue.value,
    areaCode: areaCode.value,
  })
  handleClose();
}

const show = ref(false);
function onOpen(data: {phone: string, areaCode: string}) {
  if(data.phone){
    localPhoneValue.value = data.phone;
  }
  if(data.areaCode){
    areaCode.value = data.areaCode;
  }
  show.value = true;
}
function handleClose() {
  show.value = false;
}

defineExpose({
  onOpen,
});
</script>
<template>
  <wd-popup v-model="show" position="bottom" @close="handleClose">
    <view class="w-full px-30rpx pt-58rpx">
      <view class="">
        <view class="flex items-center h-108rpx pr-28rpx rounded-12rpx b-1rpx bg-#F6F6F6">
          <view class="pr-14rpx text-28rpx">
            <wd-picker :columns="columns" v-model="areaCode" />
          </view>
          <wd-input v-model="localPhoneValue" @confirm="confirmRide" :placeholder="t('components.placeholder')" :no-border="true" placeholder-class="text-#A4A4A4 text-28rpx" custom-class="!w-full !bg-transparent"></wd-input>
        </view>
      </view>
      <view class="mt-40rpx">
        <wd-button
          @click="confirmRide"
          custom-class="!h-108rpx !text-36rpx !rounded-16rpx !bg-#14181B"
          block
        >
          {{ t('common.save') }}
        </wd-button>
      </view>
      <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
    </view>
  </wd-popup>
</template>
<style scoped lang="scss">
:deep(.wd-picker__cell) {
  background-color: transparent !important;
  .wd-picker__value {
    margin-right: 8rpx !important;
  }
}
: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>
