<script setup lang="ts">
import { reactive } from 'vue';

const dateMsg = reactive({
  date: '2023-03-20',
  week: '周一',
  day: '20',
  detail: [
    ['癸卯(兔)年', '二月廿九'],
    ['乙卯(兔)月', '丁丑(牛)日'],
    ['本年第12周', '第79天'],
  ],
  zodiac: '兔',
  constellation: '双鱼座',
  suitable: [
    '祭祀',
    '订盟',
    '纳采',
    '修造',
    '动土',
    '祈福',
    '塑绘',
    '斋醮',
    '沐浴',
    '拆卸',
    '起基',
    '入宅',
    '安香',
    '造庙',
    '移柩',
    '谢土',
    '除服',
    '成服',
    '入学',
    '习艺',
    '出行',
    '竖柱',
    '上梁',
    '掘井',
    '求嗣',
    '解除',
    '伐木',
  ],
  taboo: ['作灶', '安葬', '开市', '盖屋'],
  moon: '晓月',
  phenology: '鹰化为鸠',
  good_direction: '正南',
  sun_direction: '西北',
  cloudy_direction: '正西',
  happy_direction: '东南',
  wealth_direction: '西南',
});
</script>
<template>
  <div class="box">
    <div>
      {{ dateMsg.date }}
      &nbsp;
      {{ dateMsg.week }}
    </div>
    <div class="day-box">{{ dateMsg.day }}</div>
    <div class="detail-box">
      <div class="align-right">{{ dateMsg.detail[0][0] }}</div>
      <div>{{ dateMsg.detail[0][1] }}</div>
      <div class="align-right">{{ dateMsg.detail[1][0] }}</div>
      <div>{{ dateMsg.detail[1][1] }}</div>
      <div class="align-right">{{ dateMsg.detail[2][0] }}</div>
      <div>{{ dateMsg.detail[2][1] }}</div>
    </div>
    <div class="line"></div>
    <div class="middle-item">
      <div class="legend" style="background: #ffc300">生肖</div>
      <div class="text-grey-6">{{ dateMsg.zodiac }}</div>
    </div>
    <div class="line"></div>
    <div class="middle-item">
      <div class="legend" style="background: #02c9c9">星座</div>
      <div class="text-grey-6">{{ dateMsg.constellation }}</div>
    </div>
    <div class="line"></div>
    <div class="middle-item">
      <div class="legend" style="background: #bccf3d">宜</div>
      <div class="text-grey-6">{{ dateMsg.suitable.join(',') }}</div>
    </div>
    <div class="line"></div>
    <div class="middle-item">
      <div class="legend" style="background: #eb5651">忌</div>
      <div class="text-grey-6">{{ dateMsg.taboo.join(',') }}</div>
    </div>
    <div class="line"></div>
    <div class="row full-width">
      <div class="row col-6">
        <div class="legend" style="background: #c5bd99">月相</div>
        <div class="text-grey-6">{{ dateMsg.moon }}</div>
      </div>
      <div class="row col-6">
        <div class="legend" style="background: #c5bd99">物候</div>
        <div class="text-grey-6">{{ dateMsg.phenology }}</div>
      </div>
    </div>
    <div class="line"></div>
    <div class="full-width">
      <div class="text-grey-6">喜神方位:{{ dateMsg.good_direction }}</div>
      <div class="text-grey-6">阳贵神方位:{{ dateMsg.sun_direction }}</div>
      <div class="text-grey-6">阴贵方位:{{ dateMsg.cloudy_direction }}</div>
      <div class="text-grey-6">福神方位:{{ dateMsg.happy_direction }}</div>
      <div class="text-grey-6">财神方位:{{ dateMsg.wealth_direction }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px;
}
.align-right {
  text-align: right;
}
.line {
  width: 100%;
  height: 1px;
  background-color: rgba(180, 180, 180, 0.3);
}
.legend {
  color: #fff;
  padding: 0 5px;
  border-radius: 4px;
  margin-right: 10px;
  font-size: 13px;
  flex: 0 0 auto;
  align-self: flex-start;
}
.day-box {
  width: 80px;
  height: 80px;
  margin: 8px 0;
  color: #fff;
  background-color: #e8a0b8;
  border-radius: 10px;
  font-size: 50px;
  text-align: center;
  line-height: 90px;
  position: relative;
  &::before {
    position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    top: 8px;
    left: 8px;
  }
  &::after {
    position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    top: 8px;
    right: 8px;
  }
}
.detail-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
}
.middle-item {
  width: 100%;
  display: flex;
}
</style>