<template>
  <div class="app-container home">
    <header>
      <div class="icon">
        <el-avatar :size="60" :src="avatar" />
      </div>
      <div class="info">
        <h3>{{ warmMessage }}</h3>
        <p>
          <span>{{ nickname }}</span>
          <el-divider direction="vertical" />
          <span>{{ userinfo.userName }}</span>
          <el-divider direction="vertical" />
          <span>{{ userinfo.dept.deptName || $t('home.dept.noSet') }}</span>
        </p>
        <p v-if="hasBirthday" class="birthday-message">
          🎂{{ birthdayMessage }}🎉🎁🎈
        </p>
      </div>
      <div v-show="false" class="count">
        <el-statistic
          :value="0"
          :value-style="{ fontSize: '32px' }"
          title="我的待办"
        />
        <el-divider direction="vertical" />
        <el-statistic
          :value="0"
          :value-style="{ fontSize: '32px' }"
          title="我的已办"
        />
      </div>
    </header>
    <section>
      <div class="apps">
        <router-link to="/m/checkin" class="app-card">
          <svg-icon icon-class="icon-one" style="font-size: 24px" />
          <span>{{ $t('home.checkin.title') }}</span>
          <i class="el-icon-arrow-right" />
        </router-link>
      </div>
    </section>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import messageGenerator from '@/utils/warmMessageGenerator'
import moment from 'moment'
export default {
  name: 'Index',
  data() {
    return {
      warmMessage: ''
    }
  },
  computed: {
    ...mapGetters(['userinfo', 'avatar', 'nickname', 'language']),
    hasBirthday() {
      if (!this.userinfo.birthday) return false
      // this.userinfo.birthday 格式为 2025-07-24, 比对月、日
      const today = new Date().toISOString().split('T')[0]
      const birthday = this.userinfo.birthday.split('-')

      const month = birthday[1]
      const day = birthday[2]

      const todayMonth = today.split('-')[1]
      const todayDay = today.split('-')[2]

      console.log(month, todayMonth)

      return month == todayMonth && day == todayDay
    },
    birthdayMessage() {
      if (!this.userinfo.birthday) return ''
      return this.$t('home.birthday', {
        name: this.nickname,
        birthday: moment(this.userinfo.birthday).format(`M/D`)
      })
    }
  },
  watch: {
    language: {
      handler(newVal) {
        console.log(newVal)
        this.warmMessage = messageGenerator(
          this.userinfo.nickName
        ).generateMessage()
      },
      immediate: true
    }
  },
  created() {},
  methods: {
    goTarget(href) {
      window.open(href, '_blank')
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  padding: 0;
  ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  p {
    padding: 0;
    margin: 0;
  }
  & > header {
    height: 150px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 16px;
    border-radius: 0 0 8px 8px;

    .icon {
      margin-right: 20px;
    }

    .info {
      flex-grow: 1;
      width: 0;
      h3 {
        margin: 0;
        margin-bottom: 10px;
        font-size: 20px;
      }
    }

    .count {
      display: flex;
      align-items: center;
      ::v-deep {
        .el-divider {
          margin: 0 25px;
          height: 3em;
        }
        .el-statistic {
          cursor: pointer;
        }
      }
    }
  }

  & > section {
    padding: 16px;
  }
}
.birthday-message {
  margin: 10px 0 0 0 !important;
  overflow: hidden !important;
  color: #e6a23c;
}
.apps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);

  @media (max-width: 1024px) {
    grid-template-columns: repeat(4, 1fr);
  }

  @media (max-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (max-width: 480px) {
    grid-template-columns: repeat(1, 1fr);
  }

  gap: 16px;
  .app-card {
    background: linear-gradient(to top, #fff, #f1f1f1);
    border-radius: 8px;
    padding: 30px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
    text-decoration: none;
    border: 1px solid #e0e0e0;
    span {
      font-size: 16px;
      font-weight: 600;
    }
  }
}
</style>
