<template>
  <cms-edit-form-view
    v-model="inputValue"
    :modal-callback="modalCallback"
    :title="formTitle"
    :form-model="formModel"
    :label-width="labelWidth"
    :form-rules="formRules"
    :form-width="formWidth"
    :form-type="formType"
    :form-size="formSize"
    :form-title="formTitle"
    :form-collapse-item="formCollapseItem"
    :accordion="accordion"
    :before-close="beforeClose"
    :direction="direction"
    :form-config="formConfig"
    :footer="footer"
    :show-submit="showSubmit"
    :show-close-btn="showCloseBtn"
  >
    <slot></slot>
    <template slot="anchor">
      <slot name="anchor"></slot>
    </template>
    <template slot="buttons">
      <slot name="buttons"></slot>
    </template>
  </cms-edit-form-view>
</template>

<script>
import { EditFormMixin, CmsDialogFormMixin } from "./edit-form-mixin";

export default {
  name: "CmsDialogForm",
  mixins: [ EditFormMixin, CmsDialogFormMixin ],
  data() {
    return {
      dialogStyle: {},
    }
  },
  created() {
    console.log('=========this.modalConfig', this.modalConfig);
    if (this.initFun)
      this.initFun();
  },
  methods: {
    /** 提交 */
    onSubmit() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.$emit("submit", this.formModel);
        } else {
          return false;
        }
      });
    },
    /** 执行保存 */
    onSave() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.$emit("save", this.formModel);
        } else {
          return false;
        }
      });
    },
    /** 重置表单 */
    resetFields() {
      this.$refs['formRef'].resetFields();
    },
    validateField(props = [], callback) {
      this.$refs['formRef'].validateField(props, (valid) => {
        if (callback) callback(valid);
        return false
      });
    },
    clearValidate(props = []) {
      this.$refs['editForm'].clearValidate(props);
    },
    /** 执行返回 */
    onBack() {
      this.$emit("back", false, this.formModel);
    },
    onCancel() {
      this.$emit("back", false);
    },
    onFullScreen() {
      // this.$messageTips.success(window.innerHeight);
      this.dialogStyle = {
        top: 0,
        height: window.innerHeight,
        width: window.innerWidth
      }
    }
  },
  computed: {
    inputValue: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('input', value);
      }
    },
    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) {
      }
    }
  },
  props: {
    accordion: Boolean,
    beforeClose: Function,
    formCollapseItem: {
      type: Array,
      default: () => {
        return []
      }
    },
    direction: {
      type: [ String ],
      default: 'rtl'
    },
    showCloseBtn: {
      type: [ Boolean ],
      default: true
    },
    value: [ Boolean ],
  }
};
</script>

<style scoped lang="less">
.edit-form-main {
  padding: 20px 0 0 0;
}

.edit-form-page {
  padding: 20px 20px 0 0 !important;
  flex-direction: column;
}
</style>
