<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: 20px;">
      <c-col :span="12">
        <el-form-item label="申报类型" label-width="30%">
            <c-select v-model="model.bopmod.szflg" 
            style="width:100%" 
            placeholder="请选择申报类型"
            @change="handelSelChange"
            >
            <el-option
              v-for="item in szflg"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
            </c-select>
        </el-form-item>
       </c-col>

      <c-col :span="11" :offset="1"> 
        <c-col :span="24">                       
          <c-col :span="8">
          <c-checkbox v-model="model.bopmod.basflg" v-show="basflgShow" :disabled="basflgEnable">基础数据</c-checkbox>
          </c-col> 
                      
          <c-col :span="8">
          <c-checkbox v-model="model.bopmod.dclflg" v-show="dclflgShow">申报数据</c-checkbox>
          </c-col> 
                      
          <c-col :span="8">
          <c-checkbox v-model="model.bopmod.vrfflg" v-show="vrfflgShow">核销数据</c-checkbox>
          </c-col> 
        </c-col>
      </c-col>
    </c-col>                                 
                                   
    <c-col :span="12">
      <c-col :span="24">
      <el-form-item label="款项来源" label-width="30%">
          <c-select v-model="model.bopmod.acttyp" 
            style="width:100%" 
            placeholder="请选择款项来源"
            :disabled="model.bopmod.szflg != 1"
            >
            <el-option
              v-for="item in acttyp"
              :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="地区机构号" label-width="30%">
            <c-select v-model="model.bopmod.ownextkey" style="width:100%" placeholder="请选择地区机构号" :disabled="model.bopmod.szflg == 3 || model.bopmod.szflg == '' ">
            </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <c-col :span="12">
          <el-form-item label="国外银行扣费（涉外收入申报专用）" label-width="60%">
              <c-select v-model="model.bopmod.outchargeccy" style="width:95%" placeholder="请选择国外银行扣费（涉外收入申报专用）" :disabled="true">
                <el-option
                  v-for="item in outchargeccy"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </c-select>
          </el-form-item>
        </c-col>
        
        <c-col :span="12">
          <c-input-currency v-model="model.bopmod.outchargeamt"  
            style="text-align: right;" 
            placeholder="请输入国外银行扣费（涉外收入申报专用）" 
            :disabled="!model.bopmod.basflg || model.bopmod.szflg === '2' || model.bopmod.szflg === '3' "
             @keyup.enter.native="defaultFunction('bopmod.outchargeamt', model.bopmod.outchargeamt)"
            ></c-input-currency>
        </c-col>
      </c-col>
    </c-col>
   
    <c-col :span="24" style="height: 24px;margin-top: 20px;">
      <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="12" style="margin-top: 20px;">
      <c-col :span="24">
        <el-form-item label="是否报送跨境人民币2101表" label-width="30%" prop="cnybop.cnyflg">
          <c-select
            v-model="model.cnybop.cnyflg"
            style="width: 100%"
            placeholder="请选择是否报送跨境人民币2101表"
          >
            <el-option
              v-for="item in codes.cnyflg"
              :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="是否报送跨境人民币2107表" label-width="30%">
          <c-select
            v-model="model.cnybop.traflg"
            style="width: 100%"
            placeholder="请选择是否报送跨境人民币2107表"
            disabled
          >
            <el-option
              v-for="item in codes.traflg"
              :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="是否报送跨境人民币2111表" label-width="30%">
          <c-select
            v-model="model.cnybop.outflg"
            style="width: 100%"
            placeholder="请选择是否报送跨境人民币2111表"
            disabled
          >
            <el-option
              v-for="item in codes.outflg"
              :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="是否报送跨境人民币2106表" label-width="30%">
          <c-select
            v-model="model.cnybop.libflg"
            style="width: 100%"
            placeholder="请选择是否报送跨境人民币2106表"
            disabled
          >
            <el-option
              v-for="item in codes.libflg"
              :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="是否报送跨境人民币2122表" label-width="30%">
          <c-select
            v-model="model.cnybop.vouflg"
            style="width: 100%"
            placeholder="请选择是否报送跨境人民币2122表"
            disabled
          >
            <el-option
              v-for="item in codes.vouflg"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </c-select>
        </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 "~/model/Cptadv/Event"

export default {
  inject: ['root'],
  mixins: [commonProcess],
    props:["model","codes"],
    data(){
        return {
          isShowBasflg: false,
          isShowDclflg: false,
          isShowVrfflg: false,
          basflgShow: true,
          dclflgShow: false,
          vrfflgShow: false,
          basflgEnable:true,
          szflg:[
            { value: "1", label: "跨境收支" },
            { value: "2", label: "境内收支" },
            { value: "3", label: "不申报" },
          ],
          acttyp:[
            { value: "(JW)", label: "境外" },
            { value: "(JN)", label: "境内非居民" },
          ],
          outchargeccy:[
            { value: "CNY", label: "人民币" },
            { value: "KRW", label: "韩元" },
            { value: "NZD", label: "新西兰元" },
            { value: "USD", label: "美元" },
          ],
        }
    },
    methods:{...Event,
      handelSelChange(){
        this.basflgEnable = false;
        //控制checkbox的逻辑
        if(this.model.bopmod.szflg == '3'){
          this.model.bopmod.basflg = false;
          this.basflgEnable = true;
          this.model.bopmod.acttyp ="";
          this.model.bopmod.ownextkey ="";

        }else if(this.model.bopmod.szflg == '2'){
            this.model.bopmod.acttyp ="";
            this.model.bopmod.outchargeamt="0.00";
        }
      },
    },
    watch:{
        "model.bopmod.basflg":{
            immediate:true,
            handler(val ,oldVal){
                if(this.model.bopmod.basflg == ''){
                    this.model.bopmod.outchargeamt="0.00";
                }

            }
          }
    },
    created:function(){

    }
}
</script>
<style>

</style>