<template>
  <el-tabs :stretch="true" v-model="activeTag">
    <el-tab-pane label="通知" name="通知" style="width:300px">
      <div class="ouicai-notifications-container">
        <div class="ouicai-notifications-list" v-if="state.notifications.length>0">
          <div class="ouicai-notifications-item" v-bind:class="{'ouicai-item-unread': n.unread}"
            v-for="n in state.notifications" :key="n.id">
            <el-row type="flex" class="ouicai-row-flex-middle ouicai-row-flex-center ouicai-row-flex">
              <el-col :span="4">
                <Icon name="fa fa-commenting-o" size="12"></Icon>
              </el-col>
              <el-col :span="20" class="flex column">
                <div class="ouicai-notifications-item-title">
                  <p>{{n.title}}</p>
                </div>
                <div class="ouicai-notifications-item-time">{{n.date}}</div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="ouicai-notifications-list m-50" style="text-align: center;" v-if="state.notifications.length===0">
          <span>暂无消息</span>
        </div>
      </div>
      <div class="ouicai-notifications-tab-clear">
        <i class="el-icon-edit-outline"></i>
        <span>全部已读</span>
      </div>
    </el-tab-pane>
    <el-tab-pane label="待办" name="待办" style="width:300px">
      <div class="ouicai-notifications-container">
        <div class="ouicai-notifications-list">
          <div class="ouicai-notifications-item" v-for="n in state.schedules" :key="n.id">
            <el-row type="flex" class="ouicai-row-flex-middle ouicai-row-flex-center ouicai-row-flex">
              <el-col :span="24" class="flex column">
                <div class="ouicai-notifications-item-title">
                  <p>{{n.title}}</p>
                  <div class="ouicai-notifications-item-tag">
                    <div class="ouicai-tag"
                      :class="{'ouicai-tag-blue':n.progress==2,'ouicai-tag-yellow':n.progress==3,'ouicai-tag-red':n.progress==4}">
                      {{n.state}}</div>
                  </div>
                </div>
                <div class="ouicai-notifications-item-time">{{n.describe}}</div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="ouicai-notifications-tab-clear">
        <i class="el-icon-delete"></i>
        <span>清空待办</span>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import Icon from '/@/components/icon/index.vue'

interface Props {
    activeName: string
    labelNum: string
    noticeList: any
}

const props = withDefaults(defineProps<Props>(), {
    activeName: '',
    labelNum: '',
    noticeList: null,
})

const activeTag = ref('')

const state = reactive({
    notifications: [
        {
            id: 1,
            title: '蒂姆·库克回复了你的邮件复了你的邮',
            icon: 'mdi mdi-cart-outline',
            style: 'background-color: rgb(51, 145, 229);',
            date: '05-08 14:33',
            unread: false,
        },
        {
            id: 2,
            title: 'New Schedule Realease',
            icon: 'mdi mdi-calendar',
            style: 'background-color: rgb(135, 208, 104);',
            date: '2 Min Ago',
            unread: false,
        },
        {
            id: 3,
            title: 'New message from David',
            icon: 'mdi mdi-email-outline',
            style: 'background-color: rgb(255, 153, 0);',
            date: '30 Min Ago',
            unread: true,
        },
        {
            id: 4,
            title: '保障装备管理中心建设标准统一格式',
            icon: 'mdi mdi-file-document-outline',
            style: 'background-color:  rgb(135, 208, 104);',
            date: '30分钟前',
            unread: false,
        },
        {
            id: 5,
            title: 'New message from David',
            icon: 'mdi mdi-email-outline',
            style: 'background-color: rgb(51, 145, 229);',
            date: '30 Min Ago',
            unread: false,
        },
    ],
    schedules: [
        {
            id: 1,
            title: '2019 下半年 OKR',
            state: '未开始',
            progress: 1,
            describe: '需要在 2019-06-14 之前完成',
        },
        {
            id: 2,
            title: '公孙离的面试评审',
            state: '即将到期',
            progress: 3,
            describe: '需要在 2019-06-14 之前完成',
        },
        {
            id: 3,
            title: 'ouicai 一周年生日会',
            state: '进行中',
            progress: 2,
            describe: '需要在 2019-07-28 之前完成',
        },
        {
            id: 4,
            title: '2019 下半年 OKR',
            state: '已超期',
            progress: 4,
            describe: '需要在 2019-06-14 之前完成',
        },
        {
            id: 5,
            title: '2019 下半年 OKR',
            state: '进行中',
            progress: 2,
            describe: '需要在 2019-06-14 之前完成',
        },
    ],
})

const emits = defineEmits<{
    (e: 'getDetail'): void
    (e: 'OnMoreNotice', value: number): void
}>()

watch(
    () => props.activeName,
    (newvalue) => {
        activeTag.value = newvalue
    },
    { immediate: true }
)
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.ouicai-notifications-container {
    overflow: hidden;

    .ouicai-notifications-list {
        line-height: normal;
        max-height: 300px;
        overflow-y: auto;
        overscroll-behavior: contain;
        .ouicai-notifications-item {
            padding: 12px 24px;
            border-bottom: 1px solid #e8eaec;
            cursor: pointer;
            -webkit-transition: background-color 0.2s ease-in-out;
            transition: background-color 0.2s ease-in-out;
            text-align: left;

            .ouicai-notifications-item-title {
                margin-bottom: 4px;
                p {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin: 0;
                }
                .ouicai-notifications-item-tag {
                    float: right;
                    margin-top: -2px;

                    .ouicai-tag {
                        margin-right: 0;
                        display: inline-block;
                        height: 22px;
                        line-height: 22px;
                        margin: 2px 4px 2px 0;
                        padding: 0 8px;
                        border: 1px solid #e8eaec;
                        border-radius: 3px;
                        background: #f7f7f7;
                        font-size: 12px;
                        vertical-align: middle;
                        opacity: 1;
                        overflow: hidden;
                        cursor: pointer;
                    }

                    .ouicai-tag-blue {
                        line-height: 20px;
                        background: #e6f7ff;
                        border-color: #91d5ff;
                        color: #1890ff;
                    }

                    .ouicai-tag-red {
                        line-height: 20px;
                        background: #fff1f0;
                        border-color: #ffa39e;
                        color: #f5222d;
                    }

                    .ouicai-tag-yellow {
                        line-height: 20px;
                        background: rgba(230, 162, 60, 0.1);
                        border-color: rgba(230, 162, 60, 0.2);
                        color: #e6a23c;
                    }
                }
            }

            .ouicai-notifications-item-time {
                font-size: 12px;
                color: #808695;
            }

            .ouicai-row-flex-middle {
                align-items: center;
            }

            .ouicai-row-flex-center {
                justify-content: center;
            }

            .ouicai-row-flex {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
            }
        }

        .ouicai-notifications-item:hover {
            background-color: #f1fbff;
        }

        .ouicai-item-unread {
            background-color: #f8f8f9 !important;
        }
    }
}

.ouicai-avatar {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    .ouicai-avatar-icon {
        font-size: 18px;
        position: relative;
    }
}

.ouicai-notifications-tab-loading-more {
    cursor: pointer;
}

.ouicai-notifications-tab-loading-item {
    text-align: center;
    font-size: 14px;
    padding: 6px 0;
    color: #2d8cf0;
    -webkit-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

.ouicai-notifications-tab-loading-item:hover {
    color: #4a9ef8;
}

.ouicai-notifications-tab-clear {
    border-top: 1px solid #e8eaec;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    padding: 10px 0 0 10px;
    color: #515a6e;
    -webkit-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

.ouicai-notifications-tab-clear:hover {
    color: #4a9ef8;
}
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-thumb {
    background-color: #0006;
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 6px;
}
::-webkit-scrollbar-track {
    background-color: transparent;
}
</style>
