<template>
  <div class="content">
    <span class="back-btn" @click="back"
      ><a-icon type="left" style="margin-right: 10px" />返回</span
    >
    <a-divider></a-divider>
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      layout="vertical"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item
        ><div class="cardTitle">关联账号</div></a-form-model-item
      >
      <a-form-model-item ref="tel" label="手机号" prop="tel">
        <a-input
          v-model="form.tel"
          style="width: 60%"
          placeholder="请输入手机号"
          @blur="
            () => {
              $refs.tel.onFieldBlur();
            }
          "
        />
      </a-form-model-item>
      <a-form-model-item label="手机验证码" prop="code">
        <a-input
          placeholder="请输入验证码"
          v-model="form.code"
          style="width: 60%; margin-right: 10px"
        />
        <a-button type="primary" @click="getCode">获取验证码</a-button>
      </a-form-model-item>
      <a-form-model-item
        ><div class="cardTitle">基础信息</div></a-form-model-item
      >
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="企业名称" prop="companyName">
            <a-input
              v-model="form.companyName"
              placeholder="请输入企业名称"
              style="width: 130%"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="社会信用代码" prop="socialCreditCode">
            <a-input
              v-model="form.socialCreditCode"
              placeholder="请输入社会信用代码"
              style="width: 130%"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="企业地址" prop="companyAddress">
            <a-cascader
              :options="city"
              :field-names="cascaderConfig"
              @change="companyChange"
              placeholder="请选择"
              style="width: 100%"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="详细地址" prop="companyAddressDetail">
            <a-input
              v-model="form.companyAddressDetail"
              placeholder="请输入详细地址"
              style="width: 130%"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="法人姓名" prop="legalPersonName">
            <a-input
              v-model="form.legalPersonName"
              placeholder="请输入法人姓名"
              style="width: 130%"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="法人身份证号" prop="legalPersonIdCard">
            <a-input
              v-model="form.legalPersonIdCard"
              placeholder="请输入法人身份证号"
              style="width: 130%"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- licenseTimeStart  licenseTimeEnd -->
      <a-row>
        <a-col :span="12">
          <a-form-model-item
            label="营业执照有效期限开始时间"
            prop="licenseTimeStart"
          >
            <a-date-picker v-model="form.licenseTimeStart" value-format="YYYY-MM-DD HH:mm:ss"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item
            label="营业执照有效期限结束时间（如长期可不选）"
            prop="licenseTimeEnd"
          >
            <a-date-picker v-model="form.licenseTimeEnd" value-format="YYYY-MM-DD HH:mm:ss"/>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-form-model-item label="法人身份证">
        <span
          ><span style="color: #1f519b">请上传法人身份证正面照、反面照，</span
          >文件大小不超过5mb，支持jpg、png格式</span
        >
        <a-row>
          <a-col :span="12">
            头像面
            <!-- idCardFrontImgUrls -->
            <commonUpload @handleChange='handleChange($event,1)'/>
          </a-col>
          <a-col :span="12">
            国徽面
            <!-- idCardBackImgUrls -->
            <commonUpload @handleChange='handleChange($event,2)'/>
          </a-col>
        </a-row>
      </a-form-model-item>
      <a-form-model-item label="营业执照">
        <!-- businessLicenseImgUrls -->
        <span
          ><span style="color: #1f519b">请上传公司营业执照，</span
          >文件大小不超过5mb，支持jpg、png格式</span
        >
        <a-row>
          <a-col :span="12">
            公司营业执照
            <commonUpload @handleChange='handleChange($event,3)'/>
          </a-col>
        </a-row>
      </a-form-model-item>
      <!-- othersImgUrls -->
      <a-form-model-item label="其他附件">
        <span
          ><span style="color: #1f519b"
            >如从事某些特定行业，需要上传对应的资质证书，</span
          >文件大小不超过5mb，支持jpg、png格式</span
        >
        <a-row>
          <a-col :span="12">
           <commonUpload @handleChange='handleChange($event,4)'/>
          </a-col>
        </a-row>
      </a-form-model-item>
      <a-form-model-item label="联系人姓名" prop="contactsName">
        <a-input style="width: 60%" v-model="form.contactsName"></a-input>
      </a-form-model-item>
      <a-form-model-item label="联系人电话" prop="contactsTel">
        <a-input style="width: 60%" v-model="form.contactsTel"></a-input>
      </a-form-model-item>
      <a-form-model-item label="联系人邮箱" prop="contactsEmail">
        <a-input style="width: 60%" v-model="form.contactsEmail"></a-input>
      </a-form-model-item>
      <a-form-model-item label="联系人地址" prop="contactsAddress">
        <a-cascader
          :options="city"
          placeholder="请选择"
          :field-names="cascaderConfig"
          @change="contactChange"
          style="width: 60%"
        ></a-cascader>
      </a-form-model-item>
      <a-form-model-item label="联系人详细地址" prop="contactsAddressDetail">
        <a-input
          style="width: 60%"
          v-model="form.contactsAddressDetail"
        ></a-input>
      </a-form-model-item>
    </a-form-model>
    <div style="text-align: center">
      <a-button type="primary" @click="onSubmit"> 提交 </a-button>
      <a-button style="margin-left: 10px" @click="resetForm"> 重置 </a-button>
    </div>
  </div>
</template>

<script>
import { settledInsert } from "@/api/basic/console";
import { allCity } from "@/api/public";
import { form, rules, cascaderConfig } from "./depend/settledForm";
export default {
	data() {
		return {
			// 表单
			labelCol: { span: 4 },
			wrapperCol: { span: 10 },
			cascaderConfig,
			form,
			rules,
			city: [],
		};
	},
	mounted() {
		this.getCity();
	},
	methods: {
		async getCity() {
			let res = await allCity();
			this.city = res.data;
		},
		// 获取验证码
		getCode() {},
		companyChange(data) {
			this.form.companyAddress = data[2];
		},
		contactChange(data) {
			this.form.contactsAddress = data[2];
		},
		handleChange(data,type) {
			console.log(data);
			switch (type) {
			case 1:
				this.form.idCardFrontImgUrls[0] = data[0].response.data
				break;
			case 2:
				this.form.idCardBackImgUrls[0] = data[0].response.data
				break;
			case 3:
				this.form.businessLicenseImgUrls[0] = data[0].response.data
				break;
			case 4:
				this.form.othersImgUrls[0] = data[0].response.data
				break;
			default:
				break;
			}
		},
		onSubmit() {
			this.$refs.ruleForm.validate(async (valid) => {
				if (valid) {
					let res = await settledInsert(this.form);
					if (res.code === 200) {
						this.$message.success(res.msg);
						this.back()
					} else {
						this.$message.error(res.msg);
					}
				}
			});
		},
		back() {
			this.$router.go(-1)
		},
		// 重置
		resetForm() {
			this.$refs.ruleForm.resetFields();
		},
	},
};
</script>

<style lang="less" scoped>
.content {
  background: #fff;
  padding-left: 125px;
  padding-top: 48px;
}
.cardTitle {
  margin-left: -10px;
  margin-bottom: -10px;
}
/deep/.ant-col .ant-form-item-label {
  margin-top: -10px;
}

</style>  