<template>
    <div class="eibs-tab">


        <c-row>
            <c-col :span="8">
                <el-form-item label="业务主键" prop="recgrp.ads.levyno">
                    <c-input disabled placeholder="请输入业务主键" v-model="model.recgrp.ads.levyno"></c-input>
                </el-form-item>
            </c-col>

            <c-col :span="8">
                <el-form-item label="银行业务编号" prop="recgrp.ads.banktrano">
                    <c-input disabled maxlength="16" placeholder="请输入银行业务编号"
                             v-model="model.recgrp.ads.banktrano"></c-input>
                </el-form-item>
            </c-col>

            <c-col :span="8">
                <el-form-item label="银行机构代码" prop="recgrp.ads.bankorgcode">
                    <c-input disabled maxlength="22" placeholder="请输入银行机构代码"
                             v-model="model.recgrp.ads.bankorgcode"></c-input>
                </el-form-item>
            </c-col>

        </c-row>

        <!-- 第二行 -->
        <c-row>
            <c-col :span="8">
                <el-form-item label="申报日期" prop="recgrp.ads.filingdate">
                    <c-date-picker disabled style="width:100%" type="date"
                                   v-model="model.recgrp.ads.filingdate"></c-date-picker>
                </el-form-item>
            </c-col>


            <c-col :span="8">
                <el-form-item label="操作类型" prop="recgrp.ads.opertype">
                    <c-select :disabled="disabledOpertype" v-model="model.recgrp.ads.opertype">
                        <el-option :key="item.value" :label="item.label" :value="item.value"
                                   v-for="item in opertypeOptions"></el-option>
                    </c-select>
                </el-form-item>
            </c-col>

            <!-- <c-col :span="6">
              <el-form-item label="" prop="recp.adspp.acp" style="text-align: left;position: float"
            class="" label-width="10px">
              <c-checkbox v-model="model.recp.adspp.acp"  false-label="" true-label="X">确认</c-checkbox>
            </el-form-item>
            </c-col> -->

            <c-col :span="8">
                <el-form-item label="变更/撤销原因" prop="recgrp.ads.actiondesc">
                    <c-input :disabled="disabledActiondesc" maxlength="128" placeholder="请输入变更/撤销原因"
                             rows=5 show-word-limit type="textarea" v-model="model.recgrp.ads.actiondesc"></c-input>
                </el-form-item>
            </c-col>
        </c-row>

        <!-- 第三行 -->
        <c-row>
            <c-col :span="8">
                <el-form-item label="境内机构类型" prop="recgrp.ads.domesticorgtype">
                    <c-select dbCode="RMB124" disabled placeholder="请选择境内机构类型" style="width:100%"
                              v-model="model.recgrp.ads.domesticorgtype">
                    </c-select>
                </el-form-item>
            </c-col>

            <c-col :span="8">
                <el-form-item label="境内机构代码" prop="recgrp.ads.bankorgcode">
                    <c-input disabled maxlength="12" placeholder="请输入境内机构代码"
                             v-model="model.recgrp.ads.bankorgcode"></c-input>
                </el-form-item>
            </c-col>

            <c-col :span="8">
                <el-form-item label="境内机构名称" prop="recgrp.ads.bankorgname">
                    <c-input disabled maxlength="63" placeholder="请输入境内机构名称" show-word-limit
                             type="textarea" v-model="model.recgrp.ads.bankorgname"></c-input>
                </el-form-item>
            </c-col>
        </c-row>

        <!-- 第四行 -->
        <c-row>
            <c-col :span="8">
                <el-form-item label="人民币账户账号" prop="recgrp.ads.bicbkacct">
                    <c-input disabled maxlength="32" placeholder="请输入人民币账户账号"
                             v-model="model.recgrp.ads.bicbkacct"></c-input>
                </el-form-item>
            </c-col>

            <c-col :span="8">
                <el-form-item label="购售用途" prop="recgrp.ads.purposecode">
                    <c-select dbCode="PRSCOD" disabled placeholder="请输入购售用途" style="width:100%"
                              v-model="model.recgrp.ads.purposecode">
                    </c-select>
                </el-form-item>
            </c-col>

            <c-col :span="8">
                <el-form-item label="交易类型" prop="recgrp.ads.tradetype">
                    <c-select dbCode="JYITYP" disabled placeholder="请选择交易类型" style="width:100%"
                              v-model="model.recgrp.ads.tradetype">
                    </c-select>
                </el-form-item>
            </c-col>

        </c-row>
        <!-- <c-col :span="24">
          <el-form-item label="" prop="recp.lsttfc.flg" style="text-align: left;position: float"
          class="checkbox-left" label-width="10px">
            <c-checkbox v-if ="['AME','DEL','INF'].includes(operaTyp)"  false-label="" true-label="X" v-model="model.recp.lsttfc.flg">即期信息</c-checkbox>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="" prop="recp.lsttfe.flg" style="text-align: left;position: float"
          class="checkbox-left" label-width="10px">
            <c-checkbox v-if ="['AME','DEL','INF'].includes(operaTyp)"  false-label="" true-label="X" v-model="model.recp.lsttfe.flg">外汇掉期信息</c-checkbox>
          </el-form-item>
        </c-col> -->
        <!-- 第五行 -->
        <c-row>
            <c-col :span="8">
                <el-form-item label="境外主体类型" prop="recgrp.ads.foreignorgtype">
                    <c-select dbCode="RMB123" disabled placeholder="请选择境外主体类型" style="width:100%"
                              v-model="model.recgrp.ads.foreignorgtype">
                    </c-select>
                </el-form-item>
            </c-col>

            <c-col :span="8">
                <el-form-item label="境外主体代码" prop="recgrp.ads.cpartyorgcode">
                    <c-input disabled maxlength="11" placeholder="请输入境外主体代码"
                             v-model="model.recgrp.ads.cpartyorgcode"></c-input>
                </el-form-item>
            </c-col>

            <c-col :span="8">
                <el-form-item label="境外主体名称" prop="recgrp.ads.cpartyorgname">
                    <c-input disabled maxlength="63" placeholder="请输入境外主体名称" show-word-limit
                             type="textarea" v-model="model.recgrp.ads.cpartyorgname"></c-input>
                </el-form-item>
            </c-col>
        </c-row>

        <!-- 第六行 -->
        <c-row>
            <c-col :span="8">
                <el-form-item label="人民币跨境购售类型" prop="recgrp.ads.cnybuytype">
                    <c-select dbCode="CBYTYP" disabled placeholder="请输入人民币跨境购售类型" style="width:100%"
                              v-model="model.recgrp.ads.cnybuytype">
                    </c-select>
                </el-form-item>
            </c-col>

            <c-col :span="8">
                <el-form-item label="业务种类" prop="recgrp.ads.transkind">
                    <c-select dbCode="RMB120" disabled placeholder="请输入业务种类" style="width:100%"
                              v-model="model.recgrp.ads.transkind">
                    </c-select>
                </el-form-item>
            </c-col>

            <c-col :span="8">
                <el-form-item label="交易附言" prop="recgrp.ads.addword">
                    <c-input disabled maxlength="63" placeholder="请输入交易附言" show-word-limit type="textarea"
                             v-model="model.recgrp.ads.addword"></c-input>
                </el-form-item>
            </c-col>
        </c-row>
        <!-- <c-col :span="24">
          <el-form-item label="" prop="recp.lsttfe.flg" style="text-align: left;position: float"
          class="checkbox-left" label-width="10px">
            <c-checkbox v-if ="['AME','DEL','INF'].includes(operaTyp)"  false-label="" true-label="X" v-model="model.recp.lsttfe.flg">货币掉期信息</c-checkbox>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="" prop="recp.lsttff.flg" style="text-align: left;position: float"
          class="checkbox-left" label-width="10px">
            <c-checkbox v-if ="['AME','DEL','INF'].includes(operaTyp)"  false-label="" true-label="X" v-model="model.recp.lsttff.flg">期权信息</c-checkbox>
          </el-form-item>
        </c-col>
        <c-col :span="24">
            <el-form-item label="" prop="recp.lsttfd.flg" style="text-align: left;position: float"
            class="checkbox-left" label-width="10px">
              <c-checkbox v-if ="['AME','DEL','INF'].includes(operaTyp)"  false-label="" true-label="X"  v-model="model.recp.lsttfd.flg">远期信息</c-checkbox>
            </el-form-item>
        </c-col> -->
    </div>
</template>

<script>

    export default {
        inject: ['root'],
        props: ["model", "codes"],
        computed: {
            disabledOpertype() {
                return this.model.rmbbut.flg !== 'X' || this.opertypeOptions.length === 3;
            },
            disabledActiondesc() {
                return this.model.rmbbut.flg !== 'X' || this.model.recgrp.ads.opertype === '1';
            },
        },
        data() {
            return {
                opertypeOptions: [
                    {label: "新增", value: "1"},
                    {label: "变更", value: "2"},
                    {label: "撤销", value: "3"}
                ],
            };
        },
        watch: {
            'model.rmbbut.flg': {
                handler(newValue) {
                    if (newValue === "X") {
                        if (this.model.recgrp.ads.opertype === "2" || this.model.pblmod.wrkpbl.sta === "8") {
                            this.opertypeOptions = [
                                {label: "变更", value: "2"},
                                {label: "撤销", value: "3"}
                            ];
                            this.model.recgrp.ads.opertype = "";
                        }
                    } else {
                        this.opertypeOptions = [
                            {label: "新增", value: "1"},
                            {label: "变更", value: "2"},
                            {label: "撤销", value: "3"}
                        ];
                    }
                },
            },
        },
        methods: {}
    }
</script>

<style>

</style>