<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-tree-select
							v-model:value="formState.cailiaopinlei"
							style="width: 100%"
							:tree-data="treeData"
							:show-checked-strategy="SHOW_PARENT"
							treeNodeFilterProp="title"
							allow-clear
							show-search
							placeholder="请选择品类"
						/>
					</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.types" />
					</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-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="8">
					<a-form-item label="供应商评级">
						<a-select
							v-model:value="formState.state"
							placeholder="Please select a country"
						>
							<a-select-option value="1">一级</a-select-option>
							<a-select-option value="2">二级</a-select-option>
							<a-select-option value="3">三级</a-select-option>
							<a-select-option value="4">四级</a-select-option>
						</a-select>
					</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="quotation"
			: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="opentype == 1">
					<div v-if="column.dataIndex == 'operation'">
						<a-button v-if="record.state == 0" type="link"
						>上报公司</a-button
					>
					</div>
				</template>
			</template>
		</a-table>
	</div>
</template>

<script setup>
import { reactive, computed  } from "vue"
import { useRouter, useRoute } from "vue-router"
import { PlusOutlined } from "@ant-design/icons-vue"
import treeData from "@/utils/category";
import { useStore } from "vuex";

const store = useStore();
const router = useRouter()
const route = useRoute()

const opentype = route.query?.type
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: "gongyingshang"
	},
	{
		title: "材料名称",
		dataIndex: "cailiaomingcheng",
	},
	{
		title: "规格型号",
		dataIndex: "guigexinghao",
	},
	{
		title: "单位",
		dataIndex: "danwei",
	},
	{
		title: "出厂价格(含税)",
		dataIndex: "chuchangjiage",
	},
	{
		title: "税率",
		dataIndex: "_shuilv",
	},
	{
		title: "现有库存",
		dataIndex: "_xianyoukucun",
	},
	{
		title: "产能",
		dataIndex: "_channeng",
	},
	{
		title: "信用等级",
		dataIndex: "name",
	},
	{
		title: "更新时间",
		dataIndex: "times",
	},
	{
		title: "联系方式",
		dataIndex: "tel",
	}
];

const quotation = computed(() => store.state.supplier.quotation);

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

function routeToCheck() {
	router.push("/procurementPlanningDetailedList");
}
</script>

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