<template>
  <ModuleBase :type="data.type">
    <template #content>
      <div class="sort-wrapper" :style="getSortWrapperStyle()">
        <template v-for="(item, i) in data.option_list">
          <div
            :key="`rich-${item.mark}`"
            class="sort-rich"
            :style="{
              gridArea: `rich-${i}`,
              ...getRichStyle(i),
            }"
          >
            <RichText v-model="item.content" :inline="true" placeholder="" />
          </div>
          <div
            :key="item.mark"
            class="custom-serial-number"
            :style="{
              gridArea: `number-${i}`,
              ...getNumberStyle(i),
            }"
          >
            <el-input
              v-model="item.custom_serial_number"
              v-numeric-only
              :class="{
                'text-center': data.property.arrange_direction === arrangeTypeList[0].value,
              }"
            />
          </div>
        </template>
      </div>
      <div class="tips">{{ tips }}</div>
    </template>
  </ModuleBase>
</template>

<script>
import ModuleMixin from '../../common/ModuleMixin';

import { arrangeTypeList, getSortData, getOption } from '@/views/book/courseware/data/sort';

export default {
  name: 'SortPage',
  mixins: [ModuleMixin],
  data() {
    return {
      data: getSortData(),
      arrangeTypeList,
    };
  },
  computed: {
    tips() {
      return this.data.property.arrange_direction === arrangeTypeList[0].value
        ? '在下列输入顺序编号'
        : '第一列中输入顺序编号，第二列输入对应的内容';
    },
  },
  watch: {
    'data.property.option_count': {
      handler(val) {
        if (val > this.data.option_list.length) {
          for (let i = this.data.option_list.length; i < val; i++) {
            this.data.option_list.push(getOption());
          }
          return;
        }
        if (val < this.data.option_list.length) {
          this.data.option_list = this.data.option_list.slice(0, val);
        }
      },
    },
  },
  methods: {
    getSortWrapperStyle() {
      let gridTemplateAreas = '';
      let gridTemplateColumns = '';
      let gridTemplateRows = '';

      if (this.data.property.arrange_direction === arrangeTypeList[0].value) {
        let rich = '';
        let number = '';
        for (let i = 0; i < this.data.option_list.length; i++) {
          rich += `rich-${i} `;
          number += `number-${i} `;
        }
        gridTemplateAreas = `'${rich.trim()}' '${number.trim()}'`;
        gridTemplateColumns = `repeat(${this.data.option_list.length}, 1fr)`;
        gridTemplateRows = '1fr 42px';
      } else {
        gridTemplateAreas = this.data.option_list.map((_, i) => `'number-${i} rich-${i}'`).join(' ');
        gridTemplateColumns = '48px 1fr';
      }

      return {
        gridTemplateAreas,
        gridTemplateColumns,
        gridTemplateRows,
      };
    },
    getRichStyle(i) {
      let isVertical = this.data.property.arrange_direction === arrangeTypeList[1].value; // 是否竖排
      let isLast = i !== this.data.option_list.length - 1; // 是否最后一个

      let borderBottom = !isVertical || (isVertical && isLast) ? 'none' : '1px solid #ccc';
      let borderRight = !isVertical && isLast ? 'none' : '1px solid #ccc';

      return {
        borderBottom,
        borderRight,
      };
    },
    getNumberStyle(i) {
      let isVertical = this.data.property.arrange_direction === arrangeTypeList[1].value; // 是否竖排
      let isLast = i !== this.data.option_list.length - 1; // 是否最后一个

      let borderRight = (!isVertical && isLast) || isVertical ? 'none' : '1px solid #ccc';
      let borderBottom = isVertical && isLast ? 'none' : '1px solid #ccc';

      return {
        borderRight,
        borderBottom,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.sort-wrapper {
  display: grid;

  .sort-rich {
    padding: 8px;
    border: 1px solid #ccc;

    :deep p {
      margin: 0;
    }
  }

  .custom-serial-number {
    padding: 4px 0;
    border: 1px solid #ccc;

    .el-input {
      :deep &__inner {
        padding: 0 8px;
        background-color: #fff;
        border-width: 0;
      }

      &.text-center {
        :deep .el-input__inner {
          text-align: center;
        }
      }
    }
  }
}

.tips {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: #999;
}
</style>
