<template>
	<div class="form_wrap">
		<ATitle label="基本信息"></ATitle>
		<a-form
			:model="formState"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
		>
			<a-row>
				<a-col :span="24">
					<a-form-item label="项目名称">
						<a-select
							v-model:value="formState.object"
							placeholder="请选择项目"
						>
							<a-select-option value="1"
								>黑龙江省哈尔滨市宾县宾西经济技术开发区风电叶片厂房建设项目施工</a-select-option
							>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="计划名称">
						<a-input v-model:value="formState.planName" />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<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-col :span="12">
					<a-form-item label="需求单位">
						<a-select
							v-model:value="formState.unitName"
							placeholder="Please select a country"
						>
							<a-select-option value="1"
								>二分公司</a-select-option
							>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="编辑人">
						<a-input
							v-model:value="formState.editor"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="电话">
						<a-input v-model:value="formState.tel" type="number" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="16">
					<a-form-item label="备注">
						<a-textarea
							v-model:value="formState.remarks"
							:rows="4"
						/>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</div>
	<a-divider />
	<div class="form_wrap">
		<ATitle label="清单明细"></ATitle>
		<a-row>
			<a-col>
				<a-space>
					<a-button type="primary">
						<template #icon><plus-outlined /></template>
						新增清单
					</a-button>
					<a-button>
						<template #icon>
							<delete-outlined />
						</template>
						删除
					</a-button>
					<a-button>
						<template #icon>
							<upload-outlined />
						</template>
						导入计划
					</a-button>
					<a-button>
						<template #icon>
							<download-outlined />
						</template>
						下载模板
					</a-button>
				</a-space>
			</a-col>
		</a-row>
	</div>
	<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">详细描述</a-button>
				<!-- 👆富文本 -->
				<a-button type="link" danger>删除</a-button>
			</template>
		</template>
	</a-table>
	<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>
	<div class="form_footer">
		<a-space>
			<a-button type="primary">保存</a-button>
			<a-button @click="router.go(-1)" type="default">返回</a-button>
		</a-space>
	</div>
</template>

<script setup>
import { reactive, ref } from "vue";
import {
	UploadOutlined,
	DeleteOutlined,
	DownloadOutlined,
	PlusOutlined,
} from "@ant-design/icons-vue";
import areaOptions from "@/common/area";
import ATitle from "@/components/ATitle.vue";
import { useRouter } from "vue-router";

const router = useRouter();

const labelCol = {
	style: {
		width: "120px",
	},
};
const wrapperCol = {
	span: 14,
};
const visible = ref(false);
const baojia = ref(1);
const fapiao = ref(1);
const gaizhang = ref(1);
const yufukuan = ref(1);
const jiezhiriqi = ref("");
const formState = reactive({
	name: "",
	planName: "商品混凝土第一批次询价",
	projectAddress: "",
	unitName: "1",
	budget: 0,
	editor: "马天巍",
	tel: "",
});

const columns = [
	{
		title: "序号",
		align: "center",
		width: 80,
		customRender: (data) => {
			return data.index + 1;
		},
	},
	{
		title: "品类",
		dataIndex: "key",
	},
	{
		title: "材料名称",
		dataIndex: "name",
	},
	{
		title: "规格型号",
		dataIndex: "type",
	},
	{
		title: "本次用量",
		dataIndex: "consumption",
	},
	{
		title: "计划总量",
		dataIndex: "consumption1",
	},
	{
		title: "余量",
		dataIndex: "consumption2",
	},
	{
		title: "单位",
		dataIndex: "unit",
	},
	{
		title: "项目参考价",
		dataIndex: "budget",
	},
	{
		title: "计划入场时间",
		dataIndex: "time",
	},
	{
		title: "账期",
		dataIndex: "zhangqi",
	},
	{
		title: "操作",
		dataIndex: "operation",
		scopedSlots: { customRender: "operation" },
	},
];
const data = [
	{
		key: "混凝土制品",
		name: "混凝土",
		type: "C20",
		brand: "测试品牌",
		unit: "m³",
		consumption: "1000",
		consumption1: '3000',
		consumption2: "2000",
		budget: "320",
		managementModel: "经营模式",
		registeredCapital: "1000",
		address: "黑龙江省哈尔滨市",
		store: "30000",
		yield: "1000/日",
		time: "2022-11-17",
		zhangqi: "6个月",
	},
	{
		key: "混凝土制品",
		name: "混凝土",
		type: "C30",
		brand: "测试品牌",
		unit: "m³",
		consumption: "3000",
		consumption1: '5000',
		consumption2: "2000",
		budget: "340",
		managementModel: "经营模式",
		registeredCapital: "1000",
		address: "黑龙江省哈尔滨市",
		store: "30000",
		yield: "1000/日",
		time: "2022-11-17",
		zhangqi: "6个月",
	},
	{
		key: "混凝土制品",
		name: "混凝土",
		type: "C35",
		brand: "测试品牌",
		unit: "m³",
		consumption: "2000",
		consumption1: '4000',
		consumption2: "2000",
		budget: "360",
		managementModel: "经营模式",
		registeredCapital: "1000",
		address: "黑龙江省哈尔滨市",
		store: "30000",
		yield: "1000/日",
		time: "2022-11-17",
		zhangqi: "6个月",
	}
];
</script>

<style lang="scss" scoped>
.ant-table-striped :deep(.table-striped) td {
	background-color: #fafafa;
}
</style>
