<template>
  <div class="clause-info">
    <el-text class="clause-content" :title="info.articleContent" :line-clamp="3">{{ info.articleContent }}</el-text>
    <el-form label-suffix=":" class="mt20">
      <el-form-item label="所属疾病">
        <span>{{ info.diseaseName }}</span>
      </el-form-item>
      <el-form-item label="体裁">
        <span>{{ StyleId.getLabelByValue(info.styleId as any) }}</span>
      </el-form-item>
      <el-form-item label="朝代">
        <span>
          {{
            info.endDynastySort && info.startDynastySort !== info.endDynastySort
              ? `${info.startDynastyName}~${info.endDynastyName}`
              : info.startDynastyName || "--"
          }}
        </span>
      </el-form-item>
      <el-form-item label="书名">
        <span>{{ info.bookName }}</span>
        <el-button v-if="!showMore" link type="primary" @click="showMore = true">展开</el-button>
      </el-form-item>
    </el-form>
    <transition appear name="slide-fade">
      <el-form class="more-info ml40" v-if="showMore" label-suffix=":">
        <el-form-item label="卷名">
          {{ info.chapter }}
        </el-form-item>
        <el-form-item label="成书年代">
          {{ info.publicationDate < 0 ? `公元前${Math.abs(info.publicationDate)}` : info.publicationDate }}
        </el-form-item>
        <el-form-item label="作者">
          {{ info.author }}
        </el-form-item>
        <el-form-item label="版本信息">
          {{ info.version }}
        </el-form-item>
      </el-form>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, withDefaults } from "vue";
import { Clause } from "@/api/interface";
import { StyleId } from "@/enums";

interface Props {
  info: Clause.ClauseInfo;
}
withDefaults(defineProps<Props>(), {
  info: () => ({}) as Clause.ClauseInfo
});
const showMore = ref(false);
</script>

<style lang="scss" scoped>
.el-form {
  :deep(.el-form-item--default) {
    --font-size: 16px;

    margin-bottom: 12px;
  }
  :deep(.el-form-item__label) {
    font-weight: bold;
  }
}
.clause-content {
  font-size: 24px;
  font-weight: bold;
  color: #333333;
}
.more-info {
  width: 250px;
  padding: 0 20px;
  background: #fbf0e2;
}
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style>
