<!--
@ 作者: 鲁智强
@ 时间: 2023-08-15 11:34:38
@ 备注: 
-->
<template>
	<div>
		<el-button type="danger" class="button-margin" size="large" @click="handleBatchDelete">批量删除</el-button>
	  <el-button type="warning" circle size="large"
		><el-icon><RefreshRight /></el-icon
	  ></el-button>
	  <span>
		<el-form-item label="问题：" class="aaa" style="font-size:100px;">
		<el-input
		  v-model="searchName"
		  style="width: 170px"
		  placeholder="问题"
			size="large"
		></el-input>
		<el-button type="success" style="width: 80px" size="large"
		  >查询</el-button
		>
	</el-form-item>
	  </span>
	  <el-table 
		ref="multipleTableRef" 
		border  
		stripe 
		:header-cell-style="{'width':'100%','background':'#F2F2F2','text-align':'center'}" >
		<el-table-column type="selection"/>
		<el-table-column prop="name" label="问题" />
		<el-table-column prop="sex" label="提问人" />
		<el-table-column prop="age" label="阅读量" />
		<el-table-column prop="abe" label="赞" />
		<el-table-column prop="ade" label="踩" />
		<el-table-column prop="age" label="评论" />
		<el-table-column prop="age" label="回答人数" />
		<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 prop="num" label="时间"/>
		<el-table-column fixed="right" label="操作">
		  <template #default="{ row }">
			<div class="button-container">
			<el-button type="success" size="default" class="button-margin" @click="handleEdit(row)" 
			  >查看答案列表</el-button
			>
			<span>
			<el-button type="danger" size="default" class="button-margin"
			  >下架</el-button
			>
		    </span>
			<div class="ooo">
			<el-button type="danger" size="default" class="button-margin" @click="handleDel(row)" 
			  >删除</el-button
			>
			</div>
		</div>
		  </template>
		</el-table-column>
	  </el-table>
	  <!-- 详情弹窗 -->
	</div>
  </template>
  
  <script lang="ts" setup>
  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"; // 导入公理函数库
	// eslint-disable-next-line vue/no-reserved-component-names
const data = reactive({
	dialogShow: false, // 新增/编辑弹框
	rowInfo: {}, // 新增/编辑的数据
	title: "", // 是新建还是修改
	queryInfo:{
		query:'',
		pagenum:1,
		pagesize:'',
	},
	form: {
		name: "",
		region: "",
		date1: "",
		date2: "",
		delivery: false,
		type: [],
		resource: "",
		desc: "",
		section: "",
		position: "",
		column: "",
	},
	studentInfo: {},
});
	  const imageUrl = ref('');
    // 处理子组件传递的图片数据
    const handleImageUploaded = (imageUrlFromChild:any) => {
	  // 将传递的图片数据存储到状态中
	   imageUrl.value = imageUrlFromChild;
};
    const jokeMes = ref([]) // 表格数据
    const temJokeMes = ref([]) // 临时表格数据
    const searchName = ref(""); // 用于查询的输入值
    const multipleSelection = ref([]);
     const handleNew=()=> {
        data.title = "新增";
        data.rowInfo = {};
        data.dialogShow = true;
      }
      const handleEdit=(val:any)=> {
        data.title = "答案列表";
        data.dialogShow = true;
        data.rowInfo = val;
      }
      const handleDel=(val:any)=> {
        ElMessageBox.confirm("你确定删除这条信息吗?", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
          })
          .catch(() => {
            // 捕获错误
          });
      }
      // 关闭详情弹窗
      const handleSelectionChange=(val:any)=> {
        multipleSelection.value = val;
      }
      const handleBatchDelete=()=> {
        if (multipleSelection.value.length === 0) {
          ElMessageBox.alert("请选择要删除的数据", "提示", {
            confirmButtonText: "确定",
          });
          return;
        }

        ElMessageBox.confirm("确定要批量删除所选数据吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
           
          })
          .catch(() => {
            // 用户取消删除
          });
      }

</script>
  <style lang="scss" scoped>
*{
    font-weight: bolder;
	font-size:15px;
} 
  .aaa {
    position: absolute;
	  left: 1350px;
		top: 0px;
	  margin: 10px 0;
		font-weight: bolder;
  }
.button-margin {
  margin: 10px 0; /* 设置右侧外边距，调整按钮之间的间距 */
}
.button-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 居中对齐 */
}
:deep(.el-table th){
  font-weight: bold; /* 设置表头字体加粗 */
  color: #333; /* 设置表头字体颜色 */
}
  </style>
