<template>
    <div class="home">
        <timeing></timeing>
        <p class="backtitle">居家老年人巡视关爱探访平台</p>
        <div class="left">
            <!-- 左一 -->
            <div class="p1 bj">
                <div class="p1title bj">
                    <router-link to="/home/oldStatistics">
                        <p>老年人信息统计</p>
                    </router-link>
                </div>
                <div class="p1chart bj">
                    <com1 ref="c1"></com1>
                </div>
            </div>
            <!-- 左二 -->
            <div class="p2 bj">
                <!--        <div class="p2title bj">-->
                <!--          <router-link to="/home/EnterpriseInformation">-->
                <!--            <p>巡访员信息统计</p>-->
                <!--          </router-link>-->
                <!--          <span :class="isTure ? 'kaung1': 'kaung2' "  style="margin-left: 10px" @click="right1">个人探访数据</span>-->
                <!--          <span :class="isTure ? 'kaung2': 'kaung1' "  @click="right2">地区探访数据</span>-->
                <!--        </div>-->
                <div class="p2title bj">
                    <p>
                        <router-link to="/home/PatrolmanStatistics">
                            <span>巡访员信息统计</span>
                        </router-link>
                        <span :class="isleftbtnTure1 ? 'left-kaung3': 'left-selectkaung3' " style="margin-right: 10px"
                              @click="left2">性别</span>
                        <span :class="isleftbtnTure ? 'left-selectkaung': 'left-kaung' " style="margin-right: 10px"
                              @click="left1">认证数据</span>
                    </p>
                </div>
                <div class="p2chart bj">
<!--                    <div class="p2legend">-->
<!--                        <span class="span2">群众</span>-->
<!--                        <img src="../assets/index/lv.png"/>-->
<!--                        <span class="span2">党员</span>-->
<!--                        <img src="../assets/index/huang.png"/>-->
<!--                    </div>-->
                    <com2 ref="c2"></com2>
                </div>
            </div>
            <!-- 左三 -->
            <div class="p3 bj">
                <div class="p3title bj">
                    <p>采集巡访数据统计</p>
                </div>
                <div class="p3chart bj">
<!--                    <div class="p3legend">-->
<!--                        <span class="span1">巡访数据</span>-->
<!--                        <img src="../assets/index/huang.png"/>-->
<!--                        <span class="span2">采集数据</span>-->
<!--                        <img src="../assets/index/lan.png"/>-->
<!--                    </div>-->
                    <com3 ref="c3"></com3>
                </div>
            </div>
        </div>
        <!-- 中间部分 -->
        <div class="center">
            <!-- 中间部分上方数据 -->
            <div class="topdatabox">
                <el-row :span="24" type="flex" justify="center" align="middle" style="height:100%;">
                    <el-col :span="5">老年人信息（人）</el-col>
                    <el-col :span="5">认证巡访员（人）</el-col>
                    <el-col :span="4">累计巡访量（次）</el-col>
                    <el-col :span="5">累计积分（分）</el-col>
                    <el-col :span="5">今日探访（次）</el-col>
                </el-row>
            </div>
            <div class="topdatabox2">
                <el-row :span="24" type="flex" justify="center" align="middle" style="height:100%;">
                    <el-col :span="5">
            <span>
              <span class="num">{{count1}}</span> <!--老年人信息（人）-->
            </span>
                    </el-col>
                    <el-col :span="5">
            <span>
              <span class="num">{{count2}}</span> <!--认证巡访员（人）-->
            </span>
                    </el-col>
                    <el-col :span="4">
            <span>
              <span class="num">{{count3}}</span> <!--累计巡访量（次）-->
            </span>
                    </el-col>
                    <el-col :span="5">
            <span>
              <span class="num">{{count4}}</span> <!--累计积分（分）-->
            </span>
                    </el-col>
                    <el-col :span="5">
            <span>
              <span class="num">{{count5}}</span> <!--今日探访（次）-->
            </span>
                    </el-col>
                </el-row>
            </div>
            <!-- 地图组件 -->
            <div class="mapbox">
                <img src="../assets/index/dq.gif" class="aa"/>
                <img src="../assets/index/diqiu.png" class="bb"/>
                <jlMap :data1="mapDataArr" :data2="mapprodata"></jlMap>
            </div>
        </div>
        <div class="right">
            <!-- 右一 -->
            <div class="p4 bj">
                <div class="p4title bj">
                    <router-link to="/home/Ranking">
                        <p>当月探访数据排行榜</p>
                    </router-link>
                    <span :class="isTure ? 'kaung1': 'kaung2' " style="margin-left: 10px" @click="right1">个人探访数据</span>
                    <span :class="isTure ? 'kaung2': 'kaung1' " @click="right2">地区探访数据</span>
                </div>
                <div class="p4chart bj">
                    <com4></com4>
                </div>
            </div>
            <!-- 右二 -->
            <div class="p5 bj">
                <div class="p5title bj">
                    <p>运营分析</p>
                </div>
                <div class="p5chart">
                    <com5 ref="c5"></com5>
                </div>
            </div>
            <!-- 右三 -->
            <div class="p6 bj">
                <div class="p6title bj">
                    <p>实时信息</p>
                </div>
                <vueSeamlessScroll :data="listData" class="seamless-warp">
                    <ul class="item" style="height:100%">
                        <li v-for="(item, index) in listData" :key="index">
                            <el-row
                                    style="padding-top:1%;padding-bottom:1%;margin-top:2%;color:#fff"
                                    type="flex"
                                    justify="center"
                                    align="middle"
                                    :class="{'sc0': index%2==0}"
                            >
<!--                                <el-col :span="4" class="col4">-->
<!--                                    <el-image class="img" :src="scrollTextisColor(index)"></el-image>-->
<!--                                </el-col>-->
                                <el-col :span="4">{{item.date}}</el-col>
                                <el-col :span="4">{{item.time}}</el-col>
                                <!-- <el-col :span="4">
                                  <img src="../assets/index/block.png" alt />
                                </el-col>-->
                                <el-col :span="12">{{item.address}}</el-col>
                            </el-row>
                        </li>
                    </ul>
                </vueSeamlessScroll>
            </div>
        </div>
    </div>
</template>
<script>
    import jlMap from "../components/index/jlMap.vue";
    import com1 from "../components/index/1.vue";
    import com2 from "../components/index/2.vue";
    import com3 from "../components/index/3.vue";
    import com4 from "../components/index/4.vue";
    import com5 from "../components/index/5.vue";
    import vueSeamlessScroll from "vue-seamless-scroll";
    import {
        selectUserByAuth,
        oldPersonSelectDeptValue,
        oldnum,
        visitnum
    } from "../api";

    export default {
        name: "Home",
        components: {com1, com2, com3, com4, com5, jlMap, vueSeamlessScroll},
        data() {
            return {
                count1: 0,   //老年人信息（人）
                count2: 0,   //认证巡访员（人）
                count3: 0,   //累计巡访量（次）
                count4: 0,   //累计积分（分）
                count5: 0,   //今日探访（次）

                month: "",
                isTure: true,
                isleftbtnTure: true,
                isleftbtnTure1: true,
                isleftbtnTure2: true,
                isTure2: false,
                num: 0,
                zhuce: 0,
                maptopResult: {},
                // 右三实时对接数据
                listData: [
                    {
                        date:'06-09',
                        time:'08:17',
                        address:'长春市朝阳区老人张翠芳探访',
                    },
                    {
                        date:'06-09',
                        time:'08:17',
                        address:'长春市朝阳区老人张翠芳探访',
                    },
                    {
                        date:'06-09',
                        time:'08:17',
                        address:'长春市朝阳区老人张翠芳探访',
                    },
                    {
                        date:'06-09',
                        time:'08:17',
                        address:'长春市朝阳区老人张翠芳探访',
                    },
                    {
                        date:'06-09',
                        time:'08:17',
                        address:'长春市朝阳区老人张翠芳探访',
                    },
                    {
                        date:'06-09',
                        time:'08:17',
                        address:'长春市朝阳区老人张翠芳探访',
                    },
                    {
                        date:'06-09',
                        time:'08:17',
                        address:'长春市朝阳区老人张翠芳探访',
                    },  {
                        date:'06-09',
                        time:'08:17',
                        address:'长春市朝阳区老人张翠芳探访',
                    },
                    {
                        date:'06-09',
                        time:'08:17',
                        address:'长春市朝阳区老人张翠芳探访',
                    },
                    {
                        date:'06-09',
                        time:'08:17',
                        address:'长春市朝阳区老人张翠芳探访',
                    }
                ],
                step: 20, // 数值越大速度滚动越快
                limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 0, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
                mapdata: [],
                mapdata1: [],
                mapprodata: [],
                data4: [],
                mapDataArr: [],
                mapDide: {
                    //长春
                    cc: [
                        [125.35, 43.88],
                        [125.35, 44.58],
                        [126.35, 44.88],
                        [125.85, 44.11],
                        [125.85, 44.55]
                    ],
                    //四平
                    sp: [
                        [124.8, 43.47],
                        [123.8, 43.77],
                        [124.5, 43.87],
                        [124.3, 43.47],
                        [124.88, 43.77]
                    ],
                    // 辽源市
                    ly: [
                        [125.13, 42.88],
                        [125.38, 42.9],
                        [125.5, 43],
                        [125.5, 42.6],
                        [125.2, 42.6]
                    ],
                    // 吉林市
                    jl: [
                        [126.55, 43.83],
                        [126.88, 43.99],
                        [126.11, 43.11],
                        [126.66, 43.33],
                        [126.99, 43.66]
                    ],
                    //松原市
                    sy: [
                        [124.82, 45.11],
                        [125.82, 45.11],
                        [123.82, 44.66],
                        [124.11, 44.33],
                        [124.11, 45.11]
                    ],
                    // 白城市
                    bc: [
                        [122.84, 45.61],
                        [123.33, 45.61],
                        [122.84, 45.11],
                        [123.33, 45.11],
                        [122.66, 44.55]
                    ],
                    // //白山市
                    bs: [
                        [126.997839, 41.992505],
                        [126.447839, 41.992505],
                        [126.997839, 42.662505],
                        [127.667839, 41.662505],
                        [127.667839, 41.992505]
                    ],
                    // 通化市
                    th: [
                        [125.93, 41.73],
                        [125.93, 41.11],
                        [125.93, 42.11],
                        [125.93, 42.55],
                        [125.66, 42.11]
                    ],
                    // 延边朝鲜族自治州
                    yb: [
                        [129.5, 42.88],
                        [128.5, 42.88],
                        [128.5, 42.22],
                        [128.5, 43.44],
                        [129.5, 43.44]
                    ]
                }
            };
        },
        mounted() {
            this.timer = setInterval(() => {
                this.mapsec();
            }, 60000);
            this.timer = setInterval(() => {
                this.ssdj();
            }, 60000);
            // this.fiveNum();

            this.count1_method();
            this.count2_method();
            this.count3_method();
            this.count4_method();
            this.count5_method();
        },
        methods: {
            async count1_method() {
                const result = await oldnum({}, 'POST');
                this.count1 = result.oldnum;
            },
            async count2_method() {
                const result = await selectUserByAuth({}, 'POST');
                this.count2 = result[0].count;
            },
            async count3_method() {
                const result = await visitnum({}, 'POST');
                this.count3 = result.visitnum;
            },
            async count4_method() {
                const result = await oldPersonSelectDeptValue({}, 'POST');
                this.count4 = result.totalValue;
            },
            async count5_method() {

            },

            //  右边第一个  地区探访数据 按钮
            right1() {
                this.isTure = false;
            },
            //  右边第二个
            right2() {
                this.isTure = true;
            },
            // 认证数据 按钮切换
            left1() {
                this.isleftbtnTure = true;
                this.isleftbtnTure2 = true;
                this.isleftbtnTure1 = true;

                this.$refs.c2.draw1();
            },
            // 性别 按钮切换
            left2() {
                this.isleftbtnTure1 = false;
                this.isleftbtnTure2 = true;
                this.isleftbtnTure = false;

                this.$refs.c2.draw2();
            },

            // // 地图上5个统计
            // async fiveNum() {
            //     const response = await fiveNum();
            //     this.maptopResult = response;
            //     this.circledata0 = Number(((this.maptopResult.ljfknum / this.maptopResult.sqjenum) * 100).toFixed(0));
            // },
            // async mapsec() {
            //     const response = await mapsec();
            //     // console.log(response);
            //     let data = [];
            //     for (let arr in response) {
            //         response[arr].forEach((item, index) => {
            //             data.push({
            //                 ...item,
            //                 value: this.mapDide[arr][index].concat(parseInt(item.intllmoney)),
            //                 name: item.company_name
            //             });
            //         });
            //     }
            //     this.mapDataArr = data;
            //     // }
            // },

            scrollTextisColor: function (i) {
                let inde = i % 3;
                //console.log(inde)
                if (inde === 0) {
                    return require("../assets/index/red.png")
                } else if (inde === 1) {
                    return require("../assets/index/lv.png")
                } else if (inde === 2) {
                    return require("../assets/index/huang.png")
                }
            },

        },
        computed: {
        }
    };
</script>
<style scoped lang="less" type="text/css">
    .backtitle {
        background-image: -webkit-linear-gradient(bottom, #91e5ff, #fff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 32px;
        font-weight: 900;
        position: absolute;
        left: 40%;
        top: 1%;
    }

    .seamless-warp {
        width: 85%;
        margin-left: 5%;
        height: 80%;
        margin-top: 2%;
        overflow: hidden;
    }

    .home {
        height: 100%;
        position: fixed;
        width: 100%;
        background: url("../assets/index/bj.png");
        background-size: 100% 100%;
        display: flex;
    }

    .bj {
        width: 100%;
    }

    .left {
        width: 26%;
        height: 99%;
        position: relative;
    }

    .center {
        width: 48%;
        height: 99%;
        position: relative;
    }

    .right {
        width: 26%;
        height: 99%;
        position: relative;
    }

    .p1 {
        height: 36%;
        position: absolute;
        top: 0%;
        left: 0%;

    }

    .p2 {
        height: 30%;
        position: absolute;
        top: 36%;
        left: 0%;
    }

    .p3 {
        height: 32%;
        position: absolute;
        top: 66%;
        left: 0%;
    }

    .p4 {
        height: 29.7%;
        margin-top: 18%;
        padding-top: 17px;
    }

    .p5 {
        height: 29%;

    }

    .p6 {
        height: 26%;
        /*margin-top: 3%;*/
      padding-top: 10px
    }

    .p1title {
        height: 10%;
        color: #fff;
        position: absolute;
        top: 30%;
        left: 13%;
        font-size: 1.2em;

    }

    .p2title {
        height: 10%;
        position: absolute;
        left: 13%;
        top: 15%;
        font-size: 1.2em;
        color: #fff;
        width: 85%;

        /*height: 12%;*/
        /*color: #fff;*/
        /*position: relative;*/

    }


    .p3title {
        height: 16%;
        position: absolute;
        left: 13%;
        top: 13.5%;
        font-size: 1.2em;
        color: #fff;
    }

    .p1chart {
        height: 70%;
        position: absolute;
        top: 40%;
        left: 0%;
    }

    .p2chart {
        height: 80%;
        position: absolute;
        top: 35%;
        left: 0%;

    }

    .p1legend img {
        float: right;
        margin-right: 2%;
    }

    .p3chart {
        height: 80%;
        position: absolute;
        top: 30%;
        left: 0%;
    }

    .p4chart {
        height: 82%;
    }

    .p1legend {
        width: 95%;
        height: 10%;
    }

    .p2legend {
        width: 95%;
        height: 10%;
    }

    .p3legend {
        width: 95%;
        height: 10%;
    }

    .p4legend {
        width: 90%;
        height: 10%;
    }

    .p2legend img {
        float: right;
        margin-right: 2%;
        margin-top: 1%;
    }

    .p3legend img {
        float: right;
        margin-right: 2%;
        margin-top: 1%;
    }

    .p4legend img {
        float: right;
        margin-right: 2%;
        margin-top: 1%;
    }

    .p6title {
        height: 15%;
        position: relative;
        color: white;
    }

    .p6title p {
        position: absolute;
        bottom: 20%;
        left: 6%;
        font-size: 1.2em;
    }

    .p4title {
        height: 12%;
        color: #fff;
        position: relative;
    }

    .p5title {
        height: 18%;
        color: #fff;
        position: relative;
        font-size: 1.2em;
    }

    .p5title p {
        position: absolute;
        top: 20%;
        left: 6%;

    }

    .p4title p {
        position: absolute;
        bottom: 4%;
        left: 6%;
        font-size: 1.2em;
    }

    .p5chart {
        width: 100%;
        height: 84%;
        margin-left:4%;

    }

    .span1box {
        width: 85%;
        margin-left: 5%;
        height: 12%;

        border-bottom: 1px dashed #006273;
    }

    .progress .el-row {
        height: 25%;
        border-bottom: 1px dashed #006273;
    }

    .topdatabox {
        width: 100%;
        height: 5%;
        position: absolute;
        top: 13%;
        text-align: center;
        letter-spacing: 2px;
        color: white;
    }

    .topdatabox2 {
        width: 100%;
        height: 5%;
        position: absolute;
        top: 18%;
        text-align: center;
        color: #fff;
        font-size: 22px;
    }

    .num {
        font-size: 35px;
        font-family: AgencyFB;
        font-weight: normal;
        color: rgba(247, 255, 63, 1);
    }

    .dw {
        color: #ffc809;
    }

    .name {
        color: #fff;
        font-size: 25px;
    }

    .sc0 {
        background-color: #0d274c;

    }

    .span1 {
        float: right;
        color: #fff;
        font-size: 1em;
        /*font-size:13px;*/
    }

    .span2 {
        float: right;
        color: #fff;
        font-size: 1em;
        margin-right: 2%;
    }

    .p5box {
        width: 45%;
        height: 48%;
        margin-top: 2%;
        float: left;
        position: relative;
        top: -3%;
    }

    .aa {
        opacity: 0.1;
        width: 735px;
        height: 735px;
        position: absolute;
        top: 24%;
        left: 10%;
    }

    .bb {
        width: 735px;
        height: 735px;
        position: absolute;
        top: 24%;
        left: 10%;
        -webkit-animation: rotateImg 8s linear infinite;
        vertical-align: middle;
    }

    .bb {
        -webkit-animation: rotateImg 5s linear infinite;
        vertical-align: middle;

    }

    @keyframes rotateImg {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(-360deg);
        }
    }

    @-webkit-keyframes rotateImg {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(-360deg);
        }
    }

    .mapbox {
        width: 100%;
        height: 76%;
        margin-top: 25%;
    }

    .item {
        font-size: 16px;
    }

    .left-kaung {
        float: right;
        cursor: pointer;
        padding: 2px 5px;
        display: inline-block;
        background: url("../assets/index/leftkuang.png");
        font-size: 16px;
    }

    .left-selectkaung {
        float: right;
        cursor: pointer;
        padding: 2px 5px;
        display: inline-block;
        background: url("../assets/index/leftselectkuang.png");
        font-size: 16px;
    }

    .left-kaung2 {
        float: right;
        cursor: pointer;
        padding: 2px 5px;
        display: inline-block;
        background: url("../assets/index/leftkuang2.png");
        font-size: 16px;
    }

    .left-selectkaung2 {
        float: right;
        cursor: pointer;
        padding: 2px 5px;
        display: inline-block;
        font-size: 16px;
        background: url("../assets/index/leftselectkuang2.png");
    }

    .left-kaung3 {
        float: right;
        cursor: pointer;
        padding: 2px 5px;
        display: inline-block;
        background: url("../assets/index/leftkuang2.png");
        font-size: 16px;
    }

    .left-selectkaung3 {
        float: right;
        cursor: pointer;
        padding: 2px 5px;
        display: inline-block;
        font-size: 16px;
        background: url("../assets/index/leftselectkuang2.png");
    }

    .kaung1 {
        float: right;
        margin-top: 2%;
        cursor: pointer;
        padding: 2px 5px;
        display: inline-block;
        background: url("../assets/index/biankuang2.png");
    }

    .kaung2 {
        float: right;
        margin-top: 2%;
        background: url("../assets/index/biankuang1.png");
        padding: 2px 5px;
        display: inline-block;
        cursor: pointer;
    }


</style>
