<template>
  <q-dialog v-model="persistent" maximized full-height position="right" @hide="closeShenheForm" class="flex">
    <q-card style="margin-top:61px;width:375px;height:calc(100% - 61px) !important;"
      class="no-border-radius flex column">
      <q-tabs v-model="tab" class="text-grey" active-color="secondary" indicator-color="secondary" align="justify"
        narrow-indicator inline-label>
        <q-tab v-if="socektArr.length>0" alert="negative" name="msg">
          <inline-svg class="svg-icon q-mr-xs" :class="[tab=='msg'?'svg-icon-secondary':'svg-icon-grey']"
            src="icons/svg/Communication/Chat-check.svg"></inline-svg>
          <span>消息</span>
        </q-tab>
        <q-tab v-else name="msg">
          <inline-svg class="svg-icon q-mr-xs" :class="[tab=='msg'?'svg-icon-secondary':'svg-icon-grey']"
            src="icons/svg/Communication/Chat-check.svg"></inline-svg>
          <span>消息</span>
        </q-tab>
        <q-tab name="notify">
          <inline-svg class="svg-icon q-mr-xs" :class="[tab=='notify'?'svg-icon-secondary':'svg-icon-grey']"
            src="icons/svg/Communication/Urgent-mail.svg"></inline-svg>
          <span>公告</span>
        </q-tab>
        <q-tab name="work">
          <inline-svg class="svg-icon q-mr-xs" :class="[tab=='work'?'svg-icon-secondary':'svg-icon-grey']"
            src="icons/svg/Files/Folder.svg"></inline-svg>
          <span>工作</span>
        </q-tab>
      </q-tabs>
      <q-tab-panels v-model="tab" class="q-mt-none col" animated swipeable transition-prev="jump-up"
        transition-next="jump-up">
        <q-tab-panel name="msg" class="scroll _scrollbar">
          <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" clickable v-ripple
              @click="goMsgDetail(x.JumpUrl),readMsgLog(x.Id,i)">
              <!-- <q-item-section avatar>
                <q-avatar :style="{'background-color':x.icons.backgroundColor}" rounded size="40px"
                  :text-color="x.icons.color">
                  <inline-svg :class="['svg-icon',`svg-icon-${x.icons.color}`]" :src="x.icons.icon"
                    v-if="x.icons.icon.length>1"></inline-svg>
                  <span v-else>{{x.icons.icon}}</span>
                </q-avatar>
              </q-item-section> -->
              <q-item-section avatar>
                <q-avatar :style="{'background-color':'#e1f0ff'}" rounded size="40px" 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">{{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>
          <none-data v-else></none-data>
        </q-tab-panel>
        <q-tab-panel name="notify" class="scroll _scrollbar">
          <q-card flat v-for="(item,index) in noticeList" :key="index"
            class="relative-position overflow-hidden q-pa-md text-grey-1 cursor-pointer q-mb-md" style="height:130px"
            @click="goNoticeDetail(item)">
            <div class="gonggao-bg">
              <img src="../../assets/images/noticeBg.png" />
            </div>
            <div class="flex row items-center relative-position">
              <q-avatar size="30px" font-size="14px" rounded style="background:#C9F7F5" class="q-mr-md"
                text-color="secondary">
                <img :src="item.UpdateByIcon" v-if="item.UpdateByIcon">
                <span v-else>{{item.UpdateByName.substring(0,1)}}</span>
              </q-avatar>
              <div>{{item.UpdateByName}}</div>
              <div class="col text-right">{{item.DayStr}}</div>
            </div>
            <div class="ellipsis relative-position q-mt-md" style="font-size:16px;">
              {{item.Title}}
            </div>
            <div class="relative-position q-mt-md text-right">
              编号：{{item.Number}}
            </div>
          </q-card>
          <div class="notifyLoadMore" v-if="noticeMsg.pageSize<Count" @click="getMoreNotify()">
            <span>加载更多</span>
          </div>
        </q-tab-panel>
        <q-tab-panel name="work" class="scroll _scrollbar">
          <none-data></none-data>
        </q-tab-panel>
      </q-tab-panels>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    GetMyNoticePageList,
    GetMsgLogList,
    BeatchReadMsgLog
  } from '../../api/course/index'
  import {
    sendSock
  } from '../../api/common/socket'

  import noneData from './none-data'
  import NoneData from './none-data.vue'
  export default {
    props: {
      showObj: {
        type: Object,
        default: null
      },
      socektObj: {
        type: Array,
        default: null
      },
    },
    components: {
      noneData
    },
    data() {
      return {
        persistent: true,
        saveLoading: false,
        tab: "msg",
        icons: {
          '退': {
            backgroundColor: '#ffe2e5',
            color: 'negative',
            icon: 'icons/svg/Design/Stamp.svg'
          },
          '订': {
            backgroundColor: '#e1f0ff',
            color: 'primary',
            icon: 'icons/svg/Shopping/Bag2.svg'
          },
          '考': {
            backgroundColor: '#fff4de',
            color: 'warning',
            icon: 'icons/svg/Code/Time-schedule.svg'
          },
          '续': {
            backgroundColor: '#c9f7f5',
            color: 'secondary',
            icon: 'icons/svg/General/Attachment1.svg'
          },
          '财': {
            backgroundColor: '#eee5ff',
            color: 'accent',
            icon: 'icons/svg/Shopping/Dollar.svg'
          }
        },
        defaultIcon: {
          backgroundColor: '#f3f6f9',
          color: 'primary'
        },
        dataList: [{
            Title: '财务单据结果通知',
            Content: "你参与的财务审核已完成！",
            Time: "1小时前"
          },
          {
            Title: '财务审批通知',
            Content: "你有待审批的财务单据",
            Time: "12小时前"
          },
          {
            Title: '考勤审批通知',
            Content: "李思思发起请假申请，请尽快审批",
            Time: "1天前"
          },
          {
            Title: '订单通知',
            Content: "你的订单：4257已被 刘小勇确认，请尽快上传收费单据，以免班级报满",
            Time: "1天前"
          },
          {
            Title: '续费通知',
            Content: "你的客户：“郑科”已申请续费课程，请尽快对接",
            Time: "1天前"
          },
          {
            Title: '退课通知',
            Content: "你的客户：“郑科”退课申请已通过，请办理相关退款单据",
            Time: "1天前"
          },
          {
            Title: '工作审批通知',
            Content: "你的20210818工作计划已被：罗超审批通过，请按时上传工作任务信息",
            Time: "1天前"
          },
          {
            Title: '财务单据结果通知',
            Content: "你参与的财务审核已完成！",
            Time: "1小时前"
          },
          {
            Title: '财务审批通知',
            Content: "你有待审批的财务单据",
            Time: "12小时前"
          },
          {
            Title: '考勤审批通知',
            Content: "李思思发起请假申请，请尽快审批",
            Time: "1天前"
          },
          {
            Title: '订单通知',
            Content: "你的订单：4257已被 刘小勇确认，请尽快上传收费单据，以免班级报满",
            Time: "1天前"
          },
          {
            Title: '续费通知',
            Content: "你的客户：“郑科”已申请续费课程，请尽快对接",
            Time: "1天前"
          },
          {
            Title: '退课通知',
            Content: "你的客户：“郑科”退课申请已通过，请办理相关退款单据",
            Time: "1天前"
          },
          {
            Title: '工作审批通知',
            Content: "你的20210818工作计划已被：罗超审批通过，请按时上传工作任务信息",
            Time: "1天前"
          },
          {
            Title: '财务单据结果通知',
            Content: "你参与的财务审核已完成！",
            Time: "1小时前"
          },
          {
            Title: '财务审批通知',
            Content: "你有待审批的财务单据",
            Time: "12小时前"
          },
          {
            Title: '考勤审批通知',
            Content: "李思思发起请假申请，请尽快审批",
            Time: "1天前"
          },
          {
            Title: '订单通知',
            Content: "你的订单：4257已被 刘小勇确认，请尽快上传收费单据，以免班级报满",
            Time: "1天前"
          },
          {
            Title: '续费通知',
            Content: "你的客户：“郑科”已申请续费课程，请尽快对接",
            Time: "1天前"
          },
          {
            Title: '退课通知',
            Content: "你的客户：“郑科”退课申请已通过，请办理相关退款单据",
            Time: "1天前"
          },
          {
            Title: '工作审批通知',
            Content: "你的20210818工作计划已被：罗超审批通过，请按时上传工作任务信息",
            Time: "1天前"
          },
        ],
        imgCov: 'http://192.168.20.214:8130/Upload/studentIcon/20201201044129361.png',

        //通知请求参数
        noticeMsg: {
          pageIndex: 1,
          pageSize: 5
        },
        Count: 0,
        noticeList: [],
        socektArr: [],
      }
    },
    created() {
      this.init();
      this.getNotify();
      this.socektArr = this.socektObj;
    },
    methods: {
      init() {
        this.dataList.forEach(x => {
          x.icons = this.getIcon(x.Title.substring(0, 1))
        });
      },
      closeShenheForm() {
        this.$emit('close')
      },
      getIcon(t) {
        if (this.icons[t]) {
          return this.icons[t]
        } else {
          let temp = JSON.parse(JSON.stringify(this.defaultIcon))
          temp.icon = t
          return temp
        }
      },
      undefinedGongneng(item) {
        this.$router.push("/AssetsShenpi")
        this.$router.push({
          path: "/AssetsShenpi",
          query: {
            Id: 115,
            compType: "shenpi"
          }
        })
      },
      //请求公告数据
      getNotify() {
        GetMyNoticePageList(this.noticeMsg).then(res => {
          if (res.Code == 1) {
            this.noticeList = res.Data.PageData;
            this.Count = res.Data.Count;
          }
        })
      },
      //加载更多一次加载一条
      getMoreNotify() {
        this.noticeMsg.pageSize += 5;
        this.getNotify();
      },
      //跳转详情
      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) {
        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");
        }
      },
      //看过后删除
      readMsgLog(Id, index) {
        let msg = {
          Ids: []
        }
        msg.Ids.push(Id);
        BeatchReadMsgLog(msg).then(res => {
          if (res.Code == 1) {
            this.socektArr.splice(index, 1);
          }
        })
      }
    },
  }

</script>

<style>
  ._scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 8px;
  }

  ._scrollbar::-webkit-scrollbar-thumb {
    border-radius: 2px;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.5);
  }

  ._scrollbar::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: transparent;
    display: none;
  }

  .gonggao-bg {
    position: absolute;
    left: -10%;
    width: 120%;
    height: 130px;
  }

  .gonggao-bg img {
    width: 120%;
    height: 120%;
    /* filter: blur(20px); */
    overflow: hidden;
    margin-top: -8%;
    margin-left: -5%;
  }

  .notifyLoadMore {
    text-align: right;
    cursor: pointer;
    font-size: 12px;
    color: #2961FE;
  }

</style>
