<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 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 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="dataList.length>0">
                    <q-item class="q-my-sm q-pa-xs items-start" v-for="(x,i) in dataList" :key="i" clickable v-ripple @click="undefinedGongneng">
                        <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>
                            <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.Time}}</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 class="relative-position overflow-hidden q-pa-md text-grey-1 cursor-pointer q-mb-md" style="height:130px" @click="undefinedGongneng">
                    <div class="gonggao-bg">
                        <img :src="imgCov">
                    </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="showObj.UserIcon" v-if="showObj.UserIcon">
                            <span v-else>{{showObj.AccountName.substring(0,1)}}</span>
                        </q-avatar>
                        <div>{{showObj.AccountName}}</div>
                        <div class="remark-font col text-right text-grey-3">5天前</div>
                    </div>
                    <div class="ellipsis relative-position q-mt-md" style="font-size:16px;">
                        关于2021年春节放假的相关通知与安排关于2021年春节放假的相关通知与安排
                    </div>
                    <div class="relative-position q-mt-md text-right text-grey-2 remark-font">甲鹤行2021-A-001</div>
                </q-card>
            </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 noneData from './none-data'
import NoneData from './none-data.vue'
export default {
    props: {
        showObj: {
            type: Object,
            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.1.214:8130/Upload/studentIcon/20201201044129361.png'
        }
    },
    created() {
        this.init();
    },
    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() {
           this.$q.dialog({
                title: '功能提示',
                message: '灰度测试功能，即将在下版本中开启'
            }).onOk(() => {
             
            });
        },
    },
}
</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%;
  }
</style>
