<script lang="ts" setup>
import {useScrollThreshold} from "@/hooks/useScrollThreshold";
import Application from "./components/application.vue";
import TipPopup from "./components/tip-popup.vue";
import CookingMachineSkeleton from "./components/cooking-machine-skeleton.vue";
import {appAutomaticCookingMachineDetailGet} from "@/service";

const {t} = useI18n()
const applicationRef = ref();

function handleInputUpdateModelValue() {
  applicationRef.value.onOpen()
}

function applicationSubmit() {
  handleTipPopupOpen()
}

const tipPopupRef = ref();

function handleTipPopupOpen() {
  tipPopupRef.value.onOpen()
}

const currentType = ref(0);
const typeList = [t('common.details'), t('common.instructions')];

const showStatusBar = useScrollThreshold();

// 加载状态
const loading = ref(true);
const detailData = ref({})
const swiperList = computed(() => {
  if (!detailData.value) return [];
  return detailData.value?.showImage.split(',');
})
onMounted(() => {
  loading.value = true;
  appAutomaticCookingMachineDetailGet({}).then(res => {
    console.log('res', res)
    detailData.value = res.data
  }).finally(() => {
    loading.value = false;
  })
});

onPageScroll((e) => {
  uni.$emit("page-scroll", e);
});

function goBack() {
  uni.navigateBack({
    delta: 1
  })
}
</script>

<template>
  <view>
    <!-- 骨架屏 -->
    <cooking-machine-skeleton v-if="loading"/>

    <!-- 主要内容 -->
    <template v-else>
      <!-- 主图 -->
      <wd-swiper :list="swiperList" autoplay height="750rpx"></wd-swiper>
      <view
          :class="[showStatusBar ? 'bg-#fff' : '']"
          class="fixed top-0 left-0 z-9 w-full px-30rpx transition-all pt-16rpx"
      >
        <!-- 状态栏 -->
        <status-bar/>
        <!-- 返回按钮 -->
        <image
            class="w-48rpx h-48rpx relative z-1"
            mode="aspectFill"
            src="@img/chef/1327.png"
            @click="goBack"
        />
      </view>

      <view class="px-30rpx py-28rpx">
        <view class="text-40rpx lh-40rpx font-500 text-#333">{{ detailData.title }}</view>
        <view class="text-28rpx lh-28rpx text-#333 mt-28rpx">sales volume：{{ detailData.sales }}</view>
        <view class="w-374rpx mt-64rpx">
          <l-segmented v-model="currentType" :options="typeList" active-color="#333" bg-color="#F2F2F2" shape="round"/>
        </view>
        <view v-show="currentType === 0" class="text-30rpx lh-44rpx text-#333 mt-36rpx">
          <mp-html
              :content="(detailData.detail)"
              :preview-img="false"
              :show-img-menu="false"
              :tag-style="{
        div: 'white-space: pre-wrap;',
        p: 'white-space: pre-wrap;',
       img: 'width:100%;max-width: 100%;height:auto;',
      }"
              selectable
          ></mp-html>
        </view>


        <view v-show="currentType === 1" class="text-30rpx lh-44rpx text-#333 mt-36rpx">
          <mp-html
              :content="(detailData.instructions)"
              :preview-img="false"
              :show-img-menu="false"
              :tag-style="{
        div: 'white-space: pre-wrap;',
        p: 'white-space: pre-wrap;',
       img: 'width:100%;max-width: 100%;height:auto;',
      }"
              selectable
          ></mp-html>
        </view>
      </view>

      <fixed-bottom-large-btn
          :text="t('common.inquiry')"
          class="z-100"
          fixed
          @click="handleInputUpdateModelValue"
      />

      <application ref="applicationRef" @submit="applicationSubmit"/>
      <tip-popup ref="tipPopupRef"/>
    </template>
  </view>
</template>
<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
:deep(.wd-swiper__track) {
  border-radius: 0 !important;
}
</style>