<style scoped>
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{overflow:hidden;_zoom:1;}
input{background:none;outline:none;border:0px;}
.text-gray{color:#717171;}
.text-orange{color:#eb7741;}
.text-danger{color:#c03546;}
.messageManager{position: relative;background-color: #f3f6ff;}
.headerBreadcrumb{display: flex;}
.headerBreadcrumb div{flex:1;text-align: center;margin-bottom: 0.4rem;}
.headerBreadcrumb div p{text-align: center;font-weight: 600;display: inline-block;padding-top: 0.4rem;}
.headerBreadcrumb div p.selected{color:#3b8afc;border-bottom:1px solid #3b8afc;}
/* .headerBreadcrumb div i{width:2rem;height: 0.18rem;display: block;margin:0 auto;}
.headerBreadcrumb div i.selected{background-color:#3b8afc;} */
.middleModel{background-color: #f3f6ff;padding:0.6rem 4.5%;padding-top: 0.4rem;}
.middleModel .rightManager{float: right;}
.bottomModel{position:absolute;bottom:0;top: 0;width: 100%;margin-top: 2.6rem;background-color: #f3f6ff;overflow-y: auto;}
.bottomModel .bottomItem{margin:0 3%;margin-bottom:0.6rem;background-color: #fff;border-radius: 0.4rem;padding:0.9rem 2.4%;padding-bottom:0.8rem;}
.bottomModel .bottomItem img{display: block;height: 5rem;width:100%;}
.bottomModel .bottomItem .itemTitle{display: flex;}
.bottomModel .bottomItem .itemTitle span{overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;display: -webkit-box;word-wrap:break-word;word-break:break-all;}
.bottomModel .bottomItem .itemTitle .messageTitle{flex: 1;font-weight: 600; overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;display: -webkit-box;word-wrap:break-word;word-break:break-all;}
.bottomModel .bottomItem .itemTitle .messageDate{color:#616161;width:80px;text-align: right;padding-top: 2px;}
.bottomModel .bottomItem .messageContent{overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;display: -webkit-box;color:#616161;}
.nodata {margin:0 auto;color:#616161;font-size:0.7rem;padding-top:12rem;text-align: center;background: url(http://image.supercarrier8.com/h5_key/icon-nodataMessage.png) no-repeat center center;background-size: 10rem;}
</style>
<template>     
  <div class="jfBaseSize messageManager" v-cloak v-bind:style="isShow.vh?'height:100vh':'height: 100%;'"> 
    <div class="headerBreadcrumb">
      <div v-on:click="GetPageMsgLetter('8')">
        <p v-bind:class="searchRequest.CategoryId=='8'?'selected':''">全部通知</p>
        <!-- <i v-bind:class="searchRequest.CategoryId==0?'selected':''"></i> -->
      </div>
      <div v-on:click="GetPageMsgLetter('800001,800002,800009')">
        <p v-bind:class="searchRequest.CategoryId=='800001,800002,800009'?'selected':''" >系统通知</p>
        <!-- <i v-bind:class="searchRequest.CategoryId==1?'selected':''"></i> -->
      </div>
      <div v-on:click="GetPageMsgLetter('800003,800004,800005,800006,800010')">
        <p v-bind:class="searchRequest.CategoryId=='800003,800004,800005,800006,800010'?'selected':''">奖励到账</p>
        <!-- <i v-bind:class="searchRequest.CategoryId==2?'selected':''"></i> -->
      </div>
      <div v-on:click="GetPageMsgLetter('800007')">
        <p v-bind:class="searchRequest.CategoryId=='800007'?'selected':''">互动消息</p>
        <!-- <i v-bind:class="searchRequest.CategoryId==3?'selected':''"></i> -->
      </div>
      <div v-on:click="GetPageMsgLetter('800008')">
        <p v-bind:class="searchRequest.CategoryId=='800008'?'selected':''">最新活动</p>
        <!-- <i v-bind:class="searchRequest.CategoryId==3?'selected':''"></i> -->
      </div>
    </div>
    <div class="bottomModel" v-if='responseResult.Total>0'>
      <div class="bottomItem" v-for="item in responseResult.Rows" v-bind:key="item.LetterId" v-on:click="goDetails(item.LetterId)">
        <img v-if="isShow.isImgShow" v-bind:src="item.LetterImgUrl" alt="">
        <p class="itemTitle">
          <span class="messageTitle" v-html='item.CategoryName?item.CategoryName:"-"'></span>
          <span class="messageDate" v-html='item.RowCreateTime?item.RowCreateTime:"-"'></span>
        </p>
        <p class="messageContent" v-html='item.LetterTitle?item.LetterTitle:"-"'></p>
      </div>
    </div>
    <div class="bottomModel" v-else>
      <div class="nodata">您还没有消息!</div>
    </div>
     <ReturnHome ref="returnhome"></ReturnHome>
  </div>
</template>
<script>
import Vue from 'vue';
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import { Toast,DatetimePicker,Indicator,Picker,MessageBox } from 'mint-ui';
import channelHelper from "@/assets/js/channelHelper.js";
import { base64 } from "@/assets/js/cryptoHelper";
import { debug } from 'util';
import ReturnHome from "@/components/channel/temp001/ReturnHome";
import '@/assets/js/libs/js.cookie';
import utils from "@/assets/js/utils.js";
import QRCode from 'qrcodejs2';
import Clipboard from 'clipboard';
Vue.use(ElementUI);
export default {
  props: ["comp", "cfg", "selectedPage"],
   components: {
    ElementUI,ReturnHome
  },
  provide(){       
     return{           
        goPage:this.goPage       
     }   
  },
  data() {
    return {
      isShow:{
        vh:true,
        isImgShow:true,
      },
      searchRequest:{
        CategoryId:'8',
        Offset:0,
        Limit:1000,
        EntranceId:this.sup8.context.entranceid,
        EnterpriseNo:this.sup8.context.enterpriseno,
        UserToken:channelHelper.GetUserToken(),
        LanguageType:"zh-cn",
        // OperUserId:channelHelper.GetUserLoginInfo().UserId
        OperUserId:''
      },
      responseResult:{
        Total:0,
        Rows:[]
      }
    }
  },
  methods: {
    goPage(pagetype){
        this.$parent.changeSelectedPage(pagetype);
    },
    goDetails(id){
      sessionStorage.setItem('Key_MessageList_DetailID',id);
      this.goPage("K_MDetail");
    },
    //配置获取
    GetSup8UserID(){
      var that=this;
      var url = "/channel/GetSup8UserID";
      var dataParams = that.searchRequest;
      Indicator.open();
      var cbSuccess = function(res){
        if (res.flag) {
          var data=res.data;
          that.$set(that.searchRequest,'OperUserId',data);
          that.GetPageMsgLetter();
        }else
        { 
            Toast(res.msg);
        }
        Indicator.close();
      };
      var cbError = function(jqXHR, textStatus, errorThrown){
        Toast(jqXHR.responseText);
      };
      //请求后端
      channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
    //列表获取
    GetPageMsgLetter(CategoryId){
      var that=this; 
      var url = "/channel/GetPageMsgLetter";
      if(CategoryId){
        that.$set(that.searchRequest,'CategoryId',CategoryId);
      }
      var dataParams = that.searchRequest;
      Indicator.open();
      var cbSuccess = function(res){
        if (res.flag) {
          var data=res.data;
          if(data&&data.Rows&&data.Rows.length>0){
            for(var i=0;i<data.Rows.length;i++){
              var obj=data.Rows[i];
              if(obj.RowCreateTime){
                data.Rows[i].RowCreateTime=utils.formatDate("MM-dd hh:mm",obj.RowCreateTime);
              }
              if(obj.CategoryType=='800001'){//员工审核
                data.Rows[i].LetterImgUrl='https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/messageAuditBanner.jpg';
              }else if(obj.CategoryType=='800002'||obj.CategoryType=='800009'){//提现
                data.Rows[i].LetterImgUrl='https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/messageCashBanner.jpg';
              }else if(obj.CategoryType=='800003'){//活动奖励
                data.Rows[i].LetterImgUrl='https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/messageActivityBanner.jpg';
              }else if(obj.CategoryType=='800004'){//推荐奖励
                data.Rows[i].LetterImgUrl='https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/messageRecommendBanner.jpg';
              }else if(obj.CategoryType=='800005'){//返利奖励
                data.Rows[i].LetterImgUrl='https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/messageRebateBanner.jpg';
              }else if(obj.CategoryType=='800006'){//学习奖励
                data.Rows[i].LetterImgUrl='https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/messageStudyBanner.jpg';
              }else if(obj.CategoryType=='800010'){//答题奖励
                data.Rows[i].LetterImgUrl='https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/messageAnswerBanner.jpg';
              }else{
                if(!obj.LetterImgUrl){
                  data.Rows[i].LetterImgUrl='https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/messageDefaultBanner.jpg';
                }
              }
            }
            that.$set(that.responseResult,'Total',data.Total);
            that.$set(that.responseResult,'Rows',data.Rows);
          }else{
            that.$set(that.responseResult,'Total',0);
            that.$set(that.responseResult,'Rows',[]);
          }
        }else
        { 
          that.$set(that.responseResult,'Total',0);
          that.$set(that.responseResult,'Rows',[]);
          Toast(res.msg);
        }
        Indicator.close();
      };
      var cbError = function(jqXHR, textStatus, errorThrown){
        Toast(jqXHR.responseText);
      };
      //请求后端
      channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
    judgeLogin:function(){
      var eno = this.sup8.context.enterpriseno;
      if (!channelHelper.CheckLogin(this.$parent,eno,this.sup8.context.entranceid)) {
        this.$parent.changeSelectedPage('Key_Login');
        return false;
      }
    },
  },
  watch: {},
  created: function() {
    var that = this;
    var isDesign = location.pathname.indexOf('design');
    if(isDesign!=-1)
    {
        return;
    }
    //判断是否登录
    that.judgeLogin();
    that.GetSup8UserID();
    sessionStorage.removeItem('Key_MessageList_DetailID');
    if(that.comp.props.IsShow&&that.comp.props.IsShow.val==1){
      that.$set(that.isShow,'isImgShow',true);
    }else{
      that.$set(that.isShow,'isImgShow',false);
    }
  },
  mounted: function() {
    var that =this;
    var isDesign = location.pathname.indexOf('design');
    if (!(isDesign>-1)) {
        that.$set(that.isShow,'vh',true);
    }else{
        that.$set(that.isShow,'vh',false);
    }
  }
};
</script>

