<template>
	<a-table
		class="ant-table-striped"
		size="middle"
		:columns="columns"
		:data-source="data"
		:row-class-name="
			(_record, index) => (index % 2 === 1 ? 'table-striped' : null)
		"
	></a-table>
</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 plainOptions = ["报价含税", "报价含运费", "报价函卸装", "其他"];
const checkedList = ref(["报价含税", "报价函卸装"]);
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: 18,
};
const formState = reactive({
	name: "",
	state: "",
	projectAddress: "",
	remarks: "",
});
const columns = [
	{
		title: "序号",
		align: "center",
		width: 80,
		customRender: (data) => {
			return data.index + 1;
		},
	},
	{
		title: "材料名称",
		dataIndex: "name",
	},
	{
		title: "型号",
		dataIndex: "type",
	},
	{
		title: "数量",
		dataIndex: "count",
	},
	{
		title: "单位",
		dataIndex: "unit",
	},
	{
		title: "物料描述",
		dataIndex: "description",
	},
	{
		title: "报价截止日期",
		dataIndex: "time",
	},
	{
		title: "说明",
		dataIndex: "description",
	}
];
const data = [
	{
		key: "品类1",
		name: "沥青混凝土",
		type: "AC-16（改性）",
		count: '10000',
		brand: "--",
		unit: "立方米(m³)",
		consumption: "测试用量",
		budget: "预算",
		platform: "测试平台",
		remarks: "1000",
		description: "测试描述",
		time: "2022-11-17",
	},
	{
		key: "品类1",
		name: "测试材料名称",
		type: "测试型号",
		count: '10000',
		brand: "测试品牌",
		unit: "立方米(m³)",
		consumption: "测试用量",
		budget: "预算",
		platform: "测试平台",
		remarks: "1000",
		description: "测试描述",
		time: "2022-11-17",
	},
	{
		key: "品类1",
		name: "测试材料名称",
		type: "测试型号",
		count: '10000',
		brand: "测试品牌",
		unit: "立方米(m³)",
		consumption: "测试用量",
		budget: "预算",
		platform: "测试平台",
		remarks: "1000",
		description: "测试描述",
		time: "2022-11-17",
	},
	{
		key: "品类1",
		name: "测试材料名称",
		type: "测试型号",
		count: '10000',
		brand: "测试品牌",
		unit: "立方米(m³)",
		consumption: "测试用量",
		budget: "预算",
		platform: "测试平台",
		remarks: "1000",
		description: "测试描述",
		time: "2022-11-17",
	},
	{
		key: "品类1",
		name: "测试材料名称",
		type: "测试型号",
		count: '10000',
		brand: "测试品牌",
		unit: "立方米(m³)",
		consumption: "测试用量",
		budget: "预算",
		platform: "测试平台",
		remarks: "1000",
		description: "测试描述",
		time: "2022-11-17",
	},
	{
		key: "品类1",
		name: "测试材料名称",
		type: "测试型号",
		count: '10000',
		brand: "测试品牌",
		unit: "立方米(m³)",
		consumption: "测试用量",
		budget: "预算",
		platform: "测试平台",
		remarks: "1000",
		description: "测试描述",
		time: "2022-11-17",
	},
];
function showModal() {
	visible.value = true;
}
function handleOk() {
	message.success("操作成功");
	visible.value = false;
}
</script>
<style lang="scss"></style>
