<template>
    <uni-transition
        mode-class="zoom-in"
        needLayout="true"
        :show="serviceData.qrcode.length"
        :duration="500"
    >
        <view class="box">
            <view class="flex justify-center">
                <u-image :src="getImageUrl(serviceData.qrcode)" width="300" height="300"></u-image>
            </view>
            <view class="text-center mt-[20rpx] normal text-base">
                {{ serviceData.title }}
            </view>
            <view class="text-center mt-[20rpx] text-muted text-sm" v-if="serviceData.time">
                服务时间：{{ serviceData.time }}
            </view>
            <view class="text-center mt-[20rpx] text-muted text-sm" v-if="serviceData.mobile">
                服务电话：{{ serviceData.mobile }}
            </view>
            <view class="mt-[40rpx]">
                <!-- #ifdef H5 -->
                <button
                    class="custom-button-bgColor text-lg text-white rounded-full"
                    @click="toast('长按二维码保存')"
                >
                    长按二维码保存
                </button>
                <!-- #endif -->
                <!-- #ifndef H5 -->
                <button
                    class="custom-button-bgColor text-lg text-white leading-[80rpx] h-[80rpx] rounded-full"
                    @click="saveImageQr"
                >
                    保存二维码
                </button>
                <!-- #endif -->
            </view>
        </view>
    </uni-transition>
</template>

<script lang="ts" setup>
// 联系客服
import { ref } from 'vue'
import { toast } from '@/utils/util'
import { apiContactService } from '@/api/app'
import { useAppStore } from '@/stores/app'

const { getImageUrl } = useAppStore()

/** Interface Start **/
interface serviceDataObj {
    qrcode: string // 客服二维码
    title: string // 客服微信
    mobile: string // 客服电话
    time: string // 服务时间
}
/** Interface End **/

/** Data Start **/

const serviceData = ref<serviceDataObj>({
    qrcode: '',
    title: '',
    mobile: '',
    time: ''
})
/** Data End **/

/** Methods Start **/
// 获取客服信息
const getContactService = async (): Promise<void> => {
    const data = await apiContactService('')
    const res = JSON.parse(data.pageData)
    serviceData.value = res[0].content
}

// 保存二维码
const saveImageQr = async (): Promise<void> => {
    try {
        const res = await uni.getImageInfo({ src: getImageUrl(serviceData.value.qrcode) })

        try {
            await uni.saveImageToPhotosAlbum({ filePath: res.path })
            uni.$u.toast('保存成功')
        } catch (e) {
            const modelRes = await uni.showModal({
                title: '图片保存失败',
                content: '请确认是否已开启授权'
            })
            if (modelRes.confirm) uni.openSetting()
        }
    } catch (err) {
        uni.$u.toast('请在小程序后台配置downloadFile')
    }
}
/** Methods End **/

/** Life Cycle Start **/
getContactService()
/** Life Cycle End **/
</script>

<style lang="scss">
page {
    padding: 24rpx;
    box-sizing: border-box;
    background-color: #ffffff;
}

.box {
    padding: 64rpx 120rpx;
    background: linear-gradient(
        to bottom,
        rgba(#f36161, 0.1),
        rgba(#f36161, 0) 164rpx,
        transparent 0
    );
}
</style>
