<template>
  <div>
    <el-form-item label="序号" class="serial-number">
      <el-input v-model="propertyObj.serial_number" @input="changeSerialNumber" />
    </el-form-item>
    <el-form-item>
      <el-radio
        v-for="{ value, label } in displayList"
        :key="value"
        v-model="propertyObj.sn_display_mode"
        :label="value"
        @input="changeDisplayMode"
      >
        {{ label }}
      </el-radio>
    </el-form-item>
    <el-form-item v-if="propertyObj.sn_style" label="序号样式">
      <SelectSerialNumberStyle
        :serial-number="propertyObj.serial_number"
        :sn-style="propertyObj.sn_style"
        :sn-background-color="propertyObj.sn_background_color"
        @changeSerialNumberStyle="changeSerialNumberStyle"
      />
    </el-form-item>
    <el-form-item label="序号位置">
      <SerialNumberPosition :position="propertyObj.sn_position" @changeNumberPosition="changeNumberPosition" />
    </el-form-item>
    <el-divider />
  </div>
</template>

<script>
import SerialNumberPosition from '@/views/book/courseware/create/components/common/SerialNumberPosition.vue';
import SelectSerialNumberStyle from '@/views/book/courseware/create/components/base/common/SelectSerialNumberStyle.vue';

import { displayList } from '@/views/book/courseware/data/common';

export default {
  name: 'SerialNumber',
  components: {
    SerialNumberPosition,
    SelectSerialNumberStyle,
  },
  inject: ['updateProperty'],
  props: {
    property: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      displayList,
      propertyObj: this.property,
    };
  },
  watch: {
    property: {
      handler(val) {
        this.propertyObj = val;
      },
      deep: true,
    },
  },
  methods: {
    /**
     * @description 改变序号
     * @param {string} val
     */
    changeSerialNumber(val) {
      this.propertyObj.serial_number = val;
      this.updateProperty('serial_number', val);
    },
    /**
     * @description 改变序号显示方式
     * @param {string} sn_display_mode
     */
    changeDisplayMode(sn_display_mode) {
      this.propertyObj.sn_display_mode = sn_display_mode;
      this.updateProperty('sn_display_mode', sn_display_mode);
    },
    /**
     * @description 改变序号位置
     * @param {string} sn_position
     */
    changeNumberPosition(sn_position) {
      this.propertyObj.sn_position = sn_position;
      this.updateProperty('sn_position', sn_position);
    },

    /**
     * @description 改变序号样式
     * @param {string} sn_style
     * @param {string} sn_background_color
     */
    changeSerialNumberStyle(sn_style, sn_background_color) {
      this.propertyObj.sn_style = sn_style;
      this.propertyObj.sn_background_color = sn_background_color;
      this.updateProperty('sn_style', sn_style);
      this.updateProperty('sn_background_color', sn_background_color);
    },
  },
};
</script>
