<template>
  <div class="eibs">
    <!-- ========================左边======================== -->
    <c-col :span="12" style="padding-right: 20px;">
      <c-col :span="24">
        <el-form-item label="授权兑付行" prop="lidgrp.rec.avbwth">
          <c-select
            v-model="model.lidgrp.rec.avbwth"
            style="width: 100%"
            placeholder="请选择"
            :code="codes.avbwth"
            @change="avbwthChange"
          >
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24" v-if="this.flag4">
        <el-form-item label="当事人地址编码" prop="lidgrp.avb.pts.extkey">
          <c-fullbox>
            <c-input
              :disabled="this.flag5"
              v-model="model.lidgrp.avb.pts.extkey"
              maxlength="16"
              placeholder="请输入地址编码"
              @keyup.enter.native="
                queryGridEtyPromptDialogData('AVB', 'B')
              "
            ></c-input>
            <template slot="footer">
              <c-button
                style="margin: 0 10px 0 10px; padding: 0 12px"
                size="small"
                type="primary"
                icon="el-icon-search"
              >
                
              </c-button>
              <c-button
                style="margin: 0 0"
                size="small"
                type="primary"
                icon="el-icon-info"
              >
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item
          label="名称地址"
          prop="lidgrp.avb.pts.adrblk"
          v-if="model.lidgrp.rec.avbwth != 'O'"
        >
          <c-input
            type="textarea"
            v-model="model.lidgrp.avb.pts.adrblk"
            maxlength="135"
            :rows="4"
            show-word-limit
            placeholder="请输入名称地址"
            :disabled="model.lidgrp.rec.avbwth !== ''"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24" v-if="model.lidgrp.rec.avbwth == 'O'">
        <el-form-item label="Available in" prop="lidgrp.blk.avbwthtxt">
          <c-input
            type="textarea"
            v-model="model.lidgrp.blk.avbwthtxt"
            maxlength="135"
            :rows="4"
            show-word-limit
            placeholder="请输入Available in"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="兑付方式" prop="lidgrp.rec.avbby">
          <c-select
            v-model="model.lidgrp.rec.avbby"
            style="width: 100%"
            placeholder="请选择兑付方式"
            :code="codes.avbby0"
            @change="avbbyChange"
          >
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item 
          label="议付/延期付款指示" 
          prop="lidgrp.blk.defdet" 
          :rules=" [
            { type: 'string', required: flag9, message: '必输项' },
            { max: 140, message: '长度不能超过140' },
          ]"
        >
          <c-input
            type="textarea"
            v-model="model.lidgrp.blk.defdet"
            maxlength="140"
            :rows="3"
            show-word-limit
            placeholder="请输入指示内容"
            :disabled="this.flag1"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="汇票期限" prop="lidgrp.blk.dftat">
          <c-input
            type="textarea"
            v-model="model.lidgrp.blk.dftat"
            maxlength="100"
            :rows="3"
            show-word-limit
            placeholder="请输入汇票期限"
            :disabled="this.flag2"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="汇票付款人" prop="lidgrp.drw.pts.extkey">
          <c-fullbox>
            <c-input
              v-model="model.lidgrp.drw.pts.extkey"
              maxlength="16"
              placeholder="请输入地址编码"
              @keyup.enter.native="
                queryGridEtyPromptDialogData('DRW', '')
              "
              :disabled="this.flag2"
            ></c-input>

            <template slot="footer">
              <c-button
                style="margin: 0 10px 0 10px; padding: 0 12px"
                size="small"
                type="primary"
                icon="el-icon-search"
              >
                
              </c-button>
              <c-button
                style="margin: 0 0"
                size="small"
                type="primary"
                :disabled="this.flag2"
                icon="el-icon-info"
              >
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="名称地址" prop="lidgrp.drw.pts.adrblk" :required="flag7">
          <c-input
            type="textarea"
            :disabled="this.flag2"
            v-model="model.lidgrp.drw.pts.adrblk"
            maxlength="135"
            :rows="4"
            show-word-limit
            placeholder="请输入名称地址"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="装船/发运地" prop="lidgrp.rec.shpfro">
          <c-input
            v-model="model.lidgrp.rec.shpfro"
            maxlength="65"
            placeholder="请输入装船/发运地"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="始发（航空）站" prop="lidgrp.rec.porloa">
          <c-input
            v-model="model.lidgrp.rec.porloa"
            maxlength="65"
            placeholder="请输入始发（航空）站"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="终点（航空）站" prop="lidgrp.rec.pordis">
          <c-input
            v-model="model.lidgrp.rec.pordis"
            maxlength="65"
            placeholder="请输入终点（航空）站"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="最终目的地" prop="lidgrp.rec.shpto">
          <c-input
            v-model="model.lidgrp.rec.shpto"
            maxlength="65"
            placeholder="请输入最终目的地"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="装运期" prop="lidgrp.blk.shpper">
          <c-input
            type="textarea"
            :disabled="
              model.lidgrp.rec.shpdat != null && model.lidgrp.rec.shpdat != ''
            "
            v-model="model.lidgrp.blk.shpper"
            maxlength="390"
            :rows="6"
            show-word-limit
            placeholder="请输入装运期"
          ></c-input>
        </el-form-item>
      </c-col>
    </c-col>

    <!-- ========================右边======================== -->
    <c-col :span="12" style="padding-left: 20px;">
      <c-col :span="24">
        <el-form-item label="提交期限（天）" prop="lidgrp.rec.prepers18">
          <c-input
            v-model.number="model.lidgrp.rec.prepers18"
            style="width: 100%"
            placeholder="请输入提交期限（天）"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="交单期限" prop="lidgrp.rec.prepertxts18">
          <c-fullbox>
            <c-input
              type="textarea"
              v-model="model.lidgrp.rec.prepertxts18"
              maxlength="35"
              show-word-limit
              placeholder="请输入交单期限"
            ></c-input>
            <template slot="footer">
              <c-button
                size="small"
                type="primary"
                icon="el-icon-search"
              ></c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="银行负担费用" prop="lidgrp.blk.feetxt">
          <c-fullbox>
            <c-input
              type="textarea"
              v-model="model.lidgrp.blk.feetxt"
              maxlength="210"
              :rows="6"
              show-word-limit
              placeholder="请输入银行负担费用"
            ></c-input>
            <template slot="footer">
              <c-button
                size="small"
                type="primary"
                icon="el-icon-search"
              ></c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="收报行所属国家地区 " prop="lidgrp.rec.stacty">
          <c-select
            v-model="model.lidgrp.rec.stacty"
            style="width: 100%"
            :code="codes.stacty"
            placeholder="请选择地区代码"
          >
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item 
        label="混合付款指示" 
        prop="lidgrp.blk.mixdet" 
        :rules="[
          { max: 130, message: '长度不能超过130' },
          { required:!flag3, message:'必输项'}
          ]">
          <c-input
            type="textarea"
            v-model="model.lidgrp.blk.mixdet"
            maxlength="130"
            :rows="4"
            show-word-limit
            placeholder="请输入混合付款指示"
            :disabled="this.flag3"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item
          label="远期汇票最大期限（天）"
          prop="lidgrp.rec.tenmaxday"
          :rules="[
            { required:flag8,pattern:/^((?!^-[1-9]\d*|0$).)*$/, message:'请输入大于0的整数'},
            { type: 'number',  message: '请输入数字' },
            { type: 'number', max: 999, message: '不能超过999' },
        ]"
        >
          <c-input
            :disabled="!!(this.model.lidgrp.rec.avbby == 'P')"
            v-model.number="model.lidgrp.rec.tenmaxday"
            placeholder="请输入天数"
            maxlength="3"
          ></c-input>
        </el-form-item>
      </c-col>
    </c-col>
  </div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import event from "../event";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [commonProcess, event],
  data() {
    return {
      flag1: true,
      flag2: true,
      flag3: true,
      flag4: true,
      flag5: false,
      flag6: false,
      flag7: false,
      flag8: true,
      flag9: false,
    };
  },
  methods: {
 
  },
  created: function () {},
  watch: {
    "model.lidgrp.rec.avbwth": {
      immediate: true,
      handler(val, oldVal) {
        //Any Bank
        if (val == "O") {
          this.flag4 = false;
          this.changeFormItemRequired("lidgrp.avb.pts.adrblk", false);
          this.flag6 = false;
        } //Advising Bank
        else if (val == "A") {
          this.flag4 = true;
          this.flag5 = true;
          this.flag6 = true;
        } //Issuing Bank
        else if (val == "I") {
          this.flag4 = true;
          this.flag5 = false;
          this.flag6 = true;
        } //Confirming Bank
        else if (val == "C") {
          this.flag4 = true;
          this.flag5 = true;
          this.flag6 = true;
        } //Specified Bank
        else if (val == "S") {
          this.flag4 = true;
          this.flag5 = false;
          this.flag6 = false;
        }
      },
    },

    "model.lidgrp.rec.avbby": {
      immediate: true,
      handler(val, oldVal) {
        if (val == "D") {
          this.flag1 = false;
          this.flag2 = true;
          this.flag3 = true;
          this.flag7 = false;
          this.flag9 = true;
          this.model.lidgrp.blk.defdet="days after B/L date"
        }
        if (val == "N") {
          this.flag1 = false;
          this.flag2 = false;
          this.flag3 = true;
          this.flag7 = true;
          this.flag8 = false;
          this.flag9 = false;
          this.model.lidgrp.blk.defdet="days after B/L date"
        }
        if (val == "P") {
          this.flag1 = true;
          this.flag2 = false;
          this.flag3 = true;
          this.flag7 = false;
          this.flag8 = false;
          this.flag9 = false;
          this.model.lidgrp.rec.tenmaxday == 0
          this.model.lidgrp.blk.defdet=""
        }
        if (val == "M") {
          this.flag1 = true;
          this.flag2 = true;
          this.flag3 = false;
          this.flag7 = false;
          this.flag9 = false;
           this.model.lidgrp.blk.defdet=""
        }
        if (val == "A") {
          this.flag1 = true;
          this.flag2 = false;
          this.flag3 = true;
          this.flag7 = true;
          this.flag9 = false;
           this.model.lidgrp.blk.defdet=""
        }
      },
    },
  }, 
};
</script>
<style>
.marginLable {
  padding-left: 160px;
}
</style>