<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import getPath, { post } from '@/apis/controller/index';
import breadcrumbStore from '@/store/modules/breadcrumb'

const handleClick = async () => {
  console.log(await getPath())
  console.log('----')
  console.log(await post('1'))
}

const { setBreadcrumb } = breadcrumbStore
setBreadcrumb([
  {
    label: '工作台',
  }
])
</script>

<template>
  <article class="workbench-page">
    <!-- <el-button @click="handleClick">按钮</el-button> -->
    <header class="header">
      <h1 class="title">工作台</h1>
      <section class="content">
        <el-avatar :size="64">张三</el-avatar>
        <div class="greeting">
          <h2 class="hello">早安，张三，开始您一天的工作吧！</h2>
          <p class="weather">今日阴转小雨，22℃ - 32℃，出门记得带伞哦。</p>
        </div>
        <ul class="summary">
          <li class="item project-count">
            <span class="text">
              <img src="@/assets/project-icon.svg" class="icon" alt />项目数
            </span>
            <span class="number">12</span>
          </li>
          <li class="item todo">
            <span class="text">
              <img src="@/assets/todo-icon.svg" class="icon" alt />待办项
            </span>
            <span class="number">4/10</span>
          </li>
          <li class="item enterprise">
            <span class="text">
              <img src="@/assets/enterprise-icon.svg" class="icon" alt />企业数
            </span>
            <span class="number">12</span>
          </li>
        </ul>
      </section>
    </header>
    <main class="row main">
      <div class="col left">
        <!-- 我的项目 -->
        <el-card shadow="never" class="my-project">
          <template #header>
            <div class="card-header">
              <span class="text">
                <img src="@/assets/project-icon.svg" alt class="icon" />
                我的项目
              </span>
              <router-link class="link" to="/project-list">全部项目</router-link>
            </div>
          </template>
          <div class="card-body">
            <ul class="list">
              <li class="item" v-for="item in 6" :key="item">
                <div class="wrap">
                  <h3 class="name">市妇幼保健医院道路工程</h3>
                  <p class="desc">香洲区某某大道</p>
                </div>
              </li>
            </ul>
          </div>
        </el-card>
        <!-- 动态 -->
        <el-card shadow="never" class="dynamic">
          <template #header>
            <div class="card-header">
              <span class="text">
                <img src="@/assets/comment-icon.svg" alt class="icon" />
                动态
              </span>
            </div>
          </template>
          <div class="card-body">
            <ul class="list">
              <li class="item" v-for="item in 6" :key="item">
                <el-avatar :size="40">李四</el-avatar>
                <div class="wrap">
                  <p class="content">
                    <strong class="name">李四</strong>
                    <span class="do">编辑了</span>
                    <router-link to="/project" class="link">市妇幼保健医院道路工程</router-link>
                  </p>
                  <time class="time">2019-06-01 11:35:20</time>
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </div>
      <div class="col right">
        <!-- 快捷操作 -->
        <el-card shadow="never" class="shortcut">
          <template #header>
            <div class="card-header">
              <span class="text">
                <img src="@/assets/like-icon.svg" alt class="icon" />
                快捷操作
              </span>
            </div>
          </template>
          <div class="card-body">
            <ul class="list">
              <li class="item">
                <iconfont class="icon dsk-dashboard-one" style="color: rgb(82, 196, 26)" />
                <span class="text">主控台</span>
              </li>
              <li class="item">
                <iconfont class="icon dsk-me" style="color: rgb(24, 144, 255)" />
                <span class="text">个人中心</span>
              </li>
              <li class="item">
                <iconfont class="icon dsk-config" style="color: rgb(250, 173, 20)" />
                <span class="text">设置</span>
              </li>
              <li class="item">
                <iconfont class="icon dsk-robot-two" style="color: rgb(114, 46, 209)" />
                <span class="text">定额库</span>
              </li>
              <li class="item">
                <iconfont class="icon dsk-doc-detail" style="color: rgb(19, 194, 194)" />
                <span class="text">消息</span>
              </li>
              <li class="item">
                <iconfont class="icon dsk-search" style="color: rgb(235, 47, 150)" />
                <span class="text">搜索</span>
              </li>
            </ul>
          </div>
        </el-card>
        <!-- 待办事项 -->
        <el-card shadow="never" class="todo">
          <template #header>
            <div class="card-header">
              <span class="text">
                <img src="@/assets/todo-icon.svg" alt class="icon" />
                待办事项
              </span>
            </div>
          </template>
          <div class="card-body">
            <ul class="list">
              <li class="item head">
                <span class="task">任务</span>
                <span class="deadline">截止时间</span>
              </li>
              <li class="item" v-for="item in 5" :key="item">
                <span class="task">某某工程-审批流程{{ item }}</span>
                <span class="deadline">2020-07-01</span>
              </li>
            </ul>
          </div>
        </el-card>
        <!-- 小组成员 -->
        <el-card shadow="never" class="member">
          <template #header>
            <div class="card-header">
              <span class="text">
                <img src="@/assets/enterprise-icon.svg" alt class="icon" />
                成员
              </span>
            </div>
          </template>
          <div class="card-body">
            <ul class="list">
              <li class="item">
                <el-avatar :size="32">张三</el-avatar>
                <p class="desc">
                  <strong class="name">张三</strong>
                  <span class="position">造价师</span>
                </p>
                <el-tag type="success" size="medium">在线</el-tag>
              </li>
              <li class="item">
                <el-avatar :size="32">李四</el-avatar>
                <p class="desc">
                  <strong class="name">李四</strong>
                  <span class="position">造价师</span>
                </p>
                <el-tag type="danger" size="medium">离线</el-tag>
              </li>
            </ul>
          </div>
        </el-card>
      </div>
    </main>
  </article>
</template>

<style lang="scss" src="./style.scss" scoped></style>
