<template>
	<div class="bbsl-common-page">
		<div class="bbsl-table-search">
			<el-form v-model="queryParam" :inline="true">
				<el-row :gutter="10">
					<el-col :span="6">
						<el-form-item label="所属类型：">
							<el-select style="width: 100%" size="mini" v-model="params.type" clearable
								placeholder="请选择所属类型">
								<el-option v-for="item in classifyNames" :key="item.id" :label="item.name"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="标题：">
							<el-input size="mini" clearable placeholder="请输入标题" v-model="params.title">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" size="mini" @click="onClickSearch">搜索
							</el-button>
							<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
							<!-- <el-button type="text" @click.stop="openMore"
					      >更多
					      <i
					        :class="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
					      ></i
					    ></el-button> -->
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div class="bbsl-table-content" ref="contentPanel">
			<div class="bbsl-btn-content" ref="btnPanel">
				<el-button size="mini" icon="el-icon-plus" type="primary" @click="openFormDiao">新增</el-button>
				<el-button :disabled="!multipleSelection.length" size="mini" icon="el-icon-delete" type="danger"
					@click="deleteSelect">删除</el-button>
					<el-button style="margin-left: 10px" icon="el-icon-sort" type="success" size="mini" @click="savePropertyf">保存排序号</el-button>
			</div>
			<el-table stripe size="mini" :height="tableMaxHeight" @row-dblclick="handleDbClick" :style="{width: '100%'}"
				ref="multipleSelection" v-loading="loading" border :data="tableData" :row-key="getRowKey"
				@selection-change="handleSelectionChange" :header-cell-style="{'text-align': 'center'}"
				:cell-style="{'text-align': 'center'}">
				<el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
				<el-table-column sortable type="index" label="序号" min-width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column sortable prop="type" label="所属类型" min-width="150" show-overflow-tooltip>
					<template slot-scope="scope">
						{{scope.row.type==1?'新闻公告':scope.row.type==2?'轮播图':''}}
					</template>
				</el-table-column>
				<el-table-column sortable prop="title" label="标题" min-width="150" show-overflow-tooltip>
				</el-table-column>

				<el-table-column sortable prop="endTime" label="过期时间" min-width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column sortable prop="createByName" label="创建人" min-width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column sortable prop="createTime" label="创建时间" min-width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column sortable prop="sn" label="排序" width="150" show-overflow-tooltip>
					<template slot-scope="scope">
						<el-input type="number" size="small" min="1" @input="insort(scope.row)" v-model="scope.row.sn">
						</el-input>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination ref="paginationPanel" align="right" class="bbsl-pagination" background
				@size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryParam.pageBean.page" :page-sizes="[20, 30, 40, 50]"
				:page-size="queryParam.pageBean.pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="total"></el-pagination>
		</div>
		<form-dialog v-if="showFormDia" @closeFormDiao="closeFormDiao" @refList="getDateList" :showFormDia="showFormDia"
			:title="title" :pId="pId"></form-dialog>
	</div>
</template>

<script>
	import req from '@/request.js'
	import {
		TableMixin
	} from '@/mixins/tableMixin'
	import FormDialog from './components/newsR-dialog.vue'
	import newsRelease from '@/api/newsRelease.js'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	export default {
		components: {
			FormDialog,
		},
		mixins: [TableMixin],
		data() {
			return {
				loading: false,
				params: {
					classifyId: null
				},
				queryParam: {
					pageBean: {
						pageSize: 20,
						page: 1,
					},
					params: {},
					querys: []
				},
				showFormDia: false,
				tableData: [],
				total: 0,
				pId: null,
				classifyNames: [{
						name: '新闻公告',
						value: 1
					},
					{
						name: '轮播图',
						value: 2
					}
				],
				multipleSelection: [], // 复选框
				basAdNames: [], //行政区
				fileList: [],
				sortList:{}
			}
		},
		created() {
			this.getDateList()
		},
		methods: {
			getDateList() {
				this.loading = true
				this.tableData = []
				newsRelease.ListGet(this.queryParam, res => {
					if (res.rows) {
						res.rows.sort((a, b) => {
						  return a.sn - b.sn
						})
						this.tableData = res.rows
						this.total = res.total
						this.loading = false
					}
				})
			},
			onClickSearch() {
				this.queryParam.querys = [{
						property: "type",
						value: this.params.type,
						group: "advance",
						relation: "AND",
						operation: "EQUAL"
					},
					{
						property: "title",
						value: this.params.title,
						group: "advance",
						relation: "AND",
						operation: "EQUAL"
					}
				]
				this.queryParam.pageBean.page = 1
				this.getDateList()
			},
			resetQuery() {
				this.params = {}
				this.queryParam.querys = []
				this.getDateList()
			},
			insort(val) {
				let id = val.id
				let value = val.sn
				this.sortList[id] = value
			
			},
			savePropertyf() {
				newsRelease.saveProperty(this.sortList, res => {
					if(res.state){
						this.$notify({
							type: 'success',
							message: res.message,
							duration: 2000,
						})
						this.getDateList()
					}else{
						this.$message.warning(res.message)
					}
				})
			},
			//导入
			handleChange(file, fileList) {
				if (fileList.length > 1) {
					fileList.splice(0, 1)
				}
				if (file.raw.name.split('.')[1] != 'xlsx') {
					this.$apiMessage.warning('请上传xlsx格式文件！')
					fileList.splice(0)
				} else {
					this.upLoadFile(file.raw)
				}
			},
			//自定义上传方法（覆盖默认上传行为）
			upLoadFile(file) {
				let formData = new FormData()
				formData.append('file', file)
				formData.append('paperId', this.queryParam.params.paperId)
			 flashFloods.upload(formData, (res) => {
					if (res.state) {
						this.$notify({
							type: 'success',
							message: '导入成功',
							duration: 2000,
						})
						this.queryParam.pageBean.page = 1
						this.getDateList()
					} else {
						this.$notify({
							type: 'error',
							message: res.message,
							duration: 2000,
							offset: 80,
						})
						this.getDateList()
					}
				})
			},
			openFormDiao() {
				this.title = '新增'
				this.showFormDia = true;
			},
			handleUpdate(row) {
				this.title = '修改'
				this.pId = row.id
				this.showFormDia = true
			},
			closeFormDiao() {
				this.showFormDia = false
				this.getDateList()
			},
			// // 批量删除
			deleteSelect() {
				this.$confirm('确定删除选中数据？', '提示', {
						confirmButtonText: '确 定',
						cancelButtonText: '取 消',
						type: 'warning',
					})
					.then(() => {
						console.log(11);
						newsRelease.remove(this.multipleSelection).then(res => {
								if (res.state) {
									this.$notify({
										type: 'success',
										message: '删除成功',
										duration: 2000,
							   // offset: 80
									})
									// this.multipleSelection = [];
									this.$refs.multipleSelection.clearSelection()
									this.queryParam.pageBean.page = 1
									this.getDateList()
								}
							})
							.catch((res) => {
								this.$notify({
									type: 'error',
									message: res.message,
									duration: 2000,
									offset: 80,
								})
								this.getDateList()
							})
					})
					.catch(() => {})
			},
			handleSizeChange(val) {
				this.queryParam.pageBean.pageSize = val;
				this.getDateList()
			},
			handleCurrentChange(val) {
				this.queryParam.pageBean.page = val;
				this.getDateList()
			},
			// 指定一个key标识这一行的数据
			getRowKey(row) {
				return row.id
			},
			handleSelectionChange(val) {
				this.multipleSelection = val.map((item) => {
					return item.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.upload {
		display: inline-block;
		margin-right: 10PX;
	}
</style>
