<!--
@ 作者: 鲁智强
@ 时间: 2023-08-15 11:34:38
@ 备注: 
-->
<template>
	<div class="box">
	  <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-form-item>
		<el-input
		  v-model="searchName"
		  style="width: 170px"
		  placeholder="问题"
		></el-input>
		<el-button type="primary" style="width: 80px" @click="getUserList"
		  >查询</el-button
		>
	  </span>
	  <el-table
		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"
			  @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 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: "",//文章标题
			sex: "",//所属栏目
			age: "",//可见范围
			num: "",//访问数据
			iop: "",//文档来源
			ccc: "",//文档标签
			ade: "",//文档描述
			ddd: "",//排序
			editContvalue:"dsdd",//文档正文
		  },
		  {
			id: 2,
			name: "",
			sex: "",
			age: "",
			num: "阅读量：14 评论数：0 收藏数：0点赞数：2 踩：0 综合评分：0",
			iop: "2",
			ccc: "",
			ade: "",
			ddd: "",
					  editContvalue:"",
		  },
		  {
			id: 3,
			name: "山东恒信高科能源有限公司--程序文件汇编",
			sex: "流程制度",
			age: "公开",
			num: "	阅读量：0 评论数：0 收藏数：0点赞数：3 踩：0 综合评分：0",
			iop: "1",
			ccc: "",
			ade: "",
			ddd: "",
					  editContvalue:"",
		  },
		],
	  });
		  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); // 将新数据添加到阵列
		},
			  async getUserList() {
		  // 这里调用接口来获取新的数据
		  try {
			const response = await axios.get("your_api_url", {
			  params: {
				query: searchName.value, // 传递查询条件
			  },
			});
  
			// 更新 data.studentInfo 或其他操作，例如：
			data.studentInfo = response.data;
		  } catch (error) {
			// 处理错误
		  }
		},
  });
	  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>
  