<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-11-13 09:19:21
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-11-14 20:02:06
 * @FilePath: \housekeeping-uniapp\src\pages\goods\components\sticky-spec.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="category-tabs mt-2.5">
        <tabs
            :current="setTabIndex"
            :swipeable="false"
            v-bind="tabStyle"
            :isFixed="true"
            @change="handleRewriteChangeTab"
        >
            <tab v-for="(item, i) in categoryTabs" :key="i" :name="item.name"></tab>
        </tabs>
        <view v-show="setTabIndex === 0">
            <view class="p-[24rpx] bg-white">
                <u-parse v-if="goodsData?.content" :html="goodsData?.content"></u-parse>
                <view class="text-center mt-4 text-lg" v-else>暂无服务详情</view>
            </view>
        </view>
        <view v-show="setTabIndex === 1">
            <view class="py-[12rpx] bg-white px-4">
                <view v-if="goodsData!.rules.length > 0">
                    <view
                        class="leading-8 text-justify text-lg"
                        v-for="(rule, index) in goodsData?.rules"
                        :key="rule.id"
                    >
                        <text>{{ `${index + 1})` }}</text>
                        <text>
                            距离上门服务时间
                            <text class="text-[#C71D23]">{{ rule.intervalTime }}</text>
                            分钟以内，取消服务需扣除
                            <text class="text-[#C71D23]">{{ rule.value }}</text>
                            %的退单费；
                        </text>
                    </view>
                </view>
                <view class="text-center mt-4 text-lg" v-else>暂无服务须知</view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { PropType, computed, getCurrentInstance, onMounted, ref, unref } from 'vue'
import { useTabs } from '@/hooks/useCoupon'
import { GOODS } from '../index.vue'
import { onLoad, onPageScroll } from '@dcloudio/uni-app'
import { getRect } from '@/utils/util'

const props = defineProps({
    goodsData: Object as PropType<GOODS>
})
const emit = defineEmits(['scrollOffset'])

const { tabStatus, setTabIndex, handleChangeTab } = useTabs()
console.log(unref(setTabIndex), '===')

const categoryTabs = ref([{ name: '服务详情' }, { name: '服务须知' }])

const tabStyle = computed(() => {
    return {
        height: 100,
        barWidth: 90,
        fontSize: 32,
        barStyle: { bottom: 0 },
        activeColor: '#1296DB'
    }
})

const handleRewriteChangeTab = (index: number) => {
    handleChangeTab(index)
    // emit('scrollOffset')
}
const instance = getCurrentInstance()
</script>
<style scoped></style>
