<template>
  <div class="eibs-tab">
    <!--=================顶部=================  -->

    <!-- <c-col :span="24" style="height: 24px">
            <el-form-item label="基本信息" class="messageLabel"> </el-form-item>
        </c-col>
        <c-col :span="24" style="height: 0px">
            <el-divider></el-divider>
        </c-col> -->

    <c-col :span="24" style="margin-top: 0">
      <c-col :span="11">
        <el-form-item label="汇款编号" prop="cpdgrp.rec.ownref" style="width: 100%">
          <c-fullbox>
            <c-input v-model="model.cpdgrp.rec.ownref" maxlength="16" placeholder="请输入业务编号" disabled></c-input>
            <template slot="footer">
              <c-button style="margin: 0px 10px 0 10px; padding: 0 12px" size="small" type="primary" @click="onSeainf">
                <span style="font-family: '宋体'; font-weight: bold">i</span>
              </c-button>
              <c-button style="margin: 0 0" size="small" type="primary" :disabled="this.flag" @click="onOpnpButgetref">
                获取
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>
      <c-col :span="11" :offset="1">
        <el-form-item label="简略信息" prop="cpdgrp.rec.nam">
          <c-input v-model="model.cpdgrp.rec.nam" maxlength="16" placeholder="" disabled></c-input>
        </el-form-item>
      </c-col>
    </c-col>

    <c-col>
      <!-- ===================中部--左==================== -->
      <c-col :span="11">
        <c-col :span="24">
          <el-form-item label="清算编号" prop="cpdgrp.rec.sysno">
            <c-input v-model="model.cpdgrp.rec.sysno" maxlength="21" placeholder="请输入清算编号"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <c-col :span="13">
            <c-form-item label="汇款金额" previewLabel="汇款金额币种" prop="cpdgrp.cbs.nom1.cur">
              <c-select v-model="model.cpdgrp.cbs.nom1.cur" style="width: 100%" placeholder=""
                @change="commonExecuteRule('cpdgrp.cbs.nom1.cur')">
                <el-option v-for="item in codes.currencycode" :key="item.value" :label="item.value + item.label"
                  :value="item.value"></el-option>
              </c-select>
            </c-form-item>
          </c-col>
          <c-col :span="11">
            <c-form-item label="" previewLabel="汇款金额" label-width="8px" prop="cpdgrp.cbs.nom1.amt">
              <c-input class="m-input-currency" v-model="model.cpdgrp.cbs.nom1.amt" placeholder="请输入汇款金额"
                @keyup.enter.native="
                  defaultFunction(
                    'cpdgrp.cbs.nom1.amt',
                    model.cpdgrp.cbs.nom1.amt
                  )
                "></c-input>
            </c-form-item>
          </c-col>
        </c-col>

        <c-col :span="24">
          <c-col :span="13">
            <el-form-item label="所属行" prop="cpdgrp.rec.othbch">
              <c-input v-model="model.cpdgrp.rec.othbch" maxlength="8" placeholder="" disabled></c-input>
            </el-form-item>
          </c-col>
          <c-col :span="11">
            <el-form-item label="汇款语种" label-width="40%">
              <c-select v-model="model.cptp.payuil" placeholder="请选择汇款语种" @change="onPayuilChange" style="width: 100%">
                <el-option v-for="item in codes.payuil" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </c-select>
            </el-form-item>
          </c-col>
        </c-col>

        <c-col :span="24">
          <c-col :span="13">
            <el-form-item label="是否需要核验" prop="cpdgrp.rec.ischktyp">
              <c-select v-model="model.cpdgrp.rec.ischktyp" style="width: 100%" placeholder="">
                <el-option v-for="item in codes.ischktyp" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </c-select>
            </el-form-item>
          </c-col>

          <c-col :span="11">
            <el-form-item label="预计核验日期" prop="cpdgrp.rec.paydat" label-width="40%">
              <c-date-picker type="date" v-model="model.cpdgrp.rec.paydat" value-format="yyyy-MM-dd" style="width: 100%"
                placeholder="" :disabled="this.flag1"></c-date-picker>
            </el-form-item>
          </c-col>
        </c-col>

        <c-col :span="24">
          <el-form-item label="我行费用负担">
            <c-select v-model="model.cpdgrp.rec.detchgcod" style="width: 100%" placeholder="">
              <el-option v-for="item in codes.detchgcod" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="货物类型">
            <c-select v-model="model.cpdgrp.rec.stagod" style="width: 100%" placeholder="请选择货物类型">
              <el-option v-for="item in codes.godcod" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </c-select>
          </el-form-item>
        </c-col>
      </c-col>

      <!-- ===================中部--右==================== -->
      <c-col :span="11" :offset="1">
        <c-col :span="24">
          <c-col :span="13">
            <el-form-item label="汇款性质" prop="cpdgrp.rec.trntyp">
              <c-select v-model="model.cpdgrp.rec.trntyp" placeholder="请选择汇款性质" style="width: 100%">
                <el-option v-for="item in trntyp" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </c-select>
            </el-form-item>
          </c-col>
          <c-col :span="11">
            <c-form-item label="汇款方式" prop="cpdgrp.rec.paytype" label-width="40%">
              <c-select v-model="model.cpdgrp.rec.paytype" placeholder="请选择汇款方式" style="width: 100%">
                <el-option v-for="item in codes.paytype" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </c-select>
            </c-form-item>
          </c-col>
        </c-col>

        <c-col :span="24">
          <c-col :span="13">
            <el-form-item label="汇款对象" prop="cpdgrp.rec.gors">
              <c-select v-model="model.cpdgrp.rec.gors" placeholder="请选择汇款对象" style="width: 100%">
                <el-option v-for="item in codes.gors" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </c-select>
            </el-form-item>
          </c-col>
          <c-col :span="11">
            <c-form-item label="收支类型" prop="cpdgrp.rec.sztyp" label-width="40%">
              <c-select v-model="model.cpdgrp.rec.sztyp" placeholder="请选择收支类型" style="width: 100%">
                <el-option v-for="item in codes.sztyp" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </c-select>
            </c-form-item>
          </c-col>
        </c-col>

        <c-col :span="24">
          <c-col :span="13">
            <el-form-item label="客户类型" prop="cpdgrp.rec.clityp">
              <c-select v-model="model.cpdgrp.rec.clityp" placeholder="请选择客户类型" style="width: 100%">
                <el-option v-for="item in codes.clityp" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </c-select>
            </el-form-item>
          </c-col>
          <c-col :span="11">
            <c-form-item label="报文类型" prop="cpdgrp.rec.swftyp" label-width="40%">
              <c-select style="width: 100%" placeholder="" v-model="model.cpdgrp.rec.swftyp" :disabled="this.flag2"
                @change="swftypChange">
                <!-- :disabled="model.cptp.liqtyp != 'C' && model.cptp.liqtyp != 'S' && model.cptp.liqtyp != ''" -->
                <el-option v-for="item in this.swftypOpnp" :label="item.label" :value="item.value" :key="item.value">
                </el-option>
              </c-select>
            </c-form-item>
          </c-col>
        </c-col>

        <c-col :span="24">
          <c-fullbox>
            <c-col :span="20">
              <c-col :span="21">
                <el-form-item label="收款人常驻国家/地区代码" prop="cptp.payeecountcode">
                  <c-input v-model="model.cptp.payeecountcode" maxlength="3" placeholder="请输入收款人常驻国家/地区代码"
                    @keyup.enter.native="
                      showGridPromptDialog('cptp.payeecountcode')
                    " style="width: 100%"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="3">
                <c-button size="small" type="primary" icon="el-icon-search" @click="
                  showGridPromptDialog(
                    'cptp.selbut1',
                    null,
                    null,
                    { TXT: 'cptp.payeecountcode' },
                    { TXT: false },
                    'doxpDialog'
                  )
                ">
                </c-button>
              </c-col>
            </c-col>

            <c-col :span="4" style="float: right">
              <c-checkbox v-model="model.cpdgrp.rec.tsnflg" label-width="150px">同名划转</c-checkbox>
            </c-col>
          </c-fullbox>
        </c-col>

        <c-col :span="24">
          <c-col :span="14">
            <el-form-item label="清算模式" v-if="model.cpdgrp.cbs.nom1.cur === 'CNY'">
              <c-select v-model="model.cptp.liqtyp" style="width: 100%" placeholder="请选择清算模式"
                :disabled="model.cpdgrp.cbs.nom1.amt === '0.000'" :code="this.liqtypOptions" @change="swftypChange">
                <el-option v-for="item in liqtypOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </c-select>
            </el-form-item>
            <el-form-item label="" v-if="!(model.cpdgrp.cbs.nom1.cur === 'CNY')"></el-form-item>
          </c-col>
        </c-col>

      </c-col>
    </c-col>

    <!-- <c-col :span="24" style="height: 24px">
            <el-form-item label="*****信息" class="messageLabel">
            </el-form-item>
        </c-col> -->
    <c-col :span="24" style="height: 0px">
      <el-divider></el-divider>
    </c-col>

    <CptOpnp1Common :model="model" :codes="codes" v-on:onSndpDet="onSndpDet"></CptOpnp1Common>
  </div>
</template>
<script>
import Api from "~/service/Api";
import CodeTable from "~/config/CodeTable";
import commonProcess from "~/mixin/commonProcess";
import Event from "~/model/Cptopn/Event";
import Utils from "~/utils";
import Infpta from "~/views/Business/Infpta";

import CptOpnp1Common from "./CptOpnp1Common";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  components: { Infpta, CptOpnp1Common },
  mixins: [commonProcess],
  data() {
    return {
      trntyp: [
        { value: "0", label: "贸易" },
        { value: "1", label: "非贸易" },
        { value: "2", label: "资本" },
        { value: "3", label: "其他" },
      ],
      liqtypOptions: [
        { value: "C", label: "代理行模式" },
        { value: "O", label: "Other" },
        { value: "S", label: "CIPS系统" },
      ],
      swftypOpnp: [
        { label: "MT103", value: "103" },
        { label: "Mt202 COV", value: "202" },
        { label: "MT202", value: "200" },
        { label: "Other", value: "OTH" },
      ],
      flag1: true,
      flag2: true,
    };
  },
  methods: {
    ...Event,
    onCptpGetref() { },
    onCptpGetmod() { },
    commonExecuteRule(ruleName) {
      this.executeRule(ruleName).then((res) => {
        if (res.respCode == SUCCESS) {
          Utils.copyValueFromVO(this.model, res.data);
        }
      });
    },
  },
  watch: {
    "model.cpdgrp.rec.ischktyp": {
      immediate: true,
      handler(val, oldVal) {
        if (
          this.model.cpdgrp.rec.ischktyp == "N" ||
          this.model.cpdgrp.rec.ischktyp == ""
        ) {
          this.flag1 = true;
          this.model.cpdgrp.rec.paydat = "";
        } else {
          this.flag1 = false;
        }
      },
    },
    "model.cptp.liqtyp": {
      immediate: true,
      handler(val, oldVal) {
        //清除数据
        if (this.model.cptp.liqtyp != "C") {
          //清除liqtyp = C时填写的数据
          this.model.cptp.cleage = "";
          this.model.cptp.evebch = "";
          this.model.cptp.coract = "";
        } else if (this.model.cptp.liqtyp != "O") {
          this.model.cpdgrp.blk.contag70 = "";
        } else if (this.model.cptp.liqtyp != "S") {
          this.model.cptp.orcnam = "";
          this.model.cptp.orcadr = "";
          this.model.cptp.pyenam = "";
          this.model.cptp.pyeadr = "";
          this.model.cptp.reconebch = "";
          this.model.cptp.reconebchnam = "";
          this.model.cptp.cptp.bustyp = "";
          this.model.cptp.commetr = "";
        }

        if (this.model.cptp.liqtyp == "C") {
          this.model.cpdgrp.rec.swftyp = "103";
          this.swftypOpnp = [
            { label: "MT103", value: "103" },
            { label: "MT202", value: "200" },
          ];
          this.flag2 = false;
        } else if (this.model.cptp.liqtyp == "O") {
          //同步切换报文类型的值
          this.model.cpdgrp.rec.swftyp = "OTH";
          this.flag2 = true;
        } else if (this.model.cptp.liqtyp == "S") {
          this.flag2 = false;
          //同步切换报文类型的值
          this.model.cpdgrp.rec.swftyp = "CIU";
          this.swftypOpnp = [
            { label: "cips111", value: "CIU" },
            { label: "cips112", value: "CIV" },
          ];
        } else {
          //当为空时，恢复下拉选的选项
          this.swftypOpnp = [
            { label: "MT103", value: "103" },
            { label: "Mt202 COV", value: "202" },
            { label: "MT202", value: "200" },
            { label: "Other", value: "OTH" },
          ];
        }
      },
    },
    "model.cpdgrp.cbs.nom1.amt": {
      immediate: true,
      handler(val, oldVal) {
        if (
          this.model.cpdgrp.cbs.nom1.amt !== "0.000" &&
          this.model.cpdgrp.cbs.nom1.cur != "CNY"
        ) {
          this.flag2 = false;
        } else {
          this.flag2 = true;
        }
      },
    },
    "model.cpdgrp.cbs.nom1.cur": {
      immediate: true,
      handler(val, oldVal) {
        if (
          this.model.cpdgrp.cbs.nom1.amt !== "0.000" &&
          this.model.cpdgrp.cbs.nom1.cur != "CNY"
        ) {
          this.flag2 = false;
        } else {
          this.flag2 = true;
        }
      },
    },
  },
  created: function () { },
  computed: {
    flag() {
      return (
        this.model.cpdgrp.orc.pts.extkey == ""
        // && this.model.cpdgrp.rec.ownref != ""
      );
    },
  },
};
</script>
<style scoped>

</style>