<template>
	<div>
		<el-card class="box-card" :class="[isShowCard ? '' : 'is-show-card']">
			<c-col :span="24">
				<el-form-item 
					:label='argadr.title' 
					:prop="`${argadr.grp}.${argadr.rol}.pts.extkey`" 
					style="width: 100%"
					:rules="[{required: requiredExtkey, message: '必输项', trigger:['blur','change'] }]"
				>
					<c-input 
						v-model.trim="model[argadr.grp][argadr.rol].pts.extkey" 
						placeholder="" 
						maxlength="16" 
						:disabled="disabledExtkey"
						@keyup.enter.native="showPtapDialog()" 
						@blur="handleExtkeyBlur"
					>
					</c-input>
				</el-form-item>
			</c-col>
			<c-col :span="24">
				<el-form-item 
					label="联行行号"
					:prop="`${argadr.grp}.${argadr.rol}.pts.bankno`" 
					style="width: 100%"
					:rules="[{required: requiredBankno, message: '必输项', trigger:['blur','change'] }]"
				>
					<c-input
						v-model.trim="model[argadr.grp][argadr.rol].pts.bankno"
						placeholder=""
						maxlength="20"
						:disabled="disabledBankno"
						@keyup.enter.native="showBankPtapDialog()"
						@blur="blurBankno()"
						@input="banknoInput()"
					>
					</c-input>
				</el-form-item>
			</c-col>
			<c-col :span="24">
				<el-form-item  
					:prop="`${argadr.grp}.${argadr.rol}.pts.jigomc`" 
					style="width: 100%"
					label="联行名称"
				>
					<c-mul-row-input 
						type="textarea"
						:rows="4"
						:cols="35" 
						:charmod="charmod" 
						v-model.trim="model[argadr.grp][argadr.rol].pts.jigomc" 
						placeholder=""
						:isRequired="requiredNam"
						:isCheckInCompontent = "false"
						:disabled="disabledJigomc || isDisabled"
					>
					</c-mul-row-input>
				</el-form-item>
			</c-col>
			<c-col :span="24">
				<el-form-item  
					:prop="`${argadr.grp}.${argadr.rol}.pts.dizhii`" 
					style="width: 100%"
					label="地址"
					:rules="[{required: requiredDizhii, message: '必输项', trigger:['blur','change'] }]"
				>
					<c-mul-row-input 
						type="textarea" 
						:rows="4"
						:cols="35"
						:charmod="charmod"
						:isRequired="requiredAdrblk" 
						v-model.trim="model[argadr.grp][argadr.rol].pts.dizhii" 
						placeholder=""
						:isCheckInCompontent= "false"
						:disabled="disabledDizhii"
					>
					</c-mul-row-input>
				</el-form-item>
			</c-col>
			<c-col :span="24">
				<c-col :span="12">
					<el-form-item 
						label="邮编" 
						:prop="`${argadr.grp}.${argadr.rol}.pts.youzbm`"
					>
						<c-input 
							v-model.trim="model[argadr.grp][argadr.rol].pts.youzbm" 
							maxlength="6" 
							placeholder="请输入邮编" 
							:disabled="disabledYouzbm"
						></c-input>
					</el-form-item>
				</c-col>
				<c-col :span="12">
					<el-form-item 
						label="电话" 
						:prop="`${argadr.grp}.${argadr.rol}.pts.dihdig`"
					>
						<c-input 
							v-model.trim="model[argadr.grp][argadr.rol].pts.dihdig" 
							maxlength="16"
							placeholder="请输入电话" 
							:disabled="disabledDihdig"
						></c-input>
					</el-form-item>
				</c-col>
			</c-col>
		</el-card>
		<!-- 弹窗 -->
		<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;">
				{{ dialogTitle }}
				<!-- 关闭按钮 -->
				<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" :render-header="renderheader" :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>
		<!-- 弹窗 -->
		<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 { queryPtaBic, queryPtsptaBic,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: () => {}
    },
    argadr: {
      type: Object,
      default: function() {
        return {
					title: "", //角色名称
          rol: "", //角色
          grp: "" //所属模块
        };
      }
    },
    charmod: {
      type: Number,
      default: 0
    },
    isShowCard: {
      type: Boolean,
      default: true
		},
		requiredExtkey:{
			type: Boolean,
      default: false
		},
    disabledExtkey: {
      //extkey是否灰显(true:extkey处灰显)
      type: Boolean,
      default: false
		},
		requiredBankno:{
			type: Boolean,
      default: false
		},
		requiredDizhii:{
			type: Boolean,
      		default: false
		},
		requiredNam: {
			type: Boolean,
			default: true
		},
		requiredAdrblk: {
			type: Boolean,
			default: true
		},
    disabledBankno: {
      //Bankno是否灰显(true:Bankno处灰显)
      type: Boolean,
      default: false
    },
    disabledJigomc: {
      //Jigomc是否灰显(true:Jigomc处灰显)
      type: Boolean,
      default: false
    },
    disabledDizhii: {
      //Dizhii是否灰显(true:Dizhii处灰显)
      type: Boolean,
      default: false
    },
    disabledYouzbm: {
      //Youzbm是否灰显(true:Youzbm处灰显)
      type: Boolean,
      default: false
    },
    disabledDihdig: {
      //Dihdig是否灰显(true:Dihdig处灰显)
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
			dialogTitle: "", // 弹框标题
      dialogTableVisible: false, // 控制弹框的展示和隐藏
			tableLoading: false,
			markExtkey: '',
      total: 0,
      isDisabled: false,
      currentPage: 1, // 页数
      pageSizes: [5, 10, 20, 30, 40, 50, 100],
      pageSize: 5, // 条数
      tableList: [],
			tableColumn: [],
			dialogBankTableVisible: false, // 控制弹框的展示和隐藏
			bankTableLoading: false,
      bankTotal: 0,
      bankCurrentPage: 1, // 页数
      bankPageSizes: [5, 10, 20, 30, 40, 50, 100],
      bankPageSize: 5, // 条数
      bankTableList: [],
			bankTableColumn: [],
		};
  },
  methods: {
		async showPtapDialog() {
			if (this.tableLoading || this.dialogTableVisible) {
				return
			}
      const value = this.model[this.argadr.grp][this.argadr.rol].pts.extkey;
      // 分层取值
      await this.getTableData(value);
      if (this.total == 1) {
					this.dbClickRow(this.tableList[0]);
      } else {
				// 设置弹框标题
				this.dialogTitle = `${this.argadr.title}详情`;
				this.dialogTableVisible = true;
				this.tableColumn = columnMap['C'];
				this.$nextTick(()=>{
					this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.extkey`]);
				})
      }
		},
		sizeChange(num){
      this.pageSize = num;
      const value = this.model[this.argadr.grp][this.argadr.rol].pts.extkey;
			this.getTableData(value);
		},
    currentChange(num) {
      this.currentPage = num;
      const value = this.model[this.argadr.grp][this.argadr.rol].pts.extkey;
      this.getTableData(value);
    },
		// 获取弹框内的table数据
    async getTableData(value) {
			return new Promise(async (resolve) => {
				this.tableLoading = true;
				this.tableList = [];
				// 获取table的表格数据
				let params = {
					extkey: value || "",
					pageNum: this.currentPage,
					pageSize: this.pageSize
        };
				const loading = this.loading();
				const res = await queryPtaBic(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,
							// 添加新key将Party Number和Address Number换行
							partyNumberAndAdressNumber: `${it.ptaptyextkey || ""}\n${it.ptaobjkey || ""}`,
							bchbranchAndBchbchname: `${it.bchbranch || ""}\n${it.bchbchname || ""}`,
							adrnam1AndPtanam1: `${it.adrnam1 || ""}\n${it.ptanam1 || ""}`,
							adradr1AndAdrstr1: `${it.adradr1 || ""}\n${it.adrstr1 || ""}`,
							adrstr2Andadrloccty: `${it.adrstr2 || ""}\n${it.adrloccty || ""}`,
							adrloczipAndadrloctxt: `${it.adrloczip || ""}\n${it.adrloctxt || ""}`
						}));
						resolve(this.tableList)
					}
				}
				this.tableLoading = false; //接口掉完变成false
			})
		},
		async dbClickRow(row, column, event) {
      let params = {
        inr: row.ptainr,
        rol: this.argadr.rol
      };
			const response = await queryPtsptaBic(params, this.moduleRouter());
      if (response.respCode == SUCCESS) {
				//备份extkey
				this.markExtkey = row.ptaobjkey
				this.model[this.argadr.grp][this.argadr.rol].pts.extkey = row.ptaobjkey
				this.model[this.argadr.grp][this.argadr.rol].pts.ptainr = response.data.ptainr
				this.model[this.argadr.grp][this.argadr.rol].pts.ptyinr = response.data.ptyinr
				//this.model[this.argadr.grp][this.argadr.rol].pts.nam = response.data.cnnam
				this.model[this.argadr.grp][this.argadr.rol].pts.rol = this.argadr.rol.toUpperCase()
				this.model[this.argadr.grp][this.argadr.rol].pts.ennam = response.data.ennam
				this.model[this.argadr.grp][this.argadr.rol].pts.enadr = response.data.enadr
				this.model[this.argadr.grp][this.argadr.rol].pts.cnnam = response.data.cnnam
				this.model[this.argadr.grp][this.argadr.rol].pts.cnadr = response.data.cnadr
				this.model[this.argadr.grp][this.argadr.rol].pts.dizhii = response.data.cnadr
				this.$nextTick(()=>{
					this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.extkey`]);
				})
			}
      this.dialogTableVisible = false;
		},
		beforeClose(done) {
      this.dialogTableVisible = false;
      this.currentPage = 1;
      done();
		},
		// 表头 头部换行，以 / 作为换行标志
    renderheader(h, { column, $index }) {
      return h("span", {}, [
        h("span", {}, column.label.split("/")[0]),
        h("br"),
        h("span", {}, column.label.split("/")[1])
      ]);
		},
		// extkey输入框失焦
		handleExtkeyBlur (e) {
			let extkey = this.model[this.argadr.grp][this.argadr.rol].pts.extkey
			if (extkey && extkey !== this.markExtkey) {
				this.showPtapDialog()
			}
			if(!extkey){
				this.cleanExtkey()
			}
		},
		cleanExtkey(){
			this.model[this.argadr.grp][this.argadr.rol].pts.ptainr = ''
      this.model[this.argadr.grp][this.argadr.rol].pts.ptyinr = ''
			this.model[this.argadr.grp][this.argadr.rol].pts.ennam = ''
      this.model[this.argadr.grp][this.argadr.rol].pts.enadr = ''
      this.model[this.argadr.grp][this.argadr.rol].pts.cnnam = ''
			this.model[this.argadr.grp][this.argadr.rol].pts.cnadr = ''
		},
		// 关闭弹框
		handleCloseDialogTable () {
			this.dialogTableVisible = false;
			this.$nextTick(()=>{
				this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.extkey`]);
			})
			this.model[this.argadr.grp][this.argadr.rol].pts.extkey = this.markExtkey
		},
		async showBankPtapDialog(){
			if (this.bankTableLoading || this.dialogBankTableVisible) {
				return
			}
      const value = this.model[this.argadr.grp][this.argadr.rol].pts.bankno;
      // 分层取值
      await this.getBnakTableData(value);
      if (this.bankTotal == 1) {
					this.bankdbClickRow(this.bankTableList[0]);
      } else {
				this.dialogBankTableVisible = true;
				this.bankTableColumn = columnMap['X'];
				this.$nextTick(()=>{
					this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.bankno`]);
				})
      }
		},
		blurBankno(){
			let bankno = this.model[this.argadr.grp][this.argadr.rol].pts.bankno
			if (bankno && bankno != this.markBankno){
				this.showBankPtapDialog()
			}
		},
		// 获取弹框内的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.model[this.argadr.grp][this.argadr.rol].pts.bankno;
			this.getBnakTableData(value);
		},
    bankCurrentChange(num) {
      this.bankCurrentPage = num;
      const value = this.model[this.argadr.grp][this.argadr.rol].pts.bankno;
      this.getBnakTableData(value);
    },
		beforeBankClose(done) {
      this.dialogBankTableVisible = false;
      this.bankCurrentPage = 1;
      done();
		},
		async bankdbClickRow(row, column, event) {
      let params = {
        fqcyjg: row.fqcyjg,
        rol: this.argadr.rol
      };
			const response = await queryptsptainfo5(params, this.moduleRouter());
      if (response.respCode == SUCCESS) {
				// 备份bankno
				this.markBankno = row.fqcyjg
				this.model[this.argadr.grp][this.argadr.rol].pts.bankno = row.fqcyjg
				this.model[this.argadr.grp][this.argadr.rol].pts.jigomc = response.data.fukrhm
				// this.model[this.argadr.grp][this.argadr.rol].pts.dizhii = response.data.dizhii
				this.model[this.argadr.grp][this.argadr.rol].pts.youzbm = response.data.youzbm
				this.model[this.argadr.grp][this.argadr.rol].pts.dihdig = response.data.dihdig
        this.model[this.argadr.grp][this.argadr.rol].pts.rol = this.argadr.rol.toUpperCase()
        //pts的nam取联行行号名称
        this.model[this.argadr.grp][this.argadr.rol].pts.nam = response.data.fukrhm
      
				// 此处为了回填数据时回调
        this.isDisabled = true
				this.$nextTick(()=>{
					this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.bankno`]);
				})
			}
			this.dialogBankTableVisible = false;
			this.modifyPtap()
		},
		modifyPtap(){
			this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts, 'bankno')
			this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts,'jigomc')
			this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts,'dizhii')
			this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts,'youzbm')
			this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts,'dihdig')
		},
		banknoInput(){
			if(!this.model[this.argadr.grp][this.argadr.rol].pts.bankno){
				this.model[this.argadr.grp][this.argadr.rol].pts.jigomc = ''
				// this.model[this.argadr.grp][this.argadr.rol].pts.dizhii = ''
				this.model[this.argadr.grp][this.argadr.rol].pts.youzbm = ''
				this.model[this.argadr.grp][this.argadr.rol].pts.dihdig = ''
			}
		},
		// 关闭弹框
		handleCloseDialogBankTable () {
			this.dialogBankTableVisible = false;
			this.$nextTick(()=>{
				this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.bankno`]);
			})
			let nam = this.model[this.argadr.grp][this.argadr.rol].pts.jigomc
			let adr = this.model[this.argadr.grp][this.argadr.rol].pts.dizhii
			if (nam || adr){
				this.model[this.argadr.grp][this.argadr.rol].pts.bankno = this.markBankno
			}
		},
	}
};
</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>