<template>
    <div class="contain" ref="appRef" id="dpModel">
        <div class="top-title">
            <!-- <div :class="isImg?'titBg2':'titBg'"> -->
            <div class="titBg2">
                <div class="top_left">
                <!-- <div class="minute">{{ nowDateStr }} {{ nowTimeStr }} </div> -->
                <div class="left-date">
                    <a style="color: #fff;" target="_blank" href="https://www.qweather.com/weather/sui-county-101201304.html">
                    <i class="el-icon-location" />
                    <span style="margin: 0 7px;">随县 {{ tianQiDe }}</span>
                    </a>
                    <!-- <div>{{ nowStrWeeks }}</div> -->
                </div>
                </div>
                        <!-- <div class="top-title-text">随县高标准农田遥感监测平台</div> -->

                <div class="top_right">
                <div class="minute"> {{ nowTimeStr }} </div>
                </div>
                <!-- <div class="tab-box"></div> -->
            </div>
        </div>
        <screen-town v-if="tabActiveIndex == 0" ref="screenTown" @getRootName="getRootName"></screen-town>

    </div>
</template>

<script>
import titBg from "../../assets/image/top_bg@2x.png"
import titBg2 from "../../assets/image/top_bg2@2x.png"
import { useIndex } from "../../utils/utilsDramAdmin.js";
import screenTown from "./components/ScreenHome";
import dateutil from "@/common/dateutil";
// import drawMixin from "../../utils/fiexible-dashboard"
import { getAction } from "@/api/manage";
// import { getCurrDate } from "@/common/dateutil";
import Vue from "vue";

export default {
    name: "screenMain",
    // mixins:['drawMixin'],
    data() {
        return {
            isImg:true,
            titBg,
            titBg2,
            title: '',
            tabActiveIndex: 0,
            tabItemList: ["首页", "应急广播", "雪亮工程", "公共服务"],
            tipShow: false,
            platformList: [
                {
                    name: "大面街道",
                    path: "/screenTownMain",
                },
                {
                    name: "百工堰社区",
                    path: "/screenShuangQiMain",
                },
            ],
            nowTimeStr: "",
            nowDateStr: "",
            nowStrWeeks: "",
            nowTianQi: {
                text: "17-28"
            },
            tianQiDe:'阴  2023-10-27 周五 23℃~15℃',
            fullscreen: false,
        };
    },

    filters: {
        filterWeather(val) {
            if (val == '晴') {
                return require('@/assets/cucumber_img/qing.png')
            } else if (val == '阴') {
                return require('@/assets/cucumber_img/yin.png')
            } else if (/雷/.test(val)) {
                return require('@/assets/cucumber_img/lei.png')
            } else if (/雪/.test(val)) {
                return require('@/assets/cucumber_img/xue.png')
            } else if (/雨/.test(val)) {
                return require('@/assets/cucumber_img/yu.png')
            } else if (/云/.test(val)) {
                return require('@/assets/cucumber_img/yun.png')
            } else if (/雾/.test(val)) {
                return require('@/assets/cucumber_img/wu.png')
            } else if (/沙/.test(val)) {
                return require('@/assets/cucumber_img/shachen.png')
            } else {
                return require('@/assets/cucumber_img/qing.png')
            }
        }
    },
    beforeDestroy() {
        clearTimeout(this.interVal);
    },
    components: {
        screenTown,
        userName: '管理员'
    },

    beforeCreate() {
        if (this.$route.query.tk) {
            // console.log(this.$route.query.tk, '出来了')
            Vue.ls.set("ACCESS_TOKEN", this.$route.query.tk);
            Vue.ls.set("ACCESS_NAME", this.$route.query.name);
            this.userName = this.$route.query.name ? this.$route.query.name : '管理员'
        }
    },

    mounted() {
        var previousField = window.location.host.split(":")[0];
        console.log(previousField); // 输出之前字段的值
        this.isImg = previousField === '36.40.79.205'
        const { calcRate, windowDraw } = useIndex(this.$refs.appRef,1800,1080);
        calcRate();
        windowDraw();
        let date = new Date();
        this.nowDateStr = date.format("yyyy-MM-dd");
        this.nowDateStr = this.nowDateStr.replace(/-/g, '.')
        this.getTianQi();
        this.getTimeCurrDate();
    },
    methods: {
        getTianQi() {
            getAction("https://devapi.qweather.com/v7/weather/3d", {
            location: '101201301',
            key: '0a4535e4dffe4a6190e6432dde78899d',
            }).then((res) => {
            this.tianQiDe = `${res.daily[0].textDay}  ${res.daily[0].fxDate} ${this.nowStrWeeks} ${res.daily[0].tempMax}℃~${res.daily[0].tempMin}℃`;
            });
        // }
        },
        getRootName(val) {
            this.title = val
            document.title = '高标准农田遥感监测平台'
        },
        goToHome() {
            this.$router.push({
                path: "/home",
            });
        },
        openTip() {
            this.tipShow = true;
        },
        minItemClick(item) {
            this.$router.push({
                path: item.path,
            });
        },
        closeTip() {
            this.tipShow = false;
        },
        changeTabItem(tabIndex) {
            this.tabActiveIndex = tabIndex;
        },
        getTimeCurrDate() {
            let date = new Date();
            let currtime = date.getTime();
            this.addTimeCurr(currtime);
            this.getWeekDate(date);
        },
        getWeekDate(now) {
            var day = now.getDay();
            var weeks = new Array(
                "周日",
                "周一",
                "周二",
                "周三",
                "周四",
                "周五",
                "周六"
            );
            this.nowStrWeeks = weeks[day];
        },


        addTimeCurr(currtime) {
            // 定时器延时一秒（在上面先格式化日期，显示后再开启定时器）
            this.interVal = setInterval(() => {
                currtime += 1000;
                let updateDate = new Date(currtime);
                this.nowStr = updateDate.format("yyyy-MM-dd hh:mm:ss");
                this.nowTimeStr = updateDate.format("hh:mm:ss");
            }, 1000);
        },
        loginOut() {
            window.location.href = "http://localhost:8080/dashboard/analysis"
        },
        //获取天气信息
        getWeather() {

        }
    },
};
</script>

<style lang="less" scoped>
@import "../../views/bigScreen/font.less";

.contain {
    overflow: hidden;
    // width: 1920px;
    // height: 1080px;
    width: 100%;
    height: 100%;
    /*background-image: url("../../assets/bigScreenHome/zhen_bg_image.png");*/
    // background: url("../../assets/bigScreenHome/contain-bg.jpg");
    // background-size: 100%;
    color: white;
    position: absolute;
    transform: scale(var(--scale)) translate(50%, 50%);
    transform-origin: 0 0;
    position: absolute;
    // left: 50%;
    // top: 50%;
}

.top-title {
    width: 100%;
    height: 94px;
    background: linear-gradient(18deg, rgba(0, 33, 68,.8), rgba(0, 33, 68,.8));
    z-index: 222;
  position: absolute;
  left:0;
  top:0;
  .titImg{
            width: 100%;
            position: absolute;
            top: -43px;
            left: 0;
        }
    >div {
        width: 100%;
        height: 100%;
        background: url("../../assets/image/top_bg@2x.png") no-repeat center;
        background-size: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 999;
    }
    .titBg{
        background: url("../../assets/image/top_bg@2x.png") no-repeat center;
    }
    .titBg2{
        background: url("../../assets/image/top_bg2@2x.png") no-repeat center;
    }
    .top_left {
        width: 30%;
        font-size: 18px;
        font-weight: normal;
        line-height: 32px;
        letter-spacing: 0px;
        color: #02FEFF;
        display: flex;
        margin-bottom: 1%;

        .minute {
            font-size: 18px;
            font-weight: normal;
            line-height: 32px;
            letter-spacing: 0px;
            color: #ffffff;
        }

        .left-date {
            padding-left: 18%;
            font-family: PingFangSC-Regular;
            font-size: 18px;
            font-weight: normal;
            line-height: 14px;
            letter-spacing: 0px;
            text-align: left;

            div {
                margin-top: 2px;
            }
        }
    }

    .top_right {
        width: 30%;
        display: flex;
        align-items: center;
        margin-right: 6%;
        margin-bottom: 1%;
        font-size: 18px;
        justify-content: flex-end;

        .navbar-nav {
            width: 100%;
            display: flex;
            align-items: center;
            color: #02FEFF;
            // font-size: 1.5rem;
            line-height: 15px;
            font-weight: normal;
            // line-height: 2rem;
            letter-spacing: 0px;
            position: relative;

            >div {
                margin-right: 5%;
            }

            .tianqi_l {
                text-align: left;
                font-size: 14px;
            }

            .navbar_img {
                margin-left: 10px;
                display: flex;

                img {
                    width: 30px;
                    margin-right: 10px;
                }
            }

            .head_img {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                overflow: hidden;
                flex-shrink: 0;

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

            .user_identity {
                margin-left: 10px;
                margin-right: 10px;
                font-family: SourceHanSansCN-Regular;
                font-size: 14px;
                font-weight: normal;
                letter-spacing: 0em;
                color: #ffffff;
            }

            .tianqi_col {
                width: 20px;
                height: 20px;
                cursor: pointer;
            }

            &:first-child {
                margin-right: 10px;
                padding-right: 20px;
            }
        }
    }
}

.top-title-text {
    width: 40%;
    text-align: center;
    height: 94px;
    font-size: 38px;
    font-family: Source Han Sans CN-Heavy, Source Han Sans CN;
    font-weight: 800;
    line-height: 88px;
    letter-spacing: 3px;
    color: #fff;
    // background: linear-gradient(180deg, #c3f8b3 0%, #66ffff 100%);
    -webkit-background-clip: text;

}

.tab-box {
    width: 777px;
    height: 47px;
    margin-bottom: 45px;
    //border-radius: 32px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-right: 220px;
    //border: 1px solid rgba(108, 246, 255, 0.8)
}

.tab-item {
    width: 160px;
    height: 47px;
    line-height: 47px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    background-image: url("../../assets/bigScreenHome/nav-item-bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.tab-active {
    //background: radial-gradient(50% 18631.39% at 50% 50%, rgba(81, 255, 234, 0.4) 0%, rgba(40, 3, 78, 0.16) 100%);
    //outline: 1px solid rgba(81, 255, 234, 0.4);
    background-image: url("../../assets/bigScreenHome/nav-item-bg-active.png");
}

.tip-continer {
    width: 869px;
    height: 600px;
    position: absolute;
    top: 232px;
    left: 540px;
    z-index: 100;
    background: rgba(13, 25, 41, 88%);
    border: 1px solid #8eddff;
    border-radius: 8px;
    padding-left: 40px;
    padding-right: 40px;
}

.tip-top {
    padding-top: 32px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
}

.tip-list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 50px;
    padding-right: 50px;
    justify-content: space-between;
    align-items: center;
}

.tip-text {
    font-size: 28px;
    line-height: 24px;
    margin-top: 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #ffffff;
}

.tip-close {
    width: 36px;
    height: 36px;
    cursor: pointer;
    background-image: url("../../assets/bigScreenHome/close_icon.png");
    background-size: 100%;
}

.tip-item {
    width: 165px;
    height: 90px;
    font-family: YouSheBiaoTiHei;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    margin-bottom: 16px;
    line-height: 90px;
    text-align: center;
    color: #ffffff;
    margin-right: 16px;
    background-image: url("../../assets/bigScreenHome/tip_item_bg.png");
    background-size: 100%;
    cursor: pointer;
}

.tip-item:nth-child(5n) {
    margin-right: 0px;
}

// 全屏
.nav-full {
    margin-left: 15px;
    margin-right: 15px;
    background: rgba(64, 93, 249, .5);
    color: #fff;
    width: 75px;
    height: 30px;
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    border: 1px solid #405DF9;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: normal;
    line-height: 30px;
    cursor: pointer;
    text-align: center;
}</style>
