<template>
  <div class="dashboard-container">
    <div class="top-div">
      <el-row>
        <el-col :span="14">
          <div class="content-container">
            <div class="avatar-div">
              <img :src="userStore.avatar" class="user-avatar">
              <span class="greetings">{{ helloword }}{{ userStore.nickname }}!</span>
            </div>
            <div class="card-div">
              <el-card class="task-card">
                <div class="mytask-div"></div>
                <div class="num-div">
                  <span>我的任务</span>
                  <p>{{ myTotal }}</p>
                </div>
              </el-card>
              <el-card class="task-card">
                <div class="grouptask-div"></div>
                <div class="num-div">
                  <span>组任务</span>
                  <p>{{ groupTotal }}</p>
                </div>
              </el-card>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="img-container"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup name="Index" lang="ts">
import {useUserStore} from '@/store/modules/user';

const helloword = ref<string>('您好，')
const userStore = useUserStore();
const myTotal = ref<number>(0);
const groupTotal = ref<number>(0);

//获取时间提示语
const gethelloword = () => {
  let ttime = new Date()
  let thour = ttime.getHours()
  if (thour >= 0 && thour < 9) {
    helloword.value =  '早上好，'
  } else if (thour >= 9 && thour < 11) {
    helloword.value =  '上午好，'
  } else if (thour >= 11 && thour < 13) {
    helloword.value =  '中午好，'
  } else if (thour >= 13 && thour < 19) {
    helloword.value =  '下午好，'
  } else if (thour >= 19 && thour < 23) {
    helloword.value =  '晚上好，'
  } else {
    helloword.value =  '您好，'
  }
}

onMounted(() => {
  gethelloword();

});
</script>

<style lang="scss" scoped>
.update-pwd {
  width: 50%;
  margin-left: 25%;
  margin-top: 5%;
}

.top-div {
  width: 100%;
  height: 300px;
  background-color: #ececec;

  .content-container {
    width: 100%;
    height: 280px;
  }

  .avatar-div {
    position: relative;
    width: 100%;
  }

  .card-div {
    width: 100%;
    margin-top: 30px;
    display: -webkit-flex;
    display: flex;
    justify-content: space-around;


    .task-card {}

    .mytask-div {
      display: inline-block;
      width: 91px;
      height: 104px;
      background-size: cover;
      background-position: center;
      background: url('../assets/images/icons-5.png') no-repeat;
      vertical-align: middle
    }

    .num-div {
      margin-left: 10px;
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      font-size: 15px;
      font-weight: 600;
    }

    .grouptask-div {
      display: inline-block;
      width: 105px;
      height: 95px;
      background-size: cover;
      background-position: center;
      background: url('../assets/images/icons-6.png') no-repeat;
      vertical-align: middle;
    }

    .gnum-div {
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      font-size: 15px;
      font-weight: 600;
    }
  }

  .user-avatar {
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 30px;
    position: relative;
    left: 30px;
    top: 10px;

  }

  .greetings {
    position: relative;
    left: 50px;
    font-size: 16px;
    font-weight: 600;
  }

  .img-container {
    width: 411px;
    height: 258px;
    background-size: cover;
    background-position: center;
    background: url('../assets/images/icons-7.png') no-repeat;
  }
}

.card-panel {
  height: 108px;
  cursor: pointer;
  font-size: 22px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  // box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  // border-color: rgba(0, 0, 0, .05);

  & {
    .card-panel-icon-wrapper {
      color: #fff !important;
    }

    .icon-people {
      background: #40c9c6;
    }

    .icon-message {
      background: #36a3f7;
    }

    .icon-money {
      background: #f4516c;
    }

    .icon-shopping {
      background: #34bfa3
    }
  }

  .icon-people {
    color: #40c9c6;
  }

  .icon-message {
    color: #36a3f7;
  }

  .icon-money {
    color: #f4516c;
  }

  .icon-shopping {
    color: #348ebf
  }

  .card-panel-icon-wrapper {
    float: left;
    margin: 14px 0 0 14px;
    padding: 16px;
    transition: all 0.38s ease-out;
    border-radius: 6px;
  }

  .card-panel-icon {
    float: left;
    font-size: 58px;
  }

  .card-panel-description {
    float: right;
    font-weight: bold;
    margin: 26px;
    margin-left: 0px;

    .card-panel-text {
      line-height: 24px;
      color: rgba(0, 0, 0, 0.45);
      font-size: 24px;
      margin-bottom: 12px;
      margin-right: 8px;
    }

    .card-panel-num {
      font-size: 20px;
    }
  }
}

:deep(.el-badge__content.is-fixed) {
  margin-top: 9px !important;
  margin-left: 1px !important;
}

.time-card {
  position: fixed;
  left: 2px;
  top: 25px;
  z-index: 1001;
  width: 40%;
  height: 80%;
  overflow: auto
}

.el-timeline {
  padding-left: 0px;
}

:deep(.el-timeline-item__timestamp) {
  font-size: 18px !important;
}

:deep(.el-dialog__header) {
  padding: 10px !important;
}

:deep(.el-dialog__body) {
  padding: 20px 20px !important;
}

.dashboard-container {
  width: 98%;
  // text-align: center;
  /* margin:20px; */
  margin-left: 10px;
}

.time-container {
  width: 100%;

}

.row-con {
  display: flex;
  flex-flow: row wrap;
}

.row-con .card {
  height: 100%;
}

.el-card {
  // min-width: 100%;
  // height: 100%;
  // margin-right: 20px;
  transition: all .5s;
}

.sftotal-card {
  height: 45%
}


.userinfo-container {
  display: inline-block;
  height: 50px;
}



.notify {
  background-color: #1989fa;
  font: white;
}
</style>
