1<template>
	<div class="content-main">
		<el-row class="search-bm-boder">
			<el-form
				:inline="true"
				:model="searchForm"
				class="demo-form-inline"
			>
				<el-form-item label="企业名称:">
					<el-input
						clearable
						v-model="searchForm.qymc"
						placeholder="请输入"
					></el-input>
				</el-form-item>
				<el-form-item label="仓房/油罐:">
					<el-input
						clearable
						v-model="searchForm.gfcfmc"
						placeholder="请输入"
					></el-input>
				</el-form-item>
				<el-form-item label="变更信息项:">
					<el-select
						clearable
						class="inputWidth"
						v-model="searchForm.updateCol"
						placeholder="请选择"
					>
						<el-option
							v-for="item in bgxxList"
							:key="item"
							:label="item"
							:value="item"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<div class="search-button">
						<span class="search-line"></span>
						<el-button
							type="primary"
							size="small"
							class="iconfont iconchaxun"
							@click="findList"
							>查询</el-button
						>
						<el-button
							type="primary"
							@click="reSetForm"
							size="small"
							class="iconfont iconzhongzhi"
							>重置</el-button
						>
					</div>
				</el-form-item>
			</el-form>
		</el-row>
		<el-row>
			<el-table
				:data="tableData"
				v-loading="listLoading"
				stripe
				border
				fit
				highlight-current-row
				style="width: 100%"
			>
				<el-table-column align="center" label="序号" width="50">
					<template slot-scope="scope">
						<span>{{ scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					prop="qymc"
					show-overflow-tooltip
					label="企业名称"
				></el-table-column>
				<el-table-column
					align="center"
					prop="gfcfmc"
					label="仓房/油罐名称"
					show-overflow-tooltip
				>
				</el-table-column>
				<el-table-column
					align="center"
					prop="updateCol"
					label="变更信息项"
					show-overflow-tooltip
				>
				</el-table-column>
				<el-table-column
					align="center"
					prop="beforeData"
					label="变更前"
					show-overflow-tooltip
				>
				</el-table-column>
				<el-table-column
					align="center"
					prop="afterData"
					label="变更后"
					show-overflow-tooltip
				>
				</el-table-column>
				<el-table-column
					align="center"
					prop="changeReason"
					label="变更原因"
					show-overflow-tooltip
				>
				</el-table-column>
				<el-table-column
					align="center"
					prop="refreshTime"
					label="变更时间"
					show-overflow-tooltip
				>
				</el-table-column>
			</el-table>
		</el-row>
		<el-row>
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page.sync="pageForm.pageNum"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="pageForm.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageForm.total"
			></el-pagination>
		</el-row>
	</div>
</template>

<script>
import { authorityControl } from '@/api/menuList'
import { page_update_log } from '@/api/jcxxwh/cfxx'

export default {
	data() {
		return {
			activeName: '1110000',
			buttonNameList: [],
			listLoading: true,
			searchForm: {
				qymc: '',
				updateCol: '',
				gfcfmc: '',
			},
			pageForm: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
			},
			tableData: [],
			bgxxList: ['仓房状态', '仓房用途', '油罐状态'],
		}
	},
	methods: {
		getButtonList(menuCode, userCode) {
			let codeData = {
				resourceCode: menuCode,
				userId: userCode,
			}
			authorityControl(codeData).then((res) => {
				res.data.forEach((item) => {
					this.buttonNameList.push(item.resourceName)
				})
				this.findList('start')
			})
		},
		reSetForm() {
			this.searchForm = {
				qymc: '',
				updateCol: '',
				gfcfmc: '',
			}
			this.pageForm.pageNum = 1
			this.findList()
		},

		//查找对应的列表
		findList(type) {
			if (type != 'start') {
				//非初始化调用：查询、分页
				sessionStorage.setItem(
					'searchData',
					JSON.stringify(this.searchForm)
				)
				sessionStorage.setItem(
					'pageData',
					JSON.stringify(this.pageForm)
				)
			} else {
				//初始化分两种情况，详情页等返回后的初始化，以及第一次进入此菜单的初始化
				if (JSON.parse(sessionStorage.getItem('searchData'))) {
					//详情页返回后，将对应查询条件和分页的字段赋值，页面回显参数
					this.searchForm = JSON.parse(
						sessionStorage.getItem('searchData')
					)
					this.pageForm = JSON.parse(
						sessionStorage.getItem('pageData')
					)
				} else {
					//第一次进去此菜单时，保存上方默认的data
					sessionStorage.setItem(
						'searchData',
						JSON.stringify(this.searchForm)
					)
					sessionStorage.setItem(
						'pageData',
						JSON.stringify(this.pageForm)
					)
				}
			}
			let data = {
				...this.searchForm,
				pageNum: this.pageForm.pageNum,
				pageSize: this.pageForm.pageSize,
			}
			page_update_log(data)
				.then((res) => {
					this.listLoading = false
					if (res.infoCode == 200) {
						this.pageForm.total = res.data.total
						this.tableData = res.data.list
					} else {
						this.$message({
							type: 'error',
							message: '获取失败!',
						})
					}
				})
				.catch((err) => {
					this.listLoading = false
				})
		},
		handleSizeChange(val) {
			this.pageForm.pageSize = val
			this.findList()
		},
		handleCurrentChange(val) {
			this.pageForm.pageNum = val
			this.findList()
		},
	},
	created() {
		this.getButtonList(
			sessionStorage.getItem('resourceCode'),
			sessionStorage.getItem('userCode')
		)
		// this.getList();
	},
	mounted() {},
}
</script>

<style lang="scss" scoped>
</style>
