// 组件混入
import Vue from 'vue';
import ModuleBase from './ModuleBase.vue';
import RichText from '@/components/RichText.vue';

import { displayList, viewMethodList, isEnable } from '@/views/book/courseware/data/common';
import { ContentSaveCoursewareComponentContent, ContentGetCoursewareComponentContent } from '@/api/book';

const mixin = {
  data() {
    return {
      displayList,
      viewMethodList,
      isEnable,
      property: {
        isGetContent: false, // 是否已获取内容
      },
      borderColorObj: Vue.observable({ value: this.borderColor }), // 边框颜色
    };
  },
  props: {
    id: {
      type: String,
      required: true,
    },
    deleteComponent: {
      type: Function,
      required: true,
    },
    componentMove: {
      type: Function,
      required: true,
    },
    borderColor: {
      type: String,
      required: true,
    },
  },
  components: {
    ModuleBase,
    RichText,
  },
  provide() {
    return {
      showSetting: this.showSetting,
      id: this.id,
      deleteComponent: this.deleteComponent,
      handleComponentMove: this.handleComponentMove,
      property: this.property,
      borderColor: this.borderColorObj,
    };
  },
  watch: {
    borderColor(newVal) {
      this.borderColorObj.value = newVal;
    },
  },
  inject: ['courseware_id'],
  created() {
    ContentGetCoursewareComponentContent({ courseware_id: this.courseware_id, component_id: this.id }).then(
      ({ content }) => {
        if (content) {
          this.data = JSON.parse(content);
          this.property.isGetContent = true;
        }

        this.$watch(
          'data',
          () => {
            this.$emit('changeData');
          },
          { deep: true },
        );
      },
    );

    // 初始化 mind_map.node_list[0].id
    if (!this.data?.mind_map?.node_list?.[0]?.id) {
      this.data.mind_map = this.data.mind_map ?? {};
      this.data.mind_map.node_list = this.data.mind_map.node_list ?? [{}];
      this.data.mind_map.node_list[0].id = this.id;
    }
  },
  methods: {
    /**
     * @description 显示设置
     */
    showSetting() {
      this.$emit('showSetting', this.data.property, this.data.type, this.id);
    },
    /**
     * @description 更新属性
     * @param {object} setting 属性
     * @param {string} type 属性类型
     */
    updateSetting(property) {
      this.data.property = property;
    },
    handleComponentMove(data) {
      this.componentMove({ ...data, id: this.id });
    },
    saveCoursewareComponentContent() {
      ContentSaveCoursewareComponentContent({
        courseware_id: this.courseware_id,
        component_id: this.id,
        component_type: this.data.type,
        content: JSON.stringify(this.data),
      });
    },
  },
};

export default mixin;