<template>
    <div>
			<c-fullbox>
        <el-form-item 
					label=" "
					:prop="'expTree.'+index+'.value'"
					:rules="[
						{ validator: contextValidate, trigger: 'blur' },
						{ required: isRequired, message: node.label+'不能为空'},
					]"
        >
					<el-input
						:disabled="!node.enable"
						style="width:100%"
						v-bind="{maxlength:length,placeholder:`请输入${node.label}`}"
						v-model="node.value"
						:show-word-limit="true"
						maxlength="20"
						@keyup.enter.native="showBankPtapDialog()"
						@blur="showBankPtapDialog()"
					></el-input>
        </el-form-item>
				<template slot="footer">
					<c-button
						style="margin:1px 10px 0 10px;padding: 0 6px!important;height: 28px;"
						size="small" type="primary"
						icon="el-icon-search"
						:disabled="!node.enable"
						@click="showBankPtapDialog()"
					></c-button>
				</template>
			</c-fullbox>
			<!-- 弹窗 -->
		<el-dialog
			v-dialogDrag
			width="64%"
			:visible.sync="dialogBankTableVisible"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:show-close="false"
			v-if="dialogBankTableVisible"
			:modal-append-to-body="false"
			:append-to-body="true"
		>
			<div slot="title" style="font-size: 16px;color: black;position: realtive;">
				 联行信息 
				<!-- 关闭按钮 -->
				<div class="close-btn" @click="handleCloseDialogBankTable"><i class="el-icon-close"></i></div>
			</div>
			<div v-if="!bankTableLoading && bankTableList.length === 0">暂无数据</div>
			<div v-else style="width: 100%;height: 100%;">
				<el-table id='tableRef' height="calc(100% - 32px)" style="width: 100%;" v-loading="bankTableLoading" :data="bankTableList" @row-dblclick="bankdbClickRow" :before-close="beforeBankClose">
					<el-table-column v-for="(item,key) in bankTableColumn" :key="key" :prop="item.prop"  :label="item.label">
					</el-table-column>
				</el-table>
				<el-pagination
					class="eContainer-pagination"
					layout="prev, pager, next, jumper, ->, sizes, total"
					:page-sizes="bankPageSizes"
					:page-size="bankPageSize"
					:current-page="bankCurrentPage"
					:total="bankTotal"
					@size-change="bankSizeChange"
					@current-change="bankCurrentChange"
				></el-pagination>
			</div>
		</el-dialog>
    </div>
</template>
<script>
import { columnMap } from "~/components/business/Ptsp/ptapColumn.js";
import { queryPtaInfo5, queryptsptainfo5 } from "~/service/business/common";
import commonFunctions from '~/mixin/commonFunctions.js';
import _ from 'lodash'
export default {
	props:['node','index','length','contextValidate'],
	mixins: [commonFunctions],
	data(){
		return {
			dialogBankTableVisible: false,
			bankTableLoading: false,
			bankTotal: 0,
      bankCurrentPage: 1, // 页数
      bankPageSizes: [5, 10, 20, 30, 40, 50, 100],
      bankPageSize: 5, // 条数
      bankTableList: [],
			bankTableColumn: [],
		}
	},
	mounted() {
		console.log('===========node', this.node)
	},
	computed:{
		isRequired(){
				return this.node.parent.mSta && this.node.status=='M'
		}
	},
	methods: {
		async showBankPtapDialog(){
			if (this.bankTableLoading || this.dialogBankTableVisible) {
				return
			}
      const value = this.node.value;
      // 分层取值
      await this.getBnakTableData(value);
      if (this.bankTotal == 1) {
					this.bankdbClickRow(this.bankTableList[0]);
      } else {
				this.dialogBankTableVisible = true;
				this.bankTableColumn = columnMap['X'];
      }
		},
		// 获取弹框内的table数据
    async getBnakTableData(value) {
			return new Promise(async (resolve) => {
				this.bankTableLoading = true;
				this.bankTableList = [];
				// 获取table的表格数据
				let params = {
					fqcyjg: value || "",
					pageNum: this.bankCurrentPage,
					pageSize: this.bankPageSize
				};
				const loading = this.loading();
				const res = await queryPtaInfo5(params, this.moduleRouter());
				loading.close();
				if (res.respCode == SUCCESS) {
					if (res.data && res.data.list) {
						this.bankTotal = res.data.total;
						this.bankTableList = res.data.list.map(it => ({
							...it,
						}));
						resolve(this.bankTableList)
					}
				}
				this.bankTableLoading = false; //接口掉完变成false
			})
		},
		bankSizeChange(num){
      this.bankPageSize = num;
      const value = this.node.value
			this.getBnakTableData(value);
		},
		bankCurrentChange(num) {
      this.bankCurrentPage = num;
      const value = this.node.value;
      this.getBnakTableData(value);
		},
		beforeBankClose(done) {
      this.dialogBankTableVisible = false;
      this.bankCurrentPage = 1;
      done();
		},
		// 关闭弹框
		handleCloseDialogBankTable () {
			this.dialogBankTableVisible = false;
		},
		async bankdbClickRow(row, column, event) {
      let params = {
        fqcyjg: row.fqcyjg,
        rol: ''
			};
			const response = await queryptsptainfo5(params, this.moduleRouter());
      if (response.respCode == SUCCESS) {
				// 备份bankno
				this.$set(this.node, 'value', row.fqcyjg)
				_.set(this.node, ['parent', 'children', 'Adr', 'value'], response.data.dizhii || '')
        _.set(this.node, ['parent', 'children', 'BkNm', 'value'], response.data.fukrhm || '')
        _.set(this.node, ['parent', 'children', 'DbtrAgtNm', 'value'], response.data.fukrhm || '')
        _.set(this.node, ['parent', 'children', 'CdtrAgtNm', 'value'], response.data.fukrhm || '')
				if (response.data.fukrhm) {
          _.set(this.node, ['parent', 'children', 'BkNm', 'enable'], false)
          _.set(this.node, ['parent', 'children', 'DbtrAgtNm', 'enable'], false)
          _.set(this.node, ['parent', 'children', 'CdtrAgtNm', 'enable'], false)
				}
				_.set(this.node, ['parent', 'children', 'PhNb', 'value'], response.data.dihdig || '')
				_.set(this.node, ['parent', 'children', 'PstCd', 'value'], response.data.youzbm || '')
			}
			this.dialogBankTableVisible = false;
		},
	}
}
</script>
<style lang="less" scoped>
.close-btn {
	width: 20px;
	height: 20px;
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.close-btn:hover {
	background: rgba(0, 0, 0, .1)
}
</style>