<script setup lang="ts">
import { UserAddressType } from '@/constant/enums';
import { useAddressStore } from '@/pages/address/store/address';

const { t } = useI18n();
const addressStore = useAddressStore();

/** 新地址首次进入保存页：与原先 choose-type 全页等价的介绍弹窗 */
const showIntro = ref(false);
/** 点击表单「建筑类型」行：原有滚轮选择器 */
const showPicker = ref(false);

const emit = defineEmits<{
  submit: [value: string];
}>();

const typeList = computed(() => [
  {
    label: t('pages.address.choose-type.house'),
    desc: t('pages.address.choose-type.houseDescription'),
    value: UserAddressType.HOUSE,
    icon: '/static/images/chef/147.png',
  },
  {
    label: t('pages.address.choose-type.apartment'),
    desc: t('pages.address.choose-type.apartmentDescription'),
    value: UserAddressType.APARTMENT,
    icon: '/static/images/chef/148.png',
  },
  {
    label: t('pages.address.choose-type.office'),
    desc: t('pages.address.choose-type.officeDescription'),
    value: UserAddressType.OFFICE,
    icon: '/static/images/chef/149.png',
  },
  {
    label: t('pages.address.choose-type.hotel'),
    desc: t('pages.address.choose-type.hotelDescription'),
    value: UserAddressType.HOTEL,
    icon: '/static/images/chef/150.png',
  },
  {
    label: t('pages.address.choose-type.other'),
    desc: t('pages.address.choose-type.otherDescription'),
    value: UserAddressType.OTHER,
    icon: '/static/images/chef/151.png',
  },
]);

const columns = computed(() => [
  { 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 },
]);

const pickerValue = ref<string>(UserAddressType.HOUSE);

function routeForType(type: string): string {
  switch (type) {
    case UserAddressType.HOUSE:
      return 'pages/address/save-address/house';
    case UserAddressType.APARTMENT:
      return 'pages/address/save-address/apartment';
    case UserAddressType.OFFICE:
      return 'pages/address/save-address/office';
    case UserAddressType.HOTEL:
      return 'pages/address/save-address/hotel';
    case UserAddressType.OTHER:
      return 'pages/address/save-address/other';
    default:
      return '';
  }
}

function currentSaveAddressRoute(): string {
  const pages = getCurrentPages();
  return pages[pages.length - 1]?.route ?? '';
}

/** 点击表单行：滚轮选择器（原效果） */
function onOpen() {
  pickerValue.value =
    addressStore.addressInfo.type && `${addressStore.addressInfo.type}`.length > 0
      ? (addressStore.addressInfo.type as string)
      : UserAddressType.HOUSE;
  showPicker.value = true;
}

function handlePickerClose() {
  showPicker.value = false;
}

function handlePickerCancel() {
  showPicker.value = false;
}

function handlePickerConfirm() {
  addressStore.addressInfo.type = pickerValue.value;
  showPicker.value = false;
  const next = routeForType(pickerValue.value);
  if (next && currentSaveAddressRoute() !== next) {
    emit('submit', pickerValue.value);
  }
}

/** 新地址首次进入页面时由父级调用 */
function openIntroSheet() {
  showIntro.value = true;
}

function handleIntroClose() {
  showIntro.value = false;
}

/** 蒙层关闭且尚未完成选择时，与「跳过」一致 */
function onIntroPopupClosed() {
  if (!addressStore.pendingIntroBuildingType) return;
  addressStore.pendingIntroBuildingType = false;
  addressStore.addressInfo.type = UserAddressType.OTHER;
  const next = routeForType(UserAddressType.OTHER);
  if (next && currentSaveAddressRoute() !== next) {
    emit('submit', UserAddressType.OTHER);
  }
}

function chooseIntroType(item: { value: string }) {
  addressStore.pendingIntroBuildingType = false;
  addressStore.addressInfo.type = item.value;
  showIntro.value = false;
  const next = routeForType(item.value);
  if (next && currentSaveAddressRoute() !== next) {
    emit('submit', item.value);
  }
}

function handleIntroSkip() {
  addressStore.pendingIntroBuildingType = false;
  addressStore.addressInfo.type = UserAddressType.OTHER;
  showIntro.value = false;
  const next = routeForType(UserAddressType.OTHER);
  if (next && currentSaveAddressRoute() !== next) {
    emit('submit', UserAddressType.OTHER);
  }
}

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

<template>
  <!-- 新地址首次：建筑类型介绍底部弹窗 -->
  <wd-popup
    v-model="showIntro"
    position="bottom"
    :z-index="120"
    custom-style="background: transparent;"
    @close="onIntroPopupClosed"
  >
    <view class="bg-white rounded-t-32rpx overflow-hidden pb-[calc(24rpx+env(safe-area-inset-bottom))]">
      <view class="relative px-30rpx pt-40rpx pb-8rpx">
        <text
          class="absolute right-30rpx top-40rpx z-1 text-32rpx lh-32rpx text-#CE7138"
          @click="handleIntroSkip"
        >
          {{ t('common.skip') }}
        </text>
        <view class="text-center text-36rpx lh-44rpx text-#333 font-500 pr-100rpx pl-100rpx">
          {{ t('pages.address.choose-type.title') }}
        </view>
        <view class="mt-24rpx text-center text-28rpx lh-36rpx text-#666">
          {{ t('pages.address.choose-type.description') }}
        </view>
      </view>

      <scroll-view scroll-y class="box-border max-h-[62vh] px-30rpx pb-8rpx pt-28rpx">
        <view
          v-for="(item, index) in typeList"
          :key="item.value"
          :class="[
            index === 0 ? '' : 'mt-28rpx',
            item.value === addressStore.addressInfo.type
              ? 'border-#000 border-4rpx'
              : 'border-#DFDFDF border-2rpx',
            'border-solid rounded-16rpx px-28rpx py-34rpx flex items-center',
          ]"
          @click="chooseIntroType(item)"
        >
          <image :src="item.icon" class="h-48rpx mr-28rpx shrink-0 w-48rpx" />
          <view class="min-w-0 flex-1">
            <view class="text-36rpx lh-40rpx text-#333 font-500">
              {{ item.label }}
            </view>
            <view class="mt-18rpx text-28rpx lh-32rpx text-#6D6D6D">
              {{ item.desc }}
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </wd-popup>

  <!-- 点击建筑类型行：原滚轮选择 -->
  <wd-popup
    v-model="showPicker"
    position="bottom"
    :z-index="121"
    @close="handlePickerClose"
  >
    <view>
      <view class="flex-center-sb h-102rpx bg-#F7F7F7 px-30rpx">
        <view class="text-30rpx text-#999" @click="handlePickerCancel">{{ t('common.cancel') }}</view>
        <view class="text-34rpx text-#333">{{ t('common.buildingType') }}</view>
        <view class="text-30rpx text-#FF6106" @click="handlePickerConfirm">{{ t('common.confirm') }}</view>
      </view>
      <view class="bg-#fff px-54rpx py-56rpx">
        <wd-picker-view
          :columns="columns"
          v-model="pickerValue"
          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>
