<template>
    <div class="scan-page" v-show="isShow" :style="{'--scan-color': scanConfig.color}">
        <div class="scan-box">
            <!-- 相机区域 -->
            <video class="video" poster="data:image/gif,AAAA" ref="scanner"></video>
            <!-- 扫描框 -->
            <div class="box">
                <div class="line"></div>
                <div class="angle"></div>
            </div>
            <!-- 提示文案 -->
            <div class="scan-tip">{{ scanConfig.tips }}</div>
        </div>
    </div>
</template>
  
<script>
import { BrowserMultiFormatReader, Exception } from "@zxing/library"

export default {
    name: "stream-barcode-reader",
    props: {
        scanConfig: {
            type: Object
        }
    },
    data() {
        return {
            isShow: false,
            codeReader: new BrowserMultiFormatReader(),
            isMediaStreamAPISupported: navigator && navigator.mediaDevices && "enumerateDevices" in navigator.mediaDevices
        }
    },
    mounted() {
        if (!this.isMediaStreamAPISupported) {
            throw new Exception("Media Stream API is not supported")
            return
        }
        this.start()
        this.$refs.scanner.oncanplay = (event) => {
            this.isShow = true
            this.$emit("loaded")
        }
    },
    methods: {
        start() {
            this.codeReader.decodeFromVideoDevice(undefined, this.$refs.scanner, (result, err) => {
                if (result) {
                    this.$emit("success", result.text)
                }
            })
        }
    }
}
</script>
  
<style lang="less" scoped>
@color: var(--scan-color);

.scan-page {
    position: relative;
    overflow-y: hidden;
    .page-scan {
        overflow-y: hidden;
    }
    .scan-box {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100vw;
        overflow: hidden;
    }
    .video {
        display: block;
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        overflow: hidden;
    }

    .box {
        width: 213px;
        height: 213px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        border: 1px solid rgba(@color, 0.2);
        background-image: linear-gradient(0deg, transparent 24%, rgba(@color, 0.2) 25%, rgba(@color, 0.2) 26%, transparent 27%, transparent 74%, rgba(@color, 0.2) 75%, rgba(@color, 0.2) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(@color, 0.2) 25%, rgba(@color, 0.2) 26%, transparent 27%, transparent 74%, rgba(@color, 0.2) 75%, rgba(@color, 0.2) 76%, transparent 77%, transparent);
        background-size: 1rem 1rem;
        background-position: -1rem -1rem;
        .line {
            width: 96%;
            height: calc(100% - 2px);
            margin: 0 auto;
            background: linear-gradient(180deg, rgba(@color, 20%) 30%, @color 330%);
            border-bottom: 2px solid @color;
            transform: translateY(-100%);
            animation: radar-beam 2s infinite;
            animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
            animation-delay: 1.5s;
        }
    }

    .box:after,
    .box:before,
    .angle:after,
    .angle:before {
        content: "";
        display: block;
        position: absolute;
        width: 20px;
        height: 20px;
        border: 1px solid transparent;
    }

    .box:after,
    .box:before {
        top: 0;
        border-top-color: @color;
    }

    .angle:after,
    .angle:before {
        bottom: 0;
        border-bottom-color: @color;
    }
    .box:before,
    .angle:before {
        left: 0;
        border-left-color: @color;
    }
    .box:after,
    .angle:after {
        right: 0;
        border-right-color: @color;
    }
    .scan-tip {
        position: fixed;
        bottom: 50px;
        left: 0;
        right: 0;
        z-index: 9;
        display: block;
        text-align: center;
        color: white;
        font-size: 16px;
        color: #fff;
    }
    @keyframes radar-beam {
        0% {
            transform: translateY(-100%);
        }

        100% {
            transform: translateY(0);
        }
    }
}</style>