<template>
	<div class="form_wrap">
		<a-form
			:model="formState"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
			:rules="rules"
			@finish="onFinish"
			@finishFailed="onFinishFailed"
		>
			<ATitle label="供应商信息" />
			<a-row>
				<a-col :span="12">
					<a-form-item label="公司全称" name="gongsiquancheng">
						<a-input v-model:value="formState.gongsiquancheng" />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item
						label="统一社会信用代码"
						name="tongyishehuixinyongdaima"
					>
						<a-input
							v-model:value="formState.tongyishehuixinyongdaima"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="地址" required name="dizhi">
						<div class="flex">
							<a-cascader
								v-model:value="formState.shengshiqu"
								nanme="shengshiqu"
								:options="areaOptions"
								placeholder="省市区"
							/>
							<a-input
								v-model:value="formState.dizhi"
								:disabled="formState.shengshiqu == ''"
								name="dizhi"
							/>
						</div>
					</a-form-item>
				</a-col>
			</a-row>
			<ATitle label="登记信息" />
			<a-row>
				<a-col :span="12">
					<a-form-item label="报名品类" name="baomingpinlei">
						<a-tree-select
							v-model:value="formState.baomingpinlei"
							style="width: 100%"
							:tree-data="treeData"
							:show-checked-strategy="SHOW_PARENT"
							treeNodeFilterProp="title"
							show-search
							tree-checkable
							allow-clear
							placeholder="请选择品类"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="经营模式" name="jingyingmoshi">
						<a-select
							v-model:value="formState.jingyingmoshi"
							name="jingyingmoshi"
							placeholder="请选择"
						>
							<a-select-option value="1"
								>生产型企业</a-select-option
							>
							<a-select-option value="2"
								>租赁公司</a-select-option
							>
							<a-select-option value="3"
								>代理商/经销商</a-select-option
							>
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="12">
					<a-form-item label="主营产品" name="zhuyingchanpin">
						<a-input
							v-model:value="formState.zhuyingchanpin"
							placeholder="请输入产品名称，多个用逗号隔开"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="24">
					<a-form-item label="企业优势" name="qiyeyoushi">
						<a-textarea
							v-model:value="formState.qiyeyoushi"
							placeholder="例如过往业绩等"
							:rows="2"
							allow-clear
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="24">
					<a-form-item label="营业执照" required>
						<a-upload
							v-model:file-list="fileList"
							name="file"
							action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
							:headers="headers"
							@change="handleChange"
						>
							<a-button>
								<upload-outlined></upload-outlined>
								点击上传
							</a-button>
							<span
								>（营业执照只用作我司审核，不会用做其他用途）</span
							>
						</a-upload>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="24">
					<a-form-item label="开户许可证" required>
						<a-upload
							v-model:file-list="fileList"
							name="file"
							action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
							:headers="headers"
							@change="handleChange"
						>
							<a-button>
								<upload-outlined></upload-outlined>
								点击上传
							</a-button>
						</a-upload>
					</a-form-item>
				</a-col>
			</a-row>
			<ATitle label="联系人" />
			<a-row>
				<a-col :span="12">
					<a-form-item label="姓名" name="xingming">
						<a-input
							v-model:value="formState.xingming"
							placeholder="请输入"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="联系电话" name="lianxidianhua">
						<a-input
							v-model:value="formState.lianxidianhua"
							placeholder="请输入"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="12">
					<a-form-item label="职位" name="zhiwei">
						<div class="form_wrap">
							<a-input
								v-model:value="formState.zhiwei"
								placeholder="请输入"
							/>
						</div>
					</a-form-item>
					<div class="ml140">
						<a-checkbox v-model:checked="checked">
							我已阅读并同意<a-button type="link"
								>《准入条件》</a-button
							>，并保证以上填写内容真实有效</a-checkbox
						>
					</div>
					<div class="ml140">
						<a-button
							:disabled="!checked"
							type="primary"
							html-type="submit"
							>保存</a-button
						>
					</div>
				</a-col>
			</a-row>
		</a-form>
	</div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { message } from "ant-design-vue";
import { Modal } from "ant-design-vue";
import { TreeSelect } from "ant-design-vue";
import ATitle from "@/components/ATitle.vue";
import areaOptions from "@/common/area";
import {
	DownloadOutlined,
	UploadOutlined,
	PlusOutlined,
} from "@ant-design/icons-vue";
import treeData from "@/utils/category";

// 预设值项
const plainOptions = [
	"线下报名-寄送盖章资料",
	"线上报名-寄送盖章资料",
	"需到公司面谈",
	"需接待考察",
	"需要寄送样品/图册",
];
const plainOptions1 = ["生产型企业", "代理商/经销商", "租赁公司"];

// 表单样式设计
const labelCol = {
	style: {
		width: "140px",
	},
};
const wrapperCol = {
	span: 18,
};

// form
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
const formState = reactive({
	gongsiquancheng: "",
	tongyishehuixinyongdaima: "",
	shengshiqu: "",
	dizhi: "",
	baomingpinlei: [],
	jingyingmoshi: "",
	zhuyingchanpin: "",
	qiyeyoushi: "",
	yingyezhizhao: "",
	xingming: "",
	lianxidianhua: "",
	zhiwei: "",
	checked: false,
});

// 表单验证
const rules = {
	gongsiquancheng: [
		{
			required: true,
			trigger: "change",
			message: "请输入公司全称",
		},
	],
	dizhi: [
		{
			required: true,
			trigger: "change",
			message: "请输入地址",
		},
	],
	tongyishehuixinyongdaima: [
		{
			required: true,
			pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
			trigger: "change",
			message: "请输入正确的统一社会信用代码编号",
		},
	],
	baomingpinlei: [
		{
			required: true,
			trigger: "change",
			message: "请选择至少一项",
		},
	],
	jingyingmoshi: [
		{
			required: true,
			trigger: "change",
			message: "请选择至少一项",
		},
	],
	zhuyingchanpin: [
		{
			required: true,
			trigger: "change",
			message: "请填写主营产品",
		},
	],
	xingming: [
		{
			required: true,
			trigger: "change",
			message: "输入联系人姓名",
		},
	],
	lianxidianhua: [
		{
			required: true,
			pattern:
				/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
			trigger: "change",
			message: "请输入正确的联系方式",
		},
	],
};

const checked = ref(false);

const onFinish = (values) => {
	console.log("Success:", values);
	Modal.warning({
		title: "请核对您填写的内容，一旦通过审核后将无法更改",
		onOk() {
			message.success("操作成功！");
		},
	});
};
const onFinishFailed = (errorInfo) => {
	console.log("Failed:", errorInfo);
};
</script>
<style lang="scss" scoped>
.ml140 {
	margin-left: 140px;
}
</style>
