<template>
    <div class="QRapp">
        <img src="./QRimg/QRbg.png" alt="" class="QRbg" />
        <div class="iptBox">
            <div class="itemBox">
                <div><span style="color:red">*</span>所属企业：</div>
                <div class="searchBox">
                    <input
                        type="text"
                        placeholder="请输入企业名称，点搜索"
                        v-model="vistiorMsg.qymc"
                        class="ipt3"
                    />
                    <button @click="search" class="btn3">搜索</button>
                </div>
            </div>
            <div class="itemBox">
                <div><span style="color:red">*</span>您的姓名：</div>

                <input
                    type="text"
                    placeholder="请填写"
                    v-model="vistiorMsg.xm"
                    class="ipt"
                />
            </div>
            <div class="itemBox">
                <div><span style="color:red">*</span>手机号码：</div>
                <input
                    type="text"
                    placeholder="请填写"
                    v-model="vistiorMsg.sjhm"
                    class="ipt"
                />
            </div>
            <div class="itemBox">
                <div><span style="color:red">*</span>验证码：</div>
                <div class="searchBox">
                    <input
                        type="text"
                        placeholder="请填写"
                        v-model="vistiorMsg.yzm"
                        class="ipt2"
                        maxlength="6"
                    />
                    <button class="btn" v-if="codeShow" @click="getPhoneCode">
                        获取验证码
                    </button>
                    <button class="btn2" v-if="!codeShow">
                        {{ count }}秒后重试
                    </button>
                </div>
            </div>
        </div>
        <img src="./QRimg/getewm.png" alt="" class="getQR" @click="getMyQr" />
        <van-dialog
            v-model="show"
            title="二维码"
            @touchstart="touchStart()"
            @touchend="touchEnd()"
            confirm-button-text="关闭"
        >
            <img :src="QRurl" class="dialogImg" />
            <div class="commit">长按保存至相册</div>
        </van-dialog>
        <div>
            <van-popup
                v-model="showCom"
                position="bottom"
                :style="{ height: '45%' }"
            >
                <van-picker
                    title="请选择"
                    show-toolbar
                    :columns="columns"
                    @confirm="onConfirm"
                    @cancel="showCom = false"
                    @change="onChange"
                />
            </van-popup>
        </div>
    </div>
</template>
<script>
import { findAllSimpleCompanies } from '@/service/api_company.js'
import { getSmsCode, checkSmsCode } from '@/service/api_QRcode.js'
import constant from '@/common/js/constant'
export default {
    data() {
        return {
            vistiorMsg: {
                qymc: '',
                qyid: '',
                sjhm: '',
                yzm: '',
                xm: ''
            },
            showCom: false,
            columns: [],
            codeShow: true,
            count: '',
            timer: null,
            show: false,
            QRurl: '',
            qrcodeUrl64: '',
            timer: ''
        }
    },
    methods: {
        touchEnd() {
            // 手指离开
            clearTimeout(this.timer)
        },
        touchStart() {
            // 手指触摸
            clearTimeout(this.timer) // 再次清空定时器，防止重复注册定时器
            this.timer = setTimeout(() => {
                this.downloadIamge(this.qrcodeUrl64, 'pic')
            }, 1000)
        },

        downloadIamge(imgsrc, name) {
            // 下载图片地址和图片名
            const image = new Image()
            // 解决跨域 Canvas 污染问题
            image.setAttribute('crossOrigin', 'anonymous')
            image.onload = () => {
                const canvas = document.createElement('canvas')
                canvas.width = image.width
                canvas.height = image.height
                const context = canvas.getContext('2d')
                context.drawImage(image, 0, 0, image.width, image.height)
                const url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
                const a = document.createElement('a') // 生成一个a元素
                const event = new MouseEvent('click') // 创建一个单击事件
                a.download = name || 'photo' // 设置图片名称
                a.href = url // 将生成的URL设置为a.href属性
                a.dispatchEvent(event) // 触发a的单击事件
            }
            image.src = imgsrc
        },
        search() {
            this.showCom = true
            findAllSimpleCompanies({
                pageNum: 1,
                pageSize: 10,
                searchInfo: this.vistiorMsg.qymc
            }).then(res => {
                console.log(
                    res.data.rows.map(e => {
                        return e
                    })
                )
                this.columns = res.data.rows.map(e => {
                    return e
                })
            })
        },
        getMyQr() {
            checkSmsCode(this.vistiorMsg).then(res => {
                this.$toast(res.errmsg)
                if (res.errmsg == '成功') {
                    this.show = true
                    this.QRurl =
                        constant.BASE_URI +
                        '/wx/fileController/downloadQRcode/' +
                        res.data
                }
            })
        },
        onConfirm(e) {
            console.log(e)
            this.vistiorMsg.qymc = e.text
            this.vistiorMsg.qyid = e.id
            this.showCom = false
        },
        getPhoneCode() {
            // 获取短信验证码
            var Reg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/
            // 正则验证
            if (Reg.test(this.vistiorMsg.sjhm)) {
                const TIME_COUNT = 60
                getSmsCode(this.vistiorMsg).then(res => {
                    console.log(res)
                    this.$toast(res.errmsg)
                })
                if (!this.timer) {
                    this.count = TIME_COUNT
                    this.codeShow = false
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--
                        } else {
                            this.codeShow = true
                            clearInterval(this.timer)
                            this.timer = null
                        }
                    }, 1000)
                }
                const code = {
                    mobile: this.mobile,
                    sms_type: 'login'
                }
                // getSmsCode(code).then(res => {
                //     console.log(res);
                // });
            } else {
                this.$toast('手机号码格式不正确')
            }
        }
    }
}
</script>
<style lang="scss">
.QRapp {
    .QRbg {
        width: 100vw;
        min-height: 100vh;
        position: absolute;
    }
    .iptBox {
        width: 90vw;
        left: 5vw;
        position: relative;
        z-index: 10;
        font-size: 5vw;
        color: rgba(51, 51, 51, 1);
        font-weight: 600;
        padding-top: 10vw;
        .itemBox {
            margin: 5vw 0;
        }
        .searchBox {
            display: flex;
            align-items: center;

            position: relative;
        }
        .ipt {
            margin-top: 1.5vw;
            font-size: 3.5vw;
            padding: 4vw 2vw;
            font-weight: 500;
            width: 95%;
            border-radius: 4px;
        }
        .ipt2 {
            margin-top: 1.5vw;
            font-size: 3.5vw;
            padding: 4vw 2vw;
            font-weight: 500;
            width: 60%;
            border-radius: 4px;
        }
        .ipt3 {
            margin-top: 1.5vw;
            font-size: 3.5vw;
            padding: 4vw 2vw;
            font-weight: 500;
            width: 72%;
            border-radius: 4px;
        }
        .btn {
            font-size: 3.5vw;
            color: rgba(29, 24, 188, 1);
            font-weight: 600;
            height: 12vw;
            width: 27vw;
            background: rgba(0, 0, 0, 0);
            border: 5px solid rgba(29, 24, 188, 0.45);
            margin-left: 1vw;
            border-radius: 1vw;
            position: absolute;
            right: 2vw;
            top: 1.5vw;
        }
        .btn2 {
            font-size: 3.5vw;
            color: black;
            font-weight: 600;
            height: 12vw;
            width: 27vw;
            background: rgba(0, 0, 0, 0);
            border: 5px solid gray;
            margin-left: 1vw;
            border-radius: 1vw;
            position: absolute;
            right: 2vw;
            top: 1.5vw;
        }
        .btn3 {
            font-size: 3.5vw;
            color: rgba(29, 24, 188, 1);
            font-weight: 600;
            height: 12vw;
            width: 17vw;
            background: rgba(0, 0, 0, 0);
            border: 5px solid rgba(29, 24, 188, 0.45);
            margin-left: 1vw;
            border-radius: 1vw;
            position: absolute;
            right: 2vw;
            top: 1.5vw;
        }
    }
    .getQR {
        width: 80vw;
        position: relative;
        left: 10vw;
        top: 10vw;
    }
    .dialogImg {
        width: 100%;
    }
    .commit {
        text-align: center;
        padding-bottom: 2vw;
    }
}
</style>
