<template>
	<div>
		<el-card class="box-card" :class="[isShowCard ? '' : 'is-show-card']">
			<c-col :span="24">
				<el-form-item 
					:label="argadr.bankTitle"
					:prop="isHaveInmodel ? `${argadr.outModel}.${argadr.inModel}` : `${argadr.outModel}`" 
					style="width: 100%"
					:rules="[{required: requiredBank, message: '必输项', trigger:['blur','change'] },
					{validator: validateBank, trigger:['blur'] }]"
				>
					<c-input
						v-model="model[argadr.outModel][argadr.inModel]"
						maxlength="20"
						v-if="isHaveInmodel"
						placeholder=""
						:disabled="disabledBankno"
						@keyup.enter.native="showBankPtapDialog()"
						@blur="blurBankno()"
						@input="inputBankno()"
					>
					</c-input>
					<c-input
						v-model="model[argadr.outModel]"
						v-else
						placeholder=""
						:disabled="disabledBankno"
						@keyup.enter.native="showBankPtapDialog()"
						@blur="blurBankno()"
						@input="inputBankno()"
					>
					</c-input>
				</el-form-item>
			</c-col>
			<c-col :span="24" v-if="isShowAdr">
				<el-form-item 
					:label="argadr.adrTitle"
					:prop="isHaveInmodel ? `${argadr.outModel}.${argadr.adrModel}` : `${argadr.adrModel}`"
				>
				<c-mul-row-input
						type="textarea" 
						v-if="isHaveInmodel"
						:rows="2"
						:cols="70"
						:autosize="{minRows: 1,	maxRows: 2}"
						:charmod="charmod"
						:showTip="false"
						:disabled="isAdrDis"
						v-model="model[argadr.outModel][argadr.adrModel]"
						placeholder=""
					>
					</c-mul-row-input>
					<c-mul-row-input
						type="textarea" 
						v-else
						:rows="2"
						:cols="70"
						:autosize="{minRows: 1,	maxRows: 2}"
						:charmod="charmod"
						:showTip="false"
						:disabled="isAdrDis"
						v-model="model[argadr.adrModel]"
						placeholder=""
					>
					</c-mul-row-input>
				</el-form-item>
			</c-col>
		</el-card>
		<!-- 弹窗 -->
		<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 "./ptapColumn.js";
import { queryPtaInfo5} 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: () => {}
    },
	isAdrDis:{
		type:Boolean,
		default:false
	},
    isShowCard: {
      type: Boolean,
      default: true
		},
		requiredBank: {
			type: Boolean,
      default: false
		},
		charmod: {
      type: Number,
      default: 0
		},
		argadr: {
      type: Object,
      default: function() {
        return {
					bankTitle: "", 
					adrTitle:"",
					outModel:"",
					inModel:"",
					adrModel:""
        };
      }
		},
		isHaveInmodel:{
			type: Boolean,
			default: true
		},
		isShowAdr:{
			type: Boolean,
			default: true
		},
		disabledBankno:{
			type: Boolean,
      default: false
		}
	},
  data() {
    return {
			markBankno: '',
			markAdr:'',
			dialogBankTableVisible: false, // 控制弹框的展示和隐藏
			bankTableLoading: false,
      bankTotal: 0,
      bankCurrentPage: 1, // 页数
      bankPageSizes: [5, 10, 20, 30, 40, 50, 100],
      bankPageSize: 5, // 条数
      bankTableList: [],
			bankTableColumn: [],
			actWarning:''
		};
  },
  methods: {
		async showBankPtapDialog(){
			if (this.bankTableLoading || this.dialogBankTableVisible) {
				return
			}
			const value = this.isHaveInmodel ? this.model[this.argadr.outModel][this.argadr.inModel] : this.model[this.argadr.outModel];
			let pattern = new RegExp("[\u4E00-\u9FA5]+")
			let length = 0
			value.split('').forEach(item => {
				if(pattern.test(item)){
					length+=2
				}else{
					length+=1
				}
			});
			if(length<6){
				this.actWarning = '至少输入三个字或六位行号'
				this.$nextTick(()=>{
					this.root.$refs['modelForm'].validateField([this.isHaveInmodel ? `${this.argadr.outModel}.${this.argadr.inModel}` : `${this.argadr.outModel}`]);
				})
				return
			}
      // 分层取值
      await this.getBnakTableData(value);
      if (this.bankTotal == 1) {
				if(this.isHaveInmodel){
					this.model[this.argadr.outModel][this.argadr.inModel] = this.bankTableList[0].fqcyjg
					this.model[this.argadr.outModel][this.argadr.adrModel] = this.bankTableList[0].fukrhm
				}else{
					this.model[this.argadr.outModel] = this.bankTableList[0].fqcyjg
					this.model[this.argadr.adrModel] = this.bankTableList[0].fukrhm
				}
					this.markBankno = this.bankTableList[0].fqcyjg
					this.markAdr = this.bankTableList[0].fukrhm
      } else {
				this.dialogBankTableVisible = true;
				this.bankTableColumn = columnMap['X'];
      }
		},
		blurBankno(){
			let bankno = this.isHaveInmodel ? this.model[this.argadr.outModel][this.argadr.inModel] : this.model[this.argadr.outModel]
			let adr = this.isHaveInmodel ? this.model[this.argadr.outModel][this.argadr.adrModel] : this.model[this.argadr.outModel]
			if (bankno && (bankno != this.markBankno || adr !=this.markAdr)){
				this.showBankPtapDialog()
			}
			if(!bankno && this.markBankno){
				this.cleanData()
			}
		},
		cleanData(){
			this.isHaveInmodel ? this.model[this.argadr.outModel][this.argadr.inModel] : this.model[this.argadr.outModel] = ''
			this.isHaveInmodel ? this.model[this.argadr.outModel][this.argadr.adrModel] : this.model[this.argadr.outModel] = ''
			this.markBankno = ''
			this.markAdr = ''
		},
		inputBankno(){
			this.actWarning = ''
			this.$nextTick(()=>{
					this.root.$refs['modelForm'].validateField([this.isHaveInmodel ? `${this.argadr.outModel}.${this.argadr.inModel}` : `${this.argadr.outModel}`]);
			})
		},
		// 获取弹框内的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.isHaveInmodel ? this.model[this.argadr.outModel][this.argadr.inModel] : this.model[this.argadr.outModel];
			this.getBnakTableData(value);
		},
    bankCurrentChange(num) {
      this.bankCurrentPage = num;
      const value = this.isHaveInmodel ? this.model[this.argadr.outModel][this.argadr.inModel] : this.model[this.argadr.outModel];
      this.getBnakTableData(value);
    },
		beforeBankClose(done) {
      this.dialogBankTableVisible = false;
      this.bankCurrentPage = 1;
      done();
		},
	  bankdbClickRow(row, column, event) {
			this.markBankno = row.fqcyjg
			this.markAdr = row.fukrhm
			if(this.isHaveInmodel){
					this.model[this.argadr.outModel][this.argadr.inModel] = row.fqcyjg
					this.model[this.argadr.outModel][this.argadr.adrModel] = row.fukrhm
				}else{
					this.model[this.argadr.outModel] = row.fqcyjg
					this.model[this.argadr.adrModel] = row.fukrhm
				}
			this.dialogBankTableVisible = false;
		},
		// 关闭弹框
		handleCloseDialogBankTable () {
			this.dialogBankTableVisible = false;
		},
		validateBank(rule, value, callback) {
      if (this.actWarning !== '') {
        callback(new Error(this.actWarning));
      } else {
        callback()
      }
    },
	}
};
</script>
<style scoped lang="less">
.box-card {
  margin-bottom: 10px;
  /deep/ .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }
  /deep/ .el-card__body {
    padding: 10px 10px 10px 0px;
  }
}
.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)
}
.is-show-card {
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  /deep/ .el-card__body {
    padding: 0 !important;
  }
}
</style>