GCLS_Page_Book_Component_NPC/src/components/Adult/preview/HeaderSparate/index.vue

<template>
  <div class="header-separate">
    <table>
      <colgroup>
        <col
          v-for="(item, i) in curQue.tableData.colsConfig.width"
          :key="`col-${i}`"
          :style="{ width: `${item.val}px` }"
        />
      </colgroup>

      <thead>
        <tr>
          <th
            v-for="({ text, english, type }, i) in curQue.tableData.headers"
            :key="`th-${i}`"
          >
            <div class="thead-content" :style="theadStyle">
              <span class="chs">{{ text }}</span>
              <span :class="[type === 'english' ? 'english' : 'pinyin']">
                {{ english }}
              </span>
            </div>
          </th>
        </tr>
      </thead>

      <tbody
        :style="{
          'text-align': `${curQue.textAlign}`,
        }"
      >
        <tr v-for="(row, i) in curQue.tableData.body" :key="`tr-${i}`">
          <template v-for="(col, j) in row.content">
            <td
              v-if="tdIsShow(i, j)"
              :key="`td-${j}`"
              :colspan="col.colspan"
              :rowspan="col.rowspan"
              :class="[
                { underline: col.isUnderline },
                `${curQue.firstColAligin === 'center' ? 'col-center' : ''}`,
              ]"
              :style="{
                'background-color': `${col.background}`,
                display: tdHeaderIsNone(i, j),
              }"
            >
              <div class="cell-wrap">
                <template v-if="col.type === 'content'">
                  <span v-if="col.text.length > 0" class="content">
                    {{ col.text }}
                  </span>
                  <template v-else>
                    <el-input
                      v-model="col.answer"
                      type="textarea"
                      :placeholder="`${isAnswerMode ? '' : '输入'}`"
                      :disabled="isAnswerMode"
                      :autosize="{ minRows: 1, maxRows: 6 }"
                      @input="enterAnswer(i, j, $event)"
                    />
                  </template>
                </template>

                <div
                  v-else-if="col.type === 'pinyin'"
                  class="sentence"
                  :style="pinyinStyle"
                >
                  <div>
                    <span
                      v-for="({ pinyin, chs }, k) in col.sentence_data
                        .wordsList"
                      :key="`${
                        curQue.pinyinPosition === 'top' ||
                        curQue.pinyinPosition === 'left'
                          ? 'pinyin'
                          : 'chs'
                      }-${k}`"
                      :class="[
                        `${
                          curQue.pinyinPosition === 'top' ||
                          curQue.pinyinPosition === 'left'
                            ? 'pinyin'
                            : 'chs'
                        }`,
                      ]"
                    >
                      {{
                        curQue.pinyinPosition === "top" ||
                        curQue.pinyinPosition == "left"
                          ? pinyin
                          : chs
                      }}
                    </span>
                  </div>
                  <div>
                    <span
                      v-for="({ pinyin, chs }, k) in col.sentence_data
                        .wordsList"
                      :key="`${
                        curQue.pinyinPosition === 'top' ||
                        curQue.pinyinPosition === 'left'
                          ? 'chs'
                          : 'pinyin'
                      }-${k}`"
                      :class="[
                        `${
                          curQue.pinyinPosition === 'top' ||
                          curQue.pinyinPosition === 'left'
                            ? 'chs'
                            : 'pinyin'
                        }`,
                      ]"
                    >
                      {{
                        curQue.pinyinPosition === "top" ||
                        curQue.pinyinPosition == "left"
                          ? chs
                          : pinyin
                      }}
                    </span>
                  </div>
                </div>

                <div
                  v-else-if="col.type === 'prePinyin'"
                  :style="{
                    'flex-direction':
                      col.prefixOrSuffix === 'prefix' ? 'row' : 'row-reverse',
                  }"
                  class="pre-pinyin"
                >
                  <span>{{ col.message }}</span>
                  <div
                    class="right-pinyin"
                    :style="{
                      'grid-template-columns': `repeat(${col.sentence_data.wordsList.length}, auto)`,
                    }"
                  >
                    <span
                      v-for="({ pinyin }, k) in col.sentence_data.wordsList"
                      :key="`pre-pinyin-${k}`"
                      class="pinyin"
                    >
                      {{ pinyin }}
                    </span>
                    <span
                      v-for="({ pinyin, chs }, k) in col.sentence_data
                        .wordsList"
                      :key="`pre-chs-${k}`"
                      class="chs"
                    >
                      {{ chs }}
                    </span>
                  </div>
                </div>
                <CrossTick v-if="col.isCross" />
              </div>
            </td>
          </template>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import CrossTick from "./CrossTick.vue";

export default {
  components: { CrossTick },
  props: {
    curQue: {
      type: Object,
      required: true,
    },
    themeColor: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      isAnswerMode: false,
    };
  },
  computed: {
    theadStyle() {
      const hp = this.curQue.headerEnglishPosition;
      if (hp === "top") {
        return {
          "flex-direction": "column-reverse",
        };
      }
      if (hp === "right") {
        return {
          "flex-direction": "row",
          "column-gap": "8px",
        };
      }
      if (hp === "bottom") {
        return {
          "flex-direction": "column",
        };
      }
      if (hp === "left") {
        return {
          "flex-direction": "row-reverse",
          "column-gap": "8px",
        };
      }
    },
    pinyinStyle() {
      let pyPos = this.curQue.pinyinPosition;
      if (pyPos === "left") {
        return {
          "column-gap": "16px",
        };
      }

      if (pyPos === "top") {
        return {
          "flex-direction": "column",
        };
      }

      if (pyPos === "right") {
        return {
          "column-gap": "16px",
        };
      }

      if (pyPos === "bottom") {
        return {
          "flex-direction": "column",
        };
      }
    },
  },
  created() {
    const Bookanswer = this.curQue.Bookanswer;
    if (Bookanswer) {
      this.isAnswerMode = true;
      for (const key in Bookanswer) {
        let { col, row, value } = Bookanswer[key];
        this.curQue.tableData.body[col].content[row].answer = value;
      }
    } else {
      this.$set(this.curQue, "Bookanswer", {});
    }
  },
  methods: {
    enterAnswer(i, j, value) {
      this.curQue.Bookanswer[`${i}-${j}`] = {
        col: i,
        row: j,
        value,
      };
    },
    // 控制首尾表格显隐
    tdHeaderIsNone(i, j) {
      let body = this.curQue.tableData.body;
      if (j !== 0 && j !== body[0].content.length - 1) return "table-cell";
      let col = 1;
      let colIndex = body[i].content.findIndex(({ colspan }, index) => {
        if (index > j) return false;
        let num = colspan === undefined ? 1 : Number(colspan);
        if (num > 1) {
          col = num;
          return false;
        }
        if (index === j && col > 1) return true;
        if (col > 0) col -= 1;
        return false;
      });
      let row = 1;
      let rowIndex = body.findIndex((item, index) => {
        let rowspan = item.content[j].rowspan;
        let num = rowspan === undefined ? 1 : Number(rowspan);
        if (num > 1) {
          row = num;
          return false;
        }
        if (index === i && row > 1) return true;
        if (row > 0) row -= 1;
        return false;
      });
      return rowIndex === -1 && colIndex === -1 ? "table-cell" : "none";
    },
    // rowspan colspan 控制td是否生成
    tdIsShow(i, j) {
      let body = this.curQue.tableData.body;
      if (j === 0) return true;
      let col = 1;
      let colIndex = body[i].content.findIndex(({ colspan }, index) => {
        if (index > j) return false;
        let num = colspan === undefined ? 1 : Number(colspan);
        if (num > 1) {
          col = num;
          return false;
        }
        if (index === j && col > 1) return true;
        if (col > 0) col -= 1;
        return false;
      });
      let row = 1;
      let rowIndex = body.findIndex((item, index) => {
        let rowspan = item.content[j].rowspan;
        let num = rowspan === undefined ? 1 : Number(rowspan);
        if (num > 1) {
          row = num;
          return false;
        }
        if (index === i && row > 1) return true;
        if (row > 0) row -= 1;
        return false;
      });
      return (
        colIndex === -1 && (rowIndex === -1 || j === body[0].content.length - 1)
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.header-separate {
  width: 100%;
  margin-bottom: 16px;

  table {
    table-layout: fixed;
    font-size: 16px;
    border-collapse: separate;
    border-spacing: 6px 0;

    th {
      color: #4d4c51;
      font-weight: normal;
      background-color: #efeff9;
      padding: 4px 12px;
      border: 2px solid #afb4d1;

      .thead-content {
        display: flex;
        justify-content: center;

        .english {
          font-family: "robot";
          color: #000;
        }
      }
    }

    td {
      color: #474747;
      border-bottom: 1px solid transparent;
      padding: 4px 12px;
      min-height: 43px;
      height: 43px;

      .cell-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .content {
          font-family: "FZJCGFKTK", "GB-PINYINOK-B", "robot";
        }
      }

      // 下划线
      &.underline {
        text-decoration: underline;
      }

      .sentence {
        display: flex;
      }

      // 前缀 + 拼音
      .pre-pinyin {
        display: flex;
        align-items: flex-end;

        .right-pinyin {
          margin-left: 4px;
          column-gap: 2px;
          text-align: center;
          display: grid;
        }
      }

      &:first-child {
        border-left: 2px solid transparent;
        border-bottom-width: 1px;
        border-image: linear-gradient(
            transparent 6px,
            #e7b576 6px,
            #e7b576 calc(100% - 6px),
            transparent calc(100% - 6px),
            transparent calc(100% - 2px),
            #cecece calc(100% - 2px)
          )
          2;
        border-image-outset: 0 4px 0 0;

        &.col-center {
          text-align: center;
        }
      }

      &:not(:last-child) {
        position: relative;
        // 用 ::after 模拟中间边框
        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: calc(100% + 2px);
          width: 2px;
          height: 100%;
          display: inline-block;
          background: repeating-linear-gradient(
            transparent,
            transparent 3px,
            #cecece 3px,
            #cecece 7px,
            transparent 7px
          );
        }
      }

      // 中间的底部边框用 ::before 模拟
      &:not(:first-child):not(:last-child)::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 1px;
        display: inline-block;
        background-color: #cecece;
        box-shadow: 2px 0 #cecece, -2px 0 #cecece;
      }

      &:last-child {
        border-right: 2px solid transparent;
        border-bottom-width: 1px;
        border-image: linear-gradient(
            transparent 6px,
            #e7b576 6px,
            #e7b576 calc(100% - 6px),
            transparent calc(100% - 6px),
            transparent calc(100% - 2px),
            #cecece calc(100% - 2px)
          )
          2;
        border-image-outset: 0 0 0 4px;
      }
    }

    .pinyin {
      font-family: "GB-PINYINOK-B";
    }

    .chs {
      font-family: "FZJCGFKTK";
    }
  }
}
</style>