<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-08-18 18:49:55
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-10-23 18:45:05
 * @FilePath: \housekeeping-uniapp\src\components\widgets\my-service\components\customer-service.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <u-popup v-model="show" mode="center" border-radius="10" :closeable="true">
        <view class="box">
            <div class="box-title leading-[50rpx] text-xl font-bold text-black">请选择咨询方式</div>
            <ul>
                <li
                    v-for="(item, index) in communicateWay"
                    :key="index"
                    class="li"
                    @click="handleClick(item.type)"
                >
                    <div>{{ item.name }}</div>
                    <div>
                        {{ item.desc }}
                        <u-icon name="arrow-right" color="#999BAD" />
                    </div>
                    <button
                        class="button"
                        type="default"
                        open-type="contact"
                        v-if="item.type === 'online'"
                    ></button>
                    <button
                        class="button"
                        type="default"
                        @click="call"
                        v-else-if="item.type === 'phone'"
                    ></button>
                </li>
            </ul>
        </view>
    </u-popup>
</template>
<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import { getDecorate } from '@/api/shop'
import { apiContactService } from '@/api/app'

const show = ref(false)
const open = () => {
    getContactService()
}
const close = () => {
    show.value = false
}
defineExpose({ open })
const communicateWay = reactive([
    {
        name: '在线客服',
        desc: '早上 9:00 - 22:00',
        type: 'online'
    },
    {
        name: '电话客服',
        desc: '早上 9:00 - 22:00',
        type: 'phone'
    },
    {
        name: '微信客服',
        desc: '查看客服二维码',
        type: 'wechat'
    }
])

const getContactService = async () => {
    apiContactService('')
        .then(response => {
            const res = JSON.parse(response.pageData)
            const { onlineTime, phoneTime } = res[0].content
            onlineTime && (communicateWay[0].desc = onlineTime)
            phoneTime && (communicateWay[1].desc = phoneTime)
            show.value = true
        })
        .catch(err => {})
}

const handleClick = (type: string) => {
    if (type === 'wechat') {
        uni.navigateTo({
            url: '/bundle/pages/contact_service/index'
        })
        close()
    }
}
const call = async () => {
    const data = await getDecorate({ id: 3 })
    const datas = JSON.parse(data.pages)
    const mobile = datas[0].content.mobile
    uni.makePhoneCall({
        phoneNumber: mobile,
        success: function () {
            console.log('拨打电话成功')
        },
        fail: function () {
            console.log('拨打电话失败')
        }
    })
}
</script>
<style lang="scss" scope>
.box {
    height: auto;
    width: 90vw;
    padding: 20rpx 20rpx 0 20rpx;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(225, 239, 252, 1) 100%);
    .button {
        position: absolute;
        width: 100%;
        background: transparent;
        height: 100%;
        padding: 0;
        &::after {
            border: none;
        }
    }
    .li {
        @apply flex justify-between h-[100rpx] leading-[100rpx] border-[#999BAD] border-dashed border-0 border-b relative text-xl;
        &:last-child {
            border: none;
        }
    }
}
</style>
