<template>
  <div class="page-wrapper systerm-add">
    <div class="page-container">
      <a-collapse
        v-model="activeName"
        :bordered="false"
        expand-icon-position="right"
        class="header"
      >
        <a-collapse-panel key="a" :header="$t('BASE_INFO')">
          <a-form-model ref="addForm" :rules="rules" :model="addForm">
            <a-row :span="24">
              <a-col :span="8">
                <a-form-model-item
                  prop="tenantName"
                  :label-col="{ span: 6 }"
                  :wrapper-col="{ span: 18 }"
                  :label="$t('TENANT_NAME')"
                >
                  <a-input v-model="addForm.tenantName" allow-clear />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item
                  prop="userName"
                  :label-col="{ span: 6 }"
                  :wrapper-col="{ span: 18 }"
                  :label="$t('TENANT_ADMINISTRATOR')"
                >
                  <a-input v-model="addForm.userName" allow-clear />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item
                  prop="password"
                  :label-col="{ span: 6 }"
                  :wrapper-col="{ span: 18 }"
                  :label="$t('ADMINISTRATOR_PASSWORD')"
                >
                  <a-input
                    v-model="addForm.password"
                    type="password"
                    allow-clear
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  :label="$t('REMARK')"
                  :label-col="{ span: 2 }"
                  :wrapper-col="{ span: 22 }"
                  prop="remark"
                >
                  <a-input v-model="addForm.remark" type="textarea" />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <div class="page-bottom-op">
      <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>
  </div>
</template>
<script>
import { Icon } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";

export default {
  components: {
    Icon,
  },
  data() {
    return {
      activeName: "a",
      addForm: {
        tenantName: "",
        userName: "",
        password: "",
        remark: "",
      },
    };
  },
  computed: {
    rules() {
      return {
        tenantName: [
          {
            max: 50,
            required: true,
            message: this.$t("PLACEENTER") + 50 + this.$t("LENGTH_TIP"),
            trigger: "blur",
          },
        ],
        userName: [
          {
            max: 16,
            required: true,
            message: this.$t("PLACEENTER") + 16 + this.$t("LENGTH_TIP"),
            trigger: "blur",
          },
        ],
        password: [
          {
            max: 16,
            required: true,
            message: this.$t("PLACEENTER") + 16 + this.$t("LENGTH_TIP"),
            trigger: "change",
          },
        ],
        remark: [
          {
            max: 255,
            required: false,
            message: this.$t("PLACEENTER") + 255 + this.$t("LENGTH_TIP"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  methods: {
    confirm() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$axios
            .post(`${ApiConstant.PREFIX_CORE}/api/sys/tenant`, this.addForm)
            .then((res) => {
              this.$message.success(this.$t("ADD_SUCCESS"));
              this.$store.dispatch("tagsView/jumpBeforeView", {
                to: { path: "/upms/system/setting/tenant" },
                vm: this,
              });
            });
        }
      });
    },
    cancel() {
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: { path: "/upms/system/setting/tenant" },
        vm: this,
      });
    },
  },
};
</script>
