<template>
  <a-modal
    :visible="true"
    :width="1200"
    title="配置信息"
    @cancel="handcancel(thethis)"
    :footer="null"
  >
    <a-spin :spinning="false">
      <a-form-model
        ref="ruleForm"
        :model="form"
        v-bind="formLayout"
        :rules="rules"
      >
        <a-form-model-item style="display: none">
          <a-input
            allow-clear
            autocomplete="off"
            v-decorator="['operateType']"
            type="hidden"
          />
        </a-form-model-item>
        <a-row class="form-row" :gutter="[16, 0]">
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-model-item label="Id" prop="id">
              <a-input
                placeholder="Id"
                :disabled="isModify"
                v-model="form.id"
                :min="1"
                :max="2147483647"
                type="number"
              />
            </a-form-model-item>
          </a-col>
          <!-- 姓名 -->
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-model-item label="名字" prop="name">
              <a-input placeholder="名字" v-model="form.name" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-card class="card" :title="'值信息'" :bordered="false" size="small">
          <a slot="extra" href="javascript:void(0)" @click="addNewItem">新增</a>
          <a-row>
            <template v-if="form && form.valueList">
              <div :key="index" v-for="(value, index) in form.valueList">
                <a-col :lg="7" :md="7" :sm="24">
                  <a-form-model-item label="说明" prop="name">
                    <a-input placeholder="说明" v-model="value.name" />
                  </a-form-model-item>
                </a-col>
                <a-col :lg="7" :md="7" :sm="24">
                  <a-form-model-item label="枚举值" prop="value">
                    <a-input placeholder="枚举值" v-model="value.value" />
                  </a-form-model-item>
                </a-col>
                <a-col :lg="7" :md="7" :sm="24">
                  <a-form-model-item label="排序" prop="sort">
                    <a-input-number
                      placeholder="排序"
                      v-model="value.sort"
                      :min="1"
                      :max="2147483647"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :lg="3" :md="3" :sm="24">
                  <a-form-model-item>
                    <a-button
                      type="danger"
                      @click="removeItem(index)"
                      style="height: 44px"
                    >
                      移除
                    </a-button>
                  </a-form-model-item>
                </a-col>
                <a-divider />
              </div>
            </template>
          </a-row>
        </a-card>
        <!-- 提交和重置 -->
        <a-row>
          <a-col :lg="24" :md="24" :sm="24">
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="primary" @click="on_Submit"> 提交 </a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
import {
  formLayout,
  rules,
  isHaveData,
  handcancel,
  LimitLength,
} from "@/common/components/Commonality/Form/js/form.js";
import { getModify, modify } from "@/baseConfigComponents/api/enum.js";
export default {
  props: ["data", "that", "refresh"],
  mounted() {
    if (this.data) {
      this.form.status = !this.form.status;
      getModify(this.data).then((res) => {
        if (res) {
          this.isModify = true;
          this.form = res.data;
        }
      });
    } else {
      this.isModify = false;
      this.form = {
        id: 0,
        valueList: [],
      };
    }
  },
  data() {
    this.thethis = this;
    return {
      isModify: false,
      // 布局
      formLayout,
      // 表单初始格式
      form: {
        id: 0,
        name: "",
        valueList: undefined,
      },
      // 验证规则
      rules: {
        name: [rules.required],
        Id: [rules.required],
      },
    };
  },

  methods: {
    addNewItem() {
      if (!this.form.valueList) {
        this.form.valueList = [];
      }
      console.log(this.form.valueList);
      this.form.valueList.push({
        name: "",
        value: "",
        sort: 0,
      });
    },
    removeItem(index) {
      this.form.valueList.splice(index, 1);
    },
    // 关闭
    handcancel,
    clearInfo() {
      this.form = {
        id: 0,
        name: "",
        valueList: [],
      };
    },
    // 提交（更改）表单
    on_Submit(type) {
      var that = this;
      // 提示框确认
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          that.info = { ...that.form };
          modify(that.info.id, that.info).then((res) => {
            that.$message.success("操作成功");
            that.$emit("refresh");
            that.handcancel(that);
          });
        }
      });
    },
  },
  components: {},
};
</script>
