<template>
    <van-popup v-model="showScan"
               :safe-area-inset-bottom="true"
               :close-on-popstate="true"  :style="{ height: '100%',width:'100%' }">
        <van-nav-bar title="扫码"
                     left-arrow
                     @click-left="_cancelScan"></van-nav-bar>
        <div id="bcid">
            <div style="height:40%"></div>
        </div>
        <div class="bottom-btn">
            <van-button block type="default" @click="_cancelScan">取消</van-button>
        </div>
    </van-popup>
</template>
<style scoped>
    #bcid {
        width: 100%;
        height: calc(100% - 44px - 46px);
        text-align: center;
    }

</style>

<script>
    import {samplingSample} from '../../../api'

    var barcode = null;//扫码对象
    export default {
        data() {
            return {
                num: '',
                showScan: false
            }
        },
        watch: {
            showScan: function (val) {
                let that = this
                //返回键操作
                mui.init({
                    beforeback: function () {
                        if (val) {
                            barcode.close();
                            that.showScan = false
                            return false;
                        } else {
                            return that
                        }
                    }
                });
            }
        },
        methods: {
            _open() {
                this.showScan = true
                this.$nextTick(function () {
                    barcode = null;
                    let that = this;
                    if (!barcode) {
                        barcode = new plus.barcode.Barcode('bcid', [plus.barcode.EAN13,plus.barcode.EAN8], {
                            frameColor: '#00FF00',
                            scanbarColor: '#00FF00'
                        });
                        barcode.onmarked = function (type, result) {
                            if (type === plus.barcode.EAN13||type === plus.barcode.EAN8) {
                                that._getSample(result)
                            }else{
                                that.$toast('扫描失败！')
                                barcode.close()
                                that._open()
                            }
                        };
                        plus.webview.currentWebview().append(barcode);
                    }
                    barcode.start();
                })
            },
            _getSample: async function (qrcode) {
                let res = await samplingSample.scanSample({qrcode: qrcode})
                if (res) {
                    this.$emit('on-result-change', res)
                    barcode.close();
                    this.showScan = false
                } else {
                    this.$emit('on-result-change', {qrcode:qrcode})
                }
            },
            _cancelScan() {
                barcode.close();
                this.showScan = false
            },
            // _scanPicture() {
            //     let that = this;
            //     plus.gallery.pick(function (path) {
            //         plus.barcode.scan(path, function (type, result) {
            //             var text = '未知: ';
            //             switch (type) {
            //                 case plus.barcode.CODE128:
            //                     text = 'CODE128: ';
            //                     break;
            //             }
            //             that.$store.dispatch('EnvSample/scanReceive', {num: result}).then(() => {
            //                 if (that.$store.state.EnvSample.success) {
            //                     barcode.close();
            //                     that.$router.go(-1);
            //                 }
            //             });
            //         }, function (error) {
            //             plus.nativeUI.alert('无法识别此图片');
            //         }, [plus.barcode.CODE128]);
            //     }, function (err) {
            //         console.log('Failed: ' + err.message);
            //     });
            // },
        }
    }
</script>
