<template>
	<div class="form_wrap">
		<a-form
			:model="formState"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
		>
			<a-row>
				<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-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-row>
		</a-form>
	</div>
	<a-divider />
	<div class="list_wrap">
		<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 == 2" color="purple"
						>比价中</a-tag
					>
					<a-tag v-if="record.state == 3" color="green">已批准</a-tag>
				</template>
				<template v-if="column.dataIndex === 'operation'">
					<a-button @click="toggleDetail" type="link">详情</a-button>
					<a-divider type="vertical" />
					<a-button @click="toggleModal" type="link">通过</a-button>
					<a-divider type="vertical" />
					<a-button @click="toggleModal" type="link" danger
						>驳回</a-button
					>
				</template>
			</template>
		</a-table>
	</div>
	<a-modal
		v-model:visible="visible"
		:width="700"
		title="说明"
		@ok="toggleModal"
	>
		<a-form
			:model="formState"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
		>
			<a-row>
				<a-col :span="24">
					<a-form-item label="初审意见(材料设备部)">
						<a-textarea></a-textarea>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="复审意见">
						<a-textarea></a-textarea>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="公司主管领导意见">
						<a-textarea></a-textarea>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-modal>
	<a-modal v-model:visible="showDetail" :width="700" :footer="null">
		<a-descriptions title="详情" bordered>
			<a-descriptions-item label="公司全称" :span="2">供应商一</a-descriptions-item>
			<a-descriptions-item label="统一社会信用代码">912301021271261376</a-descriptions-item>
			<a-descriptions-item label="地址" :span="3">黑龙江省哈尔滨市道外区水泥路</a-descriptions-item>
			<a-descriptions-item label="报名品类" :span="2">黑色及有色金属</a-descriptions-item>
			<a-descriptions-item label="经营模式">生产型企业</a-descriptions-item>
			<a-descriptions-item label="主营产品" :span="3">电缆，线缆</a-descriptions-item>
			<a-descriptions-item label="企业优势" :span="3">曾与大型企业合作，质量过硬</a-descriptions-item>
			<a-descriptions-item label="联系人" :span="2">韦庆功</a-descriptions-item>
			<a-descriptions-item label="联系电话" :span="3">177****1921</a-descriptions-item>
			<a-descriptions-item label="职位" :span="3">总经理</a-descriptions-item>
			<a-descriptions-item label="营业执照">
				<img class="yyzz" src="@/assets/yyzz.png" />
			</a-descriptions-item>
		</a-descriptions>
	</a-modal>
</template>

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

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

const columns = [
	{
		title: "序号",
		align: "center",
		width: 80,
		customRender: (data) => {
			return data.index + 1;
		},
	},
	{
		title: "企业信息",
		dataIndex: "key",
	},
	{
		title: "联系方式",
		dataIndex: "name",
	},
	{
		title: "企业法人",
		dataIndex: "legalPerson",
	},
	{
		title: "联系人",
		dataIndex: "editor",
	},
	{
		title: "注册资金(万元)",
		dataIndex: "objectName",
	},
	{
		title: "申请时间",
		dataIndex: "time",
	},
	{
		title: "操作",
		dataIndex: "operation",
		scopedSlots: { customRender: "operation" },
	},
];
const data = [
	{
		key: "第一商砼有限公司",
		name: "177****1999",
		objectName: "1003",
		level: "一级",
		editor: "xAdmin",
		legalPerson: "李XX",
		state: 0,
		time: "2022-11-17",
	},
	{
		key: "企业2信息",
		name: "177****1999",
		objectName: "1003",
		level: "--",
		editor: "xAdmin",
		legalPerson: "韦庆功",
		state: 1,
		time: "2022-11-17",
	},
	{
		key: "企业3信息",
		name: "177****1999",
		objectName: "1003",
		level: "B",
		editor: "xAdmin",
		legalPerson: "韦庆功",
		state: 2,
		time: "2022-11-17",
	},
	{
		key: "企业4信息",
		name: "177****1999",
		objectName: "1003",
		level: "S",
		editor: "xAdmin",
		legalPerson: "韦庆功",
		state: 3,
		time: "2022-11-17",
	},
	{
		key: "企业5信息",
		name: "177****1999",
		objectName: "1003",
		level: "s+",
		editor: "xAdmin",
		legalPerson: "韦庆功",
		state: 1,
		time: "2022-11-17",
	},
];

const routeToAdd = () => {
	router.push("/procurementPlanningAdd");
};

const toggleModal = () => {
	visible.value = !visible.value;
};

// 详情
const showDetail = ref(false);
const toggleDetail = () => {
	showDetail.value = !showDetail.value;
};
</script>

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