<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.oldnidgrp.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>