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

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

function onOpen(value: number) {
  getMenuListByMerchant()
  show.value = true;
}

function getMenuListByMerchant() {
  appMerchantMenuMenuListByMerchantPost({
    params: {
      pageSize: 1000,
      pageNum: 1
    }
  }).then(res => {
    if (res.rows && res.rows.length > 0) {
      columns.value = res.rows.map((item) => {
        return {
          value: item.id,
          label: item.menuName,
        }
      })
    }
  })
}


function handleClose() {
  show.value = false;
}

function handleSubmit() {
  console.log('handleSubmit', pickerValue.value)
  emits('confirm', pickerValue.value)
  handleClose()
}

const columns = ref([])

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

<template>
  <view>
    <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.menus') }}</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-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 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>