<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="materialName" v-model="form.materialName" type="textarea" placeholder="请输入材料名"/>
                        <Field label="必交性" prop="isMust" v-model="form.isMust" type="select" :enumData="dict.isMust" placeholder="请选择必交性"/>
                        <Field label="材料类型" prop="materialType" v-model="form.materialType" type="select" :enumData="dict.materialType" placeholder="请选择材料类型"/>
                        <Field label="材料形式" prop="materialProperty" v-model="form.materialProperty" type="select" :enumData="dict.materialProperty" placeholder="请选择材料形式"/>
                        <Field label="电子材料格式" prop="electronicgs" v-model="form.electronicgs" type="select" :enumData="dict.electronicgs" placeholder="请选择电子材料格式"/>
                        <Field label="材料来源渠道" prop="materialSource" v-model="form.materialSource" type="select" :enumData="dict.materialSource" placeholder="请选择材料来源渠道"/>
                        <Field label="纸质材料份数" prop="paperNum" v-model="form.paperNum" type="select" :enumData="dict.paperNum" placeholder="请选择纸质材料份数"/>
                        <Field label="纸质材料规格" prop="paperGg" v-model="form.paperGg" placeholder="请输入纸质材料规格"/>
                        <Field label="减免模式" prop="jianmMs" v-model="form.jianmMs" type="select" :enumData="dict.jianmMs" placeholder="请选择减免模式"/>
                        <Field label="盖章方式" prop="sealWay" v-model="form.sealWay" placeholder="请输入盖章方式"/>
                        <Field label="是否减免" prop="isjianm" v-model="form.isjianm" type="radio" :enumData="dict.isjianm" />
                        <Field label="材料是否容缺" prop="isLack" v-model="form.isLack" type="select" :enumData="dict.isLack" placeholder="请选择材料是否容缺"/>
                        <Field label="材料地址" prop="ybUrl" v-model="form.ybUrl" type="textarea" placeholder="请输入材料地址"/>
                        <Field label="来源渠道说明" prop="materialSourceSm" v-model="form.materialSourceSm" type="textarea" placeholder="请输入来源渠道说明"/>
                        <Field label="填报须知" prop="remarkSub" v-model="form.remarkSub" type="textarea" placeholder="请输入填报须知"/>
                        <Field label="要求提供材料的依据" prop="clauseContent" v-model="form.clauseContent" type="textarea" placeholder="请输入要求提供材料的依据"/>
                        <Field label="受理标准" prop="summary" v-model="form.summary" type="textarea" placeholder="请输入受理标准"/>
                        <Field label="备注" prop="remark" v-model="form.remark" type="textarea" placeholder="请输入备注"/>
                        <Field label="事项来源" prop="source" v-model="form.source" type="select" :enumData="dict.source" placeholder="请选择事项来源"/>
            </el-row>
            <el-divider content-position="center">材料附件信息</el-divider>
            <br/>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddMatterDatumFile">添加</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteMatterDatumFile">删除</el-button>
                </el-col>
            </el-row>

            <el-table :data="matterDatumFileList" :row-class-name="rowMatterDatumFileIndex" @selection-change="handleMatterDatumFileSelectionChange" ref="matterDatumFile">
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column label="序号" align="center" prop="index" width="50"/>
                <el-table-column label="事项来源" prop="fileName">
                    <template slot-scope="scope">

                        <el-input v-model="scope.row.fileName" placeholder="请输入事项来源" />
                    </template>
                </el-table-column>
                <el-table-column label="事项来源" prop="fileUrl">
                    <template slot-scope="scope">

                        <el-input v-model="scope.row.fileUrl" placeholder="请输入事项来源" />
                    </template>
                </el-table-column>
                <el-table-column label="事项来源" prop="filetype">
                    <template slot-scope="scope">

                        <el-input v-model="scope.row.filetype" placeholder="请输入事项来源" />
                    </template>
                </el-table-column>
                <el-table-column label="事项来源" prop="source">
                    <template slot-scope="scope">

                        <el-input v-model="scope.row.source" placeholder="请输入事项来源" />
                    </template>
                </el-table-column>
                <el-table-column label="事项来源" prop="materialName">
                    <template slot-scope="scope">

                        <el-input v-model="scope.row.materialName" placeholder="请输入事项来源" />
                    </template>
                </el-table-column>
            </el-table>

            <form-buttons @submit='submitForm' :noSaveBtn="pageInfo.type === 'view'"/>
        </el-form>
    </layout-form>
</template>

<script>
    import form from "@/assets/mixins/form";
    export default {
        mixins: [form],
        components: {
        },
        methods: {

        /** 材料附件序号 */
        rowMatterDatumFileIndex({ row, rowIndex }) {
            row.index = rowIndex + 1;
        },
        /** 材料附件添加按钮操作 */
        handleAddMatterDatumFile() {
            let obj = {};
            obj.fileName = "";
            obj.fileUrl = "";
            obj.filetype = "";
            obj.source = "";
            obj.createTime = "";
            obj.createUserId = "";
            obj.updateTime = "";
            obj.materialName = "";
            this.matterDatumFileList.push(obj);
        },
        /** 材料附件删除按钮操作 */
        handleDeleteMatterDatumFile() {
            if (this.checkedMatterDatumFile.length == 0) {
                this.$alert("请先选择要删除的材料附件数据", "提示", { confirmButtonText: "确定", });
            } else {
                this.matterDatumFileList.splice(this.checkedMatterDatumFile[0].index - 1, 1);
            }
        },
        /** 单选框选中数据 */
        handleMatterDatumFileSelectionChange(selection) {
            if (selection.length > 1) {
                this.$refs.matterDatumFile.clearSelection();
                this.$refs.matterDatumFile.toggleRowSelection(selection.pop());
            } else {
                this.checkedMatterDatumFile = selection;
            }
        },
        // 渲染前置处理
        beforeRender(data) {
            if(data.entity.matterDatumFileList) {
                this.matterDatumFileList = data.entity.matterDatumFileList;
            }
            return data
        },

        },
        data() {
            return {
                toString:[
                    "paperNum",
                    "source",
                ],
                // 子表选中数据
                checkedMatterDatumFile: [],
                // 材料附件表格数据
                matterDatumFileList: [],
                rules: {
                    materialName: [
                        {required: true,message: "请输入材料名", trigger: "blur" },
                        {max: 1024,message: "最多只能录入1024个字符",trigger: "blur",},
                    ],
                }
            };
        }
    };
</script>