<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)
		"
	>
		<template #bodyCell="{ column, record }">
			<template v-if="column.dataIndex === 'operation'">
				<a-button @click="routeTomaterial" type="link">详情</a-button>
				<!-- 显示附件 -->
			</template>
		</template>
	</a-table>
</template>
<script setup>
import { reactive, ref } from "vue";
import ATitle from "@/components/ATitle.vue";
import areaOptions from "@/common/area";
import { useRouter } from "vue-router";
import {
	DownloadOutlined,
	UploadOutlined,
	PlusOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";

const router = useRouter();
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 formState = reactive({
	name: "",
	state: "",
	projectAddress: "",
	remarks: "",
});
const rateForm = reactive({
	price: "",
});
const columns = [
	{
		title: "序号",
		align: "center",
		width: 80,
		customRender: (data) => {
			return data.index + 1;
		},
	},
	{
		title: "工程名称",
		dataIndex: "objectName",
	},
	{
		title: "计划名称",
		dataIndex: "planName",
	},
	{
		title: "施工地址",
		dataIndex: "address",
	},
	{
		title: "报价截止",
		dataIndex: "time",
	},
	{
		title: "发票要求",
		dataIndex: "fapiao",
	},
	{
		title: "是否有预付款",
		dataIndex: "yufukuan",
	},
	{
		title: "税率要求",
		dataIndex: "shuilv",
	},
	{
		title: "账期要求",
		dataIndex: "zhangqi",
	},
	{
		title: "信用等级要求",
		dataIndex: "minLevel",
	},
	{
		title: "说明",
		dataIndex: "description",
	},
	{
		title: "操作",
		dataIndex: "operation",
		scopedSlots: { customRender: "operation" },
	},
];
const data = [
	{
		objectName: "黑龙江省哈尔滨市宾县宾西经济技术开发区风电叶片厂房建设项目施工",
		planName: "商品混凝土第一批次询价",
		address: "宾县",
		type: "C20",
		count: "10000",
		brand: "--",
		unit: "立方米(m³)",
		consumption: "1000",
		budget: "预算",
		platform: "测试平台",
		remarks: "1000",
		description: "--",
		minLevel: '一级',
		paymentDays: "3个月",
		overview: "当前10家已报价，其中7家价格为xxx元",
		fapiao: "增值税专票",
		yufukuan: "有预付款",
		shuilv: "2%",
		zhangqi: "3个月",
		time: "2022-11-17",
	},
	{
		key: "品类1",
		objectName: "水泥路雨水泵站及配套管线工程",
		planName: "中粗砂第一批次询价",
		address: "水泥路",
		type: "测试型号",
		count: "10000",
		brand: "测试品牌",
		unit: "立方米(m³)",
		consumption: "测试用量",
		budget: "预算",
		platform: "测试平台",
		remarks: "1000",
		description: "--",
		minLevel: '一级',
		paymentDays: "3个月",
		overview: "当前10家已报价，其中7家价格为xxx元",
		fapiao: "增值税专票",
		yufukuan: "无预付款",
		shuilv: "2%",
		zhangqi: "3个月",
		time: "2022-11-17",
	}
];
function showModal() {
	visible.value = true;
}
function toggleModal() {
	visible.value = !visible.value;
}
function handleOk() {
	message.success("操作成功");
	visible.value = false;
}
function routeTomaterial() {
	router.push('/materialList')
}
</script>
<style lang="scss"></style>
