<template>
  <div class="eibs-tab">
    <c-row>
      <c-col :span="24">
        <c-col :span="12" style="padding-right: 20px">
          <!--========================== 不为swift格式左边 =========================================-->
					<c-col :span="24">
						<c-ptap :model="model" :isAdrblk="false" :haveAdrLabel="true" :disabled="true":disabledRef='true' 
						:disabledExtkey="true" :argadr="{title: $t('ptap.申请人'), grp: 'oldnidgrp', rol: 'apl'}" 
						:ptytyp="model.nidgrp.rec.hndtyp=='OT'?'B,C,F':'C'">
						</c-ptap>
					</c-col>

					<c-col :span="24">
						<c-ptap :model="model"  
							:isAdrblk="false"
							:haveAdrLabel="true" 
							:noRef="false"
							:disabled="true"
							:disabledExtkey="true" 
							:disabledRef="true"
							:argadr="{title: $t('ptap.被担保人'), grp: 'oldnidgrp', rol: 'bdb'}"
							:ptytyp="model.nidgrp.rec.hndtyp == 'OT'?'B':'C'" 
						>
						</c-ptap>
					</c-col>

					<c-col :span="24"  v-if="model.oldnidgrp.rec.hndtyp == 'OT'">
						<c-ptap 
							:model="model"  
							:isAdrblk="true" 
							:haveAdrLabel="true" 
							:disabled="true"
							:disabledExtkey="true" 
							:disabledRef="true"
							:argadr="{ title: $t('ptap.反担保行'), grp: 'oldnidgrp', rol: 'iss'}" ptytyp="B">
						</c-ptap>
					</c-col>
				
        </c-col>

        <c-col :span="12" style="padding-left: 20px">
          <!-- ==========================不为swift格式右边=================================== -->
					<c-col :span="24">
						<c-ptap :model="model" :isAdrblk="false" :haveAdrLabel="true" :disabled="true" :disabledRef="true"
							:disabledExtkey="true" :argadr="{title: $t('ptap.备案海关'), grp: 'oldnidgrp', rol: 'ben'}" ptytyp="H">
						</c-ptap>
					</c-col>

					<c-col :span="24">
						<el-form-item :label="$t('hitpop.其他海关已选')" prop="nidgrp.rec.ptyhgq">
							<c-fullbox>
								<c-input type="textarea" :rows="4" v-model.trim="oldPtyhgqName" placeholder="" disabled></c-input>
								<template slot="footer">
									<c-button type="primary" size="small" icon="el-icon-search" style="margin:0 10px 0 10px;padding: 0 12px;" disabled>
									</c-button>
								</template>
							</c-fullbox>
						</el-form-item>
					</c-col>
    		</c-col>
      </c-col>
    </c-row>
		<!-- 弹窗 -->
		<!-- <el-dialog v-dialogDrag :visible="visible" title="其他海关" width="50%" :before-close="handleClose">
			<div style="text-align: center">
				<el-transfer 
					style="text-align: left; display: inline-block;" 
					:data="codes.transferData" 
					v-model="checkedList"
					filterable
				  :titles="['未添加', '已添加']" 
					:button-texts="['移除', '添加']" 
					:props="{
						key: 'inr',
						label: 'nam'
					}"
					:format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}',
          }">
					<span slot-scope="{ option }">{{ option.extkey }} - {{ option.nam }}</span>
				</el-transfer>
			</div>
			<span slot="footer" class="dialog-footer">
				<c-button @click="cancel">取消</c-button>
				<c-button type="primary" @click="save()">保存</c-button>
			</span>
		</el-dialog> -->
  </div>
</template>
<script>
import event from "../event";
import Default from "../model/default";
import Api from '~/service/Api';
import commonFunctions from '~/mixin/commonFunctions.js';

export default {
  inject: ["root"],
  props: ["model", "codes"],
   mixins: [event, Default, commonFunctions],
  data() {
    return {
			keyword: '',
			visible: false,
    	};
	},
	methods: {
		// showHGDialog() {
		// 	this.visible = true;
		// 	// 通过nam值遍历出checkList
		// 	let list = [];
		// 	if(this.model.nidgrp.rec.ptyhgq){
		// 		list = this.model.nidgrp.rec.ptyhgq.split('、');
		// 	}
		// 	this.codes.markList.forEach(item => {
		// 		if(list.includes(item.nam)) {
		// 			this.checkedList.push(item.inr);
		// 		}else{
		// 			return
		// 		}
		// 	})
		// },
		// handleClose(done) {
    //   this.visible = false;
    //   done();
		// },
		// cancel() {
    //   this.visible = false;
		// },
		// async save() {
		// 	const rightData = [];
		// 	this.codes.transferData.forEach(item => {
		// 		if (this.checkedList.includes(item.inr)) {
		// 			rightData.push({
		// 				extkey: item.extkey,
		// 				nam: item.nam,
		// 				inr: item.inr
		// 			});
		// 		}
		// 	});
		// 	let list = rightData.map(item => {
		// 		return item.nam;
		// 	});
		// 	let str = list.length ? list.join("、") + "、" : "";
		// 	this.model.nidgrp.rec.ptyhgq = str.slice(0,str.length-1);
		// 	this.model.ptyList = rightData;
		// 	this.visible = false;
		// 	this.model.nidgrp.bencnt = list.length ? list.length + 1 : 1;
		// },
  },
  mounted() {
    //this.getHaiGuanData();
    //this.getSdhflg();
	},
	computed:{
		oldPtyhgqName: {
			get() {
				let nameStr = ''
				let nameArr = []
				//页面初始化，从数据库里带出数据
				let oldptyhgq =[];
				oldptyhgq = this.model.oldnidgrp.rec.ptyhgq.split("@");
				if (this.codes.markList && this.codes.markList.length > 0) {
					this.codes.markList.map((item) => {
						if (oldptyhgq.includes(item.extkey)) {
							nameArr.push(item.nam)
						}
					})
					nameStr = nameArr.join('、')
				}
				return nameStr
			},
			set(val) {
				this.$emit('input', val)
			}
		}
	}
};
</script>
<style scoped lang="less">
.eibs-tab{
	/deep/ .el-transfer-panel {
		width: 216px;
		height: 400px;
	}
	/deep/ .el-checkbox-group.el-transfer-panel__list {
		height: 296px;
	}
	/deep/ .el-checkbox {
		float: left; 
		text-align: left;
	}
	/deep/ .el-transfer-panel__header .el-checkbox {
		float: left;
		text-align: left;
		position: absolute;
	}
	/deep/ .el-transfer-panel__header .el-checkbox .el-checkbox__label span {
		position: relative;
		left: 100px;
		float: right;
	}
}

</style>