<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="select-preview" :style="getAreaStyle()">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />

    <div class="main">
      <ul class="option-list">
        <draggable v-model="data.option_list" animation="300">
          <transition-group
            class="group"
            :style="{
              flexDirection: data.property.arrange_direction === arrangeTypeList[0].value ? 'row' : 'column',
            }"
          >
            <li v-for="(item, i) in data.option_list" :key="i">
              <span class="rich-text" v-html="sanitizeHTML(item.content)"></span>
            </li>
          </transition-group>
        </draggable>
      </ul>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

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

import PreviewMixin from '../common/PreviewMixin';

export default {
  name: 'SortPreview',
  components: { draggable },
  mixins: [PreviewMixin],
  data() {
    return {
      data: getSortData(),
      arrangeTypeList,
    };
  },
  methods: {},
};
</script>

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

.select-preview {
  @include preview-base;

  .option-list {
    .group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;

      li {
        min-height: 40px;
        padding: 8px 16px;
        cursor: move;
        background: $content-color;
        border: 1px solid $content-color;
        border-radius: 4px;
      }
    }
  }
}
</style>
