<template>
	<div class="form_wrap">
		<ATitle label="清单明细"></ATitle>
		<a-form
			:model="formState"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
		>
			<a-row>
				<a-col :span="8">
					<a-form-item label="供应商">
						<a-select
							v-model:value="formState.supplier"
							placeholder="Please select a state"
						>
							<a-select-option value="1">供应商1</a-select-option>
							<a-select-option value="2">供应商2</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<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="材料名称">
						<a-input v-model:value="formState.name" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="规格型号">
						<a-input v-model:value="formState.type" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</div>
	<a-divider />
	<div class="form_wrap">
		<a-button @click="routeToG2" type="primary"
			><template #icon><bar-chart-outlined /></template>数据分析</a-button
		>
	</div>
	<a-table
		:columns="columns"
		:data-source="data"
		class="components-table-demo-nested"
	>
		<template #bodyCell="{ column }">
			<template v-if="column.key === 'operation'">
				<a>Publish</a>
			</template>
		</template>
		<template #expandedRowRender>
			<a-table
				:columns="innerColumns"
				:data-source="innerData"
				:pagination="false"
			>
				<template #bodyCell="{ column }">
					<template v-if="column.key === 'state'">
						<span>
							<a-badge status="success" />
							Finished
						</span>
					</template>
					<template v-else-if="column.key === 'operation'">
						<span class="table-operation">
							<a>Pause</a>
							<a>Stop</a>
							<a-dropdown>
								<template #overlay>
									<a-menu>
										<a-menu-item>Action 1</a-menu-item>
										<a-menu-item>Action 2</a-menu-item>
									</a-menu>
								</template>
								<a>
									More
									<down-outlined />
								</a>
							</a-dropdown>
						</span>
					</template>
				</template>
			</a-table>
		</template>
	</a-table>
</template>

<script setup>
import { reactive } from "vue";
import { BarChartOutlined } 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: "",
	supplier: "",
	projectName: "",
	projectAddress: "",
	unitName: "",
	budget: 0,
	editor: "",
	tel: "",
});
const columns = [
	{
		title: "材料名称",
		dataIndex: "name",
		key: "name",
	},
	{
		title: "规格型号",
		dataIndex: "platform",
		key: "platform",
	},
	{
		title: "用量",
		dataIndex: "version",
		key: "version",
	},
	{
		title: "单位",
		dataIndex: "upgradeNum",
		key: "upgradeNum",
	},
	{
		title: "项目参考价",
		dataIndex: "creator",
		key: "creator",
	},
	{
		title: "历史成交价",
		dataIndex: "creator1",
		key: "creator",
	},
	{
		title: "清单价",
		dataIndex: "creator2",
		key: "creator",
	},
	{
		title: "其他单位采购价",
		dataIndex: "creator3",
		key: "creator",
	},
	{
		title: "计划入场时间",
		dataIndex: "createdAt",
		key: "createdAt",
	},
];
const data = [];
for (let i = 0; i < 3; ++i) {
	data.push({
		key: i,
		name: `混凝土`,
		platform: `C${i*5+ (i == 0 ? 20 : 25)}`,
		version: `${(i+1) * 1000}`,
		upgradeNum: "立方米",
		creator: `${300 + (i+1)*20}`,
		creator1: `${300 + (i)*20}`,
		creator2: `${320 + (i+1)*20}`,
		creator3: `${310 + (i+1)*20}(省建投)`,
		createdAt: "2014-12-24 23:12:00",
	});
}
const innerColumns = [
	{
		title: "供应商",
		dataIndex: "supplier",
		key: "supplier",
	},
	{
		title: "出厂价格(含税)",
		dataIndex: "date",
		key: "date",
	},
	{
		title: "运费(含税)",
		dataIndex: "name",
		key: "name",
	},
	{
		title: "合计(含税)",
		dataIndex: "summary",
		key: "summary",
	},
	{
		title: "税率",
		dataIndex: "taxRate",
		key: "taxRate",
	},
	{
		title: "现有库存",
		dataIndex: "store",
		key: "store",
	},
	{
		title: "产量",
		dataIndex: "yield",
		key: "yield",
	},
	{
		title: "账期",
		dataIndex: "payTime",
		key: "payTime",
	},
	{
		title: "信用等级",
		dataIndex: "level",
		key: "level",
	},
	{
		title: "联系方式",
		dataIndex: "tel",
		key: "tel",
	},
];
const innerData = [];
const arr = ['一', '二', '三']
for (let i = 0; i < 3; ++i) {
	innerData.push({
		supplier: `第${arr[i]}商砼有限公司`,
		date: `${280 + i * 10}`,
		name: "40",
		summary: `${340 + i * 10}`,
		taxRate: "3%",
		store: "20000",
		yield: "500/日",
		payTime: `${(i+1)*6}个月`,
		level: `${i == 1 ? '一' : '二'}级`,
		tel: "177****9999",
	});
}
function routeToQuotation() {
	router.push("/quotation");
}
const routeToG2 = () => {
	router.push("/g2")
}
</script>

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