<template>
  <a-card :bordered="false" size="small">
    <a-spin :spinning="spinning">
      <a-form-model
        :model="formData"
        :rules="rules"
        ref="myForm"
        :style="{ width: '100%' }"
        layout="horizontal"
        v-bind="{
          labelCol: { span: 4 },
          wrapperCol: { span: 20 },
        }"
        :colon="true"
        labelAlign="right"
      >
        <a-row style="height: 100%">
          <a-col :span="8">
            <a-form-model-item label="项目名称" prop="projectName" v-bind="{}">
              <a-input
                v-model="formData.projectName"
                placeholder=""
                :allowClear="true"
                size="default"
                :disabled="false"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item
              label="项目名称"
              prop="projectNameChinese"
              v-bind="{}"
            >
              <a-input
                v-model="formData.projectNameChinese"
                placeholder=""
                :allowClear="true"
                size="default"
                :disabled="false"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目包名" prop="basePackage" v-bind="{}">
              <a-input
                v-model="formData.basePackage"
                placeholder=""
                :allowClear="true"
                size="default"
                :disabled="false"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="版本" prop="version" v-bind="{}">
              <a-input
                v-model="formData.version"
                placeholder=""
                :allowClear="true"
                size="default"
                :disabled="false"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="作者" prop="author" v-bind="{}">
              <a-input
                v-model="formData.author"
                placeholder=""
                :allowClear="true"
                size="default"
                :disabled="false"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="数据库类型" prop="dbType" v-bind="{}">
              <a-select
                v-model="formData.dbType"
                mode="default"
                :showSearch="true"
                placeholder=""
                size="default"
                :disabled="false"
              >
                <a-select-option
                  v-for="(opt, idx) in dbType_options"
                  :key="idx"
                  :value="opt.value"
                >
                  {{ opt.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item
              label="数据库主机地址"
              prop="dbAddress"
              v-bind="{}"
            >
              <a-input
                v-model="formData.dbAddress"
                placeholder=""
                :allowClear="true"
                size="default"
                :disabled="false"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="数据库主机地址" prop="dbPort" v-bind="{}">
              <a-input
                v-model="formData.dbPort"
                placeholder=""
                :allowClear="true"
                size="default"
                :disabled="false"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="数据库名称" prop="dbName" v-bind="{}">
              <a-input
                v-model="formData.dbName"
                placeholder=""
                :allowClear="true"
                size="default"
                :disabled="false"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="数据库账号" prop="dbUser" v-bind="{}">
              <a-input
                v-model="formData.dbUser"
                placeholder=""
                :allowClear="true"
                size="default"
                :disabled="false"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="数据库密码" prop="dbPwd" v-bind="{}">
              <a-input
                v-model="formData.dbPwd"
                placeholder=""
                :allowClear="true"
                size="default"
                :disabled="false"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item
              label="Redis主机地址"
              prop="redisAddress"
              v-bind="{}"
            >
              <a-input
                v-model="formData.redisAddress"
                placeholder=""
                :allowClear="true"
                size="default"
                :disabled="false"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="Redis端口" prop="redisPort" v-bind="{}">
              <a-input
                v-model="formData.redisPort"
                placeholder=""
                :allowClear="true"
                size="default"
                :disabled="false"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="Redis密码" prop="redisPwd" v-bind="{}">
              <a-input
                v-model="formData.redisPwd"
                placeholder=""
                :allowClear="true"
                size="default"
                :disabled="false"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="minio" prop="minio" v-bind="{}">
              <a-radio-group
                v-model="formData.minio"
                button-style="solid"
                size="default"
                :disabled="false"
              >
                <a-radio-button
                  v-for="(opt, idx) in minio_options"
                  :key="idx"
                  :value="opt.value"
                >
                  {{ opt.label }}
                </a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="nacos" prop="nacos" v-bind="{}">
              <a-radio-group
                v-model="formData.nacos"
                button-style="solid"
                size="default"
                :disabled="false"
              >
                <a-radio-button
                  v-for="(opt, idx) in nacos_options"
                  :key="idx"
                  :value="opt.value"
                >
                  {{ opt.label }}
                </a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="xxljob" prop="xxljob" v-bind="{}">
              <a-radio-group
                v-model="formData.xxljob"
                button-style="solid"
                size="default"
                :disabled="false"
              >
                <a-radio-button
                  v-for="(opt, idx) in xxljob_options"
                  :key="idx"
                  :value="opt.value"
                >
                  {{ opt.label }}
                </a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="报表" prop="report" v-bind="{}">
              <a-radio-group
                v-model="formData.report"
                button-style="solid"
                size="default"
                :disabled="false"
              >
                <a-radio-button
                  v-for="(opt, idx) in report_options"
                  :key="idx"
                  :value="opt.value"
                >
                  {{ opt.label }}
                </a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="RocketMQ" prop="rocketMQ" v-bind="{}">
              <a-radio-group
                v-model="formData.rocketMQ"
                button-style="solid"
                size="default"
                :disabled="false"
              >
                <a-radio-button
                  v-for="(opt, idx) in rocketMQ_options"
                  :key="idx"
                  :value="opt.value"
                >
                  {{ opt.label }}
                </a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="移动端" prop="mobile" v-bind="{}">
              <a-radio-group
                v-model="formData.mobile"
                button-style="solid"
                size="default"
                :disabled="false"
              >
                <a-radio-button
                  v-for="(opt, idx) in mobile_options"
                  :key="idx"
                  :value="opt.value"
                >
                  {{ opt.label }}
                </a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="初始化数据库" prop="initDb" v-bind="{}">
              <a-radio-group
                v-model="formData.initDb"
                button-style="solid"
                size="default"
                :disabled="false"
              >
                <a-radio-button
                  v-for="(opt, idx) in initDb_options"
                  :key="idx"
                  :value="opt.value"
                >
                  {{ opt.label }}
                </a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :wrapper-col="{ span: 20, offset: 4 }">
              <a-button
                v-if="true"
                :loading="confirmLoading"
                type="primary"
                @click="handleOk"
              >
                确定
              </a-button>
              <a-button v-if="true" style="margin-left: 10px" @click="onReset">
                取消
              </a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-card>
</template>

<script>
import { genProjectApi } from "../../../packages/api/manage.js";
export default {
  components: {},
  props: [],
  data() {
    return {
      spinning: true,
      confirmLoading: false,
      defaultFormData: {
        projectName: "demo",
        projectNameChinese: "演示项目",
        basePackage: "com.nbport.demo",
        version: "3.0",
        author: "demo",
        dbType: "postgresql",
        dbAddress: "169.169.171.200",
        dbPort: "5000",
        dbName: "ybt",
        dbUser: "ybt",
        dbPwd: "yibutong@123",
        redisAddress: "169.169.171.40",
        redisPort: "6379",
        redisPwd: "123456",
        minio: "N",
        nacos: "N",
        xxljob: "N",
        report: "N",
        rocketMQ: "N",
        mobile: "N",
        initDb: "N",
      },
      formData: {},
      rules: {
        projectName: [
          {
            required: true,
            message: "项目名称不能为空",
            trigger: "blur",
          },
          {
            max: 255,
            message: "项目名称最大长度不能大于255",
            trigger: "blur",
          },
        ],
        projectNameChinese: [
          {
            required: true,
            message: "项目名称不能为空",
            trigger: "blur",
          },
          {
            max: 255,
            message: "项目名称最大长度不能大于255",
            trigger: "blur",
          },
        ],
        basePackage: [
          {
            required: true,
            message: "项目包名不能为空",
            trigger: "blur",
          },
          {
            max: 255,
            message: "项目包名最大长度不能大于255",
            trigger: "blur",
          },
        ],
        version: [
          {
            required: true,
            message: "版本不能为空",
            trigger: "blur",
          },
          {
            max: 255,
            message: "版本最大长度不能大于255",
            trigger: "blur",
          },
        ],
        author: [
          {
            required: true,
            message: "作者不能为空",
            trigger: "blur",
          },
          {
            max: 255,
            message: "作者最大长度不能大于255",
            trigger: "blur",
          },
        ],
        dbType: [
          {
            required: true,
            message: "数据库类型不能为空",
            trigger: "change",
          },
        ],
        dbAddress: [
          {
            required: true,
            message: "数据库主机地址不能为空",
            trigger: "blur",
          },
          {
            max: 255,
            message: "数据库主机地址最大长度不能大于255",
            trigger: "blur",
          },
        ],
        dbPort: [
          {
            required: true,
            message: "数据库主机地址不能为空",
            trigger: "blur",
          },
          {
            max: 255,
            message: "数据库主机地址最大长度不能大于255",
            trigger: "blur",
          },
        ],
        dbName: [
          {
            required: true,
            message: "数据库名称不能为空",
            trigger: "blur",
          },
          {
            max: 255,
            message: "数据库名称最大长度不能大于255",
            trigger: "blur",
          },
        ],
        dbUser: [
          {
            required: true,
            message: "数据库账号不能为空",
            trigger: "blur",
          },
          {
            max: 255,
            message: "数据库账号最大长度不能大于255",
            trigger: "blur",
          },
        ],
        dbPwd: [
          {
            required: true,
            message: "数据库密码不能为空",
            trigger: "blur",
          },
          {
            max: 255,
            message: "数据库密码最大长度不能大于255",
            trigger: "blur",
          },
        ],
        redisAddress: [
          {
            required: true,
            message: "Redis主机地址不能为空",
            trigger: "blur",
          },
          {
            max: 255,
            message: "Redis主机地址最大长度不能大于255",
            trigger: "blur",
          },
        ],
        redisPort: [
          {
            required: true,
            message: "Redis端口不能为空",
            trigger: "blur",
          },
          {
            max: 255,
            message: "Redis端口最大长度不能大于255",
            trigger: "blur",
          },
        ],
        redisPwd: [
          {
            required: true,
            message: "Redis密码不能为空",
            trigger: "blur",
          },
          {
            max: 255,
            message: "Redis密码最大长度不能大于255",
            trigger: "blur",
          },
        ],
        minio: [
          {
            required: true,
            message: "minio不能为空",
            trigger: "change",
          },
        ],
        nacos: [
          {
            required: true,
            message: "nacos不能为空",
            trigger: "change",
          },
        ],
        xxljob: [
          {
            required: true,
            message: "xxljob不能为空",
            trigger: "change",
          },
        ],
        report: [
          {
            required: true,
            message: "报表不能为空",
            trigger: "change",
          },
        ],
        rocketMQ: [
          {
            required: true,
            message: "RocketMQ不能为空",
            trigger: "change",
          },
        ],
        mobile: [
          {
            required: true,
            message: "移动端不能为空",
            trigger: "change",
          },
        ],
        initDb: [
          {
            required: true,
            message: "初始化数据库不能为空",
            trigger: "change",
          },
        ],
      },
      dbType_options: [
        {
          label: "oracle",
          value: "oracle",
        },
        {
          label: "postgresql",
          value: "postgresql",
        },
        {
          label: "mysql",
          value: "mysql",
        },
      ],
      minio_options: [
        {
          label: "集成",
          value: "Y",
        },
        {
          label: "不集成",
          value: "N",
        },
      ],
      nacos_options: [
        {
          label: "集成",
          value: "Y",
        },
        {
          label: "不集成",
          value: "N",
        },
      ],
      xxljob_options: [
        {
          label: "集成",
          value: "Y",
        },
        {
          label: "不集成",
          value: "N",
        },
      ],
      report_options: [
        {
          label: "集成",
          value: "Y",
        },
        {
          label: "不集成",
          value: "N",
        },
      ],
      rocketMQ_options: [
        {
          label: "集成",
          value: "Y",
        },
        {
          label: "不集成",
          value: "N",
        },
      ],
      mobile_options: [
        {
          label: "集成",
          value: "Y",
        },
        {
          label: "不 集成",
          value: "N",
        },
      ],
      initDb_options: [
        {
          label: "初始化",
          value: "Y",
        },
        {
          label: "不初始化",
          value: "N",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.formData = Object.assign({}, this.defaultFormData);
    /*仅用于预览测试，开发中请删除。*/
    this.showModal && this.showModal();
  },
  mounted() {
    this.spinning = false;
  },
  methods: {
    handleOk() {
      this.confirmLoading = true;
      this.$refs["myForm"].validate((valid) => {
        if (!valid) {
          console.log("error");
          this.confirmLoading = false;
        } else {
          // TODO 提交表单
          console.log(this.formData);
          genProjectApi(this.formData).then((response) => {
            this.confirmLoading = false;
            this.$message.success("生成成功");

                let blob = new Blob([response.data], {type: 'application/zip'})
            let url = window.URL.createObjectURL(blob)
           window.location.href = url
          });
        }
      });
    },
    onReset() {
      this.$refs["myForm"].resetFields();
      this.hideModal();
    },
  },
};
</script>
<style scoped lang="less">
/*复选框样式*/
.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0px;
}
</style>
