<script lang="ts" setup>
import {useUserStore} from "@/store";

const {t} = useI18n();
const userStore = useUserStore()
const show = ref(false);
const pickerValue = ref(0)
const emits = defineEmits(['confirm'])

function onOpen(value: number) {
  console.log('userStore', userStore.merchants)
  columns.value = userStore.merchants.map(item => ({
    value: item.id,
    label: item.merchantName
  }))
  console.log('userStore.currenMerchantInfo', userStore.currenMerchantInfo.id)
  if (userStore.currenMerchantInfo && userStore.currenMerchantInfo.id) {
    pickerValue.value = userStore.currenMerchantInfo.id;
  } else {
    pickerValue.value = columns.value[0].value;
  }
  show.value = true;
}

function handleClose() {
  show.value = false;
  pickerValue.value = null;
  columns.value = []
}

function handleSubmit() {
  let data = columns.value.find(item => item.value === pickerValue.value)
  if (data) {
    emits('confirm', data)
  }
  handleClose()
}

const columns = ref([])

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

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

<style lang="scss" scoped>
:deep(.uni-picker-view-wrapper) {
  & > uni-picker-view-column:first-of-type .uni-picker-view-group {
    .uni-picker-view-indicator {
      border-radius: 20rpx !important;

      &:after {
        border: none;
      }

      &:before {
        border: none;
      }
    }
  }
}

//:deep(.wd-picker-view-column__item) {
//  height: 94rpx !important;
//  line-height: 94rpx !important;
//}
//
//:deep(.uni-picker-view-indicator) {
//  height: 94rpx !important;
//}
</style>