<!--
@ 作者: 鲁智强
@ 时间: 2023-08-15 11:34:38
@ 备注: 
-->
<template>
	<div class="box">
	  <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
	  <el-button class="new_btn" type="primary" @click="handleNew"
		>新增</el-button
	  >
	  <el-button type="warning" :icon="Star" circle
		><el-icon><RefreshRight /></el-icon
	  ></el-button>
	  <span class="aaa">
		<el-form-item label="" style="width: 50">
		  <el-select v-model="form.region" placeholder="请选分厂">
			<el-option label="请选分厂" value="0"></el-option>
			<el-option label="甲醇分厂" value="1"></el-option>
			<el-option label="化产分厂" value="2"></el-option>
			<el-option label="动力分厂" value="3"></el-option>
			<el-option label="机焦车间" value="4"></el-option>
			<el-option label="质检中心" value="5"></el-option>
			<el-option label="安环部" value="6"></el-option>
			<el-option label="备煤车间" value="7"></el-option>
			<el-option label="保卫部" value="8"></el-option>
			<el-option label="企管部" value="9"></el-option>
			<el-option label="高管" value="10"></el-option>
			<el-option label="综合办" value="11"></el-option>
			<el-option label="人力资源部" value="12"></el-option>
			<el-option label="财务部" value="13"></el-option>
			<el-option label="营销部" value="14"></el-option>
			<el-option label="生产部" value="15"></el-option>
			<el-option label="仓储中心" value="16"></el-option>
			<el-option label="物流中心" value="17"></el-option>
			<el-option label="办公室" value="18"></el-option>
			<el-option label="审计监察部" value="19"></el-option>
			<el-option label="法律事务部" value="20"></el-option>
			<el-option label="财务部" value="21"></el-option>
			<el-option label="供应部" value="22"></el-option>
			<el-option label="销售部" value="23"></el-option>
			<el-option label="生产计划部" value="24"></el-option>
		  </el-select>
		</el-form-item>
		<el-form-item label="">
		  <el-select v-model="form.section" placeholder="请选工段"> </el-select>
		</el-form-item>
		<el-form-item label="">
		  <el-select v-model="form.position" placeholder="请选职务"> </el-select>
		</el-form-item>
		<el-form-item label="">
		  <el-select v-model="form.column" placeholder="请选栏目">
			<el-option label="请选栏目" value="0"></el-option>
			<el-option label="流程制度" value="1"></el-option>
			<el-option label="工艺技术" value="2"></el-option>
			<el-option label="设备管理" value="3"></el-option>
			<el-option label="仪控仪表" value="4"></el-option>
			<el-option label="机电维修" value="5"></el-option>
			<el-option label="安全生产" value="6"></el-option>
			<el-option label="质量管理" value="7"></el-option>
			<el-option label="财务管理" value="8"></el-option>
			<el-option label="人力资源" value="9"></el-option>
			<el-option label="仓储物流" value="10"></el-option>
			<el-option label="营销采购" value="11"></el-option>
		  </el-select>
		</el-form-item>
		<el-input
		  v-model="studentInfo.name"
		  style="width: 170px"
		  placeholder="请输入题目"
		></el-input>
		<el-button type="primary" style="width: 80px" @click="getUserList"
		  >查询</el-button
		>
	  </span>
	  <el-tablea
		ref="multipleTableRef"
		:data="studentInfo"
		border
		style="width: 100%"
		stripe
		@selection-change="handleSelectionChange"
	  >
		<el-table-column type="selection" width="55" />
		<el-table-column prop="name" label="文章标题" />
		<el-table-column prop="sex" label="所属栏目" />
		<el-table-column prop="age" label="可见范围" />
		<el-table-column prop="num" label="访问数据" width="440" />
		<el-table-column prop="abc" label="状态" width="120">
		  <template #default="row">
			<el-switch v-model="row.row.status" />
		  </template>
		</el-table-column>
		<el-table-column fixed="right" label="操作">
		  <template #default="{ row }">
			<el-button type="success" size="small" @click="handleEdit(row)"
			  >修改</el-button
			>
			<el-button type="danger" size="small" @click="handleDel(row)"
			  >删除</el-button
			>
		  </template>
		</el-table-column>
	  </el-table>
	  <!-- 新建/编辑弹框 -->
	  <Dialog
			class="add"
		v-if="dialogShow"
		v-model:dialogShow="dialogShow"
		:row-info="rowInfo"
		:title="title"
		:array-num="studentInfo.length"
		@addRow="addRow"
		@editRow="editRow"
		@save="handleSave"
			  @image-uploaded="handleImageUploaded"
	  />
	  <!-- 详情弹窗 -->
	  <Detail v-if="detailShow" :row-info="rowInfo" @closeDetail="closeDetail" />
	</div>
  </template>
  
  <script>
  import { reactive, ref, toRefs, computed, onMounted } from "vue";
  import { countdownEmits, ElMessageBox, ElTable } from "element-plus";
  import { Timer } from "@element-plus/icons-vue";
  import axios from "axios"; // Import Axios library
  import Dialog from "./dialog.vue";
  import Detail from "./detail.vue";
  export default {
	// eslint-disable-next-line vue/no-reserved-component-names
	components: { Dialog, Detail },
	setup() {
	  const data = reactive({
		dialogShow: false, // 新增/编辑弹框
		detailShow: false, // 详情弹窗
		rowInfo: {}, // 新增/编辑的数据
		title: "", // 是新建还是修改
			  queryInfo:{
		  query:'',
				  pagenum:1,
				  pagesize:'',
			  },
		form: {
		  name: "",
		  region: "",
		  date1: "",
		  date2: "",
		  delivery: false,
		  type: [],
		  resource: "",
		  desc: "",
		  section: "",
		  position: "",
		  column: "",
		},
		studentInfo: [
		  {
			id: 1,
			name: "办公区域6S及办公用品检查通报",//文章标题
			sex: "其他",//所属栏目
			age: "公开",//可见范围
			num: "阅读量：195 评论数：0 收藏数：0点赞数：1 踩：1 综合评分：0",//访问数据
			iop: "1",//文档来源
			ccc: "",//文档标签
			ade: "",//文档描述
			ddd: "",//排序
					  editContvalue:"dsdd",//文档正文
					  dialogVis: "",
			dialogImageUrl: "",	
					  imageUrl:"",
		  },
		  {
			id: 2,
			name: "山东恒信高科能源有限公司--管理手册",
			sex: "流程制度",
			age: "公开",
			num: "阅读量：14 评论数：0 收藏数：0点赞数：2 踩：0 综合评分：0",
			iop: "2",
			ccc: "",
			ade: "",
			ddd: "",
					  editContvalue:"",
					  dialogVis: "",
			dialogImageUrl: "",
					  imageUrl:"",
		  },
		  {
			id: 3,
			name: "山东恒信高科能源有限公司--程序文件汇编",
			sex: "流程制度",
			age: "公开",
			num: "	阅读量：0 评论数：0 收藏数：0点赞数：3 踩：0 综合评分：0",
			iop: "1",
			ccc: "",
			ade: "",
			ddd: "",
					  editContvalue:"",
					  dialogVis: "",
			dialogImageUrl: "",
					  imageUrl:"",
		  },
		],
	  });
		  const imageUrl = ref('');
	  // 处理子组件传递的图片数据
	  const handleImageUploaded = (imageUrlFromChild) => {
		// 将传递的图片数据存储到状态中
		 imageUrl.value = imageUrlFromChild;
		// 这里你可以根据需要进行其他操作，比如更新其他数据
  };
	  const jokeMes = ref([]) // 表格数据
	  const temJokeMes = ref([]) // 临时表格数据
	  const searchName = ref(""); // 用于查询的输入值
	  const filterTableData = computed(() =>
		data.studentInfo.filter(
		  (item) => !searchName.value || item.name.includes(searchName.value)
		)
	  );
	  const multipleSelection = ref([]);
	  const method = reactive({
		handleNew() {
		  data.title = "新增";
		  data.rowInfo = {};
		  data.dialogShow = true;
		},
		handleDetail(val) {
		  data.detailShow = true;
		  data.rowInfo = val;
		},
		handleEdit(val) {
		  data.title = "修改";
		  data.dialogShow = true;
		  data.rowInfo = val;
		},
		handleDel(val) {
		  ElMessageBox.confirm("你确定删除这条信息吗?", "提示", {
			confirmButtonText: "确认",
			cancelButtonText: "取消",
			type: "warning",
		  })
			.then(() => {
			  method.handleSure(val);
			})
			.catch(() => {
			  // 捕获错误
			});
		},
		handleSure(val) {
		  this.dialogVisible = false;
		  const index = data.studentInfo.findIndex((item) => item.id === val.id);
		  data.studentInfo.splice(index, 1);
		},
		// 添加行
		addRow(val) {
		  data.studentInfo.push(val);
		},
		// 编辑行
		editRow(val) {
		  let index = data.studentInfo.findIndex(
			(item, index) => item.id === val.id
		  );
		  data.studentInfo.splice(index, 1, val);
		},
		// 关闭详情弹窗
		closeDetail() {
		  data.detailShow = false;
		},
		handleSelectionChange(val) {
		  multipleSelection.value = val;
		},
		handleBatchDelete() {
		  if (multipleSelection.value.length === 0) {
			ElMessageBox.alert("请选择要删除的数据", "提示", {
			  confirmButtonText: "确定",
			});
			return;
		  }
  
		  ElMessageBox.confirm("确定要批量删除所选数据吗？", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
		  })
			.then(() => {
			  data.studentInfo = data.studentInfo.filter(
				(item) => !multipleSelection.value.includes(item)
			  );
			  multipleSelection.value = []; // 清除选择
			})
			.catch(() => {
			  // 用户取消删除
			});
		},
		handleSave(formData) {
		  formData.id = this.studentInfo.length + 1; //生成唯一ID
		  data.studentInfo.push(formData); // 将新数据添加到阵列
		},
  });
	  return { ...toRefs(data), ...method, ...filterTableData, searchName,imageUrl,handleImageUploaded,};
	},
  };
  </script>
  <style lang="scss" scoped>
  .aab {
	display: grid;
	grid-template-columns: repeat(6, 1fr); /* 五列 */
	align-items: start; /* 顶格对齐 */
	float: right;
	width: 800px;
	height: 30px;
	background-color: burlywood;
  }
  
  .aaa {
	display: grid;
	grid-template-columns: repeat(6, 1fr); /* 五列 */
	align-items: start; /* 顶格对齐 */
	float: right;
	width: 700px;
	height: 30px;
  }
  </style>
  
