<!-- 扫一扫 -->
<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>
                    <!-- <cover-view class="scan-pict" @click="onPhoto">
                    <TIcon name="icon-image" :size="20" color="#fff" />
                </cover-view> -->
                </camera>
                <view class="pt-3">将二维码放在框内，即可自动扫描</view>
                <view class="mt-10 mb-3">扫描不出来？在下面输入{{ typeMap[type]?.codeText }}</view>
            </template>
            <template v-else>
                <view
                    @click="openAuth"
                    class="h-[50%] flex flex-col items-center justify-center text-white"
                >
                    <view>去开启摄像头权限</view>
                    <view>进行扫码</view>
                </view>
            </template>
            <view class="code-input">
                <u-input
                    border="none"
                    :placeholder="`请输入${typeMap[type]?.codeText}`"
                    shape="circle"
                    v-model="deviceCode"
                >
                    <!-- <template #suffix>
                    
                </template> -->
                </u-input>
                <view class="btn" @click.stop="confirm">
                    <text>确定</text>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { onMounted, ref, unref } from 'vue'
import { onHide, onLoad } from '@dcloudio/uni-app'
import { toast } from '@/utils/util'

const type = ref(0)
const activeId = ref('')
const deviceCode = ref('')
const authCamera = ref(true)
const typeMap = {
    1: {
        route: '/bundle/pages/overhaul/module-replace', //模块替换
        codeText: '模块代码'
    },
    2: {
        route: '/bundle/pages/overhaul/module-return', //模块返修
        codeText: '模块代码'
    },
    3: {
        route: '/bundle/pages/client/online', //在线报修
        codeText: '设备编号'
    },
    4: {
        route: '/bundle/pages/repair/apply-return-stash', //维修员退仓申请
        codeText: '模块代码'
    },
    5: {
        route: '/bundle/pages/repair/apply-material', //维修员领料申请
        codeText: '模块代码'
    },
    6: {
        route: '/bundle/pages/repair/step/dismantle', //拆机时录入配件
        codeText: '部件编码'
    },
    7: {
        route: '/bundle/pages/repair/step/step-pfc', //pfc组装扫描模块代码
        codeText: '模块代码'
    },
    8: {
        route: '/bundle/pages/repair/step/step-pfc', //pfc组装扫描配件编码
        codeText: '部件编码'
    }
}
const animation = uni.createAnimation({})
const hasScan = ref(false)
const animate = ref(null)
const animationData = ref({})
const isUpdate = ref('')
const donghua = () => {
    let scode = true
    animate.value.translateY(200).step({
        duration: 1500
    })
    scode = !scode
    setInterval(() => {
        if (scode) {
            animate.value.translateY(200).step({
                duration: 1500
            })
            scode = !scode
        } else {
            animate.value.translateY(40).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
        uni.redirectTo({
            url: `${typeMap[unref(type)].route}?code=${res}&id=${unref(activeId)}&type=${unref(
                type
            )}&isUpdate=${isUpdate.value}`
        })
        // 扫码核实
        // if (type.value == 8) {
        //     uni.$emit('prevSelected', 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
            }
        }
    })
}

// 输入设备码跳转
const confirm = () => {
    if (!unref(deviceCode)) return toast(`请先输入${typeMap[unref(type)]?.codeText}！`)
    uni.redirectTo({
        url: `${typeMap[unref(type)].route}?code=${unref(deviceCode)}&id=${unref(
            activeId
        )}&type=${unref(type)}&isUpdate=${isUpdate.value}`
    })

    // 扫码核实
    // if (type.value == 8) {
    //     uni.$emit('prevSelected', deviceCode.value)
    // }
}
onMounted(() => {
    animate.value = animation
    donghua()
})
onLoad(options => {
    type.value = options.type
    activeId.value = options.id
    isUpdate.value = options.isUpdate
})
onHide(() => {
    hasScan.value = false
})
</script>
<style lang="scss" scoped>
.scan-view {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    position: fixed;
    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: 50%;
        border-radius: 6rpx;
    }
}

.scan-animation {
    position: absolute;
    top: 24%;
    left: 20%;
    width: 480rpx;
    height: 8rpx;
    background-color: #8e4410;
    border-radius: 50%;
}
.btns {
    margin: 10rpx;
    width: 100%;
    background-color: #0091ff;
}
.scan-pict {
    position: absolute;
    right: 1%;
    bottom: 1%;
    width: 70rpx;
    height: 70rpx;
    z-index: 20;
    border-radius: 50%;
    background-color: #c0c0c0;
    line-height: 70rpx;
    text-align: center;
}
.code-input {
    position: relative;
    width: 100vw;
    padding: 0 40rpx;
    display: flex;
    justify-content: center;
    :deep(.u-input) {
        width: 500rpx;
        height: 81rpx;
    }
    :deep(.u-input__content) {
        background: #fff;
        padding: 16rpx 20rpx;
        border-radius: 40rpx 0 0 40rpx;
        position: relative;
        height: 100%;
    }
    .btn {
        height: 81rpx;
        line-height: 81rpx;
        z-index: 10;
        font-size: 28rpx;
        background: #fff;
        border-radius: 0 40rpx 40rpx 0;
        padding-right: 5rpx;
        text {
            background: $u-primary;
            padding: 0 28rpx;
            width: max-content;
            border-top-right-radius: 38rpx;
            border-bottom-right-radius: 38rpx;
            display: block;
            height: 90%;
            margin-top: 4.5%;
        }
    }
}
</style>
