<template>
	<div>
		<c-col :span="24">
			<el-form-item 
			:label="this.label" :prop="`${formatExtCodesToStr}`"
			>
			<c-input 
				v-model.trim="modelBankNo" 
				maxlength="20"
        :disabled="disabledBankNo"
				@keyup.enter.native="showPtapDialog"
				@blur="blurBankNo"
			></c-input>
			</el-form-item>
		</c-col>
		<!-- 弹窗 -->
		<el-dialog
			v-dialogDrag
			width="64%"
			:visible.sync="dialogTableVisible"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:show-close="false"
			v-if="dialogTableVisible"
			: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="handleCloseDialogTable"><i class="el-icon-close"></i></div>
			</div>
			<div v-if="!tableLoading && tableList.length === 0">暂无数据</div>
			<div v-else style="width: 100%;height: 100%;">
				<el-table id='tableRef' height="calc(100% - 32px)" style="width: 100%;" v-loading="tableLoading" :data="tableList" @row-dblclick="dbClickRow" :before-close="beforeClose">
					<el-table-column v-for="(item,key) in tableColumn" :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="pageSizes"
					:page-size="pageSize"
					:current-page="currentPage"
					:total="total"
					@size-change="sizeChange"
					@current-change="currentChange"
				></el-pagination>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import _ from 'lodash'
import { columnMap } from "./ptapColumn.js";
import { queryPtaInfo5, queryptsptainfo5 } from "~/service/business/common";
import commonFunctions from '~/mixin/commonFunctions.js';
import commonDepend from '~/mixin/commonDepend.js'
export default {
	inject: ["root"],
	mixins: [commonFunctions,commonDepend],
	props:{
		model: {
      type: Object,
      default: () => {}
		},
		exCode:{
			type: Array,
			default:[]
		},
		label:{
			type:String,
			default:''
    },
    disabledBankNo:{
      type: Boolean,
      default:false
    }
	},
	computed: {
		//额外字段处理成字符串
		formatExtCodesToStr(){
			if(this.exCode && this.exCode.length > 0){
				return this.exCode.join('.')
			}else{
				return ''
			}
		},
		//简化字段写法
		formatCodes(){
			let exCodes = this.exCode || []
			return [...exCodes]
		},
		//bankno计算属性
		modelBankNo:{
			get(){
				let codesList = this.formatCodes
				return _.get(this.model,codesList)
			},
			set(val){
				let codesList = this.formatCodes
				_.set(this.model,codesList,val)
			}
		}
	},
	data(){
		return{
			dialogTableVisible: false,
			tableLoading: false,
      total: 0,
      currentPage: 1, // 页数
      pageSizes: [5, 10, 20, 30, 40, 50, 100],
      pageSize: 5, // 条数
      tableList: [],
			tableColumn: [],
			markBankNo:''
		}
	},
	methods:{
		async showPtapDialog() {
			if (this.tableLoading || this.dialogTableVisible) {
				return
			}
      const value = this.modelBankNo;
      // 分层取值
      await this.getBnakTableData(value);
      if (this.total == 1) {
					this.dbClickRow(this.tableList[0]);
      } else {
				this.dialogTableVisible = true;
				this.tableColumn = columnMap['X'];
				this.$nextTick(()=>{
					this.root.$refs['modelForm'].validateField([`${this.formatExtCodesToStr}`]);
				})
      }
		},
		// 获取弹框内的table数据
    async getBnakTableData(value) {
			return new Promise(async (resolve) => {
				this.tableLoading = true;
				this.tableList = [];
				// 获取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.total = res.data.total;
						this.tableList = res.data.list.map(it => ({
							...it,
						}));
						resolve(this.tableList)
					}
				}
				this.tableLoading = false; //接口掉完变成false
			})
		},
		handleCloseDialogTable() {
      this.dialogTableVisible = false;
		},
		async dbClickRow(row,column,event){
			let params = {
				fqcyjg: row.fqcyjg
			}
			const res = await queryptsptainfo5(params, this.moduleRouter())
			if(res.respCode == SUCCESS){
				
				//备份bankno
				this.markBankNo = row.fqcyjg
				this.modelBankNo = row.fqcyjg
				this.dialogTableVisible = false;
			}
		},
		blurBankNo(){
			if(this.modelBankNo && this.markBankNo != this.modelBankNo){
				this.showPtapDialog()
			}
		},
		sizeChange(num){
      this.pageSize = num;
      const value = this.modelBankNo;
			this.getBnakTableData(value);
		},
    currentChange(num) {
      this.currentPage = num;
      const value = this.modelBankNo;
      this.getBnakTableData(value);
		},
		beforeClose(done) {
      this.dialogTableVisible = false;
      this.currentPage = 1;
			done();
		}
	}
}
</script>
<style scoped lang="less">
.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>