<template>
	<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" danger>删除</a-button>
			</template>
		</template>
	</a-table>
	<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 } 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 formState = reactive({
	name: "",
	projectName: "",
	projectAddress: "",
	unitName: "",
	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: "unit",
	},
	{
		title: "出厂价格",
		dataIndex: "price",
	},
	{
		title: "运费",
		dataIndex: "deliver",
	},
	{
		title: "税率",
		dataIndex: "shuilv",
	},
	{
		title: "现有库存量",
		dataIndex: "xianyoukucunliang",
	},
	{
		title: "日/月生产量",
		dataIndex: "riyue",
	},
	{
		title: "操作",
		dataIndex: "operation",
		scopedSlots: { customRender: "operation" },
	},
];
const data = [
	{
		key: "品类1",
		name: "测试材料名称",
		type: "测试型号",
		brand: "测试品牌",
		unit: "测试单位",
		price: "1000",
		deliver: "100",
		shuilv: "13%",
		xianyoukucunliang: "1000",
		riyue: "20",
	},
	{
		key: "品类1",
		name: "测试材料名称",
		type: "测试型号",
		brand: "测试品牌",
		unit: "测试单位",
		price: "1000",
		deliver: "100",
		shuilv: "13%",
		xianyoukucunliang: "1000",
		riyue: "20",
	},
	{
		key: "品类1",
		name: "测试材料名称",
		type: "测试型号",
		brand: "测试品牌",
		unit: "测试单位",
		price: "1000",
		deliver: "100",
		shuilv: "13%",
		xianyoukucunliang: "1000",
		riyue: "20",
	},
	{
		key: "品类1",
		name: "测试材料名称",
		type: "测试型号",
		brand: "测试品牌",
		unit: "测试单位",
		price: "1000",
		deliver: "100",
		shuilv: "13%",
		xianyoukucunliang: "1000",
		riyue: "20",
	},
	{
		key: "品类1",
		name: "测试材料名称",
		type: "测试型号",
		brand: "测试品牌",
		unit: "测试单位",
		price: "1000",
		deliver: "100",
		shuilv: "13%",
		xianyoukucunliang: "1000",
		riyue: "20",
	},
	{
		key: "品类1",
		name: "测试材料名称",
		type: "测试型号",
		brand: "测试品牌",
		unit: "测试单位",
		price: "1000",
		deliver: "100",
		shuilv: "13%",
		xianyoukucunliang: "1000",
		riyue: "20",
	},
	{
		key: "品类1",
		name: "测试材料名称",
		type: "测试型号",
		brand: "测试品牌",
		unit: "测试单位",
		price: "1000",
		deliver: "100",
		shuilv: "13%",
		xianyoukucunliang: "1000",
		riyue: "20",
	},
];
</script>

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