<template>
    <div class="register">
        <div class="top" v-if="columns.length > 0">
            <div class="name" @click="change()">
                <div class="placeName">{{ placeInfo.placeName }}</div>
                <div class="img">
                    <img src="./img/down_icon.png" alt="" />
                </div>
            </div>
            <div class="address">
                <div class="img">
                    <img src="./img/address_icon.png" alt="" />
                </div>
                <div class="detailAddress">{{ placeInfo.detailAddress }}</div>
            </div>
        </div>
        <div class="info">
            <div class="top1">
                <div class="left">
                    <div class="icon"></div>
                    <div class="name">{{ qrInfo.name }}</div>
                </div>
                <!-- <div class="right">
                    <img src="./img/right_icon.png" alt="">
                </div> -->
            </div>
            <div class="infoCard">
                <div class="name">证件号码</div>
                <div class="value">{{ qrInfo.idCard1 }}</div>
            </div>
            <div class="infoCard">
                <div class="name">手机号码</div>
                <div class="value">{{ qrInfo.mobile1 }}</div>
            </div>
        </div>
        <div class="button" @click="upLoad()">入场登记</div>
        <van-popup v-model="showPicker" position="bottom" round>
            <van-picker show-toolbar :columns="
                columns.map((item) => {
                    return item.placeName;
                })
            " title="场所" @cancel="showPicker = false" @confirm="onConfirm" />
        </van-popup>
    </div>
</template>

<script>
import Vue from "vue";
import { Button, Popup, Picker } from "vant";
Vue.use(Button).use(Popup).use(Picker);
import { queryStaffScanPower, queryUserPermitCodeInfo } from "@/api/reverse";
import { decryptByDES } from "@/utils/utils";
import axios from "axios";
// import { epidemicQuickMarkUpload } from "@/api/epidemic";

export default {
    data() {
        return {
            userInfo: {},
            showPicker: false,
            columns: [],
            placeInfo: {},
            qrInfo: {},
            isolatedState: '',
            riskArea: '',
            healthType: '',
        };
    },
    methods: {
        init() {
            // alert(JSON.stringify(this.$route.query))
            queryStaffScanPower({ mobile: this.userInfo.mobileNo }).then((res) => {
                // alert(JSON.stringify(res))
                if (res.code == 200) {
                    if (res.data.length > 0) {
                        this.columns = res.data
                        this.placeInfo = res.data[0]
                        console.log(res)
                        queryUserPermitCodeInfo({ code: this.$route.query.code }).then((res) => {
                            if (res.data.picture) {
                                this.qrInfo = res.data
                                this.qrInfo.idCard2 = decryptByDES(this.qrInfo.idCard, "MnuYbhGv");
                                this.qrInfo.idCard1 = this.qrInfo.idCard2.replace(/^(.{3})(?:\d+)(.{4})/, '$1***********$2')
                                this.qrInfo.mobile1 = this.qrInfo.mobile;
                                this.qrInfo.mobile1 = this.qrInfo.mobile1.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
                                console.log(this.qrInfo)
                            }
                        })
                    } else {
                        this.back()
                    }
                }
            })
        },
        // 返回首页
        back() {
            this.$dialog
                .confirm({
                    message: "您暂无扫码权限，请联系管理员！",
                    showCancelButton: false,
                })
                .then(() => {
                    if (window.android !== undefined) {
                        window.android.backHome();
                    } else {
                        window.webkit && window.webkit.messageHandlers.backHome.postMessage("");
                    }
                });
        },
        change() {
            this.showPicker = true
        },
        onConfirm(value, index) {
            console.log(value);
            // console.log(index)
            this.placeInfo = this.columns[index];
            this.showPicker = false;
        },
        upLoad() {
            // alert(JSON.stringify(this.placeInfo))
            console.log(this.placeInfo)
            console.log(this.qrInfo)
            this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: "加载中...",
            });
            let params = {
                appId: "1234",
                areaName: this.placeInfo.areaName,
                idCard: this.qrInfo.idCard,
                reverseGeoCoding: this.placeInfo.placeName ? this.placeInfo.street + '' + this.placeInfo.address + '(' + this.placeInfo.placeName + ')' : this.placeInfo.street + '' + this.placeInfo.address,
                placeType: this.placeInfo.placeType,
                realUserName: this.userInfo.realName ? this.userInfo.realName : '',
                mobile: this.placeInfo.mobile ? this.placeInfo.mobile : "",
                realUserId: this.userInfo.userId,
                uploadMobile: this.qrInfo.mobile,
                uploadName: this.qrInfo.name,
                permitCode: this.placeInfo.code,
                uploadType: 4,
            };
            axios({
                url: 'https://appointment.smart-zj.cn/applet/applet/epidemic/queryUserOrigin',
                methods: 'get',
                header: {
                    "Content-Type": "application/json",
                },
                params: {
                    idCard: params.idCard
                }
            }).then((res) => {
                this.isolatedState = res.data.data ? res.data.data : ''
                this.riskArea = res.data.message ? res.data.message : ''
                // axios({
                //     url: 'https://appointment.smart-zj.cn/applet/applet/epidemic/queryHealthCodeColor',
                //     methods: 'get',
                //     headers: {
                //         "Content-Type": "application/json",
                //     },
                //     params: {
                //         idCard: params.idCard,
                //         name: params.uploadName
                //     }
                // }).then((res) => {
                //     if (res.data.status == 550) {
                //         this.$toast.clear();
                //         this.$dialog.confirm({
                //             message: "请填写正确的身份信息",
                //             showCancelButton: false,
                //         })
                //     } else {
                //         this.healthType = res.data.data.levelData ? res.data.data.levelData : ''
                //         if (res.data.data.code == 407) {
                //             this.$toast.clear();
                //             this.$dialog.confirm({
                //                 message: "请先更新苏康码再进行填报",
                //                 showCancelButton: false,
                //             })
                //         } else if (res.data.data.code == 404) {
                //             this.$toast.clear();
                //             this.$dialog.confirm({
                //                 message: "请先申领苏康码再进行填报",
                //                 showCancelButton: false,
                //             })
                //         } else {
                            this.healthType = '1'
                            this.upLoad1()
                //         }
                //     }
                // }).catch(err => {
                //     if (err.data.status == 500) {
                //         this.upLoad1()
                //     } else {
                //         this.$toast.clear();
                //         this.$dialog.confirm({
                //             message: "服务异常，请稍后重试",
                //             showCancelButton: false,
                //         })
                //     }
                // })
            }).catch(() => {
                this.$toast.clear();
                this.$dialog.confirm({
                    message: "请填写正确的个人信息",
                    showCancelButton: false,
                })
            })
        },
        upLoad1() {
            // alert(JSON.stringify(this.userInfo))
            let params = {
                appId: "1234",
                areaName: this.placeInfo.areaName,
                idCard: this.qrInfo.idCard,
                reverseGeoCoding: this.placeInfo.placeName ? this.placeInfo.street + '' + this.placeInfo.address + '(' + this.placeInfo.placeName + ')' : this.placeInfo.street + '' + this.placeInfo.address,
                placeType: this.placeInfo.placeType,
                realUserName: this.userInfo.realName ? this.userInfo.realName : '',
                mobile: this.placeInfo.mobile ? this.placeInfo.mobile : "",
                realUserId: this.userInfo.userId,
                uploadMobile: this.qrInfo.mobile,
                uploadName: this.qrInfo.name,
                permitCode: this.placeInfo.code,
                uploadType: 4,
                healthType: this.healthType ? this.healthType : '1',
                isolatedState: this.isolatedState ? this.isolatedState : '0',
                riskArea: this.riskArea ? this.riskArea : '',
                userType: 0,
                // 推送字段
                // boardinglocation: this.push.address,
                // note: this.push.remarks,
                // province: this.push.areaName,
                // city: this.push.cityName,
                // village: this.push.villageName,
                pushType: this.$route.query.isPushType,
                // reason: this.push.reasonId,
                // regionId: this.push.concatAreaId,
                // regionName: this.push.concatAreaName,
                // xdhszmState: this.push.hsjc,
            };
            // alert(JSON.stringify(params))
            axios({
                url: 'https://appointment.smart-zj.cn/applet/applet/epidemic/uploadUserInfo',
                method: 'post',
                headers: {
                    'Content-Type': "application/json",
                },
                data: params
            }).then(() => {
                this.$toast.clear();
                this.$toast("提交成功");
                this.jump();
            }).catch((err) => {
                console.log(err)
                this.$toast.clear();
                this.$toast("提交失败，请稍后重试");
            });
        },
        // 上报成功
        jump() {
            this.$router.replace({
                name: "ReportDetails",
                query: {
                    name: this.qrInfo.name,
                    address: this.placeInfo.detailAddress,
                    phone: this.qrInfo.mobile,
                    idCard: this.qrInfo.idCard2,
                    place: this.placeInfo.placeType,
                    healthType: this.healthType ? this.healthType : '1',
                    isolatedState: this.isolatedState
                },
            });
        },
        // 初始化获取userInfo
        JSBgetUserInfo() {
            if (window.android !== undefined) {
                const res = window.android.getUserInfo(); // 这是一个json字符串
                sessionStorage.setItem("ZJCD-UserInfo", res);
                this.userInfo = JSON.parse(res);
            } else if (window.webkit) {
                window.webkit &&
                    window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
            } else {
                window.receiveLocation(
                    JSON.stringify({ code: 0, data: { lat: 39.983744, lng: 116.276063 } })
                );
                this.$toast("请先登录镇合意app");
            }
        },
        getUserInfo(res) {
            sessionStorage.setItem("ZJCD-UserInfo", res);
            this.userInfo = JSON.parse(res);
        },
    },
    created() {
        this.JSBgetUserInfo();
        this.init()
    },
    mounted() {
        window.getUserInfo = this.getUserInfo;
    },
};
</script>

<style lang="stylus" scoped>
.register {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;

  .top {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    width: 95%;
    background: #FFFFFF;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;

    .name {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .placeName {
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #333333;
        text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
      }

      .img {
        width: 60px;
        height: 60px;
        line-height: 60px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .address {
      display: flex;
      align-items: center;

      .img {
        width: 70px;
        height: 70px;
        line-height: 70px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .detailAddress {
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 500;
        color: #535353;
        text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
      }
    }
  }
  .info{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    width: 95%;
    background: #FFFFFF;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    .top1{
        .left{
            display: flex;
            align-items: center;
            height 80px;
            .icon{
                width: 4px;
                height: 24px;
                background: #EB4E3F;
                box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
                border-radius: 2px;
            }
            .name{
                margin-left: 20px;
                font-size: 28px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: #333333;
                text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
            }
        }
    }
    .infoCard{
        height 100px;
        display: flex;
        align-items: center;
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 500;
        color: #666666;
        line-height: 32px;
        text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
        .value{
            margin-left: 20px;
        }
    }
  }
  .button{
      background: url('./img/button_bg.png');
		background-size: 100% 100%;
        width 274px;
        height 274px;
        text-align: center;
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 274px;
        text-shadow: 0px 6px 20px rgba(235, 78, 63, 0.4);
  }
}
</style>