<template>
	<div class="form_wrap">
		<a-form
			:model="formState"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
		>
			<a-row>
				<a-col :span="12">
					<a-form-item label="计划状态">
						<a-select
							v-model:value="formState.state"
							placeholder="请选择状态"
						>
							<a-select-option value="1">待审批</a-select-option>
							<a-select-option value="2">待询价</a-select-option>
							<!-- 待审批，待询价，询价中，已结束 -->
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="需用单位">
						<a-input v-model:value="formState.name" />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="时间">
						<a-range-picker
							v-model:value="formState['range-time-picker']"
							show-time
							format="YYYY-MM-DD HH:mm:ss"
							value-format="YYYY-MM-DD HH:mm:ss"
					/></a-form-item>
				</a-col>
				<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-option value="2"
							>水泥路雨水泵站及配套管线工程</a-select-option
						>
					</a-select>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</div>
	<a-divider />
	<div class="list_wrap">
		<div class="btn_content">
			<a-button @click="routeToAdd" type="primary">
				<template #icon><plusOutlined /></template>
				新增询价计划
			</a-button>
		</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 === 'state'">
					<a-tag v-if="record.state == 0" color="cyan">待审批</a-tag>
					<a-tag v-if="record.state == 1" color="blue">待询价</a-tag>
					<a-tag v-if="record.state == 3" color="green">已批准</a-tag>
				</template>
				<template v-if="column.dataIndex === 'operation'">
					<a-button @click="routeToCheck" v-if="record.state == 0" type="link">编辑</a-button>
					<a-divider v-if="record.state == 0" type="vertical" />
					<a-button @click="fnSend" v-if="record.state == 1" type="link"
						>发布比价</a-button
					>
					<a-button v-if="record.state == 0 || record.state == 1" type="link"
						>撤回</a-button
					>
					<a-button v-if="record.state == 2" type="link"
						>上报公司</a-button
					>
					<a-divider v-if="record.state == 0" type="vertical" />
					<a-button type="link" danger>删除</a-button>
				</template>
			</template>
		</a-table>
	</div>
</template>

<script setup>
import { reactive } from "vue"
import { useRouter } from "vue-router"
import { PlusOutlined } from "@ant-design/icons-vue"
import { message } from 'ant-design-vue';

const router = useRouter()
const labelCol = {
	style: {
		width: "120px",
	},
};
const wrapperCol = {
	span: 14,
};
const formState = reactive({
	name: "",
	state: "",
});

const columns = [
	{
		title: "序号",
		align: "center",
		width: 80,
		customRender: (data) => {
			return data.index + 1;
		},
	},
	{
		title: "计划名称",
		dataIndex: "planName",
	},
	{
		title: "项目名称",
		dataIndex: "objectName",
	},
	{
		title: "需用单位",
		dataIndex: "userName",
	},
	{
		title: "编制人",
		dataIndex: "editor",
	},
	{
		title: "进展状态",
		dataIndex: "state",
	},
	{
		title: "发起时间",
		dataIndex: "time",
	},
	{
		title: "计划进场时间",
		dataIndex: "plantime",
	},
	{
		title: "操作",
		dataIndex: "operation",
		scopedSlots: { customRender: "operation" },
	},
];
const data = [
	{
		key: "1668678091631",
		planName: "商品混凝土第一批次询价",
		objectName: "黑龙江省哈尔滨市宾县宾西经济技术开发区风电叶片厂房建设项目施工",
		userName: "二分公司",
		editor: "马天巍",
		state: 0,
		time: "2022-11-17",
		plantime: "2022-12-30"
	},
	{
		key: "1668678091631",
		planName: "中粗砂第一批次询价",
		objectName: "水泥路雨水泵站及配套管线工程",
		userName: "一分公司",
		editor: "孟宇",
		state: 1,
		time: "2022-11-17",
		plantime: "2022-12-30"
	}
];

function routeToAdd() {
	router.push("/procurementPlanningAdd");
}

function routeToCheck() {
	router.push("/sourcingRelease");
}

const fnSend = () => {
	message.success('操作成功')
}
</script>

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