/**
 * 导入编辑表单混入
 * @type {{data(): {listeners: EditFormMixin.$listeners.listeners}, methods: {getForm(): EditFormMixin.methods.$refs.editForm, resetFields(): void, validate(*=): void}, props: {showSubmit: {default: boolean, type: BooleanConstructor}, formType: {default: string, type: StringConstructor}, formRules: {default: (function(): {}), type: ObjectConstructor}, formVisible: {default: (function(): boolean), type: BooleanConstructor, required: boolean}, footer: {type: [StringConstructor]}, formTitle: {default: (function(): string), type: StringConstructor, required: boolean}, formWidth: {default: (function(): string), type: [StringConstructor, NumberConstructor], required: boolean}, labelWidth: {default: (function(): string), type: StringConstructor}, formModel: {default: (function(): {}), type: ObjectConstructor, required: boolean}, initFun: {type: FunctionConstructor}}}}
 */
export const EditFormMixin = {
  data() {
    let { ...listeners } = this.$listeners;
    return {
      listeners: listeners,
    };
  },
  methods: {
    validate(callback) {
      this.$refs['editForm'].validate((valid) => {
        if (callback) callback(valid);
      });
    },
    validateField(props = [], callback) {
      this.$refs['editForm'].validateField(props, (valid) => {
        if (callback) callback(valid);
        return false
      });
    },
    clearValidate(props = []) {
      this.$refs['editForm'].clearValidate(props);
    },
    getForm() {
      return this.$refs['editForm'];
    },
    resetFields() {
      this.$refs['editForm'].resetFields();
    }
  },
  props: {
    formSize: {
      type: String,
      default: () => {
        return "default";
      },
    },
    footer: {
      type: [ String ],
    },
    formModel: {
      required: true,
      type: Object,
      default: () => {
        return {};
      },
    },
    formRules: {
      type: Object,
      default: () => {
        return {};
      },
    },
    showSubmit: {
      type: Boolean,
      default: false,
    },
    formType: {
      type: String,
      default: "edit",
    },
    labelWidth: {
      type: String,
      default: () => {
        return "100px";
      },
    },
  },
}

export const CmsPageFormMixin = {
  data() {
    let { ...listeners } = this.$listeners;
    return {
      listeners: listeners,
      dialogStyle: {},
    };
  },
  computed: {
    visible: {
      get() {
        return this.formVisible;
      },
      set(val) {
      },
    },
    activeNames: {
      get() {
        const list = [];
        for (let i = 0; i < this.formCollapseItem.length; i++) {
          const item = this.formCollapseItem[i];
          if (item.collapse) {
            list.push(item.name);
          }
        }
        return list;
      },
      set(val) {
        console.log('activeNames===', val)
      }
    }
  },
  props: {
    initFun: {
      type: Function,
    },
    formTitle: {
      type: String,
      default: () => {
        return "";
      },
    },
    showButtons: {
      type: Boolean,
      default: true,
    },
    accordion: {
      type: Boolean,
      default: false,
    },
    formCollapseItem: {
      type: Array,
      default: () => {
        return []
      }
    },
    footer: {
      type: [ String ],
    },
  }
}

/**
 * 导入弹出框混入对象
 * @type {{computed: {visible: {set(*), get(): CmsDialogFormMixin.computed.visible.formVisible}}}}
 */
export const CmsDialogFormMixin = {
  props: {
    showFooter: { // modal默认是否显示
      type: Boolean,
      default: () => {
        return true
      }
    },
    formTitle: { // modal 标题
      type: String,
      default: () => {
        return ''
      }
    },
    formWidth: { // modal 宽度
      type: [ String, Number ],
      default: () => {
        return '50%'
      }
    },
    formHeight: { // modal 高度
      type: [ String, Number ],
      default: '50%'
    },
    // 弹窗相关配置
    modalConfig: {
      type: Object,
      default: () => {
        return {
          showClose: true,
          fullscreen: false
        }
      }
    },
    formConfig: {
      type: Object,
      default: () => {
        return {}
      }
    },
    modalCallback: {
      type: Function,
      required: false,
      default: () => {
        return undefined
      }
    },
    formVisible: {
      required: true,
      type: Boolean,
      default: () => {
        return false;
      },
    },
    initFun: {
      type: Function,
    },
  },
  computed: {
    visible: {
      get() {
        return this.formVisible;
      },
      set(val) {
      },
    },
  },
  methods: {}
}