<template>
    <div v-loading="loading">
        <el-carousel class="lunbo" height="30vh">
            <el-carousel-item v-for="(item,index) in photos" :key="index">
                <el-image :src="item.url" fit='fill'></el-image>
            </el-carousel-item>
        </el-carousel>
        <div style="width: 90% ;margin: 0 auto">
            <div class="flex-box">
                <img src="../assets/tongzhi.png" style="width: 40px; height: 20px;"/>
                <!--                <div class="textBox">-->
                <!--                    <transition name="slide">-->
                <!--                        <p class="text" :key="text.id">{{text.val}}</p>-->
                <!--                    </transition>-->
                <!--                </div>-->
                <div class="marquee_box" @click="goNotice">
                    <ul class="marquee_list" :class="{marquee_top:animate}">
                        <li v-for="(item,index) in marqueeList" :key="index">{{item.name}}</li>
                    </ul>
                </div>
            </div>
            <div class="sudoku_row">
                <div class="sudoku_item " @click="goPath(index)" v-for="(sudoku,index) in sudokus"
                     :key="index">
                    <img :src="sudoku.url" width="65" height="65" style="margin-bottom: 1.5vh">
                    {{sudoku.name}}
                </div>
            </div>

            <div class="shu-top2">
                <div class="shu"></div>
                <div class="top2">{{dept}}统计</div>
            </div>
            <div class="top3">
                <div class="top3-box">
                    <img src="../assets/indexicon1.png" style="width: 16vw; height: 8vh;  margin-top: 20px;">
                    <div class="top3-num">{{infoTotal}}</div>
                    <div class="top3-title">老人数量</div>
                </div>
                <div class="top3-box">
                    <img src="../assets/indexicon2.png" style="width: 16vw; height: 8vh;  margin-top: 20px;">
                    <div class="top3-num">{{userTotal}}</div>
                    <div class="top3-title">巡访员数量</div>
                </div>
                <!--               width:  50px; height:  50px; -->
                <div class="top3-box">
                    <img src="../assets/indexicon3.png" style="width: 16vw; height: 8vh; margin-top: 20px;">
                    <div class="top3-num">{{visitCount}}</div>
                    <div class="top3-title">累计巡访量</div>
                </div>
            </div>
        </div>
        <el-dialog
                title="提示"
                class="visitClass"
                :visible.sync="isNoVisit"
                width="90%">
            <div style="margin-bottom: 10px">以下是未按要求巡访列表，请及时巡访</div>
            <div class="scroll scorll-div">
                <div class="flex-shu scroll " v-for="(item,index) in isNoVisitList" :key="index">
                    <div>
                        <div>{{item.name}}</div>
                        <div class="tabs-time">{{item.time}}</div>
                    </div>
                    <div class="addfive">

                        <span>{{item.visitCount}}</span>
                    </div>
                </div>
            </div>
            <div>
            <el-button size="small" style="margin-top: 2vh" type="primary" @click="isNoVisit = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {unbind, welcomeMessage, homeStatistics,noVisitList} from "../api";
    import formateTime from '../util/times'
    import {mapMutations,mapState} from "vuex";
    export default {
        name: "Main",
        data() {
            return {
                loading: false,
                score: "",
                photos: [
                    {
                        url: require("../assets/banner1.png"),

                    },
                    {
                        url: require("../assets/banner2.png")
                    },
                    {
                        url: require("../assets/banner3.png")
                    }
                ],
                sudokus: [
                    {
                        url: require("../assets/cai.png"),
                        name: '采集'
                    },
                    {
                        url: require("../assets/xun.png"),
                        name: '工作'
                    },
                    {
                        url: require("../assets/wo.png"),
                        name: '我的'
                    },
                    {
                        url: require("../assets/sao.png"),
                        name: '退出'
                    }
                ],
                marqueeList: [
                    {
                        name: "1军电视剧烦恼是的空间开发"
                    },

                ],
                number: 0,
                animate: false,
                dept: '',
                infoTotal:0,
                userTotal:0,
                visitCount:0,
                isNoVisit:false,
                isNoVisitList:[],
            };
        },
        methods: {
            ...mapMutations(["changeTips"]),
            goNotice() {
                this.$router.replace("/notice");
            },
            setNowTimes(data) {
                const date = new Date(data);
                console.log(date,'date');
                var year = date.getFullYear()
                var month = date.getMonth() + 1
                var day = date.getDay()
                var h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                var m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                var s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return year + '/' + month + '/' + day + " " + h + ":" + m + ":" + s;
            },
            getIme(time) {
                if(time) {
                    return this.setNowTimes(time)
                }else
                {
                    return '无'
                }
            },
            goPath(index) {
                console.log(index)
                if (index == 0) {
                    this.$router.replace("/info");
                } else if (index == 1) {
                    this.$router.replace("/record/infoList");
                } else if (index == 2) {
                    this.$router.replace("/my/index");
                } else {
                    this.logout()
                }
            },
            async requestLogout() {
                this.loading = true;
                let result = await unbind();
                this.loading = false;
                if (result.code === 0) {
                    this.$message({
                        type: "success",
                        message: "退出成功!"
                    });
                    this.$router.replace("/");
                }
            },

            async homeStatistics() {
                const result = await homeStatistics({openId: window.localStorage.getItem("openId")});
                if (result.code == 0) {
                    this.dept = result.data.dept
                    this.infoTotal = result.data.infoTotal
                    this.userTotal = result.data.userTotal
                    this.visitCount = result.data.visitCount
                }
            },
            async welcomeMessage() {
                this.marqueeList = [];
                const result = await welcomeMessage();
                if (result.code == 0) {
                    if (result.data.length == 0) {
                        this.marqueeList.push({name: '暂无通知'})
                    } else {
                        this.marqueeList.push({name: result.data.title})
                    }
                    setInterval(this.showMarquee, 2000);
                }
            },
            showMarquee: function () {
                this.animate = true;
                setTimeout(() => {
                    this.marqueeList.push(this.marqueeList[0]);
                    this.marqueeList.shift();
                    this.animate = false;
                }, 800);
            },
            logout() {
                this.$confirm(
                    "退出后将会解绑当前微信号,无法使用当前微信号自动登陆",
                    "是否退出？",
                    {
                        type: "warning"
                    }
                )
                    .then(() => {
                        this.requestLogout();
                    })
                    .catch(() => {
                    });
            },
            startMove() {
                // eslint-disable-next-line
                let timer = setTimeout(() => {
                    if (this.number === 2) {
                        this.number = 0;
                    } else {
                        this.number += 1;
                    }
                    this.startMove();
                }, 2000); // 滚动不需要停顿则将2000改成动画持续时间
            },
            async openNew() {
                this.isNoVisit =false;
                this.isNoVisitList=[];
                let data = await noVisitList();
                if (data.code == 0) {
                    console.log(data, 'data');
                    // let name = '';
                    // data.data.map((item, index) => {
                    //     let fh = '、';
                    //     if (index === data.data.length - 1) {
                    //         fh = '';
                    //     }
                    //     name += item.name + fh
                    // });

                    if (data.data.length!==0) {
                        this.isNoVisit = true;
                        this.isNoVisitList=data.data.map(item=>{
                            if (item.time) {
                                return {...item, time: formateTime.setNowTimes(item.time)}
                            }else {
                                return {...item, time: '无'}
                            }
                        });
                        // this.$notify({
                        //     title: '提示',
                        //     type: 'info',
                        //     message: '有' + name + '老人未按要求进行巡访，请及时进行巡访',
                        //     position: 'top-left',
                        // });
                    }
                }
            },

        },
        computed: {
            ...mapState(["tips"]),
        },
        mounted() {
            //显示未按要求巡访的人
            // if(this.tips)
            // {
            //     this.changeTips();
            //     this.openNew();
            // }
            this.homeStatistics();
            this.welcomeMessage();
        },
        // computed: {
        //     text() {
        //         return {
        //             id: this.number,
        //             val: this.textArr[this.number]
        //         }
        //     }
        // },
    };
</script>

<style scoped>
    .lunbo /deep/ .el-image {
        height: 30vh;
    }

    .flex-box {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }


    .sudoku_row {
        display: flex;
        align-items: center;
        width: 100%;
        flex-wrap: wrap;
        margin-top: 2vh;
    }

    .sudoku_item {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 25%;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .opacity {
        opacity: 0.4;
        background: #e5e5e5;
    }

    .sudoku_item img {
        margin-bottom: 3px;
        display: block;
    }


    .shu-top2 {
        margin-top: 20px;
        display: flex;
        align-items: center;

    }

    .shu {
        height: 18px;
        width: 4px;
        background: rgba(31, 135, 247, 1);
        border-radius: 4px;

    }

    .top2 {
        font-family: SourceHanSansCN;
        font-weight: bold;
        margin-left: 10px;
        font-size: 15px;
    }

    .top3 {
        display: flex;
        margin-top: 2vh;
        justify-content: space-around;
    }

    .top3-box {
        background-color: #e5f6ff;
        width: 27vw;
        height: 25vh;
        border-radius: 5px;
        text-align: center;
        margin-top: 1vh;
    }

    .top3-title {
        color: #9eb7c9;
        font-family: SourceHanSansCN;
        font-weight: 600;
        margin-top: 2vh;
    }

    .top3-num {
        font-size: 16px;
        font-family: SourceHanSansCN;
        font-weight: 700;
        color: #003e75;

        margin-top: 2vh;
    }

    .marquee_box {
        display: block;
        position: relative;
        width: 90%;
        height: 30px;
        overflow: hidden;
        background: #dbe9f6;
        color: #2087f7;
        margin-left: 5%;
        border-radius: 5px;
    }

    .marquee_list {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }

    .marquee_top {
        transition: all 0.5s;
        margin-top: -30px;
    }

    .marquee_list li {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        padding-left: 20px;
    }

    .marquee_list li span {
        padding: 0 2px;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 80%;
        position: absolute;
        top: 2%;
        left: 10%;
        z-index: 9999999;
    }
    .scorll-div {
        overflow-y: auto;
        overflow-x: hidden;
        height: 45vh;
    }
    .scroll::-webkit-scrollbar {
        background-color: #F3F3F3;
        height: 8px;
        width: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    .scroll::-webkit-scrollbar-track {
        opacity: 0;
        transition: opacity 0.12s ease-out;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    .scroll::-webkit-scrollbar-thumb {
        background-color: #368FF9;
        transition: background-color 0.3s;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    .flex-shu {
        display: flex;
        justify-content: space-between;
        padding: 5px 30px;
        border-bottom: 1px solid rgba(227, 229, 235, 1);
        font-size: 17px;

    }
    .tabs-time {
        color: #878787;
        font-size: 16px;
        margin-top: 1vh;
    }
    .addfive {
        color: #FD1200;
        display: flex;
        align-items: center;
    }
    .visitClass /deep/ .el-dialog__body{
        padding: 10px 15px;
    }
    .visitClass /deep/ .el-button {
        width: 90%;
        margin-left: 5%;
    }
</style>
