<template>
  <div class="page-wrapper equipment-add">
    <div class="page-container">
      <a-form-model
        ref="addForm"
        :model="addForm"
        label-position="right"
        class="addForm"
      >
        <a-collapse
          v-model="activeName"
          :bordered="false"
          expand-icon-position="right"
          class="collapse-header-divide"
        >
          <a-collapse-panel key="a" :header="$t('BASE_INFO')">
            <a-row>
              <a-col :span="8">
                <a-form-model-item
                  prop="componentName"
                  :label-col="{ span: 6 }"
                  :wrapper-col="{ span: 12 }"
                  :rules="[
                    {
                      required: true,
                      message: $t('PLACEENTER'),
                      trigger: 'blur',
                    },
                  ]"
                  :label="$t('COMPONENT_NAME')"
                >
                  <a-input
                    v-model="addForm.componentName"
                    :placeholder="$t('PLACEENTER')"
                    allow-clear
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item
                  prop="componentKey"
                  :label-col="{ span: 6 }"
                  :wrapper-col="{ span: 12 }"
                  :rules="[
                    {
                      required: true,
                      message: $t('PLACEENTER'),
                      trigger: 'blur',
                    },
                  ]"
                  :label="$t('COMPONENT_IDENTIFICATION')"
                >
                  <a-input
                    v-model="addForm.componentKey"
                    :placeholder="$t('PLACEENTER')"
                    allow-clear
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item
                  prop="category"
                  :label-col="{ span: 6 }"
                  :wrapper-col="{ span: 12 }"
                  :rules="[
                    {
                      required: true,
                      message: $t('PLACEENTER'),
                      trigger: 'blur',
                    },
                  ]"
                  :label="$t('TAGCATEGORY_LABEL')"
                >
                  <a-select
                    v-model="addForm.category"
                    :placeholder="$t('PLACESELECT')"
                  >
                    <a-select-option
                      v-for="item in flowList"
                      :key="item.value"
                      :value="item.value"
                      >{{ item.label }}</a-select-option
                    >
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
        <a-collapse
          v-model="activeNameB"
          :bordered="false"
          expand-icon-position="right"
          class="collapse-header-divide"
        >
          <a-collapse-panel key="b" :header="$t('DETAILS_INFO')">
            <a-row>
              <a-col :span="8">
                <a-form-model-item
                  prop="componentClass"
                  :label-col="{ span: 6 }"
                  :wrapper-col="{ span: 12 }"
                  :label="$t('COMPONENT_CLASS_NAME')"
                >
                  <a-input
                    v-model="addForm.componentClass"
                    :placeholder="$t('PLACEENTER')"
                    allow-clear
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-model-item
                  prop="componentDescription"
                  :label-col="{ span: 2 }"
                  :wrapper-col="{ span: 22 }"
                  :label="$t('COMPONENT_DESCRIPATION')"
                >
                  <a-input
                    v-model="addForm.componentDescription"
                    :placeholder="$t('PLACEENTER')"
                    allow-clear
                    type="textarea"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-model-item
                  prop="inputClass"
                  :label-col="{ span: 6 }"
                  :wrapper-col="{ span: 12 }"
                  :label="$t('INPUT_CLASS_NAME')"
                >
                  <a-input
                    v-model="addForm.inputClass"
                    :placeholder="$t('PLACEENTER')"
                    allow-clear
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-model-item
                  prop="inputDescription"
                  :label-col="{ span: 2 }"
                  :wrapper-col="{ span: 22 }"
                  :label="$t('ENTRY_DESCRIPTION')"
                >
                  <a-input
                    v-model="addForm.inputDescription"
                    :placeholder="$t('PLACEENTER')"
                    allow-clear
                    type="textarea"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-model-item
                  prop="outputClass"
                  :label-col="{ span: 6 }"
                  :wrapper-col="{ span: 12 }"
                  :label="$t('PARAMETER_CLASS_NAME')"
                >
                  <a-input
                    v-model="addForm.outputClass"
                    :placeholder="$t('PLACEENTER')"
                    allow-clear
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-model-item
                  prop="outputDescription"
                  :label-col="{ span: 2 }"
                  :wrapper-col="{ span: 22 }"
                  :label="$t('PARAMETER_DESCRIPTION')"
                >
                  <a-input
                    v-model="addForm.outputDescription"
                    :placeholder="$t('PLACEENTER')"
                    allow-clear
                    type="textarea"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-model-item
                  prop="remark"
                  :label-col="{ span: 2 }"
                  :wrapper-col="{ span: 22 }"
                  :label="$t('REMARK')"
                >
                  <a-input
                    v-model="addForm.remark"
                    :placeholder="$t('PLACEENTER')"
                    allow-clear
                    type="textarea"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
      </a-form-model>
    </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",
      activeNameB: "b",
      flowList: [],
      addForm: {
        componentName: "", // 组件名称
        componentKey: "", // 组件标识
        category: "", // 	分类
        componentClass: "", // 组件类名
        componentDescription: "", // 组件描述
        inputClass: "", // 入参类名
        inputDescription: "", // 入参描述
        outputClass: "", // 出参类名
        outputDescription: "", // 出参描述
        remark: "", // 备注
      },
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      // 数据字典分类
      this.getDictByCode("DIC:SYS:FLOW_CATEGORY").then((res) => {
        this.flowList = res.data.data;
      });
    },
    cancel() {
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: { path: "/upms/operationFlow/businessComponent" },
        vm: this,
      });
    },
    confirm() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$axios
            .post(
              `${ApiConstant.PREFIX_CORE}/api/sys/flow-component`,
              this.addForm
            )
            .then((res) => {
              this.$message.success(this.$t("ADD_SUCCESS"));
              this.$store.dispatch("tagsView/jumpBeforeView", {
                to: { path: "/upms/operationFlow/businessComponent" },
                vm: this,
              });
            });
        } else {
          this.$message.error(this.$t("REQUIRED_INFO"));
        }
      });
    },
  },
};
</script>
