<template>
	<sc-dialog class="aminui-main-container__dialog" v-model="visible" title="银行列表" width="80vw" top="10vh" @closed="$emit('closed')">
		<el-container class="aminui-main-container">
			<el-header class="aminui-main-container__query-header">
				<el-form :model="params">
					<el-row :gutter="15">
						<el-col :lg="8" :md="12" :xs="24">
							<el-form-item label="省名称:">
                            	<el-input v-model="params.provInputNameLike" clearable placeholder="搜索省名称关键字"></el-input>
							</el-form-item>
						</el-col>
						<el-col :lg="8" :md="12" :xs="24">
							<el-form-item label="市名称:">
                            	<el-input v-model="params.nameLike" clearable placeholder="搜索市名称关键字"></el-input>
							</el-form-item>
						</el-col>
						<el-col :lg="8" :md="12" :xs="24">
							<el-form-item label="银联号:">
                            	<el-input v-model="params.sysBankCodeLike" clearable placeholder="搜索银联号关键字"></el-input>
							</el-form-item>
						</el-col>
						<template v-if="paramsIsCollapse">
							<el-col :md="12" :xs="24">
								<el-form-item label="开户行关键字1:">
									<el-input v-model="params.bankNameLike" clearable placeholder="搜索开户行关键字"></el-input>
								</el-form-item>
							</el-col>
							<el-col :md="12" :xs="24">
								<el-form-item label="开户行关键字2:">
									<el-input v-model="params.bankName2Like" clearable placeholder="搜索开户行关键字"></el-input>
								</el-form-item>
							</el-col>
                    	</template>
					</el-row>
				</el-form>

				<el-button-group>
					<el-button type="primary" icon="el-icon-search" @click="reloadTable('add')">查询</el-button>
					<el-button icon="el-icon-refresh" @click="reset">重置</el-button>
					<el-button text @click="paramsIsCollapse = !paramsIsCollapse">
						<template v-if="paramsIsCollapse">收起<el-icon><el-icon-arrow-up-bold /></el-icon></template>
						<template v-else>更多<el-icon><el-icon-arrow-down-bold /></el-icon></template>
					</el-button>
				</el-button-group>
			</el-header>

			<el-container class="aminui-main-container__table-main">
				<el-main class="nopadding">
					<scTable class="scTable" ref="table" row-key="id" :apiObj="api" :params="params" :column="bankColumn" tableName="bankTable" pageParams="current" @select="select" @select-all="selectAll">
                    	<el-table-column type="selection" align="center" width="55" :selectable="selectable"></el-table-column>
					</scTable>
				</el-main>
			</el-container>
		</el-container>

		<template #footer>
			<el-button @click="$emit('closed')">取消</el-button>
			<el-button type="primary" @click="submit">确定</el-button>
		</template>
	</sc-dialog>
</template>

<script>
	import { bankColumn } from "./main";

	export default {
		emits: ["success", "closed"],
		props: {
			selected: { type: Array, default: () => [] }
		},

		data() {
			return {
				visible: false,
				bankColumn,
				api: this.$API.system.bank,
				params: {},

            	paramsIsCollapse: false,
            	selectList: []
			}
		},

		methods: {
			// 显示
			open() {
				this.visible = true;
				return this;
			},

			reloadTable() {
				this.$refs.table.reload(this.params, 1);
			},

			reset() {
				for (const key in this.params) {
					this.params[key] = null;
				}
	            this.reloadTable();
			},

			// 表格勾选事件
			select(rows, row) {
				const isSelect = rows.length && rows.indexOf(row) !== -1;
				if (isSelect) this.selectList.push(row);
				else this.selectList.splice(this.selectList.findIndex(s => s.id == row.id), 1);
			},

			// 表格全选事件
			selectAll(rows) {
				if (rows.length > 0) {
					rows.forEach(row => {
						if (!this.selectList.find(s => s.id == row.id)) this.selectList.push(row);
					});
				} else this.selectList.slice(-1, 0);
			},

			selectable(row) {
				return this.selected.findIndex(s => s.id == row.id) == -1;
			},

			submit() {
				this.visible = false;
				this.$emit('success', this.selectList);
			}
		}
	}
</script>

<style lang="scss" scoped>
.aminui-main-container__dialog :deep(.el-dialog) {
  .el-dialog__body .sc-dialog__body {
    height: calc(
      100vh - 2 * var(--el-dialog-margin-top) - 4 *
        var(--el-dialog-padding-primary) - var(--el-dialog-font-line-height) -
        32px
    );
  }

  .el-dialog__footer {
    display: block;
  }
}
</style>