<template>
    <div class="vistorRegister">
        <div class="searchBox">
            <input
                type="text"
                placeholder="请输入访客手机号查询"
                v-model="requestParam.sjhm"
            />
            <button @click.stop="sendMsg" v-if="codeShow">发送验证码</button>
            <button class="btn2" v-if="!codeShow">{{ count }}秒后重试</button>
        </div>
        <div class="searchBox2">
            <input
                type="text"
                placeholder="请输入验证码"
                v-model="requestParam.code"
                maxlength="6"
            />
            <button @click.stop="search">查询</button>
        </div>
        <van-pull-refresh
            v-model="isDownLoading"
            @refresh="onDownRefresh"
            success-text="加载成功"
        >
            <van-list
                v-model="isUpLoading"
                :finished="upFinished"
                :immediate-check="false"
                :offset="10"
                finished-text="加载完成"
                @load="onLoadList"
            >
                <div
                    class="secendPage"
                    v-for="(item, index) in List"
                    :key="index"
                >
                    <div class="itemBox">
                        <p class="workerName">拜访对象：{{ item.qymc }}</p>
                        <p
                            :class="
                                item.zt == 0
                                    ? 'type'
                                    : item.zt == 1
                                    ? 'type1'
                                    : 'type2'
                            "
                        >
                            {{
                                item.zt == 0
                                    ? "待审核"
                                    : item.zt == 1
                                    ? "已审核"
                                    : "已退回"
                            }}
                        </p>
                    </div>
                    <div class="itemBox">
                        <p class="phone">访客姓名：{{ item.xm }}</p>
                    </div>
                    <div class="itemBox">
                        <p class="phone">拜访时间：{{ item.bfsj }}</p>
                    </div>
                    <div class="itemBox" v-show="item.zt == 2">
                        <p class="phone">退回原因：{{ item.thyy }}</p>
                    </div>
                    <div class="itemBox">
                        <p class="intTime">
                            {{
                                item.zt == 0
                                    ? "请耐心等待审核"
                                    : item.zt == 1
                                    ? "请刷脸或二维码通行"
                                    : "有需要可重新登记预约"
                            }}
                        </p>
                        <p
                            class="update"
                            @click="toErwm(item)"
                            v-show="item.zt == '1'"
                        >
                            二维码
                        </p>
                        <!-- <p class="update" @click="toDetail">详情</p> -->
                    </div>
                </div>
                <van-dialog
                    v-model="show"
                    title="二维码"
                    confirm-button-text="关闭"
                >
                    <img
                        :src="QRurl"
                        class="erweima"
                        @touchstart="touchStart()"
                        @touchend="touchEnd()"
                    />
                    <div class="commit">长按保存至相册</div>
                </van-dialog>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<script>
import { visitorList } from '@/service/api_vistior.js'
import { getSmsCodeByVisiter } from '@/service/api_QRcode.js'
import constant from '@/common/js/constant'
import auth from '@/service/auth'
export default {
    data() {
        return {
            isDownLoading: false,
            isUpLoading: false,
            upFinished: false,
            phone: '13771181183',
            requestParam: {
                pageNum: '1',
                pageSize: '10',
                xm: '',
                sjhm: '',
                yzm: '',
                code: ''
            },
            List: [],
            show: false,
            codeShow: true,
            count: '',
            timer: null,
            QRurl: '',
            qrcodeUrl64: '',
            timer: ''
        }
    },
    mounted() {
        console.log(auth.currUser())

        this.getList()
    },
    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
        },
        // toDetail() {
        //     console.log(123);
        // }
        sendMsg() {
            // 获取短信验证码
            var Reg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/
            // 正则验证
            if (Reg.test(this.requestParam.sjhm)) {
                const TIME_COUNT = 60
                getSmsCodeByVisiter(this.requestParam).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'
                }
            } else {
                this.$toast('手机号码格式不正确')
            }
        },
        toErwm(item) {
            if (item.id) {
                this.QRurl =
                    constant.BASE_URI + '/wx/WxMnpVisit/printCode/' + item.id
            }
            console.log(item)
            this.show = true
        },
        async getList() {
            this.List = []
            this.$nextTick(res => {
                visitorList(this.requestParam).then(res => {
                    if (res.rows.length) {
                        this.isDownLoading = false
                        this.List.push(...res.rows)
                        this.isUpLoading = false
                        if (this.List.length >= res.total) {
                            this.upFinished = true
                        }
                    } else {
                        this.List = []
                        this.isDownLoading = false
                        this.isUpLoading = false
                        this.upFinished = true
                    }
                })
            })
        },
        search() {
            this.getList()
        },
        onDownRefresh: function() {
            this.List = []
            this.requestParam.pageNum = 1
            this.isUpLoading = true
            this.upFinished = false
            this.getList()
        },
        onLoadList() {
            this.requestParam.pageNum++
            this.isDownLoading = false
            this.getList()
        }
    }
}
</script>
<style lang="scss">
.vistorRegister {
    font-size: 3.5vw;
    margin: 5vw 2vw;
    overflow: auto;
    .searchBox {
        display: flex;
        justify-content: space-between;
        margin: 2vw 1vw;
        input {
            width: 60vw;
            padding: 3vw;
            box-shadow: 2px 2px 10px 5px rgba(173, 216, 230, 0.3);
        }

        button {
            background: lightblue;
            width: 25vw;
            border-radius: 2vw;
            white-space: nowrap;
            box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.1);
        }
        .btn2 {
            background: rgba(0, 0, 0, 0);
            color: orangered;
            width: 25vw;
            border-radius: 2vw;
            white-space: nowrap;
            box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.1);
        }
    }
    .searchBox2 {
        display: flex;
        justify-content: space-between;
        margin: 1vw;
        input {
            width: 70vw;
            box-sizing: content-box;
            padding: 3vw;
            box-shadow: 2px 2px 10px 5px rgba(173, 216, 230, 0.3);
        }

        button {
            background: lightblue;
            width: 15vw;
            border-radius: 2vw;
            white-space: nowrap;
            box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.1);
        }
    }
    .secendPage {
        background: white;
        padding: 3vw 3vw 3vw 3vw;
        margin-top: 5vw;
        border-radius: 15px;
        box-shadow: -0.067vw 0.333vw 0.333vw 0.267vw rgba(0, 0, 0, 0.1);
        .itemBox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 2vw 0;
        }
        .workerName {
            font-size: 5vw;
            width: 80%;
        }
        .workerType {
            color: rgb(0, 47, 167);
        }
        .phone {
            color: rgb(153, 152, 152);
        }
        .position {
            color: rgb(153, 152, 152);
        }
        .intTime {
            color: rgb(0, 47, 167);
        }
        .update {
            width: 20vw;
            height: 7vw;
            background: rgb(0, 47, 167);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            border-radius: 2vw;
            font-size: 3.5vw;
        }
        .type {
            color: rgb(135, 222, 4);
        }
        .type1 {
            color: rgb(0, 47, 167);
        }
        .type2 {
            color: orangered;
        }
    }
    .erweima {
        width: 100%;
    }
    .commit {
        text-align: center;
        padding-bottom: 2vw;
    }
}
</style>
