<script setup lang="ts">
import { XMessage } from '@/hooks'
import { globalBack } from '@/router'
import { dialog } from '@/components/mj/mj-dialog'

defineOptions({ name: 'GoodThings' })
const things = ref(['', '', ''])

function submit() {
  for (const thing of things.value) {
    if (!thing.trim()) {
      XMessage.error('请正确输入3件好事')
      return
    }
  }

  dialog.show({
    content: '今天的3件好事记录成功',
    hideCancel: true,
    hideClose: true,
    ok: globalBack,
  })
}
</script>

<template>
  <div class="good-things">
    <div class="top">
      <Icon name="left_arrow" size="80" @click="globalBack()"></Icon>
    </div>
    <div class="main">
      <div class="main-box">
        <div class="main-top">
          <div class="title" data-content="记录今天的3件好事">记录今天的3件好事</div>
        </div>
        <div class="book-box">
          <div class="book">
            <div class="answer-box">
              <div class="answer-box-title">第1件好事</div>
              <div class="answer-box-main textarea_box">
                <el-input
                  v-model="things[0]"
                  type="textarea"
                  :rows="1"
                  placeholder="请输入"
                ></el-input>
              </div>
            </div>
            <div class="answer-box">
              <div class="answer-box-title">第2件好事</div>
              <div class="answer-box-main textarea_box">
                <el-input
                  v-model="things[1]"
                  type="textarea"
                  :rows="1"
                  placeholder="请输入"
                ></el-input>
              </div>
            </div>
            <div class="answer-box">
              <div class="answer-box-title">第3件好事</div>
              <div class="answer-box-main textarea_box">
                <el-input
                  v-model="things[2]"
                  type="textarea"
                  :rows="1"
                  placeholder="请输入"
                ></el-input>
              </div>
            </div>
          </div>
          <Btn width="368" height="108" size="48" @click="submit">提交</Btn>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.good-things {
  position: fixed;
  width: 100vw;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  @include main_bg;
  overflow: hidden;
  box-sizing: border-box;
  line-height: 1.5;
  @include hidden_scroll;
  .top {
    padding: 2.67vh 64px 0;
    position: relative;
    z-index: 1;
    // margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .main {
    box-sizing: border-box;
    padding: 0 64px;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    &-top {
      margin-bottom: 1vh;
      .title {
        color: #fff;
        text-shadow: 0 0.17vh 0.17vh rgba(0, 0, 0, 0.25);
        font-family: $font-special;
        font-size: 4vh;
        font-style: normal;
        font-weight: 400;
        line-height: 6vh; /* 150% */
        text-align: center;
        @include font-stroke($font-color, 6px);
      }
    }
    &-box {
      position: relative;
      top: 3vh;
    }

    .book-box {
      position: relative;
      // height: 880px;
      height: 84.67vh;
      .error_feedback {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
      }
    }
    .book {
      box-sizing: border-box;
      position: relative;
      z-index: auto;
      // height: 880px;
      height: 100%;
      flex-shrink: 0;
      border-radius: 3.33vh;
      border: 0.67vh solid #fff;
      background: linear-gradient(179deg, #fdfdf9 0.69%, #dfebf7 99.53%);
      box-shadow: 0 0.33vh 0.67vh 0 rgba(0, 0, 0, 0.25);
      padding: 4vh;
      .title {
        color: $font-color;
        font-family: OPPOSans;
        font-size: 2.67vh;
      }
      .answer-box {
        margin-top: 2.67vh;
        &-title {
          padding: 0 20px 0 32px;
          position: relative;
          color: $font-color;
          font-family: $font-special;
          font-size: 2.67vh;
          border-radius: 0.33vh;
          margin-bottom: 2vh;
          &::before {
            content: '';
            width: 12px;
            height: 100%;
            flex-shrink: 0;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #669cfe;
            border-radius: 0 1vh 1vh 0;
          }
        }
        .textarea_box {
          border-radius: 1.67vh;
          border: 0.33vh solid #bed5fe;
          background: #f7faf9;
          padding: 2vh;

          :deep(.el-textarea) {
            .el-textarea__inner {
              background-color: transparent;
              box-shadow: none;
              padding: 0;
              color: $font-color;
              font-family: OPPOSans;
              font-size: 2.33vh;
              &::placeholder {
                color: #999;
              }
            }
          }
        }
      }
    }
    .x-button {
      position: absolute;
      bottom: 2vh;
      left: 50%;
      transform: translate(-50%);
    }
  }
}
</style>
