<template>
    <div>
<SearchBox ref="SearchBoxRef" formName="inputQuery" :formData="query" @PopupNo="PopupNo" @reset="reset"></SearchBox>
	<ButtonBar @search="handleSearch" @add="handleAdd" @handleExportBatch="handleExportBatch"
	  @handleExportAll="handleExportAll" @edit="handleEditBatch" @upload="handleUpload" @download="handleDownload"
	  @import="handleImport" @export="handleExport"></ButtonBar>
        <el-card :body-style="cardBodyStyle">
            <el-form :inline="true">
                            </el-form>
        </el-card>
        
        <el-card :body-style="cardBodyStyle">
            <el-table :data="tableData" border highlight-current-row  @selection-change="handleSelectionChange">
                <el-table-column type="selection" fixed></el-table-column>
                <el-table-column type="index" label="序号" align="center" width="60">
                    <template #default="scope">
                        <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
                    </template>
                </el-table-column>
				<el-table-column label="操作" header-align="center" align="center" width="200px">
				    <template #default="scope">
				        <el-button plain type="warning" @click="handleEdit(scope.row)">编辑</el-button>
				        <el-button plain type="danger" @click="handleDelete(scope.row )">删除</el-button>
						<!-- <el-button plain type="primary" @click="handlePublish(scope.row)">发布</el-button> -->
				    </template>
				</el-table-column>
                        <el-table-column v-if="false" prop="" label="主键" width="120"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="" label="流程ID" width="240"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="" label="流程状态" width="240"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="" label="添加人id" width="300"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="" label="添加人编码" width="300"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="" label="添加人名称" width="300"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="" label="添加部门ID" width="360"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="" label="添加部门编码" width="360"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="" label="添加部门名称" width="360"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="" label="添加时间" width="240"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="" label="修改人id" width="300"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="" label="修改人编码" width="300"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="" label="修改人名称" width="300"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="" label="修改时间" width="240"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="" label="作废人id" width="300"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="" label="作废人编码" width="300"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="" label="作废人名称" width="300"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="" label="作废时间(停用操作时间)" width="720"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="" label="作废标记" width="240"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="" label="BELONG_ID" width="540"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="true" prop="broadcastTitle" label="广播标题" width="300"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="true" prop="broadcastContent" label="广播内容" width="300"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="false" prop="publishTime" label="发布时间" width="240"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        
						<el-table-column
						    prop="ifTop"
						    label="是否置顶"
						    width="200"
						    header-align="center"
						    align="center"
						    show-overflow-tooltip
						>
						    <template #default="scope">
						    {{ formatifTopStatus(scope.row.ifTop) }}
						    </template>
						</el-table-column>
						<el-table-column
						    prop="publish"
						    label="是否发布"
						    width="200"
						    header-align="center"
						    align="center"
						    show-overflow-tooltip
						>
						    <template #default="scope">
						    {{ formatPublishStatus(scope.row.publish) }}
						    </template>
						</el-table-column>
                        <el-table-column v-if="true" prop="publisher" label="发布人" width="200"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>



            </el-table>
        </el-card>
        <el-card :body-style="cardBodyStyle">
              <el-pagination  :current-page="currentPage"  :page-size="pageSize" :page-sizes="pageSizes"
                             :total="totalRows" background="background" layout="total, sizes, prev, pager, next, jumper"
                             @size-change="handleSizeChange" @current-change="handleCurrentChange">
              </el-pagination>
          </el-card>
        
        <el-dialog :close-on-click-modal="false" draggable title="编辑" v-model="dialogVisible" width="1000px"
                   top="5vh"  @open="openDialog">
        		<div>
        			<el-button type="success" @click="handleSave()">保存</el-button>
        		</div><br>
        
        		<!-- 此处是列表描述 -->
        		<el-card :body-style="cardBodyStyle" class="diaClass90">
        
        
        
                    <el-descriptions title="基本信息" :column="4">
        			</el-descriptions>
        			<el-form inline>
        				<el-row>
        					<el-col :span="6">
        						<el-form-item label="序号" width="100">
        							<el-input v-model="form.xh" clearable style="width: 150px">
        							</el-input>
        						</el-form-item>
        					</el-col>
							<el-col :span="6">
								<el-form-item label="发布人" width="100">
									<el-input v-model="form.publisher" clearable style="width: 150px">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="是否置顶" width="100">
									<el-select v-model="form.ifTop" clearable style="width: 150px">
										<el-option label="是" value="Y"></el-option>
										<el-option label="否" value="N"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="是否发布" width="100">
									<el-select v-model="form.publish" clearable style="width: 150px">
										<el-option label="发布" value="01"></el-option>
										<el-option label="未发布" value="02"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
        				</el-row>
        			</el-form>
					
					
					
					<el-descriptions title="发布内容" :column="4">
					</el-descriptions>
					<el-form inline>
						<el-row>
							<el-col :span="24">
								<el-form-item label="广播标题" width="100">
									<el-input v-model="form.broadcastTitle" clearable style="width: 150px">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="广播内容" width="100">
									<el-input v-model="form.broadcastContent" clearable style="width: 800px">
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
        			
        			 
        		</el-card>
        	</el-dialog>
    </div>
</template>



<script setup>
    import ButtonBar from '@/components/ButtonBar.vue'

    import {
        ref,
        reactive,
        onMounted,
        getCurrentInstance
    } from 'vue'

    const {
        proxy
    } = getCurrentInstance()

    import tools from '@/tools'
    const cardBodyStyle = ref(tools.style.card)
    const inputStyle = ref(tools.style.input)

    onMounted(() => {
        handleSearch()
    })

const formatPublishStatus = (publish) => {
  return publish === '01' ? '发布' : '未发布';
};
const formatifTopStatus = (ifTop) => {
  return ifTop === 'Y' ? '置顶' : '不置顶';
};


    /**
     *   查询
     */




    const query = ref({
   })
   const tableData = ref([])
   const handleSearch = () => {
       currentPage.value = 1
       getTableData()
   }

   const getTableData = () => {
       var url = 'tms/StstemBroadcast/query'
       var param = {
           page: currentPage.value,
           rows: pageSize.value,
           params: JSON.stringify(query.value)
       }
       proxy.$axios.get(url, param).then(response => {
            if (response.data.code == '0') {
                tableData.value = response.data.data.records
                totalRows.value = response.data.data.total
            } else {
                ElMessage.error('操作失败！' + response.data.msg)
            }
        })
    }
    /**
     *   查询
     */

    /**
     * 分页
     */
    const currentPage = ref(1)
    const totalRows = ref(0)
    const pageSizes = ref([10, 20, 30, 40, 50, 100])
    const pageSize = ref(10)
    const handleSizeChange = (val) => {
      pageSize.value = val
      getTableData()
    }
    const handleCurrentChange = (val) => {
        currentPage.value = val
        getTableData()
    }
    /**
     * 分页
     */


    /**
     * 新增
     */
    const dialogVisible = ref(false)
    const form = ref({
    })
    const ruleFormRef = ref()
    const rules = reactive({
    })

    const handleAdd = () => {
        form.value = {
        }
        dialogVisible.value = true
    }
    /**
     * 新增
     */


    /**
     * 保存、修改、删除
     */

    const openDialog=()=>{
    }

    const handleSave = () => {
		var url = 'tms/StstemBroadcast/save'
		var param = {
		    json: JSON.stringify(form.value),
		}
		proxy.$axios.post(url, param).then(response => {
		    if (response.data.code == 0) {
		        form.value = response.data.data
		        ElMessage({
		            message: '保存成功',
		            type: 'success',
		        })
		        getTableData()
		        dialogVisible.value = false
		    } else {
		        // ElMessage.error('操作失败！' + response.data.msg)
		        ElMessage({
		            message: '操作失败' + response.data.msg,
		            type: 'error'
		        })
		    }
		})
		
     
    }
    const handleCancelSave = () => {
        dialogVisible.value = false
    }
    const handleEdit = (row) => {
        dialogVisible.value = true
        form.value = {...row}
    }
    const handleDelete = (row) => {
        ElMessageBox.confirm(
            '确定删除本条记录?',
            '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                draggable: true,
            }
        )
            .then(() => {
                var url = 'tms/StstemBroadcast/remove'
                var param = {
                    id: row.id
                }
                proxy.$axios.post(url, param).then(response => {
                    if (response.data.code == 0) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        })
                        getTableData()
                    } else {
                        ElMessage({
                            type: 'error',
                            message: '删除失败' + response.data.msg
                        });
                    }
                });
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
    }
const handlePublish = (row) => {
        /* dialogVisible.value = true
        form.value = row */
		/* 发布操作的逻辑 */
    }

    /**
     * 保存、修改、删除
     */

    const multipleSelection = ref([])
    const handleSelectionChange = (val) => {
        multipleSelection.value = val
    }

    const handleRemoveBatch = () => {
        console.log('handleRemoveBatch')

        if (multipleSelection.value.length < 1) {
            ElMessage({
                type: 'warning',
                message: '请选择要删除的数据!'
            })
            return
        }

        ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            var ids = []
            multipleSelection.value.forEach((item, index) => {
                ids.push(item.id)
            })
            var url = 'tms/StstemBroadcast/removeBatch'
            var param = {
                ids: JSON.stringify(ids)
            }
            proxy.$axios.post(url, param).then(response => {
                if (response.data.code == '0') {
                    ElMessage({
                        type: 'success',
                        message: '操作成功!',
                    });
                    getTableData()
                    dialogVisible.value = false
                } else {
                    ElMessage({
                        type: 'error',
                        message: '操作失败!' + response.data.msg
                    });
                }
            })
        }).catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除'
            })
        })
    }

    const handleEditBatch = () => {
        console.log('handleEditBatch')
        if (multipleSelection.value.length != 1) {
            ElMessage({
                type: 'warning',
                message: '请选择一条数据编辑!'
            })
            return
        }
        handleEdit(multipleSelection.value[0])
    }

    const handleUpload = () => {
        console.log('handleUpload')
    }

    const handleDownload = () => {
        console.log('handleDownload')
    }

    const handleImport = () => {
        console.log('handleImport')
    }

    const handleExport = () => {
        console.log('handleExport')
    }

</script>

<style>
</style>