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

    <c-col :span="24" style="margin-top: 0">
      <c-col :span="12" style="padding-right: 20px;">
        <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"
              >
                <i class="el-icon-info"></i>
              </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="12" style="padding-left: 20px;">
        <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="12" style="padding-right: 20px;">
        <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="汇款语种" prop="cptp.payuil">
              <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.prechkdat"
            >
              <c-date-picker
                type="date"
                v-model="model.cpdgrp.rec.prechkdat"
                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="我行费用负担" prop="cpdgrp.rec.detchgcod">
            <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>

      <!-- ===================中部--右==================== -->
      <c-col :span="12" style="padding-left: 20px;">
        <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"
            >
              <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"
            >
              <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"
            >
              <c-select
                style="width: 100%"
                placeholder=""
                v-model="model.cpdgrp.rec.swftyp"
                :disabled="this.flag2"
                @change="swftypChange"
              >
               <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,
                      { COD: 'cptp.payeecountcode' },
                      { COD: true },
                      '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="13">
            <el-form-item label="货物类型" prop="cpdgrp.rec.stagod">
              <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 :span="11">
            <el-form-item
              label="清算模式"
              prop="cptp.liqtyp"
              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>

    <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: "其他" },
        { 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>