<script setup lang="ts">
import {getAllBalanceDetailTypeApi} from "@/pages-user/service";

const { t } = useI18n();
const emit = defineEmits(['confirm'])

const show = ref(false);
const value = ref()

function onOpen() {
  // 获取余额类型
  getAllBalanceDetailType()
  show.value = true;
}

function getAllBalanceDetailType() {
  getAllBalanceDetailTypeApi(1, {}).then(res => {
    console.log('余额类型', res)
    columns.value = res.data
    if(res.data && res.data.length > 0) {
      value.value = res.data[0].code
    }
  })
}

function handleClose() {
  show.value = false;
}
function handleSubmit() {
  let data = columns.value.find(item => item.code === value.value)
  emit('confirm', data)
  handleClose()
}

const columns = ref([])

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('pages-user.balance.type') }}</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" label-key="name" value-key="code" />
    </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>