<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 {
    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;
  }

  .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 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;
          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>