<template>
  <el-card>
    <el-form
      style="padding: 20px 20px 0 0"
      class="edit-form-main"
      v-bind="$attrs"
      ref="editForm"
      :label-width="labelWidth"
      :model="formModel"
      :rules="formRules"
      :disabled="formType === 'view' || formType === 'approval'"
      :inline="true"
      v-on="listeners"
    >
      <slot></slot>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: "CmsEditFormApproval",
  data() {
    let { ...listeners } = this.$listeners;
    return {
      listeners: listeners,
    };
  },
  provide: {
    init() {
      return this.initFun;
    },
  },
  created() {},
  methods: {
    /** 提交 */
    onSubmit() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$emit("submit", this.formModel);
        } else {
          return false;
        }
      });
    },
    /** 执行保存 */
    onSave() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$emit("save", this.formModel);
        } else {
          return false;
        }
      });
    },
    /** 重置表单 */
    resetFields() {
      this.$refs.editForm.resetFields();
    },
    /** 执行返回 */
    onBack() {
      this.$emit("back", false, this.formModel);
    },
    getForm() {
      return this.$refs.editForm;
    },
    validate(callback) {
      this.$refs.editForm.validate((valid) => {
        if (callback) callback(valid);
      });
    },
    onCancel() {
      // this.$emit('formVisible', false)
      this.$emit("back", false);
    },
  },
  mounted() {},
  props: {
    initFun: {
      type: Function,
    },
    formModel: {
      required: true,
      type: Object,
      default: () => {
        return {};
      },
    },
    formRules: {
      type: Object,
      default: () => {
        return {};
      },
    },
    formType: {
      type: String,
      default: "edit",
    },
    labelWidth: {
      type: String,
      default: () => {
        return "100px";
      },
    },
  },
};
</script>

<style scoped lang="less">
/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>
