{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="breadcrumb"}
<span class="layui-breadcrumb">
	<a href="http://www.meteteme.com/" target="_blank">江苏美天科技</a>
	<a href="/business/index/nav">
		<cite>CRM</cite>
	</a>
	<a>
		<cite>供应商管理</cite>
	</a>
</span>
{/block}
{block name="body"}
<div class="table-content p-3">
	<div class="layui-form-bar border-t border-x">
		<button class="layui-btn layui-btn-sm layui-bg-blue add-new">+ 新建供应商</button>
		<button class="layui-btn layui-btn-sm" id="refresh-btn">刷新</button>
	</div>
	<div class="layui-form-bar border-t border-x">
		<form id="taskForm" class="layui-form">
			<div class="layui-col-md4" style="width: 200px;margin-right: 10px;">
				<div class="layui-input-wrap">
					<div class="layui-input-prefix">
						<!--                        <i class="layui-icon layui-icon-username"></i>-->
					</div>
					<input id="gys" type="text" name="supplier_name" value="" placeholder="请输入供应商名称" class="layui-input"
						lay-affix="clear">
				</div>
			</div>
			<div class="layui-col-md4" style="width: 200px;margin-right: 10px;">
				<div class="layui-input-wrap">
					<input id="lxr" type="text" name="contact_name" value="" placeholder="请输入联系人名称" class="layui-input"
						lay-affix="clear">
				</div>
			</div>
			<div class="layui-col-md4" style="width: 200px;margin-right: 10px;">
				<div class="layui-input-wrap">
					<input id="lxdh" type="text" name="contact_phone" value="" placeholder="请输入联系电话" class="layui-input"
						lay-affix="clear">
				</div>
			</div>
			<button class="layui-btn" lay-submit lay-filter="webform">搜索</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</form>
	</div>
	<table class="layui-hide" id="supplier" lay-filter="supplier"></table>
</div>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
	const moduleInit = ['tool', 'gouguEdit', 'gouguComment'];

	function gouguInit() {
		var table = layui.table,
			form = layui.form,
			tool = layui.tool;

		//存储表格原始数据
		var originalData = [];

		// 添加按钮
		$('.add-new').on('click', function () {
			tool.open('/business/supplier/add');
		});

		// 刷新按钮
		$("#refresh-btn").on("click", function () {
			location.reload();
		});

		// 搜索按钮
		form.on('submit(webform)', function (data) {
			var field = data.field; // 获取表单字段

			// 根据筛选条件筛选原始数据
			var filteredData = originalData.filter(function (item) {
				return (!field.supplier_name || item.supplier_name.includes(field.supplier_name)) &&
					(!field.contact_name || item.contact_name.includes(field.contact_name)) &&
					(!field.contact_phone || item.contact_phone.includes(field.contact_phone));
			});

			// 更新表格，只修改数据，不重新加载整个表格结构
			layui.pageTable.reload({
				data: filteredData, // 使用筛选后的数据更新表格
				page: {
					curr: 1 // 重新从第 1 页开始
				}
			});

			return false; // 阻止默认 form 提交
		});

		// 表格渲染
		layui.pageTable = table.render({
			elem: '#supplier',
			title: '供应商列表',
			cellMinWidth: 80,
			url: "/business/supplier/index", // 数据接口
			page: true, // 开启分页
			limit: 50,
			height: 'full-130',
			cols: [[
				// {
				// 	field: 'id',
				// 	title: '供应商编号',
				// 	width: 100,
				// 	align: 'center',
				// 	rowspan: 2,
				// 	templet: function (d) {
				// 		return 'S' + d.id;
				// 	}
				// },
				{
					field: 'supplier_name',
					title: '供应商名称',
					align: 'center',
					width: 300,
					rowspan: 2,
					templet: function (d) {
						var html = '<span>' + (d.supplier_name || '-') + '</span>';
						return html;
					}
				},
				{
					field: 'contact_name',
					title: '联系人',
					align: 'center',
					width: 120,
					rowspan: 2,
					templet: function (d) {
						var html = '<span>' + (d.contact_name || '-') + '</span>';
						return html;
					}
				},
				{
					field: 'contact_phone',
					title: '联系电话',
					align: 'center',
					width: 120,
					rowspan: 2,
					templet: function (d) {
						var html = '<span>' + (d.contact_phone || '-') + '</span>';
						return html;
					}
				},
				{
					field: 'contact_email',
					title: '电子邮件',
					align: 'center',
					width: 180,
					rowspan: 2,
					templet: function (d) {
						var html = '<span>' + (d.contact_email || '-') + '</span>';
						return html;
					}
				},
				{
					field: 'company_size',
					title: '规模',
					align: 'center',
					width: 120,
					rowspan: 2,
					templet: function (d) {
						// 将 company_size 转换为字符串进行匹配
						var sizeText = '';
						switch (String(d.company_size)) {
							case '1':
								sizeText = '微型企业';
								break;
							case '2':
								sizeText = '小型企业';
								break;
							case '3':
								sizeText = '中型企业';
								break;
							case '4':
								sizeText = '大型企业';
								break;
							case '5':
								sizeText = '事业单位';
								break;
							case '6':
								sizeText = '国有企业';
								break;
							case '7':
								sizeText = '外企';
								break;
							case '8':
								sizeText = '其他';
								break;
							default:
								sizeText = '-';
						}
						return '<span>' + sizeText + '</span>';
					}
				},
				{
					field: 'business_scope',
					title: '业务范围',
					align: 'center',
					width: 240,
					rowspan: 2,
					templet: function (d) {
						var html = '<span>' + (d.business_scope || '-') + '</span>';
						return html;
					}
				},
				{
					field: 'remarks',
					title: '备注',
					align: 'center',
					rowspan: 2,
					templet: function (d) {
						var html = '<span>' + (d.remarks || '-') + '</span>';
						return html;
					}
				},
				{
					title: "操作",
					align: "center",
					width: 240,
					minWidth: 125,
					toolbar: "#barDemo",
				},
			]],
			done: function (res, curr, count) {
				// 仅在首次加载表格时保存原始数据
				if (originalData.length === 0) {
					originalData = res.data;
				}
			}
		});

		// 搜索重置按钮
		$("#taskForm").on("click", '[lay-filter="clear"]', function () {
			layui.pageTable.reload({
				data: originalData, // 重置为原始数据
				page: {
					curr: 1 // 重新从第 1 页开始
				}
			});
		});

		table.on('tool(supplier)', function (obj) {
			var data = obj.data; // 获取当前行的数据

			if (obj.event === 'edit') {
				var id = data.id; // 获取当前行数据的id
				var url = '/business/supplier/edit?id=' + id;
				tool.open(url);
			} else if (obj.event === 'delete') {
				layui.layer.confirm(
					"确定删除该账号吗？",
					{ icon: 3, title: "提示" },
					function (index) {
						$.post(
							"/business/supplier/delete",
							{ id: data.id },
							function (res) {
								if (res.code === 0) {
									layui.layer.msg(res.msg);
									obj.del(); // 删除表格中的对应行数据
								} else {
									layui.layer.msg(res.msg);
								}
							}
						);
						layui.layer.close(index);
					}
				);
			} else if (obj.event === 'invoice') {
				var id = data.id; // 获取当前行数据的id
				var url = '/business/supplier/invoice?id=' + id;
				tool.open(url);
			} else if (obj.event === 'view') {
				var id = data.id; // 获取当前行数据的id
				console.log('查看详情', id);
				// 查看详情
				layui.layer.open({
					type: 2, // iframe层
					title: '供应商详情',
					shadeClose: true,
					shade: 0.8,
					area: ['70%', '90%'], // 宽高
					content: '/business/supplier/view/id/' + id,
				});
			}
		});
	}


</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs " lay-event="view">详情</a>
    <a class="layui-btn layui-btn-xs " lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="invoice">开票信息</a>
    <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="delete">删除</a>
</script>
{/block}
<!-- /脚本 -->