<template>
    <div class="home-wrap">
        <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
        <div class="message-content">
            <el-row>
                <el-col class="visitor screenSet" :span="24">
                    <div class="visitor-title">
                        <div class="title">今日随访：
                          <span style="color:#449284;margin-right: 10px">{{todayPlansList.length}}人</span>
                          <span class="type-button" :style="{background:(planBtn?'rgba(68,146,132,0.06)':'#ffffff')}" @click="changeTodayPlansList(0)">未完成</span>
                          <span class="type-button" :style="{background:(!planBtn?'rgba(68,146,132,0.06)':'#ffffff')}" @click="changeTodayPlansList(1)">已过期</span>
                        </div>
                        <span class="visitor-more"  @click="lookMore(1)">查看更多</span>
                    </div>
                    <div class="visitor-info">
                        <el-table
                            :data="todayPlansList"
                            style="width: 100%">
                            <el-table-column prop="patientName" label="姓名" align="center"></el-table-column>
                            <el-table-column prop="appointTime" label="预约时间" align="center"></el-table-column>
                            <el-table-column prop="fuTypeStr" label="随访方式" align="center"></el-table-column>
                            <el-table-column prop="content" label="操作" align="center">
                              <template slot-scope="scope">
                                <span class="text-btn">随访录入</span> | <span class="text-btn" @click="changeFollowStatus(scope.row)">变更随访状态</span>
                              </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-col>
                <el-col class="visitor screenSet" :span="24" style="margin-top: 0;margin-bottom: 0;">
                  <div class="visitor-title">
                    <div class="title">今日预约
                      <span class="type-button" :style="{background:(appointBtn?'rgba(68,146,132,0.06)':'#ffffff')}" @click="changeTodayAppointsList(0)" style="margin-left: 10px;">未完成</span>
                      <span class="type-button" :style="{background:(!appointBtn?'rgba(68,146,132,0.06)':'#ffffff')}" @click="changeTodayAppointsList(1)" >已过期</span>
                    </div>
                    <span class="visitor-more" @click="lookMore(2)">查看更多</span>
                  </div>
                  <div class="visitor-info">
                    <el-table
                      :data="todayAppointsList"
                      style="width: 100%">
                      <el-table-column prop="planName" label="随访计划名称" align="center"></el-table-column>
                      <el-table-column prop="appointTime" label="随访计划时间" align="center"></el-table-column>
                      <el-table-column prop="appointedCount" label="已经预约" align="center"></el-table-column>
                      <el-table-column prop="notAppointedCount" label="未预约" align="center"></el-table-column>
                      <el-table-column prop="content" label="操作" align="center">
                        <template slot-scope="scope">
                          <span class="text-btn" @click="goToReservation(scope.row.planName, scope.row.appointTime)">去预约</span>
                        </template>
                      </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">
                                <img :src="item.url"/>
                                <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>
        <change-followup-status :isShowChangeDialog="isShowChangeDialog" :statusForm="statusForm" @closeChangeStatus="closeChangeStatus()"></change-followup-status>
    </div>
</template>
<script>
import BreadCrumb from '../components/breadcrumb.vue'
import { setTimeout, setInterval } from 'timers'

import ChangeFollowupStatus from "./followup/record-manage/dialog/change-followup-status";

import { mapGetters, mapState, mapActions } from 'vuex'
import * as commonUtil from '../utils/utils'
let vm = null
export default {
    components: {
        BreadCrumb,
        ChangeFollowupStatus
    },
    data() {
        return {
            curmbFirst: '数据总览',
            spanFirstNum: 12,
            spanSecondNum: 12,
            tableData: [],
            count: 0,
            messageList:[],
            planBtn: true,
            appointBtn: true,
            isShowChangeDialog: false,
            statusForm: {},
        }
    },
    created() {
        vm = this
        vm.getSystemData()
        vm.getTodayPlansList({
          status:0
        });
        vm.getTodayAppointsList({
          status:0
        });
        vm.getTodayOverview({
          status:0
        });
    },
    computed: {
        ...mapGetters([
            '_token'
        ]),
      ...mapState('workbench', {
        todayPlansList: state => state.todayPlansList,
        todayAppointsList: state => state.todayAppointsList,
        todayOverview: state => state.todayOverview,
      })
    },
    // 挂载到Dom完成时
    mounted: function() {
        commonUtil.resizeHeight()
    },
    methods: {
      ...mapActions('workbench', ['getTodayPlansList', 'getTodayAppointsList', 'getTodayOverview']),
        // 查看更多
        lookMore(type) {
          if(type==1) {
            this.$router.push('/followup/record-manage/record-list');
          } else if(type == 2) {
            this.$router.push('/followup/reservation-manage/reservation-list');
          }
        },
        // 获取系统消息数据
        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
                } else {
					vm.$message.info(res.message)
				}
            })
        },
        changeTodayPlansList(status) {
            if(status == 0) {
              vm.planBtn = true
            } else {
              vm.planBtn = false
            }

            vm.getTodayPlansList({
              status: status
            });
        },
        changeTodayAppointsList(status) {
            if(status == 0) {
              vm.appointBtn = true
            } else {
              vm.appointBtn = false
            }
            vm.getTodayAppointsList({
              status: status
            });
        },
        goToReservation(planName, appointTime) {
            this.$router.push({path: '/followup/reservation-manage/reservation-list', query: {planName: planName, appointTime:appointTime}});
        },
        closeChangeStatus(val){
          this.isShowChangeDialog = val;
          let status = null
          if(this.planBtn == true) {
            status = 0
          } else {
            status = 1
          }
          this.getTodayPlansList({
            status: status
          })
        },
        changeFollowStatus(row) {
          this.statusForm = {
            fuPlanPatientTimesId: row.planPatientTimesId,
            patientId: row.patientId,
            nickname: row.patientName,
            status: 1,
          }
          this.isShowChangeDialog = true
        }
    }
}
</script>
<style lang="scss">
    .home-wrap {
        .message-content {
            .visitor {
                padding: 0 25px 30px;
                margin-bottom: 20px;
                background: #fff;
                margin-top: 88px;
                // min-height: 348px;
                @media screen and (min-width:1240px) and (max-width:1900px) {
                  width: 95%;
                  height: 300px !important;
                }
                @media screen and (min-width:1900px) {
                  width: 96.7%;
                  height: 380px !important;
                }
                .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);
                      cursor: pointer;
                    }
                    .type-button {
                        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);*/
                        background: #ffffff;
                        cursor: pointer;
                    }
                }
                .visitor-info {
                    margin-right: 20px;
                    .text-btn:hover {
                      cursor: pointer;
                      color: #449284;
                    }
                }
            }
            .message {
                padding: 0 25px 30px;
                margin-top: 20px;
                background: #fff;
                @media screen and (min-width:1240px) and (max-width:1900px) {
                  width: 95%;
                  height: 320px !important;
                }
                @media screen and (min-width:1900px) {
                  width: 96.7%;
                  height: 400px !important;
                }
                .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 {
                            img {
                                float: left;
                                width: 16px;
                                margin-top: 3px;
                            }
                            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>


