<template>
    <layout-form>
        <el-form :model="form" :loading="loading" :rules="rules" size='small' style="width:100%" label-width='120px' ref="form">
            <el-row>
                                    <Field label="模板名称" prop="name" v-model="form.name" placeholder="请输入模板名称"/>
                        <Field label="doc主键ID" prop="docId" v-model="form.docId" placeholder="请输入doc主键ID"/>
                        <Field label="模板地址" prop="templatePath" v-model="form.templatePath" placeholder="请输入模板地址"/>
                        <Field label="备注" prop="remark" v-model="form.remark" placeholder="请输入备注"/>
            </el-row>
            <el-divider content-position="center">doc单信息</el-divider>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddDocForm">添加</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteDocForm">删除</el-button>
                </el-col>
            </el-row>

            <el-table :data="docFormList" :row-class-name="rowDocFormIndex" @selection-change="handleDocFormSelectionChange" ref="docForm">
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column label="序号" align="center" prop="index" width="50"/>
                <el-table-column label="表单名称" prop="formName">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.formName" placeholder="请输入表单名称" />
                    </template>
                </el-table-column>
                <el-table-column label="表单内容" prop="formContent">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.formContent" placeholder="请输入表单内容" />
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.remark" placeholder="请输入备注" />
                    </template>
                </el-table-column>
                <el-table-column label="变更时间" prop="updateTime">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.updateTime" placeholder="请输入变更时间" />
                    </template>
                </el-table-column>
                <el-table-column label="变更用户,登录名" prop="updateUser">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.updateUser" placeholder="请输入变更用户,登录名" />
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.createTime" placeholder="请输入创建时间" />
                    </template>
                </el-table-column>
                <el-table-column label="创建用户,登录名" prop="createUser">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.createUser" placeholder="请输入创建用户,登录名" />
                    </template>
                </el-table-column>
            </el-table>
            <form-buttons @submit='submitForm'/>
        </el-form>
    </layout-form>
</template>

<script>
    import form from "@/assets/mixins/form";
    export default {
        mixins: [form],
        components: {
        },
        toString:[
        ],
        methods: {
        /** doc单序号 */
        rowDocFormIndex({ row, rowIndex }) {
            row.index = rowIndex + 1;
        },
        /** doc单添加按钮操作 */
        handleAddDocForm() {
            let obj = {};
            obj.formName = "";
            obj.formContent = "";
            obj.remark = "";
            obj.updateTime = "";
            obj.updateUser = "";
            obj.createTime = "";
            obj.createUser = "";
            this.docFormList.push(obj);
        },
        /** doc单删除按钮操作 */
        handleDeleteDocForm() {
            if (this.checkedDocForm.length == 0) {
                this.$alert("请先选择要删除的doc单数据", "提示", { confirmButtonText: "确定", });
            } else {
                this.docFormList.splice(this.checkedDocForm[0].index - 1, 1);
            }
        },
        /** 单选框选中数据 */
        handleDocFormSelectionChange(selection) {
            if (selection.length > 1) {
                this.$refs.docForm.clearSelection();
                this.$refs.docForm.toggleRowSelection(selection.pop());
            } else {
                this.checkedDocForm = selection;
            }
        },
        // 渲染前置处理
        beforeRender(data) {
            if(data.entity.docFormList) {
                this.docFormList = data.entity.docFormList;
            }
            return data
        },

        },
        data() {
            return {
                // 子表选中数据
                checkedDocForm: [],
                // doc单表格数据
                docFormList: [],
                rules: {
                    name: [
                        { trigger: "blur" },
                    ],
                    templatePath: [
                        { trigger: "blur" },
                    ],
                    remark: [
                        {required: true, trigger: "blur" },
                    ],
                }
            };
        }
    };
</script>