<template>
	<div>
		<el-dialog
			title="选择学校"
			class="selectSchoolDialog"
			:visible.sync="show"
			:close-on-click-modal="false"
			width="1400px"
			@before-close="beforeClose"
			:destroy-on-close="true"
			top="8vh"
		>
			<div v-loading="loading" class="std_body">
				<div class="std_b_table">
					<el-table
						ref="form"
						:data="dataList"
						v-if="show"
						stripe
						border
						style="width: 100%;height: 100%;"
						:header-cell-style="headerCellStyle"
						row-key="id"
						@selection-change="handleSelectionChange"
					>
						<el-table-column
							type="selection"
							width="45"
							:selectable="selectable"
							:reserve-selection="true"
						></el-table-column>
						<el-table-column
							label="学校名称"
							min-width="400"
							show-overflow-tooltip>
							<template slot-scope="scope">{{
										scope.row.name ? scope.row.name : "-"
									}}</template>
						</el-table-column>

						<el-table-column
							label="编码"
							min-width="300"
							show-overflow-tooltip>
							<template slot-scope="scope">{{
										scope.row.code ? scope.row.code : "-"
									}}</template>
						</el-table-column>

						<el-table-column
							label="组织名称"
							min-width="500"
							show-overflow-tooltip>
							<template slot-scope="scope">{{
										scope.row.orgName ? scope.row.orgName : "-"
									}}</template>
						</el-table-column>
					</el-table>
				</div>

			</div>
			<!-- 按钮区域 -->
			<div slot="footer" class="el-dialog__footer">
				<el-button @click="close()">取 消</el-button>
				<el-button type="primary" @click="submit()">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { API_CONFIG } from "@/common/apiConfig";
export default {
	props:{
		id:{
			type:String,
			default:""
		},
	},
	data() {
		return {
			show: false,
			loading: false,
			dataList: [],
			type: null,
			selectList: [],
			disableSelectList:[],
		};
	},
	methods: {
		// 表头的背景色
		headerCellStyle() {
			return { backgroundColor: "#f1f1f1" };
		},
		selectable(){
			return true;
			// if(this.type && ['desktop','admin-index','admin-sidebar2'].includes(this.type)){
			// 	return true;
			// }else if(this.type && ['admin-sidebar'].includes(this.type)){
			// 	let _result = true;
			// 	if(this.disableSelectList.findIndex(i=>i.id==row.id)!=-1){
			// 		_result = false
			// 	}
			// 	return _result;
			// }

		},
		open(data, type) {
			this.show = true;

			this.init();
			this.selectList = data;
			this.type = type;
			this.getData()

			this.$nextTick(() => {
				if (data.length > 0) {
					this.setTableSelect(data);
				}
			});
		},
		close() {
			this.$refs.form.clearSelection();
			this.$forceUpdate();
			this.show = false;
		},
		init() {
			this.dataList = [];
			this.type = null;
			this.selectList = [];
		},
		getData() {
			new Promise((resolve) => {
				let params = [
					{
						functionName: "select_liYuanCampus",
						porg:this.id?this.id:'',
					},
				];
				this.loading = true;
				this.$ajax
					.post(API_CONFIG.baseUrl, params)
					.then((res) => {
						let _data = res.data;
						let _list = _data[0];
						_list.forEach(i=>{
							i.json = JSON.parse(i.json);
						})
						console.log(_list)
						this.dataList = _list;
						this.loading = false;
						resolve();
					})
					.catch((err) => {
						console.log(err);
						this.loading = false;
						this.$message.error("获取学校数据失败");
					});
			});
		},
		handleSelectionChange(val) {
			this.selectList = val;
		},
		submit() {
			this.$emit("success", {data:this.selectList, type:this.type});
		},
		setTableSelect(data) {
				data.forEach((i) => {
					this.$refs.form.toggleRowSelection(i, true);
				});
		},
		getRowKeys(row) {
			return row.id;
		},
		beforeClose(done) {
			this.init();
			done();
		},
	},
};
</script>

<style scoped>
.selectSchoolDialog >>> .el-dialog__header {
	padding: 15px 20px;
	background: #454545;
}

.selectSchoolDialog >>> .el-dialog__title {
	color: #fff;
}
.std_body {
	width: 100%;
	height: 662px;
	overflow: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.std_b_table {
	width: 100%;
	height: 620px;
	overflow: auto;
}
</style>
