<template>
  <div class="main-container">
    <el-row :gutter="10" style="flex-wrap: wrap; flex-direction: row">
      <el-col :span="8">
        <div class="shortcut">
          <el-row>
            <div class="hader_row1">快捷方式</div>
          </el-row>
          <el-row>
            <div class="main_row1"></div>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="agency">
          <el-row>
            <div class="hader_row1">代办事项</div>
          </el-row>
          <el-row>
            <div class="main_row1"></div>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="info">
          <el-row>
            <div class="hader_row1">个人信息</div>
          </el-row>
          <el-row>
            <div class="main_row1">
              <el-descriptions
                class="margin-top"
                :column="1"
                :size="'medium'"
                border
              >
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    姓名
                  </template>
                  {{ userName }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-medal"></i>
                    班级
                  </template>
                  {{ classroom }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-star-off"></i>
                    学号
                  </template>
                  {{ userId }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-time"></i>
                    时间
                  </template>
                  {{ nowTime }}
                </el-descriptions-item>
              </el-descriptions>
              <el-row>
                <el-button type="primary" round class="btn_info"
                  >修改个人资料</el-button
                >
              </el-row>
            </div>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-row
      :gutter="10"
      :style="'top:10px'"
      style="flex-wrap: wrap; flex-direction: row"
    >
      <el-col :span="16">
        <div class="x5">
          <el-row>
            <div class="hader_row1">最新五星检查</div>
          </el-row>
          <el-row>
            <div class="main_row1">
              <el-table :data="x5Data" height="100%" border style="width: 100%">
                <el-table-column align="center" label="寝室">
                  <template slot-scope="scope">
                    {{ scope.row.buildingNo+'#'+scope.row.roomNo }}
                  </template>
                </el-table-column>
                <el-table-column prop="time" align="center" label="检查时间">
                </el-table-column>
                <el-table-column align="center" label="检查类型" prop="type"/>
                <el-table-column
                  align="center"
                  label="整洁星"
                  prop="tidy"
                  width="80px"
                >
                  <template slot-scope="scope">
                    {{ scope.row.tidy == 1 ? "合格" : "不合格" }}
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="安全星"
                  prop="safe"
                  width="80px"
                  ><template slot-scope="scope">
                    {{ scope.row.safe == 1 ? "合格" : "不合格" }}
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="健康星"
                  prop="healthy"
                  width="80px"
                  ><template slot-scope="scope">
                    {{ scope.row.healthy == 1 ? "合格" : "不合格" }}
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="和谐星"
                  prop="peace"
                  width="80px"
                  ><template slot-scope="scope">
                    {{ scope.row.peace == 1 ? "合格" : "不合格" }}
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="进步星"
                  prop="progress"
                  width="80px"
                  ><template slot-scope="scope">
                    {{ scope.row.progress == 1 ? "合格" : "不合格" }}
                  </template>
                </el-table-column>
                <el-table-column prop="total" align="center" label="总评" width="80px">
                </el-table-column>
              </el-table>
            </div>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="shortcut">
          <el-row>
            <div class="hader_row1">寝室成员</div>
          </el-row>
          <el-row>
            <div class="main_row1">
              <el-table
                :data="roomData"
                height="93%"
                :style="'width:calc(100% - 20px);margin:0 auto;'"
                border
                style="width: 100%"
              >
                <el-table-column align="center" label="寝室">
                  <template slot-scope="scope">
                    {{ scope.row.buildingNo+'#'+scope.row.roomNo }}
                  </template>
                </el-table-column>
                <el-table-column prop="bedNo" align="center" label="床位"/>
                <el-table-column prop="userName" align="center" label="姓名"/>
              </el-table>
            </div>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ResizeMixin from "@/mixins/ResizeMixin";
import { getDayTime } from "@/utils/dayTime";
import { requestGet } from "@/utils/request/request";
import { mapGetters } from "vuex";

export default {
  mixins: [ResizeMixin],
  computed: {
    ...mapGetters(["userId", "userName", "classroom"]),
  },
  data() {
    return {
      nowTime: null,
      x5Data: [],
      roomData: [],
    };
  },
  created() {
    this.nowTime = getDayTime(+new Date());
    setInterval(() => {
      this.nowTime = getDayTime(+new Date());
    }, 1000);
    this.selectX5Data();
    this.selectRoomData();
  },
  methods: {
    selectX5Data() {
      requestGet({
        url: "/inspection/selectInfoById",
        params: {
          userId: this.userId,
        },
      })
        .then((res) => {
          this.x5Data = res.data.data;
        })
        .catch((err) => {
          this.$message.error("获取五星数据失败");
        });
    },
    selectRoomData() {
      requestGet({
        url: "/student/selectMember",
        params: {
          userId: this.userId,
        },
      })
        .then((res) => {
          this.roomData = res.data.data;
        })
        .catch((err) => {
          this.$message.error("获取寝室数据失败");
        });
    },
  },
};
</script>


<style scoped>
.shortcut,
.agency,
.info,
.x5 {
  width: 100%;
  height: 300px;
  background-color: #ffffff;
  border-radius: 4px;
}
.hader_row1 {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid rgba(163, 163, 163, 0.25);
  text-align: left;
  font-size: 20px;
  line-height: 40px;
  padding-left: 10px;
}
.main_row1 {
  width: 100%;
  height: 260px;
}
.btn_info {
  display: block;
  margin: 0 auto;
  margin-top: 15px;
}
</style>

<style lang="scss" scoped>
@media screen and (max-width: 992px) {
  .item-wrapper {
    margin-bottom: 5px;
  }
  .map-margin-tb {
    margin: 5px 0;
  }
}
.chart-item {
  background-color: #fff;
}
.stack-avatar-wrapper {
  position: absolute;
  right: -2%;
  top: 10%;
}
</style>