<template>
    <div class="eibs-tab">
        <!-- 第1行 -->
    <c-row>
            <c-col :span="8">
                <el-form-item label="业务主键" prop="recgrp.ads.levyno">
                    <c-fullbox>
                        <c-input disabled placeholder="请输入业务主键" v-model="model.recgrp.ads.levyno"></c-input>
                    </c-fullbox>
                </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="8">
                <el-form-item label="银行机构代码" prop="recgrp.ads.bankorgcode">
                    <c-input disabled placeholder="请输入银行机构代码" v-model="model.recgrp.ads.bankorgcode"/>
                </el-form-item>
            </c-col>
        </c-row>

        <c-row>
            <c-col :span="8">
                <el-form-item label="收款人账号" prop="recgrp.ads.payeeacct">
                    <c-input :disabled="isDisabled" placeholder="请输入收款人账号" maxlength="32" v-model="model.recgrp.ads.payeeacct"/>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="付款人常驻国家（地区）代码" prop="recgrp.ads.payercountrycode">
                    <c-select-cty :disabled="isDisabled" placeholder="请输入付款人常驻国家（地区）代码" v-model="model.recgrp.ads.payercountrycode"></c-select-cty>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="付款人账户类型" prop="recgrp.ads.payeraccttype">
                    <c-select :disabled="isDisabled" dbCode="payeea" placeholder="请输入付款人账户类型"
                              v-model="model.recgrp.ads.payeraccttype"></c-select>
                </el-form-item>
            </c-col>
        </c-row>

        <!-- 第4行 -->
        <c-row>
            
            <c-col :span="8">
                <el-form-item label="付款人账号" prop="recgrp.ads.payeracct">
                    <c-input :disabled="isDisabled" placeholder="请输入付款人账号" maxlength="32" v-model="model.recgrp.ads.payeracct"></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="是否退款" prop="recgrp.ads.ifrefund">
                    <c-select :disabled="disablesta" dbCode="cxmflg" placeholder="请输入是否退款" v-model="model.recgrp.ads.ifrefund"></c-select>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="原支出申报号码" prop="recgrp.ads.oripaylevyno">
                    <c-input :disabled="disablesta" placeholder="请输入原支出申报号码" v-model="model.recgrp.ads.oripaylevyno"></c-input>
                </el-form-item>
            </c-col>
        </c-row>

        <!-- 第8行 -->
        <c-row>
            <c-col :span="8">
                <el-form-item label="银行业务编号" prop="recgrp.ads.banktrano">
                    <c-input disabled placeholder="请输入银行业务编号" maxlength="16" v-model="model.recgrp.ads.banktrano"/>
                </el-form-item>
            </c-col>
        </c-row>
        <c-row>
			<c-col>
				<el-form-item label="变更/撤销原因" prop="recgrp.ads.actiondesc">
					<c-input maxlength="128" :disabled="disabledActiondesc" placeholder="请输入变更/撤销原因" show-word-limit type="textarea"
							 v-model="model.recgrp.ads.actiondesc"></c-input>
				</el-form-item>
			</c-col>
		</c-row>
    </div>
</template>

<script>
    export default {
        props: ["model", "codes"],
        inject: ["root"],
        computed: {
            isDisabled() {
                return this.model.rmbbut.flg !== 'X';
            },
            disabledOpertype() {
                return this.isDisabled || this.opertypeOptions.length === 3;
            },
            disabledFlg() {
                if(this.model.rmbbut.flg === 'X'){
                    return this.model.recgrp.ads.ifrefund !== "Y";
                }
            },
            disabledActiondesc() {
                return this.model.rmbbut.flg !== 'X' || this.model.recgrp.ads.opertype === '1';
            },
            disablesta() {
                if(this.model.pblmod.wrkpbl.sta === "8"){
                    return true;
                }
                if(this.model.pblmod.wrkpbl.sta === "0"){
                    return false;
                }
            },
        },
        watch: {
            'model.rmbbut.flg': {
                handler(newValue) {
                    if (newValue === "X") {
                        switch (this.model.recgrp.ads.opertype) {
                            case "1":
                            case "2":
                                if (this.model.pblmod.wrkpbl.sta === "8") {
                                    this.opertypeOptions = [{label: "变更", value: "2"}];
                                    this.model.recgrp.ads.opertype = "2";
                                }
                                break;
                            case "3":
                                this.model.recgrp.ads.opertype = "2";
                        }
                    } else {
                        this.opertypeOptions = [
                            {label: "新增", value: "1"},
                            {label: "变更", value: "2"},
                            {label: "撤销", value: "3"}
                        ];
                    }
                },
            },
            
        },
        data() {
            return {
                opertypeOptions: [
                    {label: "新增", value: "1"},
                    {label: "变更", value: "2"},
                    {label: "撤销", value: "3"}
                ],
            };
        },
        methods: {}
    };
</script>
<style>
    .el-form-item__label {
        padding: 0 0 0 20px;
        line-height: 20px !important;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
</style>