<template>
  <!-- ADD EDIT的 抽屉 -->
  <MegaDrawer
    append-to-body
    :title="$t(title)"
    :visible.sync="drawer"
    width="520"
    @close="drawerClose"
  >
    <template slot="main">
      <a-form-model
        ref="menuForm"
        layout="vertical"
        :model="menuForm"
        :rules="menuFormRules"
      >
        <a-form-model-item
          v-if="menuForm.parentName"
          :label="$t('PARENT_NAME')"
          prop="parentName"
        >
          <a-input
            v-model="menuForm.parentName"
            disabled
            allow-clear
            :placeholder="$t('PLACEENTER')"
          />
        </a-form-model-item>
        <a-form-model-item :label="$t('DEPARTMENT_CODE')" prop="orgCode">
          <a-input
            v-model="menuForm.orgCode"
            allow-clear
            :placeholder="$t('PLACEENTER')"
          />
        </a-form-model-item>
        <a-form-model-item :label="$t('DEPARTMENT_NAME')" prop="orgName">
          <a-input
            v-model="menuForm.orgName"
            allow-clear
            :placeholder="$t('PLACEENTER')"
          />
        </a-form-model-item>
        <a-form-model-item
          :label="$t('DEPARTMENT_FULL_NAME')"
          prop="orgNameFull"
        >
          <a-input
            v-model="menuForm.orgNameFull"
            allow-clear
            :placeholder="$t('PLACEENTER')"
          />
        </a-form-model-item>
        <a-form-model-item :label="$t('EXTERNAL_CODE')" prop="extCode">
          <a-input
            v-model="menuForm.extCode"
            allow-clear
            :placeholder="$t('PLACEENTER')"
          />
        </a-form-model-item>
        <!-- 角色 -->
        <a-form-model-item :label="$t('ROLE')" prop="rolesIds">
          <!-- 选择角色 -->
          <SelectRole
            ref="selectRoleRef"
            row-key="id"
            show-key="roleName"
            :default-selected-rows="roleIdList"
            style="position: relative"
            @confirm="getReturnData"
          />
        </a-form-model-item>
        <a-form-model-item :label="$t('ORDER')" prop="seq">
          <a-input-number v-model="menuForm.seq" style="width: 100%" :min="0" />
        </a-form-model-item>
      </a-form-model>
    </template>
    <footer slot="footer">
      <div class="drawer_btns">
        <a-button type="primary" @click="confirm">
          <Icon type="icon-cur-save_1" :size="18" /> {{ $t("SAVE") }}
        </a-button>
        <a-button @click="cancel">
          <Icon type="icon-dir-f-rollback" :size="18" /> {{ $t("CANCEL") }}
        </a-button>
      </div>
    </footer>
  </MegaDrawer>
</template>

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

export default {
  name: "DepaDrawer",
  components: {
    MegaDrawer,
    SelectRole,
    Icon,
  },
  props: {
    menuForm: {
      type: Object,
      default: null,
    },
    menuFormRules: {
      type: Object,
      default: null,
    },
    drawer: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    cancel: {
      type: Function,
      default: () => {},
    },
    confirm: {
      type: Function,
      default: () => {},
    },
    selectChange: {
      type: Function,
      default: () => {},
    },
    drawerClose: {
      type: Function,
      default: () => {},
    },
    roleIdList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    getReturnData(keys, rows) {
      this.$emit("returnData", keys, rows);
    },
  },
};
</script>

<style scoped>
.a-input-number--medium {
  width: 100% !important;
}
</style>
