<template>
  <a-modal
    :open="visible"
    title="新增配置信息"
    cancelText="取消"
    okText="提交"
    @ok="submit"
    @cancel="cancel"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :rules="formRules"
      layout="vertical"
    >
      <a-row :gutter="[16, 0]">
        <a-col :span="24">
          <a-form-item ref="name" label="描述" name="name">
            <a-textarea v-model:value="formState.name" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="code" label="编号" name="code">
            <a-input v-model:value="formState.code" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            ref="collectionType"
            label="集合类型"
            name="collectionType"
          >
            <a-select
              v-model:value="formState.collectionType"
              :options="configCollectionType"
              @change="configCollectionTypeChanged"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="valueType" label="值类型" name="valueType">
            <a-select
              v-model:value="formState.valueType"
              :options="configValueType"
              @change="valueTypeChanged"
            />
          </a-form-item>
        </a-col>

        <template v-if="formState.collectionType === 'Single'">
          <p>Single</p>
          <!-- 单值-Interage：代表 数字框-->
          <!-- 单值-String：代表 文本框-->
          <!-- 单值-Bool：代表 开关-->
          <!-- 单值-日期：代表 时间选择器-->
          <template v-if="formState.valueType === 'STRING'">
            <a-form-item ref="" label="值" name="value">
              <a-textarea v-model:value="formState.value" />
            </a-form-item>
          </template>
          <template v-else-if="formState.valueType === 'INT'">
            <a-form-item ref="" label="值" name="value">
              <a-input v-model:value="formState.value" />
            </a-form-item>
          </template>
          <template v-else-if="formState.valueType === 'BOOLEAN'">
            <a-form-item ref="" label="值" name="value">
              <a-input v-model:value="formState.value" />
            </a-form-item>
          </template>
          <template v-else-if="formState.valueType === 'DATE'">
            <a-form-item ref="" label="值" name="value">
              <a-input v-model:value="formState.value" />
            </a-form-item>
          </template>
        </template>

        <template v-else-if="formState.collectionType === 'Map'">
          <p>Map</p>
          <!-- 单值-Interage：代表 数字框 数字选择器-->
          <!-- 单值-String：代表 文本框  输入框-->
          <!-- 单值-Bool：代表 开关 -->
          <!-- 单值-日期：代表 时间选择器-->
          <template v-if="formState.valueType === 'INT'">
            <p>INT</p>
            <a-form-item
              v-for="(domain, index) in formState.domains"
              :key="domain.key"
              v-bind="index === 0 ? formItemLayout : {}"
              :label="index === 0 ? 'Domains' : 'Domains'"
              :name="['domains', index, 'value']"
              :rules="{
                required: true,
                message: 'domain can not be null',
                trigger: 'change',
              }"
            >
              <a-row>
                <a-col :span="6">
                  <a-input v-model:value="domain.name" placeholder="name" />
                </a-col>
                <a-col :span="8">
                  <a-input v-model:value="domain.value" placeholder="value" />
                </a-col>
              </a-row>
            </a-form-item>
            <a-form-item v-bind="formItemLayoutWithOutLabel">
              <a-row>
                <a-col :span="8"></a-col>
                <a-col :span="8"></a-col>
                <a-col :span="8">
                  <a-button type="dashed" style="" @click="addDomain">
                    <PlusOutlined />Add
                  </a-button>
                </a-col>
              </a-row>
            </a-form-item>
          </template>
          <template v-else-if="formState.valueType === 'BOOLEAN'">
            <p>BOOLEAN</p>
            <!-- <p>BOOLEAN {{formState.valueType}}</p> -->
            <a-form-item
              v-for="(domain, index) in formState.domains"
              :key="domain.key"
              v-bind="index === 0 ? formItemLayout : {}"
              :label="index === 0 ? 'Domains' : 'Domains'"
              :name="['domains', index, 'value']"
              :rules="{
                required: true,
                message: 'domain can not be null',
                trigger: 'change',
              }"
            >
              <a-row>
                <a-col :span="8">
                  <a-input v-model:value="domain.name" placeholder="name" />
                </a-col>
                <a-col :span="8">
                  <a-input v-model:value="domain.value" placeholder="value" />
                </a-col>
              </a-row>
            </a-form-item>
            <a-form-item v-bind="formItemLayoutWithOutLabel">
              <a-row>
                <a-col :span="8"></a-col>
                <a-col :span="8"></a-col>
                <a-col :span="8">
                  <a-button type="dashed" style="" @click="addDomain">
                    <PlusOutlined />Add
                  </a-button>
                </a-col>
              </a-row>
            </a-form-item>
          </template>
          <template v-else-if="formState.valueType === 'DATE'">
            <p>DATE</p>
            <a-form-item
              v-for="(domain, index) in formState.domains"
              :key="domain.key"
              v-bind="index === 0 ? formItemLayout : {}"
              :label="index === 0 ? 'Domains' : 'Domains'"
              :name="['domains', index, 'value']"
              :rules="{
                required: true,
                message: 'domain can not be null',
                trigger: 'change',
              }"
            >
              <a-row>
                <a-col :span="8">
                  <a-input v-model:value="domain.name" placeholder="name" />
                </a-col>
                <a-col :span="8">
                  <a-input v-model:value="domain.value" placeholder="value" />
                </a-col>
              </a-row>
            </a-form-item>
            <a-form-item v-bind="formItemLayoutWithOutLabel">
              <a-row>
                <a-col :span="8"></a-col>
                <a-col :span="8"></a-col>
                <a-col :span="8">
                  <a-button type="dashed" style="" @click="addDomain">
                    <PlusOutlined />Add
                  </a-button>
                </a-col>
              </a-row>
            </a-form-item>
          </template>
          <template v-else>
            <p>STRING</p>
            <a-form-item
              v-for="(domain, index) in formState.domains"
              :key="domain.key"
              v-bind="index === 0 ? formItemLayout : {}"
              :label="index === 0 ? 'Domains' : 'Domains'"
              :name="['domains', index, 'value']"
              :rules="{
                required: true,
                message: 'domain can not be null',
                trigger: 'change',
              }"
            >
              <a-row>
                <a-col :span="8">
                  <a-input v-model:value="domain.name" placeholder="name" />
                </a-col>
                <a-col :span="8">
                  <a-input v-model:value="domain.value" placeholder="value" />
                </a-col>
              </a-row>
            </a-form-item>
            <a-form-item v-bind="formItemLayoutWithOutLabel">
              <a-row>
                <a-col :span="8"></a-col>
                <a-col :span="8"></a-col>
                <a-col :span="8">
                  <a-button type="dashed" style="" @click="addDomain">
                    <PlusOutlined />Add
                  </a-button>
                </a-col>
              </a-row>
            </a-form-item>
          </template>
        </template>
        <template v-else-if="formState.collectionType === 'List'">
          <p>List</p>
          <!-- 单值-Interage：代表 数字框-->
          <!-- 单值-String：代表 文本框-->
          <!-- 单值-Bool：代表 开关-->
          <!-- 单值-日期：代表 时间选择器-->
          <template v-if="formState.valueType === 'STRING'">
            <p>STRING</p>
            <a-form-item
              v-for="(domain, index) in formState.domains"
              :key="domain.key"
              v-bind="index === 0 ? formItemLayout : {}"
              :label="index === 0 ? 'Domains' : 'Domains'"
              :name="['domains', index, 'value']"
              :rules="{
                required: true,
                message: 'domain can not be null',
                trigger: 'change',
              }"
            >
              <a-row>
                <a-col :span="8">
                  <a-input v-model:value="domain.name" placeholder="name" />
                </a-col>
                <a-col :span="8">
                  <a-input v-model:value="domain.value" placeholder="value" />
                </a-col>
              </a-row>
            </a-form-item>
            <a-form-item v-bind="formItemLayoutWithOutLabel">
              <a-row>
                <a-col :span="8"></a-col>
                <a-col :span="8"></a-col>
                <a-col :span="8">
                  <a-button type="dashed" style="" @click="addDomain">
                    <PlusOutlined />Add
                  </a-button>
                </a-col>
              </a-row>
            </a-form-item>
          </template>
          <template v-else-if="formState.valueType === 'INT'">
            <p>INT</p>
            <a-form-item
              v-for="(domain, index) in formState.domains"
              :key="domain.key"
              v-bind="index === 0 ? formItemLayout : {}"
              :label="index === 0 ? 'Domains' : 'Domains'"
              :name="['domains', index, 'value']"
              :rules="{
                required: true,
                message: 'domain can not be null',
                trigger: 'change',
              }"
            >
              <a-row>
                <a-col :span="8">
                  <a-input v-model:value="domain.name" placeholder="name" />
                </a-col>
                <a-col :span="8">
                  <a-input v-model:value="domain.value" placeholder="value" />
                </a-col>
              </a-row>
            </a-form-item>
            <a-form-item v-bind="formItemLayoutWithOutLabel">
              <a-row>
                <a-col :span="8"></a-col>
                <a-col :span="8"></a-col>
                <a-col :span="8">
                  <a-button type="dashed" style="" @click="addDomain">
                    <PlusOutlined />Add
                  </a-button>
                </a-col>
              </a-row>
            </a-form-item>
          </template>

          <template v-else-if="formState.valueType === 'BOOLEAN'">
            <p>BOOLEAN</p>
            <a-form-item
              v-for="(domain, index) in formState.domains"
              :key="domain.key"
              v-bind="index === 0 ? formItemLayout : {}"
              :label="index === 0 ? 'Domains' : 'Domains'"
              :name="['domains', index, 'value']"
              :rules="{
                required: true,
                message: 'domain can not be null',
                trigger: 'change',
              }"
            >
              <a-row>
                <a-col :span="8">
                  <a-input v-model:value="domain.name" placeholder="name" />
                </a-col>
                <a-col :span="8">
                  <a-input v-model:value="domain.value" placeholder="value" />
                </a-col>
              </a-row>
            </a-form-item>
            <a-form-item v-bind="formItemLayoutWithOutLabel">
              <a-row>
                <a-col :span="8"></a-col>
                <a-col :span="8"></a-col>
                <a-col :span="8">
                  <a-button type="dashed" style="" @click="addDomain">
                    <PlusOutlined />Add
                  </a-button>
                </a-col>
              </a-row>
            </a-form-item>
          </template>
          <template v-else-if="formState.valueType === 'DATE'">
            <p>DATE</p>
            <a-form-item
              v-for="(domain, index) in formState.domains"
              :key="domain.key"
              v-bind="index === 0 ? formItemLayout : {}"
              :label="index === 0 ? 'Domains' : 'Domains'"
              :name="['domains', index, 'value']"
              :rules="{
                required: true,
                message: 'domain can not be null',
                trigger: 'change',
              }"
            >
              <a-row>
                <a-col :span="8">
                  <a-input v-model:value="domain.name" placeholder="name" />
                </a-col>
                <a-col :span="8">
                  <a-input v-model:value="domain.value" placeholder="value" />
                </a-col>
              </a-row>
            </a-form-item>
            <a-form-item v-bind="formItemLayoutWithOutLabel">
              <a-row>
                <a-col :span="8"></a-col>
                <a-col :span="8"></a-col>
                <a-col :span="8">
                  <a-button type="dashed" style="" @click="addDomain">
                    <PlusOutlined />Add
                  </a-button>
                </a-col>
              </a-row>
            </a-form-item>
          </template>
        </template>
        <template v-else>
          <!-- 单值-Interage：代表 数字框-->
          <!-- 单值-String：代表 文本框-->
          <!-- 单值-Bool：代表 开关-->
          <!-- 单值-日期：代表 时间选择器-->
          <!--Map 对 string -->
          <!--Map 对 Interage   -->
          <!--List 对 string -->
          <!--List 对 Interage   -->
        </template>
        <!-- <a-form-item v-for="(domain, index) in formState.domains" :key="domain.key"
        v-bind="index === 0 ? formItemLayout : {}" :label="index === 0 ? 'Domains' : 'Domains'"
        :name="['domains', index, 'value']" :rules="{
              required: true,
              message: 'domain can not be null',
              trigger: 'change',
            }">
        <a-row>
          <a-col :span="8">
            <a-input v-model:value="domain.name" placeholder="请输入键" /></a-col>
          <a-col :span="8">
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item v-bind="formItemLayoutWithOutLabel">
        <a-row>
          <a-col :span="8"></a-col>
          <a-col :span="8"></a-col>
          <a-col :span="8">
            <a-button type="dashed" style="" @click="addDomain">
              <PlusOutlined />Add
            </a-button>
          </a-col>
        </a-row>
      </a-form-item> -->

        <!-- <a-form-item label="状态" name="enable">
        <a-switch v-model:checked="formState.enable" />
      </a-form-item> -->
        <a-col :span="24">
          <a-form-item label="备注" name="remark">
            <a-textarea v-model:value="formState.remark" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script>
import { message } from "@hwork/ant-design-vue";
import { addConfig } from "@/api/module/config";
import { defineComponent, reactive, ref, toRaw } from "vue";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
    },
  },
  emit: ["close"],
  setup(props, context) {
    const formRef = ref();

    const formState = reactive({
      domains: [],
      sort: 0,
      enable: "true",
    });

    const formRules = {
      name: [
        {
          required: true,
          message: "请输入名称",
          trigger: "blur",
        },
      ],
      code: [
        {
          required: true,
          message: "请输入键",
          trigger: "blur",
        },
      ],
      valueType: [
        {
          required: true,
          message: "请选择值类型",
          trigger: "blur",
        },
      ],
      collectionType: [
        {
          required: true,
          message: "请选择集合类型",
          trigger: "blur",
        },
      ],
    };
    const formItemLayout = {
      labelCol: {
        xs: {
          span: 4,
        },
        sm: {
          span: 4,
        },
      },
      wrapperCol: {
        xs: {
          span: 4,
        },
        sm: {
          span: 12,
        },
      },
    };
    const formItemLayoutWithOutLabel = {
      wrapperCol: {
        xs: {
          span: 12,
          offset: 0,
        },
        sm: {
          span: 12,
          offset: 4,
        },
      },
    };

    const removeDomain = (item) => {
      let index = formState.domains.indexOf(item);
      if (index !== -1) {
        formState.domains.splice(index, 1);
      }
    };

    const configCollectionTypeChanged = function (e) {
      formState.domain = [];
    };
    const valueTypeChanged = function (e) {
      formState.domain = [];
      if (
        formState.collectionType === "" ||
        formState.collectionType === undefined
      )
        return;
      if (formState.valueType === "" || formState.valueType === undefined)
        return;
      // switch(formState.collectionType){
      //  case "Single": break;
      //  case "Map":
      //    if(formState.valueType==="STRING"){
      //      formState.domains.push("");//插入一个空字符
      //    }else if(formState.valueType==="BOOLEAN"){
      //      formState.domains.push(true);
      //    }else if(formState.valueType==="INT"){
      //      formState.domains.push(0);
      //    }
      //    else if(formState.valueType==="DATE"){

      //    }else break;
      //     case "List":break;
      //   default:break;
      // }
      if (formState.domains) console.log("valueTypeChanged", e);
      console.log("valueTypeChanged", e.value);
    };

    const addDomain = () => {
      formState.domains.push({
        value: "",
        name: "",
        key: Date.now(),
      });
    };

    const configValueType = ref([
      {
        value: "STRING",
        label: "字符串类型",
      },
      {
        value: "BOOLEAN",
        label: "boolean类型",
      },
      {
        value: "INT",
        label: "Int数据类型",
      },
      {
        value: "DATE",
        label: "日期类型",
      },
    ]);

    const configCollectionType = ref([
      {
        value: "Single",
        label: "单个值对象",
      },
      {
        value: "Map",
        label: "Map数据字典",
      },
      {
        value: "List",
        label: "list集合",
      },
    ]);

    const key = "addConfig";
    const submit = (e) => {
      console.log("提交", e);
      let row = toRaw(formState);
      console.log("提交的数据", row);
      formRef.value
        .validate()
        .then(() => {
          addConfig(toRaw(formState)).then((response) => {
            if (response.success) {
              message
                .success({
                  content: "保存成功",
                  duration: 1,
                })
                .then(() => {
                  cancel();
                });
            } else {
              message
                .success({
                  content: "保存失败",
                  duration: 1,
                })
                .then(() => {
                  cancel();
                });
            }
          });
        })
        .catch((error) => {
          console.log("error", error);
        });
    };

    const cancel = (e) => {
      formRef.value.resetFields();
      context.emit("close", false);
    };

    return {
      submit,
      cancel,
      formRef,
      formState,
      formRules,
      configCollectionType,
      configValueType,
      addDomain,
      removeDomain,
      valueTypeChanged,
      formItemLayoutWithOutLabel,
      configCollectionTypeChanged,
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 12,
      },
    };
  },
});
</script>

<style>
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}

.dynamic-delete-button:hover {
  color: #777;
}

.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>
