<template>
  <cms-modal
    v-model="visible"
    :closable="false"
    :footer="footer"
    :modal-height="formHeight"
    :modal-width="formWidth"
    :modal-title="formTitle"
    :show-footer="showFooter"
    :modal-callback="modalCallback"
    @onCancel="onCancel"
  >
    <cms-edit-form
      v-bind="$attrs"
      ref="formRef"
      :label-width="labelWidth"
      :form-model="formModel"
      :form-rules="formRules"
      :form-type="formType"
      v-on="listeners">
      <slot></slot>
    </cms-edit-form>
    <template slot="footer">
      <slot name="buttons">
        <cms-button
          type="primary"
          v-if="showSubmit && !(formType === 'view' || formType === 'approval')"
          @click="onSubmit">
          <span>{{ $t("common.button.submit") }}</span>
        </cms-button>
        <cms-button
          @click="onSave"
          v-if="!(formType === 'view' || formType === 'approval')"
          type="primary">
          <span>{{ $t("common.button.save") }}</span>
        </cms-button>
        <cms-button type="info" @click="onBack">
          <span>{{ $t("common.button.back") }}</span>
        </cms-button>
      </slot>
    </template>
  </cms-modal>
</template>

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

export default {
  name: "CmsDialogForm",
  mixins: [ EditFormMixin, CmsDialogFormMixin ],
  data() {
    return {
      dialogStyle: {},
    }
  },
  created() {
    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();
    },
    /** 执行返回 */
    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
      }
    }
  }
};
</script>

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

/deep/ .ant-card-body {
  padding: 0 !important;
  position: static;
}

/deep/ .ant-modal-footer {
  padding: 10px;
  text-align: right;
  background: transparent;
  border-top: 1px solid #f0f0f0;
  border-radius: 0 0 4px 4px;
}

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

/deep/ .ant-modal-body {
  padding: 0 !important;
}

/deep/ .ant-card-bordered {
  border: 0;
}
</style>
