<template>
	<div class="form_wrap">
		<a-form
			:model="formState"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
		>
			<a-row>
				<a-col :span="8">
					<a-form-item label="项目名称">
						<a-input v-model:value="formState.name" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="项目地区">
						<div class="flex">
							<a-cascader
								v-model:value="projectAddress"
								:options="areaOptions"
								placeholder="省市区"
							/>
							<a-input v-model:value="formState.projectAddress" />
						</div>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="8">
					<a-form-item label="材料名称">
						<a-space>
							<a-button @click="showModal" type="primary">
								<template #icon>
									<plus-outlined />
								</template>
								新增清单询价
							</a-button>
							<a-button>
								<template #icon>
									<download-outlined />
								</template>
								下载模板
							</a-button>
							<a-upload v-model:file-list="fileList" name="file">
								<a-button>
									<upload-outlined></upload-outlined>
									批量导入
								</a-button>
							</a-upload>
						</a-space>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="24">
					<a-form-item label="材料列表">
						<a-table
							class="ant-table-striped"
							size="middle"
							:columns="columns"
							:data-source="data"
							:row-class-name="
								(_record, index) =>
									index % 2 === 1 ? 'table-striped' : null
							"
						>
							<template #bodyCell="{ column, record }">
								<template
									v-if="column.dataIndex === 'operation'"
								>
									<a-button type="link" danger>删除</a-button>
								</template>
							</template>
						</a-table>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</div>
	<a-divider />
	<div class="form_wrap">
		<ATitle label="供应商要求"></ATitle>
		<a-form
			:model="formState"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
		>
			<a-row>
				<a-col :span="12">
					<a-form-item label="发票要求">
						<a-radio-group v-model:value="fapiao">
							<a-radio :value="1">增值税专票</a-radio>
							<a-radio :value="2">增值税普通发票</a-radio>
							<a-radio :value="3">不要发票</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="12">
					<a-form-item label="付款方式">
						<a-radio-group v-model:value="yufukuan">
							<a-radio :value="1">有预付款</a-radio>
							<a-radio :value="2">无预付款</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="6">
					<a-form-item label="报价截止日期">
						<a-date-picker v-model:value="jiezhiriqi" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="6">
					<a-form-item label="税率">
						<a-input v-model:value="formState.zczj" type="number" addon-after="%" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="6">
					<a-form-item label="账期">
						<a-input v-model:value="formState.payDate" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="6">
					<a-form-item label="报价次数">
						<a-input v-model:value="formState.bjcs" type="number" addon-after="次" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="12">
					<a-form-item label="其他附件">
						<a-upload v-model:file-list="fileList" name="file">
							<a-button>
								<upload-outlined></upload-outlined>
								上传附件
							</a-button>
						</a-upload>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="12">
					<a-form-item label="其他要求">
						<a-textarea v-model:value="formState.remarks" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</div>
	<a-modal
		v-model:visible="visible"
		:width="600"
		title="新增清单询价"
		@ok="handleOk"
	>
		<a-form
			:model="formState"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
		>
			<a-row>
				<a-col :span="24">
					<a-form-item label="物料名称">
						<a-input v-model:value="formState.name" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="平台类目">
						<a-cascader
							v-model:value="value"
							:options="options"
							placeholder="Please select"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="型号">
						<a-input v-model:value="formState.logo" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="物料描述">
						<a-input v-model:value="formState.logo" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="采购量">
						<a-input v-model:value="formState.logo" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="单位">
						<a-input v-model:value="formState.logo" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="账期">
						<a-input v-model:value="formState.zhangqi" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="说明">
						<a-textarea v-model:value="formState.logo" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-modal>
</template>
<script setup>
import { reactive, ref } from "vue";
import ATitle from "@/components/ATitle.vue";
import areaOptions from "@/common/area";
import {
	DownloadOutlined,
	UploadOutlined,
	PlusOutlined,
} from "@ant-design/icons-vue";
import { message } from 'ant-design-vue';

const options = [
	{
		value: "黑色及有色金属",
		label: "黑色及有色金属",
		children: [
			{
				value: "建筑材料",
				label: "建筑材料",
				children: [
					{
						value: "钢丝绳",
						label: "钢丝绳",
					},{
						value: "圆钢",
						label: "圆钢",
					},{
						value: "扁钢",
						label: "扁钢",
					},
				],
			},
		],
	},
	{
		value: "砼、砂浆及其他配合比材料",
		label: "Jiangsu",
		children: [
			{
				value: "水泥",
				label: "水泥",
				children: [
					{
						value: "水泥",
						label: "水泥",
					},
				],
			},
		],
	},{
		value: "...",
		label: "...",
		children: [
			{
				value: "...",
				label: "...",
				children: [
					{
						value: "...",
						label: "...",
					},
				],
			},
		],
	},
];
const visible = ref(false);
const baojia = ref(1);
const fapiao = ref(1);
const gaizhang = ref(1);
const yufukuan = ref(1);
const jiezhiriqi = ref("");
const labelCol = {
	style: {
		width: "120px",
	},
};
const wrapperCol = {
	span: 24,
};
const formState = reactive({
	name: "",
	state: "",
	projectAddress: "",
	remarks: "",
	chanliangType: '日'
});
const columns = [
	{
		title: "序号",
		align: "center",
		width: 80,
		customRender: (data) => {
			return data.index + 1;
		},
	},
	{
		title: "材料名称",
		dataIndex: "name",
	},
	{
		title: "平台类目",
		dataIndex: "platform",
	},
	{
		title: "品牌",
		dataIndex: "brand",
	},
	{
		title: "型号",
		dataIndex: "type",
	},
	{
		title: "物料描述",
		dataIndex: "description",
	},
	{
		title: "本次采购量",
		dataIndex: "consumption",
	},
	{
		title: "已采购量",
		dataIndex: "consumption",
	},
	{
		title: "总采购量",
		dataIndex: "consumption",
	},
	{
		title: "计划进场时间",
		dataIndex: "time",
	},
	{
		title: "单位",
		dataIndex: "unit",
	},
	{
		title: "账期",
		dataIndex: "paymentDays",
	},
	{
		title: "说明",
		dataIndex: "remarks",
	}
];
const data = [
	{
		key: "品类1",
		name: "沥青混凝土",
		type: "C20",
		brand: "测试品牌",
		unit: "测试单位",
		consumption: "200",
		budget: "预算",
		platform: "砼、砂浆及其他配合比材料",
		remarks: "--",
		description: "测试描述",
		paymentDays: "3个月",
		unit: "立方米",
		time: "2022-11-17",
	},
	{
		key: "品类1",
		name: "沥青混凝土",
		type: "C30",
		brand: "测试品牌",
		unit: "测试单位",
		consumption: "200",
		budget: "预算",
		platform: "砼、砂浆及其他配合比材料",
		remarks: "--",
		description: "测试描述",
		unit: "立方米",
		paymentDays: "3个月",
		time: "2022-11-17",
	},
	{
		key: "品类1",
		name: "沥青混凝土",
		type: "C35",
		brand: "测试品牌",
		unit: "测试单位",
		consumption: "200",
		budget: "预算",
		platform: "砼、砂浆及其他配合比材料",
		remarks: "--",
		description: "测试描述",
		unit: "立方米",
		paymentDays: "3个月",
		time: "2022-11-17",
	}
];
function showModal() {
	visible.value = true
}
function handleOk() {
	message.success('操作成功')
	visible.value = false
}
</script>
<style lang="scss"></style>
