<template>
  <MegaDrawer
    :visible.sync="myVisible"
    :title="title"
    :wrapper-closable="false"
    append-to-body
    destroy-on-close
    :size="drawerWidth + '%!important'"
    @close="close()"
  >
    <slot name="iDialogForm">
      <i-view-form
        ref="iDialogForm"
        :form-item="formItem"
        :search-form="searchForm"
        :span="span"
      />
    </slot>
    <div class="drawer-footer">
      <a-button @click="close">
        <Icon type="icon-dir-f-rollback" :size="18" />
        {{ $t("CANCEL") }}
      </a-button>
    </div>
  </MegaDrawer>
</template>

<script>
import { Drawer as MegaDrawer, Icon } from "@mega-design/ui-vue";

export default {
  name: "IViewDialogForm",
  components: {
    MegaDrawer,
    Icon,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    drawerWidth: {
      type: Number,
      default: 25,
    },
    labelWidth: {
      type: Number,
      default: 100,
    },
    span: {
      type: Number,
      default: 1,
    },
    operation: {
      type: String,
      default: "add",
    },
    title: {
      type: String,
      default: "",
    },
    formItem: {
      type: Object,
      default: () => ({
        factoryId: {
          label: "",
          handle: () => {},
          isRequired: false,
          isShow: true,
          options: [],
          optionsProps: {
            label: "name",
            value: "id",
          },
        },
      }),
    },
    searchForm: {
      type: Object,
      default: () => {},
    },
    showFooter: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      myRules: {},
      myVisible: false,
    };
  },
  watch: {
    visible(newVal, oldVal) {
      this.myVisible = newVal;
    },
  },
  methods: {
    close() {
      if (this.$refs.iDialogForm) {
        this.$refs.iDialogForm.$refs.iForm.resetFields();
      }
      this.$emit("close", false);
    },
    confirm() {
      if (this.$refs.iDialogForm) {
        // eslint-disable-next-line
        this.$refs.iDialogForm.$refs.iForm.validate((valid) => {
          if (valid) {
            this.$emit("save", this.$refs.iDialogForm.$refs.iForm.model);
          } else {
            this.$message.error(this.$t("REQUIRED_INFO"));
            return false;
          }
        });
      } else {
        this.$emit("save");
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .i-form .form-row {
  padding: 0 !important;
}
/deep/ .drawer-footer {
  position: absolute;
  bottom: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
</style>
