<script lang="ts" setup>
import { ref } from 'vue'

const list1 = ref([
  {
    tag: {
      type: 'primary',
      label: '平',
    },
    type: '需求管理',
    title: '项目需求：PDA首页改造',
    time: '2023-03-20 17:16',
  },
  {
    tag: {
      type: 'danger',
      label: '特',
    },
    type: '需求管理',
    title: '项目需求：村居伙伴计划-统计调查员-前端开发需求',
    time: '2023-03-20 17:16',
  },
  {
    tag: {
      type: 'warning',
      label: '急',
    },
    type: '需求管理',
    title: '加班申请：刘勇',
    time: '2023-03-20 17:16',
  },
  {
    tag: {
      type: 'success',
      label: '平',
    },
    type: '需求管理',
    title: '设计需求：PDA首页改造',
    time: '2023-03-20 17:16',
  },
])
const list2 = ref([
  {
    type: '通知公告',
    title: '2023年02月永兴元科技月度考勤汇总表',
    time: '2023-03-20 17:16',
  },
  {
    type: '通知公告',
    title: '关于对《员工手册（2023年修订版）》正式发布的通知',
    time: '2023-03-20 17:16',
  },
  {
    type: '通知公告',
    title: '关于对公司《员工手册》进行修订的通知',
    time: '2023-03-20 17:16',
  },
  {
    type: '通知公告',
    title: '关于公司2023年春节放假的通知',
    time: '2023-03-20 17:16',
  },
])
const myWorkTabs = ref([
  {
    label: '我的待办',
    value: '0',
    badge: 4,
  },
  {
    label: '在办事项',
    value: '1',
  },
  {
    label: '全部事项',
    value: '2',
  },
  {
    label: '我的关注',
    value: '3',
  },
])
const myNoticeTabs = ref([
  {
    label: '未阅通知',
    value: '0',
  },
  {
    label: '已阅通知',
    value: '1',
  },
])
const myMailTabs = ref([
  {
    label: '未阅邮件',
    value: '0',
  },
  {
    label: '已阅邮件',
    value: '1',
  },
])
const myProjectTabs = ref([
  {
    label: '商业项目',
    value: '0',
  },
  {
    label: '产品研发',
    value: '1',
  },
  {
    label: '日常工作',
    value: '2',
  },
])
const myScheduleTabs = ref([
  {
    label: '全部',
    value: '0',
  },
  {
    label: '活动',
    value: '1',
  },
  {
    label: '会议',
    value: '2',
  },
  {
    label: '备忘',
    value: '3',
  },
])
const myWorkType = ref('1')
function onClick() {
}
</script>

<template>
  <ld-page theme="light">
    <l-row :gutter="[16, 16]">
      <l-col :span="12">
        <ld-tabpanel
          :more="false"
          height="auto"
        >
          <div>
            <l-button @click="onClick">
              弹出
            </l-button>
          </div>
        </ld-tabpanel>
      </l-col>
      <l-col :span="12">
        <ld-tabpanel
          v-model="myWorkType"
          title="快捷报工"
          :more="false"
          height="auto"
        >
          <div>快捷报工</div>
        </ld-tabpanel>
      </l-col>
      <l-col :span="6">
        <ld-tabpanel
          v-model="myWorkType"
          title="我的工作"
          :tabs="myWorkTabs"
        >
          <div>
            <ld-list :list="list1" />
          </div>
        </ld-tabpanel>
      </l-col>
      <l-col :span="6">
        <ld-tabpanel
          title="通知公告"
          :tabs="myNoticeTabs"
        >
          <div>
            <!-- 可以自定义每个位置的dom结构 -->
            <ld-list :list="list2">
              <template #type>
                <div style="color:#666;" />
              </template>
            </ld-list>
          </div>
          <div>已阅通知内容</div>
        </ld-tabpanel>
      </l-col>
      <l-col :span="6">
        <ld-tabpanel
          title="内部邮件"
          :tabs="myMailTabs"
        >
          <div>未阅邮件内容</div>
          <div>已阅邮件内容</div>
        </ld-tabpanel>
      </l-col>
      <l-col :span="6">
        <ld-tabpanel
          title="规则制度"
        >
          <div>规章制度内容</div>
        </ld-tabpanel>
      </l-col>
      <l-col :span="6">
        <ld-tabpanel
          title="我的项目"
          :tabs="myProjectTabs"
        >
          <div>商业项目内容</div>
          <div>产品研发内容</div>
          <div>日常工作内容</div>
        </ld-tabpanel>
      </l-col>
      <l-col :span="6">
        <ld-tabpanel
          title="日程安排"
          :tabs="myScheduleTabs"
        >
          <div>全部日程内容</div>
          <div>活动日程内容</div>
          <div>会议日程内容</div>
          <div>备忘日程内容</div>
        </ld-tabpanel>
      </l-col>
    </l-row>
  </ld-page>
</template>
