<template>
    <div class="login">
        <div v-if="role === 'company'">
            <a href="https://feiyan.wecity.qq.com/wuhan/dist/index.html#/index?_scope=snsapi_base">
                <van-row>
                    <van-col span="24">
                        <div class="dk-banner">
                            <img src="@/assets/yiqing.png" alt="" style="height: 100%;width: 100%;">
                        </div>
                    </van-col>
                </van-row>
            </a>

            <div style="margin-top: 40px;margin-bottom: 20px">
                <van-row type="flex" justify="center">
                    <van-col span="20">
                        <div class="dk-info" @click="toJourney">
                            <img src="@/assets/return.png" alt="" style="height: 100%;width: 100%;">
                        </div>
                    </van-col>
                </van-row>
                <van-row type="flex" justify="center">
                    <van-col span="20">
                        <div class="dk-info" @click="toTemperature">
                            <img src="@/assets/temperature.png" alt="" style="height: 100%;width: 100%;">
                        </div>
                    </van-col>
                </van-row>
            </div>
            <van-row type="flex" justify="center">
                <van-col span="24">
                    <div class="dk-qrcode">
                        <img src="@/assets/qrcode.png" alt="" style="height: 100%;width: 100%;">
                    </div>
                </van-col>
            </van-row>
            <van-row>
                <van-col span="24">
                    <van-button color="#0177FF" text="邀请员工加入" class="dk-button" @click="share"/>
                </van-col>
            </van-row>

        </div>
        <div v-if="role === 'staff'">
            <a href="https://feiyan.wecity.qq.com/wuhan/dist/index.html#/index?_scope=snsapi_base">
                <van-row>
                    <van-col span="24">
                        <div class="dk-banner">
                            <img src="@/assets/yiqing.png" alt="" style="height: 100%;width: 100%;">
                        </div>
                    </van-col>
                </van-row>
            </a>
            <van-row type="flex" justify="center" style="margin-top: 30px;margin-bottom: 30px">
                <van-col span="22">
                    <van-row type="flex" justify="space-between">
                        <van-col span="12">
                            <div class="dengji" @click="toStaffJourney">
                                <img src="@/assets/staff_return.png" alt="" style="height: 100%;width:100%">
                            </div>
                        </van-col>
                        <van-col span="12">
                            <div class="tiwen" @click="toStaffTemperature">
                                <img src="@/assets/staff_tmpe.png" alt="" style="height: 100%;width:100%">
                            </div>
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
            <van-row type="flex" justify="center" align="center">
                <van-col span="22">
                    <van-row type="flex" justify="center" align="center" class="dk-content">
                        <div class="dk" v-if="status === 1" @click="clock">
                            <img src="@/assets/dk_no.png" alt="" style="height: 100%;width:100%">
                        </div>
                        <div class="dk-status" v-if="temperature === 0">
                            <img src="@/assets/dk_normal.png" alt="" style="height: 100%;width:100%">
                        </div>
                        <div class="dk-status" v-if="temperature === 1">
                            <img src="@/assets/dk_low.png" alt="" style="height: 100%;width:100%">
                        </div>
                        <div class="dk-status" v-if="temperature === 2">
                            <img src="@/assets/dk_hight.png" alt="" style="height: 100%;width:100%">
                        </div>
                    </van-row>
                </van-col>
            </van-row>
            <van-row type="flex" justify="center" style="margin-top: 30px">
                <van-col span="22">
                    <div class="dk-Donation" @click="toDonations">
                        <img src="@/assets/donations_sign.png" alt="" style="height: 100%;width:100%">
                    </div>
                </van-col>
            </van-row>
            <van-row type="flex" justify="center" style="margin-top: 30px">
                <van-col span="24">
                    <div class="dk-qrcode">
                        <img src="@/assets/qrcode.png" alt="" style="height: 100%;width: 100%;">
                    </div>
                </van-col>
            </van-row>
            <van-row>
                <van-col span="24">
                    <van-button color="#0177FF" text="分享给好友" class="dk-button" @click="share"/>
                </van-col>
            </van-row>
        </div>
        <div class="dk-cover" v-show="cover">
            <img src="@/assets/share.png" alt="">
            <div class="dk-cover-content">点击右上角“…”
                将连接分享给好友
            </div>
            <div class="dk-cover-button" @click="shareSure">确认</div>
        </div>
        <div v-show="loading" class="dk-loading">
            <van-loading type="spinner" color="#000"/>
        </div>
        <!--<div class="dk-loginout" @click="loginout">-->
            <!--退出登录-->
        <!--</div>-->
    </div>
</template>

<script>
    import {Button, Col, Row, Toast, Loading, Dialog} from 'vant';
    import {isToday} from '@/utils/util'
    import {getStore, clearAll} from "@/utils/storage";
    import {getAction} from '@/api/manage'
    import {queryStaffPunchClock} from '@/api/index'
    // import wx from 'weixin-jsapi'
    const wx = window.wx;
    let TIME = null;

    export default {
        name: "index",
        components: {
            [Button.name]: Button,
            [Col.name]: Col,
            [Row.name]: Row,
            [Loading.name]: Loading,
            [Dialog.name]: Dialog,
        },
        data() {
            return {
                role: '',
                status: '',
                cover: false,
                temperature: '',
                enterprise_id: '',
                loading: false,
                ready: false,
                enterprise_name: '',
                locationType: false,
                reLoad: false,//页面刷新
                url: {
                    getJsapiConfig: '/f/api/wechat/getJsapiConfig',
                    baiduUrl: '/f/api/wechat/getBaiduAddress',
                }
            };
        },
        mounted() {
            //获取链接参数
            // var query = this.$route.query;
            // this.enterprise_id = query.enterprise_id;
            // this.enterprise_name = query.enterprise_name;
            this.role = getStore('role');
            this.getJsapiConfig();
            if (this.role === 'staff') {
                this.enterprise_id = getStore('staff').enterpriseId;
                this.enterprise_name = getStore('staff').enterpriseName;
                getAction(queryStaffPunchClock, {staffId: getStore(getStore('role')).id}).then(data => {
                    if (data.data.dkPunchClockAPIList.length && isToday(data.data.dkPunchClockAPIList[0].punchTime)) {
                        this.temperature = data.data.dkPunchClockAPIList[0].temperature;
                        this.status = 2
                    } else {
                        this.status = 1
                    }
                })
            } else {
                this.enterprise_id = getStore('company').id;
                this.enterprise_name = getStore('company').enterpriseName;
            }
        }
        ,
        methods: {
            loginout() {
                const role = getStore('role');
                Dialog.confirm({
                    message: '是否立即退出登录'
                }).then(() => {
                    clearAll();
                    if (role === 'staff') {
                        this.$router.replace('stafflogin')
                    } else {
                        this.$router.replace('login')
                    }
                })
            }
            ,
            toJourney() {
                this.$router.push({name: 'return_journey'})
            }
            ,
            toTemperature() {
                this.$router.push({name: 'temperature'})
            }
            ,
            toStaffJourney() {
                this.$router.push({name: 'journey_detail'})
            }
            ,
            toStaffTemperature() {
                this.$router.push({name: 'clock'})
            }
            ,
            clock() {
                if (this.ready) {
                    clearTimeout(TIME);
                    this.location();
                } else {
                    this.loading = true;
                    TIME = setTimeout(this.clock, 500)
                }
            }
            ,
            toDonations() {
                this.$router.push({name: 'donations'})
            }
            ,
            shareSure() {
                this.cover = false
            }
            ,
            share() {
                this.cover = true
            }
            ,
            getJsapiConfig() {
                //获取微信js配置信息
                getAction(this.url.getJsapiConfig, {fullUrl: encodeURIComponent(location.href.split('#')[0])})
                    .then((res) => {
                        console.log("res", res);
                        var _config = eval('(' + res.data.configValue + ')');
                        wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: _config.appId, // 必填，公众号的唯一标识
                            timestamp: _config.timeStamp, // 必填，生成签名的时间戳
                            nonceStr: _config.nonceStr, // 必填，生成签名的随机串
                            signature: _config.signature, // 必填，签名，见附录1
                            jsApiList: ['chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getLocation', 'updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                        });
                        wx.ready(() => {
                            console.log("微信验证");
                            this.locationType = true;
                            this.updateAppMessageShareData();
                            this.updateTimelineShareData();
                            this.ready = true;
                        });
                        wx.error(function () {
                            this.loading = false;
                            console.log("微信验证失败")
                            this.reLoad = false;
                            if(!this.reLoad){
                                this.reLoad = true;
                                location.replace(location.href);
                            }
                        })
                    })
                    .catch(() => {
                    });
            }
            ,
            location() {
                var that = this;
                this.loading = true;
                if (this.locationType) {
                    wx.getLocation({
                        type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                        success: function (res) {
                            console.log(222, JSON.stringify(res));
                            var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                            var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                            that.changeLocation(latitude, longitude);
                        },
                        cancel: function () {
                            console.log("获取位置失败，请检查定位");
                            that.loading = false;
                            Toast("取消获取位置，请定位")
                        },
                        fail: function () {
                            console.log('fail');
                            Toast("获取位置失败，请检查定位");
                            that.loading = false;
                            that.$router.push({name: 'staff_temperature', params: {province: ''}});
                        }
                    });
                }
            }
            ,
            changeLocation(latitude, longitude) {
                var that = this;
                var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
                var x = parseFloat(longitude);
                var y = parseFloat(latitude);
                var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
                var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
                longitude = z * Math.cos(theta) + 0.0065;
                latitude = z * Math.sin(theta) + 0.006;

                //百度地图
                let params = {};
                params.latitude = latitude;
                params.longitude = longitude;
                console.log('params', params);
                getAction(that.url.baiduUrl, params)
                    .then((res) => {
                        console.log("百度地址", res);
                        var addressComponent = res.data.address.result.addressComponent;
                        that.province = addressComponent.province;
                        that.city = addressComponent.city;
                        that.district = addressComponent.district;
                        this.loading = false;
                        that.$router.push({name: 'staff_temperature', params: {province: addressComponent.city}});
                    })
                    .catch((data) => {
                        this.loading = false;
                        Toast("位置转换失败，请检查定位");
                        console.log(data);
                    });
            }
            ,

            //分享给朋友
            updateAppMessageShareData() {
                var that = this;
                wx.updateAppMessageShareData({
                    title: '体温打卡，中国加油！', // 分享标题
                    desc: getStore('role') === 'staff' ? '我正在' + that.enterprise_name + '体温打卡进行每日体温记录，你也快来试试吧！' : that.enterprise_name + '邀请你进行体温打卡', // 分享描述
                    link: 'http://tw.hap-job.com/invitation?enterprise_id=' + that.enterprise_id , // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: 'https://hpjobtest.oss-cn-shanghai.aliyuncs.com/uploadfiles/banner/wx_share.png', // 分享图标
                    success: function () {
                        // 设置成功
                    }
                })
            }
            ,

            //分享到朋友圈
            updateTimelineShareData() {
                var that = this;
                wx.updateTimelineShareData({
                    title: getStore('role') === 'staff' ? '我正在' + that.enterprise_name + '体温打卡进行每日体温记录，你也快来试试吧！' : that.enterprise_name + '邀请你进行体温打卡', // 分享标题
                    link: 'http://tw.hap-job.com/invitation?enterprise_id=' + that.enterprise_id , // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: 'https://hpjobtest.oss-cn-shanghai.aliyuncs.com/uploadfiles/banner/wx_share.png', // 分享图标
                    success: function () {
                        // 设置成功
                    }
                })
            }
        }
    }
</script>

<style scoped>


    .dk-banner {
        height: 160px;

    }

    .dk-info {
        height: 115px;
        margin-bottom: 20px;
    }

    .dk-qrcode {
        height: 135px;
        margin-bottom: 40px;
    }

    .dengji {
        width: 95%;
        height: 94px;
        float: left;
    }

    .tiwen {
        width: 95%;
        height: 94px;
        float: right;
    }

    .dk-content {
        height: 197px;
    }

    .dk-Donation {
        height: 100px;
    }

    .dk-button {
        font-size: 17px;
        width: 100%;
        height: 60px;
    }

    .dk-status {
        padding: 0 15px;
    }

    .dk-status-info {
        font-size: 19px;

    }

    .dk-status-message {
        font-size: 14px;
        color: #333;
        margin-top: 15px;
    }

    .dk-cover {
        color: #fff;
        font-size: 24px;
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .dk-cover img {
        height: 135px;
        width: 119px;
        margin-right: 15px;
        margin-top: 15px;
        align-self: flex-end;
    }

    .dk-cover-content {
        height: 67px;
        width: 192px;
        margin-top: 56px;
    }

    .dk-cover-button {
        width: 100px;
        height: 44px;
        text-align: center;
        line-height: 39px;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        border-radius: 60px;
        border: 3px solid rgba(255, 255, 255, 1);
        box-sizing: border-box;
        margin-top: 45px;
    }

    .dk-loading {
        position: fixed;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dk-hidden {
        overflow: hidden;
    }

    .dk-loginout {
        height: 70px;
        width: 70px;
        line-height: 70px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        border-radius: 50%;
        color: #fff;
        background: #0177FF;
        position: fixed;
        right: 15px;
        bottom: 20%;
        /*box-shadow: ;*/
    }
</style>
