<style>
    .summaryInfo .box_top {
        width: 100%;
        border-radius: 6px;
    }

    .summaryInfo .box_t_item {
        background: #FFF;
        height: 368px;
        border-radius: 6px;
        padding: 30px 20px;
    }

    .box_t_it {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .box_t_itext {
        font-size: 18px;
        color: #3F4254;
        font-weight: 800;
        margin-left: 13px;
    }

    .summaryInfo .noticeitem {
        /* width: 100% - 2px; */
        padding: 20px;
        display: flex;
        align-items: flex-start;
        border-bottom: 1px solid #e2e2e2;

    }

   .summaryInfo .noticeitem:hover {
        box-shadow: 0px 0px 8px 0px rgba(68, 110, 228, 0.64);
        border-radius: 6px;

        /* border: 1px solid rgba(68, 110, 228, 0.64);; */
    }
    .summaryInfo .noticeitem:hover .noticeitem_l_img{
        background: url('../../assets/images/Notices.png');
        background-repeat: no-repeat;
        background-size: 100%;
        width: 41px;
        height: 39px;
    }

    .summaryInfo .noticeitem_l {
        width: 82px;
        height: 82px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #F2F3F9;
    }
    .summaryInfo .noticeitem_l_img{
        background: url('../../assets/images/Noticen.png');
        background-repeat: no-repeat;
        background-size: 100%;
        width: 41px;
        height: 39px;
    }
    .summaryInfo  .noticeitem:hover .noticeitem_l {
        width: 82px;
        height: 82px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #E1E9FF;
    }
    .summaryInfo .noticeitem:hover .gonggaoName{
        font-size: 16px;font-family: PingFang SC;font-weight: 800;color: #2961FE;width: 1px;flex: 1;overflow: hidden;white-space: nowrap; text-overflow: ellipsis
    }
    .summaryInfo .gonggaoName{
        font-size: 16px;font-family: PingFang SC;font-weight: 800;color: #3F4254;width: 1px;flex: 1;overflow: hidden;white-space: nowrap; text-overflow: ellipsis
    }

    .summaryInfo .box_c {
        margin-top: 30px;
        min-height: 400px;
    }

    .summaryInfo .box_c_item {
        background: #FFF;
        min-height: 400px;
        border-radius: 6px;
        padding: 20px;
    }

    .summaryInfo .textbox {
        width: 100%;
        height: 130px;
        border-radius: 20px;
        font-size: 16px;
        padding-left: 29px;
        padding-top: 29px;
    }

    .summaryInfo .lanstyle {
        color: #3699FF;
        background: #ECF6FF;
    }

    .summaryInfo .redstyle {
        color: #F44E60;
        background: #FFEEF0;
    }

    .summaryInfo .justyle {
        color: #FFA800;
        background: #FFF8EB;
    }

    .summaryInfo .lvstyle {
        color: #1BC5C2;
        background: #EEFEFD;
    }


    .month_export {
        position: relative !important;

    }

    .summaryInfo .month_export .el-date-editor {
        background-color: darkblue !important;
        width: auto !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        opacity: 0;
    }

    .btnstyle {
        width: 100%;
        height: 100px;
        margin-top: 34px;
        background: #F6F7FA;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
</style>
<template>
    <div class="summaryInfo">
        <div class="box_top">
            <el-row :gutter="15">
                <el-col :span="12">
                    <div class="grid-content  box_t_item">
                        <div class="box_t_it">
                            <div style="display: flex;align-items: center;">
                                <inline-svg class="svg-icon q-mr-xs svg-icon-secondary"
                                    src="icons/svg/Communication/Urgent-mail.svg"></inline-svg>
                                <span class="box_t_itext">公告</span>
                            </div>
                        </div>
                        <div  v-if='noticeList.length>0' style="margin-top: 10px;background: #fff;height: 268px; width: 100%;overflow-y: auto;cursor: pointer;padding: 2px;">
                            <q-scroll-area
                                :thumb-style="thumbStyle"
                                :bar-style="barStyle"
                                style="height: 100%; width: 100%;"
                            >
                                <div v-if='noticeList.length>0'>
                                    <div v-for="(item,index) in noticeList" :key='index' class="noticeitem" style="margin: 2px;"
                                        @click="goNoticeDetail(item)">
                                        <!-- <div class="noticeitem_l">
                                            <div class="noticeitem_l_img"></div>
                                        </div> -->
                                        <div style="width: 1px;flex: 1;">
                                            <div style="width: 100%;display: flex;align-items: flex-start;justify-content: space-between;">
                                                <span class="gonggaoName" >{{item.Title}}</span>
                                                <span style="font-size: 14px;font-weight: 500;color: #C4C6D1;">{{item.DayStr}}</span>
                                            </div>
                                            <div style="font-size: 14px; font-family: PingFang SC;font-weight: 400;color: #9A9DAB;margin-top: 10px;display: flex;align-items: center;">
                                            <span>{{item.UpdateByName}}</span>  <span style="margin-left: 20px;">编号：{{item.Number}}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="notifyLoadMore" style="text-align: center;margin-top: 10px;" v-if="noticeMsg.pageSize<Count" @click="getMoreNotify()">
                                        <span>加载更多</span>
                                    </div>
                                </div>
                                <div v-else  class="q-mt-lg flex column justify-center items-center">
                                    <span class="q-mt-md remark-font">没有找到相关数据信息</span>
                                </div>
                            </q-scroll-area>
                            
                        </div>
                        
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content  box_t_item">
                        <div class="box_t_it">
                            <div style="display: flex;align-items: center;">
                                <inline-svg class="svg-icon q-mr-xs svg-icon-secondary"
                                    src="icons/svg/Communication/Chat-check.svg"></inline-svg>
                                <span class="box_t_itext">消息</span>
                            </div>
                        </div>
                        <div  style="margin-top: 10px;background: #fff;height: 268px; width: 100%;overflow-y: auto;cursor: pointer;padding: 2px;">
                            <q-scroll-area
                                :thumb-style="thumbStyle"
                                :bar-style="barStyle"
                                style="height: 100%; width: 100%;"
                            >
                                <q-list v-if="socektArr.length>0" >
                                    <q-item class="q-my-sm q-pa-xs items-start" v-for="(x,i) in socektArr" :key="i" style="padding: 10px;border-radius: 6px;" 
                                        clickable v-ripple @click="goMsgDetail(x.JumpUrl,x),readMsgLog(x.Id,i)">
                                        <q-item-section avatar>
                                            <q-avatar :style="{'background-color':'#e1f0ff'}" rounded size="44px"
                                                text-color="negative">
                                                <inline-svg :class="['svg-icon',`svg-icon-primary`]"
                                                    src="icons/svg/Shopping/Bag2.svg"></inline-svg>
                                            </q-avatar>
                                        </q-item-section>
                                        <q-item-section>
                                            <q-item-label class="text-weight-bold" style="margin-bottom: 10px;">{{x.Title}}</q-item-label>
                                            <q-item-label caption lines="3" class="remark-font">{{x.Content}}</q-item-label>
                                        </q-item-section>
                                        <q-item-section side class="remark-font">{{x.SendTime.replace('T',' ')}}
                                        </q-item-section>
                                    </q-item>
                                </q-list>
                                <div v-else  class="q-mt-lg flex column justify-center items-center">
                                    <span class="q-mt-md remark-font">没有找到相关数据信息</span>
                                </div>
                            </q-scroll-area>
                           
                        </div>

                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="box_c">
            <el-row :gutter="15">
                <el-col :span="8">
                    <div class="box_c_item">
                        <div class="box_t_it">
                            <div style="display: flex;align-items: center;">
                                <inline-svg class="svg-icon q-mr-xs svg-icon-secondary"
                                    src="icons/svg/Communication/Urgent-mail.svg"></inline-svg>
                                <span class="box_t_itext">我的提成</span>
                            </div>
                            <div style="display: flex;align-items: center;">
                                <el-button class="month_export" type="text" size="mini"><span style="cursor: pointer;">{{PeriodsTime}}</span> <i class="el-icon-caret-bottom"></i>
                                    <el-date-picker v-model="dates" @change="batchWithdrawalCommission" type="month"
                                        size="small" format="yyyy-MM" value-format="yyyy-MM" placeholder="选择月">
                                    </el-date-picker>
                                </el-button>
                            </div>
                        </div>
                        <div id="main" style="width: 100%;height:300px;"> </div>
                        <div style="width: 100%;margin-top: 30px;">
                            <el-row :gutter="30">
                                <el-col :span="12">
                                    <div class="lanstyle textbox">
                                        <div>未完款订单</div>
                                        <div style="font-size: 38px;font-weight: 800;">{{UserInfo.OrderNoCompleteNum}}
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="redstyle textbox">
                                        <div>课程进度未达标</div>
                                        <div style="font-size: 38px;font-weight: 800;">{{UserInfo.CourseNum}}</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div style="width: 100%;margin-top: 30px;">
                            <el-row :gutter="30">
                                <el-col :span="12">
                                    <div class="justyle textbox">
                                        <div v-if='UserInfo.SureStatus==-1'>本月预计</div>
                                        <div v-else>本月实发</div>
                                        <div style="font-size: 20px;font-weight: 800;margin-top: 20px;" v-if='UserInfo.TotalCommiommission>10000'>￥{{UserInfo.TotalCommiommission}}</div>
                                        <div style="font-size: 26px;font-weight: 800;margin-top: 20px;" v-else>￥{{UserInfo.TotalCommiommission}}</div>
                                            
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="lvstyle textbox">
                                        <div>账单情况</div>
                                        <div style="font-size: 20px;font-weight: 800;margin-top: 20px"
                                            v-if='UserInfo.SureStatus==-1'>未出单</div>
                                        <div style="font-size: 20px;font-weight: 800;margin-top: 20px"
                                            v-if='UserInfo.SureStatus==0'>未确认</div>
                                        <div style="font-size: 20px;font-weight: 800;margin-top: 20px"
                                            v-if='UserInfo.SureStatus==1'>已出单</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="btnstyle" v-if='UserInfo.SureStatus==0'>
                            <span style="font-size:16px;color: #3F4254;margin-bottom: 10px;">确认状态</span>
                            <q-btn color="primary" size="sm" label="确认" @click='btnCommission()'/>
                        </div>
                        <div class="btnstyle" v-if='UserInfo.SureStatus==1'>
                            <span style="font-size:16px;color: #3F4254;margin-bottom: 10px;">确认状态</span>
                            <q-btn color="primary" disable size="sm" label="已确认" />
                        </div>
                    </div>
                </el-col>

                <!-- 我的奖金 -->
                <el-col :span="8">
                    <div class="box_c_item">
                        <div class="box_t_it">
                            <div style="display: flex;align-items: center;">
                                <inline-svg class="svg-icon q-mr-xs svg-icon-secondary"
                                    src="icons/svg/Communication/Urgent-mail.svg"></inline-svg>
                                <span class="box_t_itext">我的奖金</span>
                            </div>
                            <div style="display: flex;align-items: center;">
                                <el-button class="month_export" type="text" size="mini"><span style="cursor: pointer;">{{PeriodsTime2}}</span> <i class="el-icon-caret-bottom"></i>
                                    <el-date-picker v-model="dates2" @change="batchWithdrawalCommission2" type="month"
                                        size="small" format="yyyy-MM" value-format="yyyy-MM" placeholder="">
                                    </el-date-picker>
                                </el-button>
                            </div>
                        </div>
                        <div id="main2" style="width: 100%;height:300px;"> </div>
                        <div style="width: 100%;margin-top: 30px;">
                            <el-row :gutter="30">
                                <el-col :span="12">
                                    <div class="lanstyle textbox">
                                        <div>未完款订单</div>
                                        <div style="font-size: 38px;font-weight: 800;">{{UserInfo.OrderNoCompleteNum}}
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="redstyle textbox">
                                        <div>课程进度未达标</div>
                                        <div style="font-size: 38px;font-weight: 800;">{{UserInfo.CourseNum}}</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div style="width: 100%;margin-top: 30px;">
                            <el-row :gutter="30">
                                <el-col :span="12">
                                    <div class="justyle textbox">
                                        <div v-if='UserInfo.SureTStatus==-1'>本月预计</div>
                                        <div v-else>本月实发</div>
                                        <div style="font-size: 20px;font-weight: 800;margin-top: 20px;" v-if='UserInfo.TotalTCommiommission>10000'>￥{{UserInfo.TotalTCommiommission}}</div>
                                        <div style="font-size: 26px;font-weight: 800;margin-top: 20px;" v-else>￥{{UserInfo.TotalTCommiommission}}</div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="lvstyle textbox">
                                        <div>账单情况</div>
                                        <div style="font-size: 20px;font-weight: 800;margin-top: 20px"
                                            v-if='UserInfo.SureTStatus==-1'>未出单</div>
                                        <div style="font-size: 20px;font-weight: 800;margin-top: 20px"
                                            v-if='UserInfo.SureTStatus==0'>未确认</div>
                                        <div style="font-size: 20px;font-weight: 800;margin-top: 20px"
                                            v-if='UserInfo.SureTStatus==1'>已出单</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="btnstyle" v-if='UserInfo.SureTStatus==0'>
                            <span style="font-size:16px;color: #3F4254;margin-bottom: 10px;">确认状态</span>
                            <q-btn color="primary" size="sm" label="确认" @click='btnbonus()'/>
                        </div>
                        <div class="btnstyle" v-if='UserInfo.SureTStatus==1'>
                            <span style="font-size:16px;color: #3F4254;margin-bottom: 10px;">确认状态</span>
                            <q-btn color="primary" disable size="sm" label="已确认" />
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="box_c_item">
                        <div class="box_t_it">
                            <div style="display: flex;align-items: center;">
                                <inline-svg class="svg-icon q-mr-xs svg-icon-secondary"
                                    src="icons/svg/Communication/Urgent-mail.svg"></inline-svg>
                                <span class="box_t_itext">新同事</span>
                            </div>
                        </div>
                        <div class="page-content" style="margin-top: 44px;">
                            <el-table :data="UserInfo.EmployeeListResult" height="350"  style="width: 100%" :header-cell-style="{backgroundColor:'#f5f6f7', color: '#a8a8b3'}">
                                <el-table-column prop="EmployeeName" label="名称" ></el-table-column>
                                <el-table-column prop="DeptName" label="部门" ></el-table-column>
                                <el-table-column prop="PostName" label="岗位"></el-table-column>
                                <el-table-column prop="AccountRemark" label="备注"></el-table-column>
                                
                            </el-table>
                            
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {
        SetWebCartoon,
        GetWebCartoon
    } from '../../api/system/webkit'
    import {
        getUserCenterInfo,
        getUserSellCommission,
        updateSureTeachingBonusDetail,
        updatSureSellCommission,
        getTeacherSellCommission,//我的奖金的折线图

    } from '../../api/users/user'
    import {
        GetMyNoticePageList,
        BeatchReadMsgLog,
    } from '../../api/course/index'
    import {
        GetMsgLogList
    } from '../../api/course/index'
    export default {
        props: {
            saveObj: {
                type: Object,
                default: null
            }
        },
        data() {
            return {
                //通知请求参数
                noticeMsg: {
                    pageIndex: 1,
                    pageSize: 5
                },
                thumbStyle: {
                    right: '0px',
                    borderRadius: '5px',
                    backgroundColor: '#027be3',
                    width: '5px',
                    opacity: 0.75
                },

                barStyle: {
                    right: '-2px',
                    borderRadius: '9px',
                    backgroundColor: '#027be3',
                    width: '9px',
                    opacity: 0.2
                },
                Count: 0,
                visible: true,
                noticeList: [],
                socektArr: [],//消息数组
    
                dates: '',
                PeriodsTime: '',
                dates2: '',
                PeriodsTime2: '',
                sellData: [],
                TsellData:[],
                UserInfo: {},
            }
        },
        created() {
            let now = new Date()
            now.setMonth(now.getMonth() - 4);
            let Month = now.getMonth() < 10 ? '0' + now.getMonth() : now.getMonth()
            this.dates = now.getFullYear() + '-' + Month
            this.PeriodsTime = this.dates + '-01'
            this.dates2 = now.getFullYear() + '-' + Month
            this.PeriodsTime2 = this.dates + '-01'
        },
        mounted() {
            this.getNotify();
            this.getLogList()
            this.getUserInfo()//个人中心
            this.getUserSellCommission()//获取提成的图表
            this.getTeacherSellCommission()//获取奖金的图表
        },
        methods: {
            tubiao(type) {//提成的图标
                var echarts = require('echarts')
                var myChart ;
                if(type == 1){
                     myChart = echarts.init(document.getElementById('main'))
                }else{
                     myChart = echarts.init(document.getElementById('main2'))
                }
                var colors = '';
                if(type == 1){
                    colors = '#F64E60'
                }else{
                    colors = '#2961FE'
                }
                let xdata = []//x轴的数据
                let tbdata = []//图标数据
                let list = [];
                if(type == 1){
                    list = this.sellData
                }else{
                    list = this.TsellData
                }
                if(list.length>0){
                    list.forEach(x => {
                        let obj = x.MonthStr + '月'
                        if (x.MonthStr == 1) {
                            obj = x.YearStr + '-' + x.MonthStr + '月'
                        }
                        xdata.push(obj)
                        tbdata.push(x.TotalCommiommission)
                    })
                }
                
                // 指定图表的配置项和数据
                var option = {

                    grid: {
                        left: '0%',
                        right: '0%',
                        bottom: '0%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: xdata
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: tbdata,
                        type: 'line',
                        smooth: true,
                        cursor: 'pointer',
                        itemStyle: {
                            normal: {
                                color: colors,
                                lineStyle: {
                                    color: colors,
                                    width: 4
                                }
                            }
                        },
                    }]
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option)
            },
       
            batchWithdrawalCommission(val) {
                if (val != null) {
                    this.PeriodsTime = this.dates + '-01';
                    this.getUserSellCommission()
                }
            },
            batchWithdrawalCommission2(val) {
                if (val != null) {
                    this.PeriodsTime2 = this.dates2 + '-01';
                    this.getTeacherSellCommission()
                }
            },
            getUserSellCommission() {
                getUserSellCommission({ PeriodsTime: this.PeriodsTime }).then(res => {
                    if (res.Code == 1) {
                        this.sellData = res.Data;
                        this.tubiao(1)

                    }
                })
            },
            getTeacherSellCommission(){//我的奖金
                getTeacherSellCommission({ PeriodsTime: this.PeriodsTime2 }).then(res => {
                    if (res.Code == 1) {
                        this.TsellData = res.Data;
                        this.tubiao(2)
                    }
                })
            },
            //请求公告数据
            getNotify() {
                GetMyNoticePageList(this.noticeMsg).then(res => {
                    if (res.Code == 1) {
                        this.noticeList = res.Data.PageData;
                        this.Count = res.Data.Count;
                    }
                })
            },
            //获取日志列表
            getLogList() {
                GetMsgLogList().then(res => {
                    if (res.Code == 1) {
                        this.socektArr = res.Data;
                    }
                })
            },
            getUserInfo() {
                getUserCenterInfo().then(res => {
                    if (res.Code == 1) {
                        this.UserInfo = res.Data;
                      
                    }
                })
            },
            //跳转详情
            goNoticeDetail(item) {
                var url = window.location.host;
                let routeUrl = this.$router.resolve({
                    path: "/noticeView",
                    query: {
                        NoticeId: item.Id
                    }
                });
                window.open(routeUrl.href, '_blank');
            },
            //跳转链接 新页面打开
            goMsgDetail(url, item) {
                if (item.CategoryId == 5) {
                    let zcurl = url_jump_zc + '#' + url;
                    // let zcurl='http://www.test.com:8080/#'+url;
                    window.open(zcurl)
                } else {
                    var hostName = window.location.hostname;
                    var port = window.location.port;
                    var newurl = ""
                    if (url != null && url.length > 0) {
                        if (url.indexOf('http://') == -1 || url.indexOf('https://') == -1) {
                            if (url.indexOf("www") == -1) {
                                newurl = "http://" + hostName + (port != 80 ? ":" + port : "") + "/#" + url;
                            } else {
                                newurl = "http://" + url;
                            }
                        } else {
                            newurl = url
                        }
                    }
                    if (newurl) {
                        window.open(newurl, "_blank");
                    }
                }

            },
             //加载更多一次加载一条
            getMoreNotify() {
                this.noticeMsg.pageSize += 5;
                this.getNotify();
            },
            //看过后删除
            readMsgLog(Id, index) {
                let msg = {
                    Ids: []
                }
                msg.Ids.push(Id);
                BeatchReadMsgLog(msg).then(res => {
                    if (res.Code == 1) {
                        this.socektArr.splice(index, 1);
                    }
                })
            },
            btnbonus(){//奖金的确认
                updateSureTeachingBonusDetail({Id:this.UserInfo.CommissionTId}).then(res => {
                    if (res.Code == 1) {
                        this.$q.notify({
                            type: 'iconfont icon-chenggong',
                            color: 'accent',
                            position: "top",
                            message: '确认成功'
                        })
                        this.getUserInfo()
                    }
                })
            },
            btnCommission(){//提成的确定
                updatSureSellCommission({Id:this.UserInfo.CommissionId}).then(res => {
                    if (res.Code == 1) {
                        this.$q.notify({
                            type: 'iconfont icon-chenggong',
                            color: 'accent',
                            position: "top",
                            message: '确认成功'
                        })
                        this.getUserInfo()
                    }
                })
            }

        },
    }

</script>