<style lang="less">
@import "./home.less";
</style>
<template>
    <div class="home-main" style="background:#f0f0f0;">
        <Row>
            <Col span="8">
            <Row>
                <Card>
                    <Row type="flex" class="user-infor">
                        <Col span="8">
                        <Row class-name="made-child-con-middle" type="flex" align="middle">
                            <img class="avator-img" :src="avatorPath" />
                        </Row>
                        </Col>
                        <Col span="16" style="padding-left:6px;">
                        <Row style="display:block \10;margin-top:30px \10;" class-name="made-child-con-middle" type="flex" align="middle">
                                <b class="card-user-infor-name">{{user.userName}}</b>
                                <!-- <p>{{user.userCode}}</p> -->
                        </Row>
                        </Col>
                    </Row>
                    <div class="line-gray"></div>
                    <Row class="margin-top-8">
                        <Col span="8">
                        <p class="notwrap">上次登录时间</p>
                        </Col>
                        <Col span="16" class="padding-left-8">{{user.lastAccessTime}}</Col>
                    </Row>
                    <Row class="margin-top-8">
                        <Col span="8">
                        <p class="notwrap">IP</p>
                        </Col>
                        <Col span="16" class="padding-left-8">{{user.userIP}}</Col>
                    </Row>
                </Card>
            </Row>
            <Row class="margin-top-10">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="android-checkbox-outline"></Icon>
                        待办事项
                    </p>
                    <a type="text" slot="extra" @click.prevent="addNewToDoItem">
                        <Icon type="plus-round"></Icon>
                    </a>
                    <Modal v-model="showAddNewTodo" title="添加新的待办事项" @on-ok="addNew" @on-cancel="cancelAdd">
                        <Row type="flex" justify="center">
                            <Input v-model="newToDoItemValue" icon="compose" placeholder="请输入..." style="width: 300px" />
                        </Row>
                        <Row slot="footer">
                            <Button type="ghost" @click="cancelAdd">取消</Button>
                            <Button type="primary" @click="addNew">确定</Button>
                        </Row>
                    </Modal>
                    <div class="to-do-list-con">
                        <div v-for="(item, index) in toDoList" :key="index" class="to-do-item">
                            <to-do-list-item :content="item.title"></to-do-list-item>
                        </div>
                    </div>
                </Card>
            </Row>
            </Col>
            <Col span="16" class-name="padding-left-5">
            <Row>
                <Col span="6">
                <infor-card id-name="user_created_count" :end-val="count.createUser" iconType="android-person-add" color="#ffb403" intro-text="今日新增用户"></infor-card>
                </Col>
                <Col span="6" class-name="padding-left-5">
                <infor-card id-name="visit_count" :end-val="count.visit" iconType="ios-eye" color="#64d572" :iconSize="50" intro-text="今日浏览量"></infor-card>
                </Col>
                <Col span="6" class-name="padding-left-5">
                <infor-card id-name="collection_count" :end-val="count.collection" iconType="upload" color="#ffd572" intro-text="今日数据采集量"></infor-card>
                </Col>
                <Col span="6" class-name="padding-left-5">
                <infor-card id-name="transfer_count" :end-val="count.transfer" iconType="shuffle" color="#f25e43" intro-text="今日服务调用量"></infor-card>
                </Col>
            </Row>
            <Row class="margin-top-10">
                <Card :padding="0">
                    <p slot="title" class="card-title">
                        信息公告
                    </p>
                    <div class="map-con" style="overflow:auto;">
                        <ul>
                            <li v-for="item in noticeList">
                                <br>
                                <div @click="noticeInfo(item.noticeId)" style="cursor:pointer;display:inline-block;margin-left: 20px">{{item.noticeTitle}}</div>
                                <div style="float: right;margin-right: 20px">{{item.createTime}}</div>
                                <br>
                            </li>
                        </ul>
                    </div>
                </Card>
            </Row>
            </Col>
        </Row>
        <Row class="margin-top-10">
            <Col span="8">
            <Card>
                <p slot="title" class="card-title">
                    <Icon type="android-map"></Icon>
                    上周每日来访量统计
                </p>
                <div class="data-source-row">
                    <visite-volume></visite-volume>
                </div>
            </Card>
            </Col>
            <Col span="8" class="padding-left-10">
            <Card>
                <p slot="title" class="card-title">
                    <Icon type="ios-pulse-strong"></Icon>
                    数据来源统计
                </p>
                <div class="data-source-row">
                    <data-source-pie></data-source-pie>
                </div>
            </Card>
            </Col>
            <Col span="8" class="padding-left-10">
            <Card>
                <p slot="title" class="card-title">
                    <Icon type="android-wifi"></Icon>
                    各类用户服务调用变化统计
                </p>
                <div class="data-source-row">
                    <user-flow></user-flow>
                </div>
            </Card>
            </Col>
        </Row>
        <Row class="margin-top-10">
            <Card>
                <p slot="title" class="card-title">
                    <Icon type="ios-shuffle-strong"></Icon>
                    上周每日服务调用量(万)
                </p>
                <div class="line-chart-con">
                    <service-requests></service-requests>
                </div>
            </Card>
        </Row>
    </div>
</template>

<script>
import cityData from "./map-data/get-city-value.js";
import homeMap from "./components/map.vue";
import dataSourcePie from "./components/dataSourcePie.vue";
import visiteVolume from "./components/visiteVolume.vue";
import serviceRequests from "./components/serviceRequests.vue";
import userFlow from "./components/userFlow.vue";
import countUp from "./components/countUp.vue";
import inforCard from "./components/inforCard.vue";
import mapDataTable from "./components/mapDataTable.vue";
import toDoListItem from "./components/toDoListItem.vue";
import Preview from "../system/systemNotice/Preview.vue";
import NoticeListPage from "../system/systemNotice/NoticeListPage.vue";

export default {
    components: {
        homeMap,
        dataSourcePie,
        visiteVolume,
        serviceRequests,
        userFlow,
        countUp,
        inforCard,
        mapDataTable,
        toDoListItem
    },
    created: function(){
        $store.dispatch("GetHomeNoticeList").then(response => {
            this.noticeList = response.dataResult;
            //this.getNoticeList();
        });
    },
    data() {
        return {
            noticeList: [],
            toDoList: [
                {
                    title: "去iView官网学习完整的iView组件"
                },
                {
                    title: "去iView官网学习完整的iView组件"
                },
                {
                    title: "去iView官网学习完整的iView组件"
                },
                {
                    title: "去iView官网学习完整的iView组件"
                },
                {
                    title: "去iView官网学习完整的iView组件"
                }
            ],
            count: {
                createUser: 496,
                visit: 3264,
                collection: 24389305,
                transfer: 39503498
            },
            cityData: cityData,
            showAddNewTodo: false,
            newToDoItemValue: ""
        };
    },
    computed: {
        avatorPath() {
            return this.$store.state.avatar;
        },
        user() {
            return this.$store.state.userInfo;
        }
    },
    methods: {
        noticeInfo(obj){
            new this.$pageModal(
                Preview,
                {
                    props: {
                        noticeId: obj
                    }
                },
                (data) => {

                }
            )
        },
        getNoticeList(){
            if(this.noticeList.length > 0){
                new this.$pageModal(
                    NoticeListPage,
                    {
                        props: {
                            // noticeId: obj
                        }
                    },
                    (data) => {

                    }
                )
            }else{
                return ;
            }
        },
        addNewToDoItem() {
            this.showAddNewTodo = true;
        },
        addNew() {
            if (this.newToDoItemValue.length !== 0) {
                this.toDoList.unshift({
                    title: this.newToDoItemValue
                });
                setTimeout(function () {
                    this.newToDoItemValue = "";
                }, 200);
                this.showAddNewTodo = false;
            } else {
                this.$Message.error("请输入待办事项内容");
            }
        },
        cancelAdd() {
            this.showAddNewTodo = false;
            this.newToDoItemValue = "";
        }
    }
};
</script>
