<template>
  <div>
    <el-form :model="property" label-width="42px">
      <SerailNumber :property="property" />

      <el-form-item class="option-serial-number" label-width="0">
        <div>选项序号</div>
        <div class="option-serial-number-list">
          <div
            v-for="(item, i) in property.serial_number_type_list"
            :key="i"
            class="option-serial-number-item"
            @dblclick="changeSerialNumberType(i, item)"
          >
            {{ computeOptionMethods[item](0) }}
          </div>
        </div>
      </el-form-item>
      <el-divider />
      <el-form-item label="列数">
        <el-input-number v-model="property.column_num" :min="2" :max="3" />
      </el-form-item>
      <el-form-item label="行数">
        <el-input-number v-model="property.row_num" :min="1" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';

import { getMatchingProperty } from '@/views/book/courseware/data/matching';
import { computeOptionMethods, serialNumberTypeList } from '@/views/book/courseware/data/common';

export default {
  name: 'MatchingSetting',
  mixins: [SettingMixin],
  data() {
    return {
      property: getMatchingProperty(),
      computeOptionMethods,
    };
  },
  methods: {
    /**
     * 获取下一个序号类型
     * @param {number} item 序号类型值
     */
    getNextSerialNumberType(item) {
      let findIndex = serialNumberTypeList.findIndex(({ value }) => value === item);
      return serialNumberTypeList[findIndex + 1]?.value || serialNumberTypeList[0].value;
    },
    /**
     * 改变序号类型
     * @param {number} index 序号类型索引
     * @param {number} item 序号类型值
     */
    changeSerialNumberType(index, item) {
      this.$set(this.property.serial_number_type_list, index, this.getNextSerialNumberType(item));
    },
  },
};
</script>

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

.el-form {
  @include setting-base;

  .option-serial-number {
    :deep .el-form-item__content {
      display: flex;
      flex-direction: column;
      row-gap: 8px;
      align-items: flex-start;

      .option-serial-number-list {
        display: flex;
        flex-wrap: wrap;
        column-gap: 8px;

        .option-serial-number-item {
          min-width: 80px;
          height: 32px;
          padding: 4px 12px;
          line-height: 26px;
          cursor: pointer;
          background-color: $fill-color;
        }
      }
    }
  }
}
</style>
