<template>
	<!-- 按钮组 -->
	<Btns
		:btns="datas.btns"
		@handleBtnItemClick="handleBtnItemClick"
		:isOperate="datas.isOperate"
	></Btns>
	<div
		:style="{ height: heightNum + 'px!important' }"
		class="order-create-container order-mc-bg main-container"
	>
		<div class="order-create-base-info" style="padding: 16px 16px">
			<!-- 表格 -->
			<div class="tell-info-table">
				<Table
					:tableData="datas.tableData"
					:columns="datas.columns"
					:tableOptions="{
						maxHeight: '430',
						isLoading: datas.isLoading,
					}"
					:isFixed="false"
					:isCheckend="true"
					@select="selectRow"
					@select-all="selectRow"
					@toDetail="toDetail"
					ref="tableListRef"
				/>
			</div>
			<!-- 分页 -->
			<div class="footer-pagination">
				<el-pagination
					:page-sizes="datas.pagingList"
					:page-size="datas.pageSize"
					layout="slot,sizes,total, prev,pager, next,jumper"
					:total="datas.totalItemNumber"
					popper-class="每页显示"
					:pager-count="5"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				>
					<span class="total-select-item">
						共选中
						<text
							style="
								text-align: center;
								color: #4178d5;
								padding: 0 1px;
							"
							>{{ datas.selectItem }}</text
						>行
					</span>
				</el-pagination>
			</div>
			<!--操作结果 -->
			<Result
				@handelhtmlToExcel="handelhtmlToExcel"
				@beforeClose="beforeClose"
				:resultVisible="datas.resultVisible"
				:tableInfo="datas.tableInfo"
				:actionType="datas.actionType"
			/>
		</div>
	</div>
</template>
<script setup>
import { htmlToExcel } from '@/utils/pubulic.js';
import {
	approvalFlowSubmitStatus,
	approvalFlowCheck,
	approvalFlowRecheck,
} from '@/utils/api.js';
import Table from '../components/Table';
import Btns from '@/components/Btns/index.vue';
import Result from '../components/Result';
import { COLUMNS, BTNS1 } from '../constant/index.js';
import { approvalFlowList } from '@/utils/api.js';
import { reactive, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { msg } from '@/utils/lodash/msg.js';
import { watch, ref } from 'vue';
import { useStore } from 'vuex';
const $router = useRouter();
const { proxy } = getCurrentInstance();
const { $http } = proxy;
const { state, dispatch } = useStore();
const tableListRef = ref(null);
const datas = reactive({
	columns: COLUMNS,
	btns: BTNS1, //顶部按钮渲染数据
	tableData: [], //表格数据
	pagingList: [50, 100, 150], // 底部分页
	pageSize: 50,
	pageNo: 1,
	selectItem: 0, //选择row的数量
	totalItemNumber: 0, //合计
	selects: [], //被选中的row
	resultVisible: false, //控制操作结果显示隐藏
	isOperate: false, //节流按钮
	isLoading: false,
});

watch(
	() => state.user.orgId,
	(newVal) => {
		if (newVal) {
			dispatch('examine/deleteAll');
			dispatch('examine/deleteStaffAllList');
			getList();
			getDept();
			getMeStaffList();
		}
	}
);
//根据组织ID获取部门(当前组织下的部门)
const getDept = () => {
	const { deptAll } = state.storeData;
	if (Array.isArray(deptAll) && deptAll.length) {
		return;
	}
	//setDeptAll
	$http.post(`SysConfig/GetDeptAll/${state.user.orgId}`).then(async (res) => {
		if (res.status == 200) {
			dispatch('examine/setDeptAll', res.data);
		}
	});
};
getDept();
//根据组织获取组织成员
const getMeStaffList = () => {
	//getAllUserList
	const { staffAllList } = state.storeData;
	if (Array.isArray(staffAllList) && staffAllList.length) {
		return;
	}
	$http.get(`SysConfig/GetStaffAllList/${state.user.orgId}`).then((res) => {
		if (res.status === 200) {
			dispatch('examine/setStaffAllList', res.data);
		}
	});
};
getMeStaffList();

//获取列表数据
const getList = () => {
	datas.isLoading = true;
	$http
		.post(approvalFlowList, {
			pageNo: datas.pageNo,
			pageSize: datas.pageSize,
			orgId: state.user.orgId,
		})
		.then((res) => {
			if (res.status == 200) {
				datas.tableData = res.data.list;
				datas.totalItemNumber = res.data.totalCount;
			}
		})
		.finally(() => {
			datas.isLoading = false;
		});
};
getList();
//分页下拉框
const handleSizeChange = (val) => {
	datas.pageSize = val;
	getList();
};
//分页页码
const handleCurrentChange = (val) => {
	datas.pageNo = val;
	getList();
};
const selectRow = (val) => {
	datas.selectItem = val.length;
	datas.selects = val;
};
const toDetail = (row) => {
	$router.push({
		path: '/examine/mange/examineAdd',
		query: {
			id: row.fid,
			detailsId: row.id || '',
			// versionNo: row.versionNo
		},
		sjtag: Math.random() * 36,
	});
};
//设置数据
const setData = (type, ids) => {
	datas.actionType = type;
	datas.isOperate = true;
	const URLS = {
		submit: approvalFlowSubmitStatus, //列表提交
		audit: approvalFlowCheck, //审核
		noAudit: approvalFlowRecheck, //反审
	};
	$http
		.post(URLS[type], { ids })
		.then((res) => {
			if (res.status == 200 && res.isSuccess) {
				datas.resultVisible = true;
				datas.tableInfo = res.data;
			}
		})
		.finally(() => {
			datas.isOperate = false;
			datas.selects = [];
		});
};

const handleStatus = () => {
	//id集合传给后端
	let ids = [];
	datas.selects.forEach((item) => {
		ids.push(Number(item.fid));
	});

	return ids;
};

const handleBtnItemClick = async (item) => {
	const { type } = item;
	if (type === 'add') {
		$router.push({
			path: '/examine/mange/examineAdd',
			query: {
				id: item.fid || '',
				detailsId: item.id || '',
				// versionNo: item.versionNo || '',
				sjtag: Math.random() * 36,
			},
		});

		return;
	}
	if (!datas.selectItem) {
		return msg('error', '请选择数据!');
	}
	let ids = await handleStatus();
	if (Array.isArray(ids) && ids.length) {
		setData(type, ids);
	}
};
const handelhtmlToExcel = (domid, title) => {
	htmlToExcel(domid, title);
};
const beforeClose = () => {
	datas.resultVisible = false;

	getList();
};
</script>
<style lang="scss" scoped>
@import '@/assets/style/saleOrder/saleOrderCommon.scss';
@import '@/assets/style/saleOrder/orderList.scss';
@import '@/assets/style/saleOrder/common.scss';
.footer-pagination {
	display: flex;
	justify-content: right;
	margin-top: 11px;
}
</style>
