<template>
  <div class="eibs-tab">
    <el-row>
      <c-col :span="12">
        <el-form-item label="参考号" prop="didgrp.rec.ownref">
          <c-input
            disabled
            v-model="model.didgrp.rec.ownref"
            maxlength="16"
            placeholder="请输入Reference"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label="摘要" prop="didgrp.rec.nam">
          <c-input
            disabled
            v-model="model.didgrp.rec.nam"
            maxlength="40"
            placeholder="请输入Externally Displayed Name to Identify the Contract"
          ></c-input>
        </el-form-item>
      </c-col>
    </el-row>
    <el-row>
      <c-col :span="6">
        <el-form-item label="信用证金额" prop="didgrp.cbs.nom1.cur">
          <c-select
            v-model="model.didgrp.cbs.nom1.cur"
            placeholder="请选择Currency"
            disabled
          >
          <el-option
              v-for="item in codes.cur"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>
      
      <c-col :span="6">
        <el-form-item label="" prop="didgrp.cbs.nom1.amt" label-width="5px">
          <c-input
            disabled
            v-model="model.didgrp.cbs.nom1.amt"
            placeholder="请输入信用证金额"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="申请人" prop="didgrp.apl.pts.ref">
          <c-input
            disabled
            v-model="model.didgrp.apl.pts.ref"
            maxlength="16"
            placeholder="请输入申请人"
          ></c-input>
        </el-form-item>
      </c-col>
    </el-row>

    <el-row>
      <c-col :span="6">
        <el-form-item label="信用证余额" prop="didgrp.cbs.opn1.cur">
          <c-select
            disabled
            v-model="model.didgrp.cbs.opn1.cur"
            placeholder="请选择信用证余额"
          >
          <el-option
              v-for="item in codes.cur"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="6">
        <el-form-item label="" prop="didgrp.cbs.opn1.amt" label-width="5px">
          <c-input
            disabled
            v-model="model.didgrp.cbs.opn1.amt"
            placeholder="请输入信用证余额"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label="" prop="didgrp.apl.pts.nam">
          <c-input
            disabled
            v-model="model.didgrp.apl.pts.nam"
            maxlength="40"
            placeholder="请输入Name of Party"
          ></c-input>
        </el-form-item>
      </c-col>
    </el-row>
    <el-row>
      <c-col :span="12">
        <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 :span="12">
        <el-form-item label="受益人" prop="didgrp.ben.pts.ref">
          <c-input
            disabled
            v-model="model.didgrp.ben.pts.ref"
            maxlength="16"
            placeholder="请输入受益人"
          ></c-input>
        </el-form-item>
      </c-col>
    </el-row>

    <el-row>
      <c-col :span="12">
        <el-form-item label="兑付方式" prop="didgrp.rec.avbby">
          <c-select
            disabled
            v-model="model.didgrp.rec.avbby"
            style="width: 100%"
            placeholder="请选择Available by"
          >
          <el-option
       v-for="item in codes.avbby0"
       :key="item.value"
      :label="item.label"
        :value="item.value"
       >
       </el-option>
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="" prop="didgrp.ben.pts.nam">
          <c-input
            disabled
            v-model="model.didgrp.ben.pts.nam"
            maxlength="40"
            placeholder=""
          ></c-input>
        </el-form-item>
      </c-col>
    </el-row>
    <el-row>
      <c-col :span="6">
        <el-form-item label="开证日期" prop="didgrp.rec.opndat">
          <c-date-picker
            disabled
            type="date"
            v-model="model.didgrp.rec.opndat"
            style="width: 100%"
            placeholder="请选择Date L/C Opened/Issued"
          ></c-date-picker>
        </el-form-item>
      </c-col>

      <c-col :span="6">
        <el-form-item label="最迟装运日期" prop="didgrp.rec.shpdat">
          <c-date-picker
            disabled
            type="date"
            v-model="model.didgrp.rec.shpdat"
            style="width: 100%"
            placeholder="请选择Shipment Date"
          ></c-date-picker>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="通知行" prop="didgrp.rec.tzref">
          <c-input
            disabled
            v-model="model.didgrp.rec.tzref"
            maxlength="35"
            placeholder="请输入通知行编号"
          ></c-input>
        </el-form-item>
      </c-col>
    </el-row>

    <!-- <c-col :span="12">
      <el-form-item label="通知行" prop="didgrp.adv.pts.ref">
        <c-input
          v-model="model.didgrp.adv.pts.ref"
          maxlength="16"
          placeholder="请输入通知行"
        ></c-input>
      </el-form-item>
    </c-col> -->
    <el-row>
      <c-col :span="6">
        <el-form-item label="到期日/到期地点" prop="didgrp.rec.expdat">
          <c-date-picker
            disabled
            type="date"
            v-model="model.didgrp.rec.expdat"
            style="width: 100%"
            placeholder="请选择Date of Expiry"
          ></c-date-picker>
        </el-form-item>
      </c-col>

      <c-col :span="6">
        <el-form-item label="" prop="didgrp.rec.expplc" label-width="5px">
          <c-input
            disabled
            v-model="model.didgrp.rec.expplc"
            maxlength="35"
            placeholder="请输入Place of Expiry"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label="" prop="didgrp.adv.pts.nam">
          <c-input
            disabled
            v-model="model.didgrp.adv.pts.nam"
            maxlength="40"
            placeholder="请输入到期日/到期地点"
          ></c-input>
        </el-form-item>
      </c-col>
    </el-row>
    <el-row>
      <c-col :span="12">
        <el-form-item label="信用证类型" prop="didgrp.rec.lcrtyp">
          <c-select
            disabled
            v-model="model.didgrp.rec.lcrtyp"
            style="width: 100%"
            placeholder="请选择Form of Documentary Credit"
          >
          <el-option
       v-for="item in codes.lcrtyp"
       :key="item.value"
      :label="item.label"
        :value="item.value"
       >
       </el-option>
          </c-select>
        </el-form-item>
      </c-col>
    </el-row>


    <!--右边-->
    <c-col :span="12"><el-form-item label=""></el-form-item></c-col>

      <c-col :span="12">
      <el-row>
        <c-col :span="20">
        <el-form-item label="第" prop="amenbr" >
          <c-input
            disabled
            v-model="model.amenbr"
            
            placeholder="请输入Amendment No."
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="4">
        <el-form-item label="次修改(减额)" > </el-form-item>
      </c-col>
      </el-row>
      
    
    <el-row>
      <c-col :span="12">
        <el-form-item label="修改金额" prop="amecur" >
          <c-select
            disabled
            v-model="model.amecur"
            style="width: 100%"
            placeholder="请选择Amount Amend Cur"
          >
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="" prop="ameamt" label-width="5px">
          <c-input
            disabled
            v-model="model.ameamt"
            placeholder="请输入修改金额"
          ></c-input>
        </el-form-item>
      </c-col>
    </el-row>
    
    <el-row>
      <c-col :span="24">
        <el-form-item label="修改日期" prop="amedat">
          <c-input
            disabled
            v-model="model.amedat"
            style="width: 100%"
            placeholder="请输入Amount Amend Date"
          ></c-input>
        </el-form-item>
      </c-col>
    </el-row>

    <el-row>
      <c-col :span="24">
        <el-form-item label="是否接受此笔减额修改" prop="ameflg">
          <c-select
            disabled
            v-model="model.ameflg"
            style="width: 100%"
            placeholder="请选择是否接受此笔减额修改"
          >
          <el-option
       v-for="item in codes.ameflg"
       :key="item.value"
      :label="item.label"
        :value="item.value"
       >
       </el-option>
          </c-select>
        </el-form-item>
      </c-col>
    </el-row>
      </c-col>


    <c-col :span="24">
        <el-form-item label="修改历史列表" prop="decstm">
          <c-istream-table 
                    :list="model.decstm.rows || []"
                    :columns="trnData.columns"
                    v-on:chooseRowEvent="chooseRowEvent"
        >
        </c-istream-table>
        </el-form-item>
      </c-col>
      


      
      
   
  </div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Ditdla/Event";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [commonProcess],
  data() {
    return {
        trnData: {
        columns: [
            "0 1 \"\" 200",
            "1 2 \"Own Reference\" 200",
            "2 3 \"Cur\" 200",
            "3 4 \"减额金额\" 200 2 8:1 2 5",
            "4 5 \"修改日期\" 200 4 7",
            "7 6 \"备注\" 200 ",
        ],
        codes:{
          ...CodeTable
        },
        data: [],
      },

        }
  },
  methods: { ...Event,
  async chooseRowEvent(row) {
      const selIds = [row.IDX + 1]; //rowno选中行
      const selDst = "decstm" //列表对应后台模型中的stream
      let params = { selDst: selDst, selIds: selIds };
      let rtnmsg = await this.executeRule("decstm", params)
      if(rtnmsg.respCode == SUCCESS) {
        this.updateModel(rtnmsg.data)
      }
    }
    },
  created: function () {},
};
</script>
<style>
.stream{
   cursor: pointer; 
}
</style>
