<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:role:add']"
        >新增</el-button>
      </el-col>

      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="success"-->
      <!--          icon="el-icon-edit"-->
      <!--          size="mini"-->
      <!--          :disabled="single"-->
      <!--          @click="handleUpdate"-->
      <!--          v-hasPermi="['system:role:edit']"-->
      <!--        >修改</el-button>-->
      <!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:role:remove']"
        >删除</el-button>
      </el-col>
      <!--<el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:post:export']"
        >导出</el-button>
      </el-col>-->
    </el-row>

    <el-table v-loading="loading" :data="formList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column v-for="item in formFiled" :label="item.inputTitle" :prop="item.inputName" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:role:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:role:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    <pagination-->
    <!--      v-show="total>0"-->
    <!--      :total="total"-->
    <!--      :page.sync="queryParams.pageNum"-->
    <!--      :limit.sync="queryParams.pageSize"-->
    <!--      @pagination="getList"-->
    <!--    />-->

    <el-dialog title=""  :visible.sync="open" width="800px" append-to-body>
      <el-form  :model="tableMap"
                :size="formConf.size"
                :label-position="formConf.labelPosition"
                :disabled="formConf.disabled"
                :label-width="formConf.labelWidth + 'px'">
        <form-list v-for="(element,index) in drawingList"
                   :key="element.renderKey"
                   :drawing-list="drawingList"
                   :element="element"
                   :index="index"
                   :active-id="activeId"
                   :form-conf="formConf"/>
      </el-form>
      <div  class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title=""  :visible.sync="open1" width="800px" append-to-body>
      <el-form  :model="tableMap"
                :size="formConf.size"
                :label-position="formConf.labelPosition"
                :disabled="formConf.disabled"
                :label-width="formConf.labelWidth + 'px'">
        <form-list v-for="(element,index) in drawingList"
                   :key="element.renderKey"
                   :drawing-list="drawingList"
                   :element="element"
                   :index="index"
                   :active-id="activeId"
                   :form-conf="formConf"/>
      </el-form>
      <div  class="dialog-footer">
        <el-button type="primary" @click="update11">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
    import {getFromList,getForm,updateForm,delForm,addFrom11} from "@/api/system/autoform";

    import  {getForm1} from "@/api/system/form";
    import FormList from "../config/FormList";

    import {
        formConf
    } from '@/utils/generator/config'

    export default {
        name: 'Form',
        components:{
            FormList

        },
        data() {
            return {
                formConf,
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],

                // 非单个禁用
                single: true,
                seeForm: false,
                // 非多个禁用
                multiple: true,
                // 总条数
                total: 0,

                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                open1: false,
                // 角色表格数据
                formList: [],
                formFiled: [],
                tableMap:{},
                drawingList:{},
                formToList:{},
                // 是否显示弹出层（数据权限）
                openDataScope: false,
                // 日期范围
                dateRange: [],
                // 状态数据字典
                statusOptions: [],
                // 数据范围选项
                // dataScopeOptions: [
                //     {
                //         value: "1",
                //         label: "全部数据权限"
                //     },
                //     {
                //         value: "2",
                //         label: "自定数据权限"
                //     },
                //     {
                //         value: "3",
                //         label: "本部门数据权限"
                //     },
                //     {
                //         value: "4",
                //         label: "本部门及以下数据权限"
                //     },
                //     {
                //         value: "5",
                //         label: "仅本人数据权限"
                //     }
                // ],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    status: undefined
                },
                // 表单参数
                form: {},
                activeId:6,
                defaultProps: {
                    children: "children",
                    label: "label"
                },
                // 表单校验
                rules: {
                    roleName: [
                        { required: true, message: "角色名称不能为空", trigger: "blur" }
                    ],
                    roleKey: [
                        { required: true, message: "权限字符不能为空", trigger: "blur" }
                    ],
                    roleSort: [
                        { required: true, message: "角色顺序不能为空", trigger: "blur" }
                    ]
                },
                tableName: this.$route.query.tableName,
                tableTitle: this.$route.query.tableTitle,

            };
        },

        created() {
            this.getList();
            this.getDicts("sys_normal_disable").then(response => {
                this.statusOptions = response.data;
            });

        },
        methods: {

            getList() {
                this.loading = true;
                var formdata=new FormData();
                formdata.append("tableName",this.tableName)
                formdata.append("pageNum",this.queryParams.pageNum)
                formdata.append("pageSize",this.queryParams.pageSize)
                getFromList(formdata).then(response => {
                    this.formFiled=JSON.parse(response.msg);
                    this.formList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },

            // 取消按钮
            cancel() {
                this.open = false;
                this.open1 = false;
                this.reset();
            },
            // 取消按钮（数据权限）
            cancelDataScope() {
                this.openDataScope = false;
                this.reset();
            },
            // 表单重置
            reset() {
                if (this.$refs.menu != undefined) {
                    this.$refs.menu.setCheckedKeys([]);
                }
                this.form = {
                };
                this.resetForm("form");
            },



            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateRange = [];
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length!=1
                this.multiple = !selection.length
            },
            /** 查看按钮操作 */
            selectForms() {

                getForm(this.tableName,4).then(response => {
                    this.formData = response.data;
                    this.seeForm = true;
                    this.title = "修改"+this.tableTitle;
                });
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                console.log(this.tableName)
                getForm1(this.tableName).then(response => {
                    this.drawingList=JSON.parse(response.data.vueJsonField);
                    this.form = response.data;
                    console.log( this.drawingList)
                    this.open = true;
                    this.title = "添加数据";
                });


            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const id = row.id || this.ids
                getForm(this.tableName,id).then(response => {

                    this.drawingList=response.data.vueJson;
                    console.log( this.drawingList)
                    this.form = response.data;
                    this.open1 = true;
                    this.title = "修改数据";
                });
            },
            /** 分配数据权限操作 */
            handleDataScope(row) {
                this.reset();
                this.$nextTick(() => {
                    this.getRoleDeptTreeselect(row.id);
                });
                getRole(row.id).then(response => {
                    this.form = response.data;
                    this.openDataScope = true;
                    this.title = "分配数据权限";
                });
            },

            /** 提交按钮（数据权限） */
            submitDataScope: function() {
                if (this.form.id != undefined) {
                    this.form.deptIds = this.getDeptAllCheckedKeys();
                    dataScope(this.form).then(response => {
                        if (response.code === 200) {
                            this.msgSuccess("修改成功");
                            this.openDataScope = false;
                            this.getList();
                        }
                    });
                }
            },
            submitForm(){
                console.log(JSON.stringify(this.drawingList))
                addFrom11(this.tableName, JSON.stringify(this.drawingList)).then(response => {
                    this.msgSuccess("添加成功");
                    this.open = false;
                    this.getList();
                })
            },
            update11(){
                console.log(JSON.stringify(this.drawingList))
                updateForm(this.tableName,this.form.id, JSON.stringify(this.drawingList)).then(response => {
                    if (response.code === 200) {
                        this.msgSuccess("修改成功");
                        this.open1 = false;
                        this.getList();
                    }
                });
            },
            /** 提交按钮 */
            // submitForm: function() {
            //  this.$refs["tableMap"].validate(valid => {
            //         if (valid) {
            //             if (this.form.id != undefined) {
            //                 updateForm(this.tableName,this.form.id,this.form).then(response => {
            //                     if (response.code === 200) {
            //                         this.msgSuccess("修改成功");
            //                         this.open = false;
            //                         this.getList();
            //                     }
            //                 });
            //             } else {
            //                 addFrom11(this.tableName,JSON.stringify(this.drawingList)).then(response => {
            //                     if (response.code === 200) {
            //                         this.msgSuccess("新增成功");
            //                         this.open = false;
            //                         this.getList();
            //                     }
            //                 });
            //             }
            //         }
            //     });
            // },
            /** 删除按钮操作 */
            handleDelete(row) {
                var tabname=this.tableName
                const ids = row.id || this.ids;
                this.$confirm('是否确认删除'+this.tableTitle+'编号为"' + ids + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    return delForm(tabname , ids);
                }).then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                }) ;
            },
            /** 导出按钮操作 */
            handleExport() {
                const queryParams = this.queryParams;
                this.$confirm('是否确认导出所有'+this.tableTitle+'数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    return exportRole(queryParams);
                }).then(response => {
                    this.download(response.msg);
                }).catch(function() {});
            }
        },
        components:{
            FormList

        }

    };
</script>
