<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" chooseLanguage="CN" :isAdrblk="false" :haveAdrLabel="true" :disabled="model.nidgrp.rec.hndtyp != 'OT'" :disabledRef="comper=='X'"
						  :disabledExtkey="comper=='X'" @handleChange="changeApl" :requiredExtkey="true" :argadr="{title: $t('ptap.申请人'), grp: 'nidgrp', rol: 'apl'}"
						  :ptytyp="model.nidgrp.rec.hndtyp=='OT'?'B,C,F':'C'" @clear="clearDeleteData(true)">
						</c-ptap>
					</c-col>

					<c-col :span="24" v-if="model.nidgrp.rec.hndtyp != 'OT'">
						<c-ptap :model="model" chooseLanguage="CN" :isAdrblk="false" :haveAdrLabel="true" :noRef="false" @handleChange="changeBdb" :isDisabled="model.nidgrp.rec.hndtyp == 'OT'"
						  :disabledRef="!model.nidgrp.rec.fenlishi"
						  :requiredExtkey="model.nidgrp.rec.hndtyp == 'OL'&& model.nidgrp.rec.fenlishi =='2'" :argadr="{title: $t('ptap.被担保人'), grp: 'nidgrp', rol: 'bdb'}"
						  :ptytyp="model.nidgrp.rec.hndtyp == 'OT'?'B':'C'" @clear="clearDeleteData(true)">
						</c-ptap>
					</c-col>

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

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

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

					<c-col :span="24">
						<el-form-item :label="$t('hitpop.其他海关已选')" prop="nidgrp.rec.ptyhgq">
							<c-fullbox>
								<c-input 
									type="textarea" 
									autosize 
									:rows="4" 
									v-model.trim="ptyhgqName" 
									placeholder="" 
									@keyup.enter.native="showHGDialog()"
									disabled
									:style="{'border-bottom': isShowRed ? '2px solid red' : ''}"
									:customModifykey="'nidgrp.rec.ptyhgq'"
								></c-input>
								<template slot="footer">
									<c-button type="primary" size="small" icon="el-icon-search" style="margin:0 10px 0 10px;padding: 0 12px;" @click="showHGDialog()">
									</c-button>
								</template>
							</c-fullbox>
						</el-form-item>
					</c-col>

					<!-- <c-col :span="24" v-if="model.nidgrp.rec.hndtyp == 'OL'">
							<c-ptap :model="model" chooseLanguage="CN" :isAdrblk="true" :disabled="comper=='X'"  :disabledRef="comper=='X'" :disabledExtkey="comper=='X'" :haveAdrLabel="true" :argadr="{
									title: $t('ptap.通知行'), grp: 'nidgrp', rol: 'adv'}" ptytyp="B">
							</c-ptap>
						</c-col> -->

				</c-col>
			</c-col>
		</c-row>
		<!-- 弹窗 -->
		<el-dialog v-dialogDrag v-if="visible" :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: 'extkey',
						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";
import markSetShowRed from '~/components/business/componentMixins/markSetShowRed.js'
import commonDepend from '~/mixin/commonDepend.js'
export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event, Default, commonFunctions, markSetShowRed, commonDepend],
  data() {
    return {
      keyword: "",
      visible: false,
      transferData: [],
      checkedList: []
    };
  },
  methods: {
    showHGDialog() {
			this.visible = true;
			this.formatNameToChecked(this.model.nidgrp.rec.ptyhgq)
			// // 通过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
			// 	}
			// })
			this.getHaiGuanData();
		},
    handleClose(done) {
      this.visible = false;
      done();
    },
    cancel() {
      this.visible = false;
		// 取消后，需要刷新文本区域的其它海关的值
		this.formatNameToChecked(this.model.nidgrp.rec.ptyhgq);
    },
    async save() {
      const rightData = [];
      this.codes.transferData.forEach(item => {
        if (this.checkedList.includes(item.extkey)) {
          rightData.push({
            extkey: item.extkey,
            nam: item.nam,
            inr: item.inr
					});
					
        }
      });
      let str = this.checkedList.length ? this.checkedList.join("@") + "@" : "";
			this.model.nidgrp.rec.ptyhgq = str;
			console.log(this.model.nidgrp.rec.ptyhgq,"this.model.nidgrp.rec.ptyhgq")
      this.model.ptyList = rightData;
      this.visible = false;
      this.customAddModify(this.model.nidgrp.rec, 'ptyhgq')
    },
  },
  mounted() {
	},
	watch: {
		'model.ptyList'(newValue) {
			if(newValue && newValue.length > 0) {
				newValue.forEach(item => {
					this.checkedList.push(item.extkey);
				});
			}
		}
	},
  computed: {
    comper() {
      let judgeFlag = "";
      if (this.codes.sndflgJudgement == "X") {
        judgeFlag = "X";
      }
      return judgeFlag;
		},
		ptyhgqName: {
			get() {
				let nameStr = ''
				let nameArr = []

				// 重新计算右侧 其它海关
        let newCheckList = [];
        
        // 赋默认值
        if (!this.visible&&this.model.nidgrp.rec.ptyhgq){
          this.checkedList = this.model.nidgrp.rec.ptyhgq.split("@") ;
        }

				if(this.model.nidgrp.ben.pts.extkey&&this.model.nidgrp.ben.pts.extkey!==""){
					// 如果右侧 其它海关中 中包括备案海关（先输入其它海关，然后再更改备案海关可能出现这种情况），则将其移出其它海关
					if(this.checkedList.includes(this.model.nidgrp.ben.pts.extkey)){
						// 查找备案海关的值，并将其移入临时数组中
						this.checkedList.map((key) => {
							if (key!==this.model.nidgrp.ben.pts.extkey) {
								newCheckList.push(key)
							}
						})
						// 将临时数组中的值，更新其它海关
						this.checkedList =newCheckList;
					}
				}
				if (this.codes.markList && this.codes.markList.length > 0) {
					this.codes.markList.map((item) => {
						if (this.checkedList.includes(item.extkey)) {
							nameArr.push(item.nam)
						}
					})
          nameStr = nameArr.join('、')
          this.model.nidgrp.bencnt = nameArr.length ? nameArr.length + 1 : 1;
				}
				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>