<template>
    <!-- 弹出框表单 -->
    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-row>
                                            <Field label="材料名" prop="materialName" v-model="form.materialName"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"  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>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" v-if="pageInfo.type !== 'view'" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import form from "@/assets/mixins/formdialog";
    import dialogShow from "./dialogshow";
    export default {
        mixins: [form],
        components: {
            dialogShow ,
        },
        data() {
            return {
                urls: {
        currUrl: "/matter/datum/add",
        addUrl: "/matter/datum/add",
         editUrl: "/matter/datum/edit",
        saveUrl: "/matter/datum/save",
      },
                // 子表选中数据
                checkedMatterDatumFile: [],
                // 材料附件表格数据
                matterDatumFileList: [],
                // 遮罩层
                loading: true,
                // 弹出层标题
                title: "事项申请材料",
                // 是否显示弹出层
                open: false,
                toString:[
                    "paperNum",
                    "source",
                ],
                // 表单校验
                rules: {
                    materialName: [
                        {required: true,message: "请输入材料名", trigger: "blur" },
                        {max: 1024,message: "最多只能录入1024个字符",trigger: "blur",},
                    ],
                }
            };
        },

        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
            },
            /** 编辑 */
            edit(row) {
                this.reset()
                this.query = { id: row.id };
                this.urls.currUrl =this.urls.editUrl;;
                this.getData();
                this.pageInfo.type="edit"
                this.title = "修改事项申请材料";
            },
            /** 新增 */
            add(row) {
                this.reset()
                this.query = { id: row.id };
                this.urls.currUrl = this.urls.addUrl;
                this.getData();
                this.pageInfo.type="add"
                this.title = "新增事项申请材料";
            },
            /** 查看*/
            view(row) {
                this.reset()
                this.query = { id: row.id };
                this.urls.currUrl =this.urls.viewUrl;;
                this.getData();
                this.pageInfo.type="view"
                this.title = "事项申请材料详细";
            },
            /**取消按钮 */
            cancel() {
                this.open = false;
            },
            /**获取数据后弹框 */
            afterRender(data) {
                this.open = true;
            },

            afterSubmit(data) {
                this.open = false;
                this.$emit("ok");
            },

            // 表单重置
            reset() {
                this.form = {
                    matterId : null,
                    matterName : null,
                    materialName : "",
                    isMust : "非必要",
                    materialType : "无",
                    materialProperty : "纸质",
                    electronicgs : "无",
                    materialSource : "无",
                    paperNum : 1,
                    paperGg : null,
                    jianmMs : "无",
                    sealWay : null,
                    isjianm : "是",
                    isLack : "必要",
                    ybUrl : "",
                    materialSourceSm : "",
                    remarkSub : null,
                    clauseContent : null,
                    summary : null,
                    remark : null,
                    source : 1,
                };
                this.resetForm("form");
            },
            resetForm(refName) {
                if (this.$refs[refName]) {
                    this.$refs[refName].resetFields();
                }
            },
        },
    };
</script>
