<template>
  <lay-dropdown
    ref="manualRef"
    :clickOutsideToClose="true"
    :clickToClose="false"
    placement="bottom"
  >
    <slot></slot>
    <template #content>
      <lay-tab type="brief" style="margin: 5px" v-model="currentIndex">
        <lay-tab-item :title="`通知(${informList.length})`" id="1">
          <div style="width: 100%; height: 100%; overflow: hidden">
            <div
              class="inform-item"
              v-for="(item, index) in informList"
              :key="index"
            >
              <div class="inform-item-icon">
                <img src="../../assets/messageSlot/info1.png" alt="" />
              </div>
              <div class="inform-item-text">
                <div>{{ item.title }}</div>
                <div class="inform-item-time">
                  {{ item.time }}
                </div>
              </div>
            </div>
          </div>
        </lay-tab-item>
        <lay-tab-item :title="`私信(${privateLetteList.length})`" id="2">
          <div style="width: 100%; height: 100%; overflow: hidden">
            <div
              class="inform-item privateLette-item"
              v-for="(item, index) in privateLetteList"
              :key="index"
            >
              <div class="inform-item-icon">
                <img src="../../assets/messageSlot/avatar1.png" alt="" />
              </div>
              <div class="inform-item-text">
                <div>{{ item.title }}</div>
                <div class="inform-item-time">
                  {{ item.content }}
                </div>
                <div class="inform-item-time">
                  {{ item.time }}
                </div>
              </div>
            </div>
          </div>
        </lay-tab-item>
        <lay-tab-item :title="`待办(${todoList.length})`" id="3">
          <div style="width: 100%; height: 100%; overflow: hidden">
            <div
              class="inform-item todo-item"
              v-for="(item, index) in todoList"
              :key="index"
            >
              <div class="todo-title">
                <div style="flex: 1">
                  {{ item.title }}
                  <div class="inform-item-time todo-item-time">
                    {{ item.time }}
                  </div>
                </div>
                <div v-show="item.type == '未开始'" class="todo-tags">
                  <lay-tag color="#6e6e6e" variant="light">未开始</lay-tag>
                </div>
                <div v-show="item.type == '进行中'" class="todo-tags">
                  <lay-tag color="#2dc570" variant="light">进行中</lay-tag>
                </div>
                <div v-show="item.type == '即将到期'" class="todo-tags">
                  <lay-tag color="#F5319D" variant="light">即将到期</lay-tag>
                </div>
              </div>
            </div>
          </div>
        </lay-tab-item>
      </lay-tab>
    </template>
  </lay-dropdown>
</template>

<script lang='ts'>
export default {
  name: 'MessageTab'
}
</script>
<script setup lang="ts">
import { ref, watch } from 'vue'
const manualRef = ref()
interface MessageTabProps {
  flag: boolean
}
const props = withDefaults(defineProps<MessageTabProps>(), {
  flag: false
})
const informList = ref([
  {
    img: '../assets/messageSlot/info1.png',
    title: '您有一条新的通知',
    time: '2021-08-09 12:00:00'
  },
  {
    img: '../assets/messageSlot/info1.png',
    title: '您有一条新的通知',
    time: '2021-08-09 12:00:00'
  },
  {
    img: '../assets/messageSlot/info1.png',
    title: '您有一条新的通知',
    time: '2021-08-09 12:00:00'
  },
  {
    img: '../assets/messageSlot/info1.png',
    title: '您有一条新的通知',
    time: '2021-08-09 12:00:00'
  },
  {
    img: '../assets/messageSlot/info1.png',
    title: '您有一条新的通知',
    time: '2021-08-09 12:00:00'
  }
])
const privateLetteList = ref([
  {
    img: 'avatar1.png',
    title: '速尔 评论了 你的日志',
    content: '写的不错，以后向你学习哦~',
    time: '2021-08-09 12:00:00'
  },
  {
    img: 'avatar2.png',
    title: '速尔 评论了 你的日志',
    content: '写的不错，以后向你学习哦~',
    time: '2021-08-09 12:00:00'
  },
  {
    img: 'avatar3.png',
    title: '速尔 评论了 你的日志',
    content: '写的不错，以后向你学习哦~',
    time: '2021-08-09 12:00:00'
  },
  {
    img: 'avatar4.png',
    title: '速尔 评论了 你的日志',
    content: '写的不错，以后向你学习哦~',
    time: '2021-08-09 12:00:00'
  },
  {
    img: 'avatar5.png',
    title: '速尔 评论了 你的日志',
    content: '写的不错，以后向你学习哦~',
    time: '2021-08-09 12:00:00'
  },
  {
    img: 'avatar6.png',
    title: '速尔 评论了 你的日志',
    content: '写的不错，以后向你学习哦~',
    time: '2021-08-09 12:00:00'
  }
])
const todoList = ref([
  {
    title: '张三的请假审批',
    type: '未开始',
    time: '张三在 08-09 12:00:00 提交的请假...'
  },
  {
    title: '考试监管',
    type: '进行中',
    time: '考试监管在 08-09 12:00:00 之前打卡'
  },
  {
    title: '注册新仓库',
    type: '即将到期',
    time: '需要在 08-09 12:00:00 之前完成'
  }
])

const currentIndex = ref('1')
watch(
  () => props.flag,
  (newVal) => {
    if (newVal == true) {
      manualRef.value.show()
    } else {
      manualRef.value.hide()
    }
  }
)
</script>


<style lang="less" scoped>
.inform-item {
  box-sizing: border-box;
  display: flex;
  width: 320px;
  height: 60px;
  color: #222222;
  font-size: 14px;
  padding: 0 20px;
  border-bottom: 1px solid #f3f3f3;

  .inform-item-icon {
    display: inline-block;
    width: 40px;
    height: 100%;
    line-height: 60px;
    text-align: center;
    > img {
      width: 28px;
      height: 28px;
      vertical-align: middle;
    }
  }
  .inform-item-text {
    box-sizing: border-box;
    display: inline-block;
    flex: 1;
    padding: 10px 0 0 10px;

    .inform-item-time {
      margin-top: 6px;
      color: #ada4a4;
      font-size: 12px;
    }
  }
}
.inform-item:hover {
  background-color: #fafafa;
}

.privateLette-item {
  height: 80px;
}
.todo-item {
  box-sizing: border-box;
  padding: 0 10px;
}
.todo-title {
  width: 100%;
  display: flex;
  line-height: 30px;
}
.todo-tags {
  width: 100px;
  text-align: right;
  line-height: 60px;
}
.todo-item-time {
  line-height: 20px;
  color: #ada4a4;
  font-size: 12px;
}
</style>
