<template>
	<div class="form_wrap">
		<a-form :label-col="labelCol">
			<div class="btn_content">
				<a-button
					@click="
						visible = true;
						openType = 'add';
					"
					type="primary"
				>
					<template #icon>
						<plusOutlined />
					</template>
					新增材料报价
				</a-button>
			</div>
		</a-form>
		<div class="form_wrap">
			<a-alert
				message="若材料价格有变动请您及时更改材料报价，如未更新报价则视为当前报价有效"
				type="info"
				show-icon
			/>
		</div>
		<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 === 'operation'">
					<a-button @click="handleEdit(record.id)" type="link"
						>编辑</a-button
					>
					<a-divider type="vertical" />
					<a-popconfirm
						title="确认删除?"
						@confirm="handleRemove(record.id)"
					>
						<a-button type="link" danger>删除</a-button>
					</a-popconfirm>
				</template>
			</template>
		</a-table>
	</div>
	<a-modal
		v-model:visible="visible"
		:width="600"
		:footer="null"
		title="新增材料报价"
		@ok="handleOk"
	>
		<a-form
			:model="formState"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
			:rules="rules"
			@finish="onFinish"
			@finishFailed="onFinishFailed"
		>
			<a-row>
				<a-col :span="24">
					<a-form-item label="材料名称" name="cailiaomingcheng">
						<a-input v-model:value="formState.cailiaomingcheng" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="材料品类" name="cailiaopinlei">
						<a-tree-select
							v-model:value="formState.cailiaopinlei"
							style="width: 100%"
							:tree-data="treeData"
							:show-checked-strategy="SHOW_PARENT"
							treeNodeFilterProp="title"
							show-search
							allow-clear
							placeholder="请选择品类"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="规格型号" name="guigexinghao">
						<a-input v-model:value="formState.guigexinghao" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="单位" name="danwei">
						<a-input v-model:value="formState.danwei" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="出厂价格(含税)" name="chuchangjiage">
						<a-input v-model:value="formState.chuchangjiage" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="税率" name="shuilv">
						<a-input v-model:value="formState.shuilv" suffix="%" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="现有库存" name="xianyoukucun">
						<a-input
							v-model:value="formState.xianyoukucun"
							:suffix="formState.danwei"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="产能" name="channeng">
						<a-input v-model:value="formState.channeng">
							<template #addonAfter>
								<a-select
									v-model:value="channengType"
									style="width: 60px"
								>
									<a-select-option value="日"
										>日</a-select-option
									>
									<a-select-option value="月"
										>月</a-select-option
									>
								</a-select>
							</template>
						</a-input>
					</a-form-item>
				</a-col>
				<div class="ml140">
					<a-button type="primary" html-type="submit">保存</a-button>
				</div>
			</a-row>
		</a-form>
	</a-modal>
</template>
<script setup>
import { reactive, ref, computed } from "vue";
import { useRouter } from "vue-router";
import { PlusOutlined } from "@ant-design/icons-vue";
import { TreeSelect } from "ant-design-vue";
import { message } from "ant-design-vue";
import treeData from "@/utils/category";
import { useStore } from "vuex";

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

const quotation = computed(() => store.state.supplier.quotation); // 这里的demo与store里的demo相对应

// 表单布局
const labelCol = {
	style: {
		width: "140px",
	},
};
const wrapperCol = {
	span: 14,
};
const formState = reactive({
	cailiaomingcheng: "",
	cailiaopinlei: "",
	guigexinghao: "",
	danwei: "",
	chuchangjiage: "",
	shuilv: "",
	xianyoukucun: "",
	channeng: "",
});
const channengType = ref("日");
const openType = ref("edit");
const visible = ref(false);

// 数据
const columns = [
	{
		title: "序号",
		align: "center",
		width: 80,
		customRender: (data) => {
			return data.index + 1;
		},
	},
	{
		title: "材料名称",
		dataIndex: "cailiaomingcheng",
	},
	{
		title: "规格型号",
		dataIndex: "guigexinghao",
	},
	{
		title: "单位",
		dataIndex: "danwei",
	},
	{
		title: "出厂价格(含税)",
		dataIndex: "chuchangjiage",
	},
	{
		title: "税率",
		dataIndex: "_shuilv",
	},
	{
		title: "现有库存",
		dataIndex: "_xianyoukucun",
	},
	{
		title: "产能",
		dataIndex: "_channeng",
	},
	{
		title: "操作",
		dataIndex: "operation",
		scopedSlots: { customRender: "operation" },
	},
];

// 表单验证
const rules = {
	cailiaomingcheng: [
		{
			required: true,
			trigger: "change",
			message: "请输入材料名称",
		},
	],
	cailiaopinlei: [
		{
			required: true,
			trigger: "change",
			message: "请选择材料品类",
		},
	],
	guigexinghao: [
		{
			required: true,
			trigger: "change",
			message: "请输入规格型号",
		},
	],
	danwei: [
		{
			required: true,
			trigger: "change",
			message: "请输入单位",
		},
	],
	chuchangjiage: [
		{
			required: true,
			trigger: "change",
			message: "请输入出厂价格",
		},
	],
	shuilv: [
		{
			required: true,
			trigger: "change",
			message: "请输入税率",
		},
	],
	xianyoukucun: [
		{
			required: true,
			trigger: "change",
			message: "请输入现有库存",
		},
	],
	channeng: [
		{
			required: true,
			trigger: "change",
			message: "请输入产能",
		},
	],
};

/**
 * 新增 || 修改
 * @param {*} values
 */
const onFinish = (values) => {
	const fn =
		openType.value == "edit" ? "editQuotationItem" : "addQuotationItem";

	visible.value = false;
	values._channeng = `${values.channeng}/${channengType.value}`;
	store.dispatch(fn, {
		values,
		current: current.value,
	});
	message.success("操作成功！");
	Object.keys(formState).forEach((key) => {
		formState[key] = ''
	});
};

/**
 * 删除
 * @param {*} id
 */
const handleRemove = (id) => {
	store.dispatch("removeQuotationItem", id);
	message.success("操作成功！");
};

const current = ref(null);
/**
 * 编辑
 * @param {*} id
 */
const handleEdit = (id) => {
	const item = quotation.value.filter((item) => item.id == id);

	openType.value = "edit";
	current.value = id;
	Object.keys(item[0]).forEach((key) => {
		formState[key] = item[0][key];
	});
	visible.value = true;
};
</script>
<style></style>
