<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="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>
    </div>
</template>

<script>
    import {ownerStatistics} from "../../api";
    import openId from "../../util/getOpenId";

    export default {
        name: "Main",
        data() {
            return {
                loading: false,
                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: '退出'
                    // }
                ],
                dept: '',
                infoTotal: 0,
                userTotal: 0,
                visitCount: 0,

                openid: null
            };
        },
        methods: {
            goPath(index) {
                if (index == 0) {
                    this.$router.replace("/independent/addDept");
                } else if (index == 1) {
                    this.$router.replace("/independent/infolist");
                }
            },
            async homeStatistics() {
                const result = await ownerStatistics({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;
                }
            },
        },
        computed: {},
        mounted() {
            openId.getOpenId(() => {
                this.openid = window.localStorage.getItem('openId');
            });
            // window.localStorage.setItem("openId", "oQDnHw8adY-9vaWi7LDxpOPBPzOE");
            this.homeStatistics();
        },
    };
</script>

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

    .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: 50%;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .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_list li {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        padding-left: 20px;
    }

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

</style>
