<!--
 * @Author: ysh
 * @Date: 2024-01-03 09:23:11
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-02-05 14:56:35
-->
<template>
  <div class="app-container home">
    <div class="left">
      <!-- 用户信息 -->
      <div class="user-info">
        <el-row align="bottom" :gutter="40">
          <el-col :span="4">
            <h3 style="font-weight: bold;text-align: right;font-size: 18px;"> {{ user.nickName }}，您好！ </h3>
            <h2 style="text-align: right;font-size: 24px;font-weight: bold;"> {{ 10 }}℃ </h2>
            <el-row style="font-size:12px;text-align: right;"> {{ "2024-01-22" }} {{ "星期一" }} </el-row>
          </el-col>
          <el-col :span="4" style="text-align: center;">
            <img :src="avatar" class="user-avatar" />
          </el-col>
          <el-col :span="16">
            <el-row style="font-size: 20px;font-weight: bold;margin-bottom: 20px;">
              {{ user.nickName }} <el-tag type="warning">{{ "高级工程师" }}</el-tag>
            </el-row>
            <el-row>
              <el-col :span="4">
                <el-row class="userinfo-item">
                  入职时间
                </el-row>
                <el-row class="userinfo-data">
                  2010
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row class="userinfo-item">
                  工龄
                </el-row>
                <el-row class="userinfo-data">
                  10年
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row class="userinfo-item">
                  所在部门
                </el-row>
                <el-row class="userinfo-data">
                  地理信息中心
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row class="userinfo-item">
                  部门职务
                </el-row>
                <el-row class="userinfo-data">
                  正职
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row class="userinfo-item">
                  技术职称
                </el-row>
                <el-row class="userinfo-data">
                  注册测绘师
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <!-- 快捷菜单 -->
      <el-row class="meau" type="flex">
        <el-col :span="12" class="meau-left">
          <div class="titles">
            <span class="title-line"></span>
            <span class="title-text">快捷菜单</span>
            <span class="title-more">更多</span>
          </div>
          <el-row style="text-align: center;">
            <el-col :span="4" class="item" style="background-color: #42b983;padding:3px" @click.native="gotoTask">
              <el-row class="item-icon"><i class="el-icon-tickets"></i></el-row>
              <el-row>新建申请</el-row>
            </el-col>
            <!-- <el-col :span="4" class="item" style="background-color: #40A9FF;padding:3px">
              <el-row class="item-icon"><i class="el-icon-s-order"></i></el-row>
              <el-row>新建项目</el-row>
            </el-col> -->
          </el-row>
        </el-col>
        <el-col :span="12" class="meau-right">
          <div class="titles">
            <span class="title-line"></span>
            <span class="title-text">我的待办</span>
          </div>
          <el-row>
            <el-col :span="6" class="db-item">
              <el-row class="db-text">考核待审</el-row>
              <el-row class="db-number">10</el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 公告列表和日历 -->
      <el-row class="notice">
        <el-col :span="16">
          <div class="titles">
            <span class="title-line"></span>
            <span class="title-text">公告列表</span>
          </div>
          <el-table :data="noticeData" style="width: 100%">
            <el-table-column prop="type" label="公告分类">
            </el-table-column>
            <el-table-column prop="name" label="公告标题">
            </el-table-column>
            <el-table-column prop="time" label="发布时间">
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="8" >
          <el-calendar v-model="times">
          </el-calendar>
        </el-col>
      </el-row>
    </div>
    <div class="right">
      <div class="titles">
        <span class="title-line"></span>
        <span class="title-text">项目列表</span>
      </div>
      <el-table :data="projectData" style="width: 100%">
        <el-table-column prop="state" label="状态">
        </el-table-column>
        <el-table-column prop="projectNumber" label="项目编号">
        </el-table-column>
        <el-table-column prop="projectName" label="项目名称">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getUserProfile } from "@/api/system/user";
export default {
  name: "index",
  computed: {
    ...mapGetters(["avatar"]),
  },
  data() {
    return {
      user: {},
      weather: {},
      noticeData: [],
      projectData: [],
      times: new Date()
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        console.log(this.user);
      });
    },
    gotoTask(){
      this.$router.push({ path: "/task/process"});
    }
  },
};
</script>

<style scoped lang="scss">
.home {
  display: flex;
  background-color: #f5f5f5;
}

.left {
  flex: 2;
  margin-right: 20px;

  .user-info {
    width: 100%;
    height: 160px;
    padding: 10px;
    margin-bottom: 20px;
    background-color: #fff;

    .user-avatar {
      width: 120px;
      height: 120px;
      border-radius: 50%;
    }

    .userinfo-item {
      font-size: 18px;
      font-family: 'Times New Roman', '黑体', Times, serif, ;
      font-weight: bold;
      color: #6D6D6D;
      margin: 5px;
    }

    .userinfo-data {
      font-size: 14px;
      font-family: '微软雅黑';
      font-weight: bold;
      margin: 5px;
    }
  }

  .meau {
    height: 150px;
    margin-bottom: 20px;
    .meau-left {
      background-color: #fff;
      padding: 0px 20px 10px;
      margin-right: 20px;
    }

    .meau-right {
      background-color: #fff;
      padding: 0px 20px 10px;
      margin-left: 20px;
      .db-item{
        text-align: center;
        background-color: #F5F5F5;
        padding: 10px 20px;
        cursor: pointer;
        .db-text{
        }
        .db-number{
          font-weight: bold;
          color: #e67153;
          line-height: 30px;
          font-size: 19px;
        }
      }
    }
    .item{
      color: #fff;
      margin: 0 10px;
      cursor: pointer;
    }
    .item-icon{
      width: 100%;
      height: 100%;
      text-align: center;
      i{
        display: inline-block;
        font-size: 40px;
        color: #fff;
      }
    }
  }
  .notice{
    padding: 0px 20px 10px;
    background-color: #fff;
  }
}

.right {
  padding: 0px 20px 10px;
  background-color: #fff;
  flex: 1;
}

.border {
  border: 1px solid #CDCDCD;
}

.titles {
  line-height: 55px;
  vertical-align: middle;
  font-weight: bold;
  position: relative;
  margin-bottom: 10px;

  .title-line {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0%, -50%);
    width: 5px;
    height: 30px;
    background-color: #42b983;
  }

  .title-text {
    display: inline-block;
    padding-left: 15px;
  }

  .title-more {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0%, -50%);
    color: #40A9FF;
    font-size: 14px;
    cursor: pointer;
  }

  .title-more:hover {
    color: #e4b82a;
  }
}
</style>
