<template>
	<div class="eibs-tab">
		<!-- ==================左边================ -->
		<c-col :span="24">
			<c-col :span="12" style="padding-right: 20px;">
				<c-col :span="24">
					<el-form-item label="信用证编号" prop="didgrp.rec.ownref">
						<c-input disabled maxlength="16" placeholder="请输入参考号" v-model="model.didgrp.rec.ownref"></c-input>
					</el-form-item>
				</c-col>
				<c-col :span="24">
					<div class="custom-box-wrap">
						<div style="width: 280px;">
							<el-form-item label="信用证金额" prop="olddidgrp.cbs.nom1.cur">
								<c-select disabled dbCode="curtxt" isShowKeyAndLabel placeholder="请选择信用证金额" style="width: 100%" v-model="model.olddidgrp.cbs.nom1.cur">
								</c-select>
							</el-form-item>
						</div>
						<div style="width: calc(100% - 280px);">
							<el-form-item label-width="5px" prop="olddidgrp.cbs.nom1.amt">
								<c-input-currency disabled :currency="model.olddidgrp.cbs.nom1.cur" @keyup.enter.native="$event.target.blur()" placeholder="请输入信用证金额" style="width: 100%" v-model="model.olddidgrp.cbs.nom1.amt"></c-input-currency>
							</el-form-item>
						</div>
					</div>
				</c-col>
				<c-col :span="24">
					<div class="custom-box-wrap">
						<div style="width: 280px;">
							<el-form-item label="信用证余额" prop="olddidgrp.cbs.opn1.cur">
								<c-select disabled dbCode="curtxt" isShowKeyAndLabel placeholder="请选择信用证金额" style="width: 100%" v-model="model.olddidgrp.cbs.opn1.cur">
								</c-select>
							</el-form-item>
						</div>
						<div style="width: calc(100% - 280px);">
							<el-form-item label-width="5px" prop="olddidgrp.cbs.opn1.amt">
								<c-input-currency disabled :currency="model.olddidgrp.cbs.opn1.cur" @keyup.enter.native="$event.target.blur()" placeholder="请输入信用证金额" style="width: 100%" v-model="model.olddidgrp.cbs.opn1.amt"></c-input-currency>
							</el-form-item>
						</div>
					</div>
				</c-col>
				<c-col :span="24">
					<el-form-item label="开证日期" prop="didgrp.rec.opndat">
						<c-date-picker disabled type="date" v-model="model.didgrp.rec.opndat" style="width:100%" placeholder="请选择开证日期"></c-date-picker>
					</el-form-item>
				</c-col>
				<c-col :span="24">
					<el-form-item label="最迟货物装运日" prop="didgrp.rec.shpdat">
						<c-date-picker disabled type="date" v-model="model.didgrp.rec.shpdat" style="width:100%" placeholder="请输入最迟货物装运日"></c-date-picker>
					</el-form-item>
				</c-col>
				<c-col :span="24">
					<el-form-item label="到期日" prop="didgrp.rec.expdat">
						<c-date-picker disabled type="date" v-model="model.didgrp.rec.expdat" style="width:100%" placeholder="请输入到期日"></c-date-picker>
					</el-form-item>
				</c-col>
				<c-col :span="24">
					<el-form-item label="到期地点" prop="didgrp.rec.expplc">
						<c-mul-row-input disabled :autosize="{ minRows: 2, maxRows: 2}" :cols="35" :rows="6" v-model="model.didgrp.rec.expplc">
						</c-mul-row-input>
					</el-form-item>
				</c-col>
				<c-col :span="24">
					<el-form-item label="信用证类型" prop="didgrp.rec.lcrtyp">
						<c-select dbCode="LCRTYP" uil="CN" disabled v-model="model.didgrp.rec.lcrtyp" style="width:100%" placeholder="请输入信用证类型">
						</c-select>
					</el-form-item>
				</c-col>
				<c-col :span="24">
					<el-form-item label="指定议付行" prop="didgrp.avbnam">
						<c-input disabled v-model="model.didgrp.avbnam" maxlength="40" placeholder="请输入指定议付行"></c-input>
					</el-form-item>
				</c-col>
			</c-col>

			<!-- ============右边================= -->
			<c-col :span="12" style="padding-left: 20px;">
				<c-col :span="24">
					<c-ptap10 :model="model" :argadr="{grp: 'didgrp',rol: 'apl'}" :label="{labelRef: '申请人参考号',labelNam: '名称',}" :disabledNam="true" :disabledRef="true">
					</c-ptap10>
				</c-col>
				<c-col :span="24" style="margin-top:10px;">
					<c-ptap10 :model="model" :argadr="{grp: 'didgrp',rol: 'ben'}" :label="{labelRef: '受益人参考号',labelNam: '名称',}" :disabledNam="true" :disabledRef="true">
					</c-ptap10>
				</c-col>
				<c-col :span="24" style="margin-top:10px;">
					<!-- <c-ptap10 :model="model" :argadr="{grp: 'didgrp',rol: 'adv'}" :label="{labelRef: '通知行',labelNam: '名称',}" :disabledNam="true" :disabledRef="true">
					</c-ptap10> -->
					<el-card class="box-card">
					<c-col :span="24">
						<el-form-item label="通知行参考号" label-width="120px" prop="didgrp.adv.pts.ref">
							<c-input disabled maxlength="16" v-model="model.didgrp.adv.pts.ref"></c-input>
						</el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="名称" label-width="120px" prop="didgrp.adv.pts.jigomc">
							<c-input disabled maxlength="40" v-model="model.didgrp.adv.pts.jigomc"></c-input>
						</el-form-item>
					</c-col>
					</el-card>
				</c-col>
				<c-col :span="24" style="margin-top:10px">
					<el-form-item label="兑付方式" prop="didgrp.rec.avbby">
						<c-select disabled v-model="model.didgrp.rec.avbby" style="width:100%" placeholder="请输入兑付方式" dbCode="AVBBY0" uil="CN">
						</c-select>
					</el-form-item>
				</c-col>
			</c-col>
		</c-col>

		<c-col :span="24" style="height: 10px; margin-bottom: 40px">
			<el-divider></el-divider>
		</c-col>
		<el-col :span="24">
			<c-col :span="12" style="padding-right: 20px;">
				<el-table ref="table" :data="codes.tableData" style="width: 100%;height:200px;" class="eContainer-table" row-key="IDX" :highlight-current-row="false" :border="true" @row-click="rowClick">
					<el-table-column type="index" width="55">
						<template slot-scope="scope">
							<c-checkbox :value="scope.row['checked']" @click.stop></c-checkbox>
						</template>
					</el-table-column>
					<c-table-column v-for="(item, key) in trnData.columns" :key="key" :prop="item.prop" :label="item.label" :width="item.width" sortable>
						<template v-slot="{ scope }">
							<span>{{ scope.row[item.prop] }}</span>
						</template>
					</c-table-column>
				</el-table>
			</c-col>
			<c-col :span="12" style="padding-left: 20px;">
				<c-col :span="24">
					<el-form-item label="第次修改（减额）" prop="amenbr">
						<c-input disabled v-model="model.amenbr" maxlength="3" placeholder="请输入第次修改（减额）"></c-input>
					</el-form-item>
				</c-col>
				<c-col :span="24">
					<div class="custom-box-wrap">
						<div style="width: 280px;">
							<el-form-item label="修改金额最大金额" prop="amecur">
								<c-select disabled dbCode="curtxt" isShowKeyAndLabel placeholder="请选择修改金额" style="width: 100%" v-model="model.amecur">
								</c-select>
							</el-form-item>
						</div>
						<div style="width: calc(100% - 280px);">
							<el-form-item label-width="5px" prop="ameamt">
								<c-input-currency disabled :currency="model.amecur" @keyup.enter.native="$event.target.blur()" placeholder="请输入修改金额" style="width: 100%" v-model="model.ameamt"></c-input-currency>
							</el-form-item>
						</div>
					</div>
				</c-col>
				<c-col :span="24">
					<el-form-item label="修改日期" prop="amedat">
						<c-input disabled v-model="model.amedat" maxlength="24" placeholder="请输入修改日期"></c-input>
					</el-form-item>
				</c-col>
				<c-col :span="24">
					<el-form-item label="是否接受此笔减额修改" prop="ameflg">
						<c-select dbCode="AMEFLG" disabled v-model="model.ameflg" style="width:100%" placeholder="请输入是否接受此笔减额修改">
						</c-select>
					</el-form-item>
				</c-col>
			</c-col>
		</el-col>
	</div>
</template>
<script>
import event from "../event";
import Default from "../model/default";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event,Default],
  data() {
    return {
      trnData: {
        columns: [
          {
            label: "修改次数",
			prop: "修改次数",
			width: "120"
          },
          {
            label: "信用证编号",
            prop: "信用证编号",
            width: "150"
          },
          {
            label: "币种",
			prop: "币种",
			width: "120"
          },
          {
            label: "减额金额",
			prop: "减额金额",
			width: "120"
		  },
		  {
            label: "减额最大金额",
			prop: "减额最大金额",
			width: "150"
          },
          {
            label: "修改日期",
			prop: "修改日期",
			width: "150"
		  },
		  {
            label: "备注",
			prop: "备注",
			width: "100"
          }
        ],
        data: []
      }
    };
  },
  methods: {
    rowClick (row) {
		if((this.$route.query.businessInr&&this.$route.query.businessType=='TRN')||this.isInDisplay){
        	return;
      	}
			this.codes.tableData.map((item) => {
				if(this.$store.state.Status.mode !== 'display'){
					if (item.IDX === row.IDX) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			})
			this.decstmRowSelected(row)
			this.$forceUpdate()
	},
  },
  created: function() {}
};
</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 0px 0px;
  }
}
</style>