<template>
    <view class="container">

        <!-- 底部按钮 -->
        <view class="footer">
            <!-- 查询区域 -->
            <view class="query-section">
                <u-radio-group v-model="form.searchType" @change="playGlobalSound">
                    <u-radio label="查订单" name="1" label-size="17" />
                    <u-radio label="查物流" custom-style="margin-left:20px" name="2" label-size="17" />
                </u-radio-group>

                <view class="search-box">
                    <u-input custom-style="width:100rpx" v-model="form.search"
                        :placeholder="form.searchType == '1' ? '扫描/输入订单编号' : '扫描/输入物流单号'" border="surround" clearable
                        @focus="playGlobalSound" placeholder-style="font-size:32rpx"
                        :customStyle="{ 'fontSize': '32rpx' }">
                    </u-input>
                    <u-button color="#c8c8c8" text="查询" @click="handleSearch" />
                </view>
            </view>

            <u-divider></u-divider>

            <view style="display: flex;">
                <u-button size="large" type="success" text="扫码" @click="handleScan" />
            </view>
        </view>
    </view>
</template>

<script setup>
import {
    ref,
    onUnmounted
} from 'vue';
import {
    onLoad,
    onShow
} from '@dcloudio/uni-app'

const form = ref({
    searchType: '2',
    search: ''
});

//点击全局音效
function playGlobalSound() {
    uni.$u.playClickSound()
}

// 处理查询
const handleSearch = () => {
    if (!form.value.search) {
        let text = form.value.searchType == '1' ? '请输入订单编号' : '请输入物流单号'
        uni.$u.ttsModule.speak(text)
        return
    }
    // TODO: 查询订单
    uni.$u.http.get('/app/orderinfo/getOrderInfoForCheck', {
        params: {
            ...form.value
        }
    }).then(res => {
        if (res.code == 200) {
            uni.setStorageSync('orderDetail', res.data)
            uni.navigateTo({
                url: `/pages/index/detail/index?id=${res.data.orderId}`
            })
        } else {
            let text = form.value.search + res.msg
            uni.$u.ttsModule.speak(text)
        }
    })
    playGlobalSound()
};

// 处理扫码
const handleScan = () => {
    playGlobalSound()
    uni.scanCode({
        success: (res) => {
            form.value.search = res.result;
            handleSearch();
        }
    });
}
// #ifdef APP-PLUS
const { unregister } = uni.$u.useEventListener((e) => {
    form.value.search = e.barcode
    handleSearch()
})
// #endif

onUnmounted(() => {
    // #ifdef APP-PLUS
    unregister();
    // #endif
});
</script>

<style lang="scss" scoped>
@import '../components/common.scss';
</style>