<!-- 扫一扫 -->
<template>
    <view class="scan-view">
        <view class="scan-border">
            <template v-if="authCamera">
                <camera
                    class="scan-camera"
                    @scancode="onScancode"
                    mode="scanCode"
                    device-position="back"
                    flash="off"
                    @error="cameraError"
                >
                    <cover-view class="scan-animation" :animation="animationData"></cover-view>
                </camera>
            </template>
            <template v-else>
                <view
                    @click="openAuth"
                    class="h-full flex flex-col items-center justify-center text-white"
                >
                    <view>去开启摄像头权限</view>
                    <view>进行扫码</view>
                </view>
            </template>
        </view>
    </view>
</template>
<script setup>
import { onMounted, ref, unref } from 'vue'
import { onHide, onLoad } from '@dcloudio/uni-app'
import { toast } from '@/utils/util'

const emit = defineEmits(['update:modelValue'])

const type = ref(0)
const activeId = ref('')
const authCamera = ref(true)
const animation = uni.createAnimation({})
const hasScan = ref(false)
const animate = ref(null)
const animationData = ref({})
const donghua = () => {
    let scode = true
    setInterval(() => {
        if (scode) {
            animate.value.translateY(0).step({
                duration: 1500
            })
            scode = !scode
        } else {
            animate.value.translateY(200).step({
                duration: 1500
            })
            scode = !scode
        }
        animationData.value = animate.value.export()
    }, 1500)
}

// 扫描到结果了，跳转在线报修页面
const onScancode = e => {
    if (!hasScan.value) {
        // hasScan.value = true
        const res = e.detail.result
        emit('update:modelValue', res)
    }
}

const cameraError = () => {
    uni.showModal({
        title: '提示',
        content: '请开启摄像头权限，否则无法扫描',
        confirmText: '去开启',
        success(res) {
            if (res.confirm) {
                openAuth()
            } else if (res.cancel) {
                console.log('用户点击取消')
                authCamera.value = false
                // uni.navigateBack({
                //     delta: 1
                // })
            }
        }
    })
}

const openAuth = () => {
    uni.openSetting({
        success(res) {
            if (res.authSetting['scope.camera']) {
                // 重点是这里，再次允许授权后需要刷新一下页面，camera组件才会出来
                uni.redirectTo({
                    url: `/bundle/pages/scan/scan?type=${unref(type)}`
                })
            } else {
                authCamera.value = false
            }
        }
    })
}
onMounted(() => {
    animate.value = animation
    donghua()
})
onLoad(options => {
    type.value = options.type
    activeId.value = options.id
})
onHide(() => {
    hasScan.value = false
})
</script>
<style lang="scss" scoped>
.scan-view {
    width: 100%;
    height: 470rpx;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    align-items: center;
    justify-content: space-around;
    color: #fff;
}

.scan-border {
    width: 100%;
    height: 100%;
    background-color: #808080;
    display: flex;
    flex-direction: column;
    align-items: center;

    .scan-camera {
        width: 100%;
        height: 100%;
        border-radius: 6rpx;
    }
}

.scan-animation {
    position: absolute;
    top: 8%;
    left: 20%;
    width: 480rpx;
    height: 8rpx;
    background-color: #8e4410;
    border-radius: 50%;
}
</style>
