        <!-- 前后端字段path及前后端字段docgrdm.docgrd   后端docgrd为List<Docgrd>类型 -->
<template>
    <div>
        <c-col :span="24" style="height: 24px; margin-top: -10px">
            <el-form-item :label="model[argadr.grp].docgrdm.docdsclab" class="messageLabel">
                <div v-if="ifShowAdd">
                    <c-button style="float: right" @click="addTableValue" type="primary">新增单据</c-button>
                </div>
            </el-form-item>
        </c-col>
        <c-col :span="24" style="margin-bottom: 30px;">
            <el-form-item :prop="'${argadr.grp}.docgrdm.docgrd'" label="">
                <c-table height="200px" style="text-align: center" :list="this.model[argadr.grp].docgrdm.docgrd || []"
                    :paginationShow="false" :border="true">
                    <el-table-column label="1st" width="auto" prop="cmail1">
                        <template slot-scope="scope">
                            <c-input v-model="scope.row.cmail1" @change="docpre" :disabled="disabledCmail1"
                                maxlength="12">
                            </c-input>
                        </template>

                    </el-table-column>
                    <el-table-column label="2nd" width="auto" prop="cmail2">
                        <template slot-scope="scope">
                            <c-input v-model="scope.row.cmail2" @change="docpre" :disabled="disabledCmail2"
                                maxlength="12">
                            </c-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="Document" width="180px" prop="docnam" >
                        <template slot-scope="scope">
                            <!-- {{scope.row.docnam}} -->
                            <c-select style="width: 100%" placeholder="请选择" v-model="scope.row.docnam"
                                :disabled="disabledDocnam">
                                <el-option v-for="item in codes[argadr.code]" :key="item.value" :label="item.label" @change="docpre"
                                    :value="item.value">
                                </el-option>
                            </c-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="70px"  fixed="right">
                        <template slot-scope="scope" >
                            <div v-if="ifShowDelete" >
                                <c-button style="margin-left:-5px" @click="deleteTable(scope.$index)" type="primary">删除</c-button>
                            </div>
                        </template>
                    </el-table-column>
                </c-table>
            </el-form-item>
        </c-col>
    </div>
</template>
<script>
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Botdcr/Event"
import Utils from "~/utils";
export default {

    inject: ["root"],
    mixins: [commonProcess],


    data() {
        return {
            data: [],


            codes: { ...CodeTable },
            newValue: {
                id: 0,
                cmail1: "",
                cmail2: "",
                docnam: "",
                description: "",
                serialNum: "",
                tableName: "",
                tcddoc: "",
            },
        };
    },
    watch: {},

    props: {
        model: {
            type: Object,
            default: undefined,
        },
        argadr: {
            type: Object,
            default: function () {
                return {
                    grp: "", //所属模块  eg:bdtp,botp...
                    path: "",    // path为存储数据字段所对应的default方法
                    code: "",   //表格选项码表参数
                };
            },
        },
        disabledCmail1: {
            type: Boolean,
            default: false,
        },
        disabledCmail2: {
            type: Boolean,
            default: false,
        },
        disabledDocnam: {
            type: Boolean,
            default: false,
        },
        ifShowAdd: {
            type: Boolean,
            default: true,
        },
        ifShowDelete: {
            type: Boolean,
            default: true,
        },
    },



    methods: {
        ...Event,
        addTableValue(index) {
            var newTableValue = Object.assign({}, this.newValue);
            const serial = Utils.generateUUID();
            var grp = this.argadr.grp;
            newTableValue.serialNum = serial;
            // this.model[argadr.grp].docgrdm.docgrd.splice(index - 1, 0, newTableValue);
            this.model[grp].docgrdm.docgrd.splice(index - 1, 0, newTableValue);
        },
        deleteTable(index) {
            // 'this.model.${argadr.grp}.docgrdm.docgrd.splice(index, 1)';
            console.log("join function");
            var grp = this.argadr.grp;
            this.model[grp].docgrdm.docgrd.splice(index, 1);
        },
        async docpre() {
            let rtnmsg = await this.executeDefault(this.argadr.path)
            // let rtnmsg = await this.executeDefault('bodgrp.blk.docpre')
            if (rtnmsg.respCode == SUCCESS) {
                //TODO 处理数据逻辑
                this.updateModel(rtnmsg.data)
            }
            else {
                this.$notify.error({ title: '错误', message: '服务请求失败！' });
            }
        },
    },
    created: function () {
    }

};

</script>
<style>
.messageLabel>>>.el-form-item__label {
    text-align: left;
    font-weight: bold;
    font-size: 12px;
}
</style>