<template>
  <page-layer>
    <template #main>
      <div style="display: flex">
        <!-- 左边部分 -->
        <div class="left-pane">
          <div class="divider-line">
            <div class="divider-text">
              <div class="avatar-box__inner">
                <el-avatar :size="80" :src="userInfo.avatar" @error="errorHandler">
                  <img :src="makeTextPortrait()"/>
                </el-avatar>
              </div>
            </div>
            <div class="psninfo-box">
              {{ userInfo.name }}&nbsp;{{ userInfo.deptName }}
              <MyClock :show-logo="false" size="small"/>
            </div>
          </div>
          <div style="display: flex; flex-wrap: wrap; height: 480px; overflow-y: auto">
            <Inpatient v-for="(itm, index) in briefs" :key="index" :brief="itm"/>
          </div>
        </div>
        <!-- 右边部分 -->
        <div class="right-pane">
          <div class="check-more" @click="fetchMoreMessages">查看更多</div>
          <el-timeline v-for="item in messages" :key="item.id">
            <el-timeline-item :timestamp="item.simpledate" placement="top" icon="Warning" color="orange">
              <el-card>
                <div style="margin-bottom: 12px; font-size: 16px; font-weight: bold">{{ item.title }}</div>
                <div v-html="item.content"></div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </template>
  </page-layer>
</template>

<script setup name="Dashboard">
import {computed, onActivated, onMounted, ref, watch} from 'vue'
import {useStore} from 'vuex'
import {selectSystemMessages} from '../../api/messages/index'
import {formatDate} from '@/utils/date'
import {genTextPortrait} from '@/utils/portrait'
import {isInpatientStaff} from '@/utils/permission'
import {selectInpatientBriefs} from '../../api/dashboard/index'
import MyClock from '@/components/MyClock.vue'
import Inpatient from '@/components/dashboard/Inpatient.vue'
import PageLayer from "@/layout/PageLayer";

const store = useStore()
const token = computed(() => {
  return store.state.user.token
})
watch(
    () => token.value,
    () => {
      setTimeout(() => {
        location.reload()
      }, 100)
    }
)

const messages = ref([])
const fetchMoreMessages = () => {
  let lastdate = 'latest'
  if (messages.value.length > 0) {
    lastdate = formatDate(messages.value[0].simpledate)
  }
  selectSystemMessages(lastdate).then((res) => {
    res.forEach((item) => {
      messages.value.unshift(item)
    })
  })
}

const userInfo = computed(() => {
  return store.getters['user/info']
})
const errorHandler = () => {
  return true
}
const makeTextPortrait = () => {
  return genTextPortrait(userInfo.value.name)
}

onActivated(() => {
  setTimeout(() => {
    selectSystemMessages('latest').then((res) => {
      messages.value = res
    })
  }, 500)
})

const briefs = ref([])

onMounted(() => {
  if (isInpatientStaff()) {
    selectInpatientBriefs(userInfo.value.deptCode).then((list) => {
      briefs.value = list
    })
  }
})
</script>

<style lang="scss" scoped>
.left-pane {
  margin-top: 20px;
  width: 68%;
  background-image: linear-gradient(#d0ddee, #64b6e6);
  height: 120px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.right-pane {
  margin-top: 20px;
  margin-left: 12px;
  width: 30%;
  padding-right: 20px;
  height: calc(100vh - 120px);
  overflow-y: scroll;
}

.avatar-box__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  border-radius: 43px;
  border-bottom: 3px solid #1080f0;
  z-index: 600;
}

.check-more {
  width: 60%;
  text-align: right;
  color: #409eff;

  &:hover {
    cursor: pointer;
  }
}

.divider-line {
  display: block;
  height: 1px;
  width: 100%;
  margin: 70px 0 50px 0;
  background-color: #4297ec88;
  position: relative;
}

.divider-text {
  left: 12px;
  -webkit-transform: translateY(-55%);
  transform: translateY(-55%);
  position: absolute;
  font-weight: 500;
  color: black;
  font-size: 14px;
}

.psninfo-box {
  display: flex;
  left: 108px;
  -webkit-transform: translateY(-120%);
  transform: translateY(-120%);
  position: absolute;
  font-weight: 500;
  color: rgb(3, 72, 94);
  font-size: 20px;
  font-weight: bold;
}
</style>
