<template>
    <div class="home-wrap">
        <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
        <div class="message-content">
            <el-row>
                <el-col class="visitor" :span="24" v-if="tableData.length > 0">
                    <div class="visitor-title">
                        <div class="title">今日随访：<span style="color:#449284;">10人</span></div>
                        <span class="visitor-more" @click="lookMore">查看更多</span>
                    </div>
                    <div class="visitor-info">
                        <el-table
                            :data="tableData"
                            style="width: 100%">
                            <el-table-column prop="date" label="预约时间" min-width="30"></el-table-column>
                            <el-table-column prop="name" label="姓名" min-width="20"></el-table-column>
                            <el-table-column prop="style" label="随访方式" min-width="30"></el-table-column>
                            <el-table-column prop="content" label="随访内容"></el-table-column>
                        </el-table>
                    </div>
                </el-col>
                <el-col class="message screenSet" :span="24" id="screenSet">
                    <div class="message-title">系统消息 <span>今日消息：{{count}}条</span></div>
                    <div class="message-info" v-if="messageList.length > 0">
                        <div class="message-item" v-for="(item,index) in messageList" :key="index">
                            <div class="text-top">
                                <i class="el-icon-error" v-if="item.type == 2" style="color:#FA5555"></i>
                                <i class="el-icon-success" v-if="item.type == 3" style="color:#67C23A"></i>
                                <i class="el-icon-warning" v-if="item.type == 1" style="color:#FAAD14"></i>
                                <span>{{item.menuName}}</span>
                                <span>{{item.portalTime}}</span>
                            </div>
                            <div class="text-bottom">{{item.content}}</div>
                        </div>
                    </div>
                    <div class="no-message" v-else>
                        <div>
                            <img src="../assets/image/noData.png"/>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import BreadCrumb from '../components/breadcrumb.vue'
import { setTimeout, setInterval } from 'timers'
import { mapGetters } from 'vuex'
import * as commonUtil from '../utils/utils'
let vm = null
export default {
    components: {
        BreadCrumb
    },
    data() {
        return {
            curmbFirst: '数据总览',
            spanFirstNum: 12,
            spanSecondNum: 12,
            tableData: [],
            count: 0,
            messageList:[]
        }
    },
    created() {
        vm = this
        vm.getSystemData()
    },
    computed: {
        ...mapGetters([
            '_token'
        ])
    },
    // 挂载到Dom完成时
    mounted: function() {
        commonUtil.resizeHeight()
    },
    methods: {
        // 查看更多
        lookMore() {

        },
        // 获取系统消息数据
        getSystemData() {
            vm.GET('portal/portalMessage/queryPortalMessageInfo',{token: vm._token, pageNo: 1, pageSize: 15}).then((res) => {
                if( res.code == '000000') {
                    vm.messageList = res.data.portalMessageModels
                    vm.count = res.data.count
                }
            })
        }
    }
}
</script>
<style lang="scss">
    .home-wrap {
        .message-content {
            .visitor {
                padding: 0 25px 30px;
                margin-bottom: 20px;
                background: #fff;
                // min-height: 348px;
                .visitor-title {
                    height: 80px;
                    line-height: 80px;
                    margin-right: 20px;
                    text-align: right;
                    .title {
                        float: left;
                        font-size: 20px;
                    }
                    .visitor-more {
                        font-size: 12px;
                        color: #449284;
                        border: 1px solid rgba(68,146,132,0.3);
                        padding: 5px 14px;
                        border-radius: 3px;
                        background: rgba(68,146,132,0.06);
                    }
                }
                .visitor-info {
                    margin-right: 20px;
                }
            }
            .message {
                padding: 0 25px 30px;
                background: #fff;
                // min-height: 436px;
                .message-title {
                    font-size: 20px;
                    height: 80px;
                    line-height: 80px;
                    span {
                        font-size: 14px;
                        color: #717377;
                        margin-left: 8px;
                    }
                }
                .message-info {
                    padding: 7px;
                    .message-item {
                        padding: 10px 10px 15px;
                        border-bottom: 1px solid #EBEEF5;
                        .text-top {
                            span:nth-child(2) {
                                padding: 10px;
                            }
                            span:nth-child(3) {
                                font-size: 12px;
                                color: #999;
                            }
                        }
                        .text-bottom {
                            font-size: 14px;
                            color: #666;
                            margin-top: 15px;
                        }
                        
                    }
                }
            }
            .no-message {
                text-align: center;
                img {
                    width: 100px;
                    margin-top: 17%;
                }
            }
        }
    }
</style>


