<template>
  <div :class="classes">
    <div class="card-head-top">
      <!-- 高度变化之后会影响内容排版，先固定高度 -->
      <div class="card-head-title">
        <el-input
          v-if="!preview && !data.isSimple"
          v-model="cardTitle"
          size="small"
          placeholder="请输入题卡标题"
          @blur="nameChange"
        >
        </el-input>
        <h1 v-else>{{ data.title }}</h1>
      </div>
      <div class="card-head-subtitle">
        <el-input
          v-if="!preview && !data.isSimple"
          v-model="cardSubTitle"
          size="small"
          placeholder="请输入题卡副标题"
          @blur="nameChange"
        >
        </el-input>
        <p v-else>{{ data.subTitle }}</p>
      </div>
    </div>

    <div class="card-head-body" v-if="data.examNumberStyle !== 'FILL'">
      <div class="grid-container">
        <div class="grid-row">
          <div class="grid-col grid-col-dash">
            <head-stdno :data="data"></head-stdno>
          </div>
          <div class="grid-col">
            <head-stdinfo :data="data"></head-stdinfo>
          </div>
        </div>
        <div class="grid-row" v-if="!data.isSimple">
          <div class="grid-col">
            <head-notice :data="data"></head-notice>
          </div>
          <div class="grid-col">
            <head-dynamic :data="data"></head-dynamic>
          </div>
        </div>
      </div>
    </div>
    <div class="card-head-body" v-else>
      <card-head-body-auto-resize :data="data">
        <head-stdinfo :data="data" slot="stdinfo"></head-stdinfo>
        <head-notice :data="data" slot="notice"></head-notice>
        <head-stdno :data="data" slot="stdno"></head-stdno>
        <head-dynamic
          :data="data"
          slot="dynamic"
          v-if="!data.isSimple && hasDynamicArea"
        ></head-dynamic>
      </card-head-body-auto-resize>
    </div>
  </div>
</template>

<script>
import HeadDynamic from "./cardHeadSpin/HeadDynamic";
import HeadNotice from "./cardHeadSpin/HeadNotice";
import HeadStdinfo from "./cardHeadSpin/HeadStdinfo";
import HeadStdno from "./cardHeadSpin/HeadStdno";
import CardHeadBodyAutoResize from "./CardHeadBodyAutoResize";
import { mapMutations } from "vuex";

export default {
  name: "CardHeadModelTwo",
  components: {
    HeadStdno,
    HeadStdinfo,
    HeadNotice,
    HeadDynamic,
    CardHeadBodyAutoResize,
  },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
    preview: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      cardTitle: "",
      cardSubTitle: "",
    };
  },
  computed: {
    classes() {
      return [
        "page-element",
        "card-head",
        {
          "card-head-handle": this.data.examNumberStyle === "FILL",
          "card-head-normal": this.data.examNumberStyle !== "FILL",
        },
      ];
    },
    hasDynamicArea() {
      return this.data.examAbsent || this.data.discipline;
    },
  },
  created() {
    this.cardTitle = this.data.title;
    this.cardSubTitle = this.data.subTitle;
  },
  methods: {
    ...mapMutations("card", ["setCardConfig"]),
    nameChange() {
      this.setCardConfig({
        title: this.cardTitle,
        subTitle: this.cardSubTitle,
      });
    },
  },
};
</script>
