<script setup lang="ts">
import * as R from 'ramda'
import {debounce} from "throttle-debounce";
import Config from "@/config";
import {useConfigStore, useUserStore} from "@/store";
import {getNailServiceDetail} from "@/service";
import type {Service} from "@/service/index-data";
import {thumbnailImg} from "@/utils/utils";

const emits = defineEmits<{
  'success': [data: Service]
}>()
const {t} = useI18n();
const configStore = useConfigStore();
const userStore = useUserStore();

const info = ref<Service>({})
const show = ref(false);

const images = computed(() => {
  const {images} = info.value
  if (R.equals(R.type(images), 'String') && R.isNotEmpty(images)) {
    return R.split(',', images as string)
  }
  return []
})

function init(id: string) {
  initData(id)
  show.value = true;
}

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


function handlePreview(current: string, urls: string[]) {
  uni.previewImage({
    current,
    urls
  })
}


function submit() {
  if (!userStore.checkLogin()) {
    return
  }
  close();
  emits('success', info.value)
}

const handleSubmit = debounce(Config.debounceLongTime, submit, {atBegin: true});

async function initData(id: string) {
  try {
    const res = await getNailServiceDetail({
      id: id
    })

    info.value = res.data || {}
  } catch (e) {
  }
}


defineOptions({
  name: "ServiceDetail",
});

defineExpose({
  show,
  init,
  close,
});
</script>

<template>
  <wd-popup

      custom-class="rounded-t-30rpx"
      position="bottom"
      safe-area-inset-bottom
      v-model="show"
      @close="close"
  >
    <view class="box-border h-1190rpx p-[40rpx+30rpx+0rpx] flex flex-col"
    >
      <view class="relative pb-20rpx pr-32rpx flex items-center justify-between">
        <view class="text-34rpx text-primary font-bold lh-48rpx">
          {{ info.name }}
        </view>
        <image class="absolute right-0 w-32rpx h-32rpx" src="@img/2106@2x.png" @click="close"></image>
      </view>
      <scroll-view scroll-y="true" class="mt-8rpx flex-1 overflow-hidden">
        <view class="text-26rpx text-#999 font-bold lh-36rpx">{{
            t('common.over')
          }} {{ info.serviceTime }} {{ t('common.number-minutes') }}
        </view>
        <view class="mt-20rpx text-26rpx text-#666 font-bold lh-36rpx">S${{ info.serviceAmount }}</view>
        <view class="mt-40rpx pb-30rpx text-24-bold">
          {{ info.serviceDetail }}
        </view>
        <view class="mt-4rpx flex justify-between flex-wrap">
          <view class="relative mt-20rpx flex shrink-0" v-for="(item, index) in images"
                :key="item"
          @click="handlePreview(item, images)"
          >
            <image class=" w-202rpx h-202rpx  rounded-20rpx" :src="thumbnailImg(item)"></image>
          </view>
          <template v-if="images.length % 3 === 1">
            <view class="w-202rpx h-202rpx"></view>
            <view class="w-202rpx h-202rpx"></view>
          </template>
          <template v-if="images.length % 3 === 2">
            <view class="w-202rpx h-202rpx"></view>
          </template>
        </view>
        <view class="h-30rpx"></view>
      </scroll-view>
    </view>
    <fixed-bottom-large-btn :text="t('common.add-to-booking')"
                            @click="handleSubmit"
    />
  </wd-popup>
</template>

<style scoped lang="scss"></style>
