<template>
  <div class="gl-page-content-grey">
    <div class="content">
      <div class="base-info">
        <div class="info-item">
          <div class="title">快捷通道</div>
          <div class="page-list">
            <div v-for="(item, index) in pageList" :key="index" class="item" @click="goPageFun(item.path)">
              <div class="pic">
                <el-icon><component :is="item.icon" /></el-icon>
              </div>
              <div class="label">{{ item.title }}</div>
            </div>
          </div>
        </div>
        <div class="info-item">
          <div class="title">个人中心</div>
          <div class="user-info">
            <div class="user">
              <div class="user-pic">
                <el-icon :size="24"><User /></el-icon>
              </div>
              <div class="user-name">张三</div>
            </div>
            <div class="detail">
              <div class="item">
                <div class="label">系统职位：</div>
                <div class="text">总经理</div>
              </div>
              <div class="item">
                <div class="label">系统角色：</div>
                <div class="text">管理员</div>
              </div>
              <div class="item">
                <div class="label">归属学科：</div>
                <div class="text">安全</div>
              </div>
              <div class="item">
                <div class="label">联系方式：</div>
                <div class="text">15888888888</div>
              </div>
              <div class="item">
                <div class="label">邮箱地址：</div>
                <div class="text">5555555555@qq.com</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="todo">
        <div class="tab">
          <el-tabs v-model="tabNum" type="card" @tab-click="tabClickFun">
            <el-tab-pane label="消息列表" :name="1" />
            <el-tab-pane label="审核列表" :name="2" />
          </el-tabs>
        </div>
        <div class="table">
          <BaseTable
            v-show="tabNum === 1"
            tableName="INDEX_NOTICE"
            :searchItems="searchItems1"
            showCheckbox
            :actionsWidth="120"
          >
            <template #leftOptions>
              <div>
                <el-button type="primary">已读全部</el-button>
                <el-button type="primary">批量处理</el-button>
              </div>
            </template>
            <template #tableActions>
              <div class="gl-table-actions">
                <el-link type="primary">处理审批</el-link>
                <el-link type="danger">删除</el-link>
              </div>
            </template>
          </BaseTable>
          <BaseTable
            v-show="tabNum === 2"
            tableName="INDEX_REVIEW"
            :searchItems="searchItems2"
            :params="{condition: 'createTime', pos: 0, limit: 15}"
            showCheckbox
            :actionsWidth="120"
          >
            <template #leftOptions>
              <div>
                <el-button type="primary">批量处理</el-button>
              </div>
            </template>
            <template #tableActions>
              <div class="gl-table-actions">
                <el-link type="primary">处理审批</el-link>
                <el-link type="danger">删除</el-link>
              </div>
            </template>
          </BaseTable>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import BaseTable from '@/components/common/table/baseTable.vue';
import * as Icons from '@element-plus/icons-vue';

const router = useRouter();

const pageList = [
  { title: '我的任务', path: '/simulation/condition', icon: Icons['Notification'] },
  { title: '任务执行', path: '/simulation/indicator', icon: Icons['CircleCheck'] },
  { title: '项目总览', path: '/simulation/knowledge', icon: Icons['DocumentCopy'] },
  { title: '数据看板', path: '/simulation/parameter', icon: Icons['DataLine'] },
  { title: '指标管理', path: '/', icon: Icons['Discount'] },
  { title: '结果分析', path: '/', icon: Icons['DataAnalysis'] },
  { title: '数据总览', path: '/', icon: Icons['MessageBox'] },
  { title: '流程创建', path: '/', icon: Icons['Share'] },
];

const searchItems1 = ref<any[]>([
  { title: '审批类型', field: 'acceptor', type: 'input' },
  { title: '审批状态', field: 'updateTime', type: 'input' },
]);

const searchItems2 = ref<any[]>([
  { title: '审批类型', field: 'acceptor', type: 'input' },
  { title: '审批状态', field: 'updateTime', type: 'input' },
]);

const tabNum = ref(1);

const goPageFun = (path: string) => {
  router.push({
    path,
  });
};

const tabClickFun = () => {};
</script>

<style lang="scss" scoped>
.gl-page-content-grey {
  .content {
    display: flex;
    flex-direction: column;
    flex: 1;
    .base-info {
      display: flex;
      justify-content: space-between;
      height: 200px;
      margin-bottom: var(--margin-normal);
      .info-item {
        display: flex;
        flex-direction: column;
        width: calc(50% - var(--margin-small));
        height: 100%;
        background-color: var(--el-bg-color);
        border-radius: var(--border-radius-normal);
        padding: var(--padding-normal);
        .title {
          font-size: var(--font-size-text-big);
          font-weight: bold;
          padding-bottom: var(--padding-normal);
          color: var(--el-text-color-primary);
        }
        .page-list {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          .item {
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .pic {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 40px;
              height: 40px;
              background-color: var(--el-color-primary);
              border-radius: var(--border-radius-normal);
              font-size: var(--font-size-title-big);
              color: #fff;
              cursor: pointer;
            }
            .label {
              line-height: 22px;
              color: var(--el-text-color-primary);
              font-size: var(--font-size-text-small);
              cursor: pointer;
            }
          }
        }
        .user-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          .user {
            display: flex;
            align-items: center;
            .user-pic {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 40px;
              height: 40px;
              background-color: var(--el-bg-color);
              border-radius: 50%;
              color: var(--el-text-color-primary);
              overflow: hidden;
              margin-right: var(--margin-normal);
              border: solid 1px var(--el-border-color);
            }
            .user-name {
              font-size: var(--el-text-color-primary);
              color: var(--el-text-color-primary);
              font-weight: bold;
            }
          }
          .detail {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            padding-top: var(--padding-normal);
            .item {
              display: flex;
              align-items: center;
              min-width: 33.33%;
              .label {
                width: 70px;
                text-align: right;
                font-size: var(--font-size-text-small);
                color: var(--el-text-color-regular);
              }
              .text {
                font-size: var(--font-size-text-normal);
                color: var(--el-text-color-primary);
                font-weight: bold;
              }
            }
          }
        }
      }
    }
    .todo {
      flex: 1;
      background-color: var(--el-bg-color);
      border-radius: var(--border-radius-normal);
      padding: var(--padding-normal);
    }
  }
}
</style>
