<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-select
							v-model:value="formState.state"
							placeholder="Please select a level"
						>
							<a-select-option value="1">S</a-select-option>
							<a-select-option value="2">A</a-select-option>
							<a-select-option value="3">B</a-select-option>
							<a-select-option value="4">C</a-select-option>
						</a-select>
					</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 === 'operation'">
					<a-button @click="toggleModal" type="link">施工方评价</a-button>
					<a-divider type="vertical" />
					<a-button @click="toggleModal" type="link">年度评级</a-button>
					<a-divider type="vertical" />
					<a-button @click="routeToQuotation" type="link">查看报价</a-button>
					<a-divider type="vertical" />
					<a-button type="link">详情</a-button>
					<a-divider type="vertical" />
					<a-button 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="质量(60%)">
						<a-rate :count="4" v-model:value="rateForm.quality" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="交期(15%)">
						<a-rate :count="4" v-model:value="rateForm.timely" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="服务(10%)">
						<a-rate :count="4" v-model:value="rateForm.service" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="价格(10%)">
						<a-rate :count="4" v-model:value="rateForm.price" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="技术能力(5%)">
						<a-rate :count="4" v-model:value="rateForm.ability" />
					</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>
</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 rateForm = reactive({
	quality: "",
	timely: "",
	service: "",
	price: "",
	ability: ""
});

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: "level",
	},
	{
		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: "一级",
		editor: "xAdmin",
		legalPerson: "韦庆功",
		state: 2,
		time: "2022-11-17",
	},
	{
		key: "企业4信息",
		name: "177****1999",
		objectName: "1003",
		level: "一级",
		editor: "xAdmin",
		legalPerson: "韦庆功",
		state: 3,
		time: "2022-11-17",
	},
	{
		key: "企业5信息",
		name: "177****1999",
		objectName: "1003",
		level: "二级",
		editor: "xAdmin",
		legalPerson: "韦庆功",
		state: 1,
		time: "2022-11-17",
	},
];

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

function toggleModal() {
	visible.value = !visible.value;
}
function routeToQuotation() {
	router.push("/quotation2")
}
</script>

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