<template>
	<div class="app-container">
		<el-row type="flex">
			<!-- <el-col :span="6"></el-col>
			<el-col :span="6"></el-col>
			<el-col :span="6"></el-col> -->
			<el-col :span="6">
				<!-- /** 范围日期选择 */ -->
				<el-date-picker
					v-model="date"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					value-format="yyyy-MM-dd"
				></el-date-picker>
			</el-col>
			<el-col :span="6">
				<!-- /** 查询按钮 */ -->
				<el-button
					type="primary"
					icon="el-icon-search"
					style="margin-left: -30px"
					@click="getList"
				>查询</el-button>
			</el-col>
		</el-row>
		<!-- /** 表格 */ -->
		<el-table
			:data="tableData"
			style="width: 100%; margin-top: 20px"
			@sort-change="sortingFn"
		>
			<el-table-column
				prop="businessName"
				label="商家名称"
				align="center"
			></el-table-column>
			<el-table-column
				prop="inspectionCount"
				label="检查数"
				align="center"
				sortable="custom"
			></el-table-column>
			<el-table-column
				prop="selfInspectionCount"
				label="自查数"
				align="center"
				sortable="custom"
			></el-table-column>
			<el-table-column
				prop="hazardCount"
				label="隐患数"
				align="center"
				sortable="custom"
			></el-table-column>
			<el-table-column
				prop="rectificationCount"
				label="整改数"
				align="center"
				sortable="custom"
			></el-table-column>
			<el-table-column
				prop="hazardRectificationRate"
				label="隐患整改率"
				align="center"
				sortable="custom"
			></el-table-column>
			<el-table-column
				prop="consumerSafetySupervisionCount"
				label="消费者安全建议数"
				sortable="custom"
				align="center"
			></el-table-column>
		</el-table>
		<!-- /** 分页 */ -->
		<pagination
			v-show="total > 0"
			:total="total"
			:page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize"
			@pagination="getList"
		/>
	</div>
</template>

<script>
import { getlistranking } from "@/api/gaoqu/knowledge.js";
export default {
	name: "",
	props: {},
	components: {},
	data() {
		return {
			date: [],
			tableData: [],
			total: 0,
			queryParams: {
				pageNum: 1,
				pageSize: 10,
			},
		};
	},
	computed: {},
	watch: {},
	created() {
		this.getList();
	},
	mounted() {},
	methods: {
		// /** 获取列表 */
		getList() {
			if (this.date.length > 0) {
				this.queryParams.startDate = this.date[0];
				this.queryParams.endDate = this.date[1];
			}
			getlistranking(this.queryParams).then((res) => {
				if (res.code !== 200) {
					return this.$message.error(res.msg);
				}
				this.tableData = res.rows;
				this.total = res.total;
			});
		},
		// /** 排序 */
		sortingFn({ column, prop, order }) {
      
			this.queryParams.prop = prop;
			this.queryParams.order = order;
			this.getList();
		},
	},
};
</script>

<style scoped lang="scss">
.app-container {
	// 添加固定高度和滚动条样式
	height: calc(100vh - 100px);
	overflow-y: auto;
}
</style>
