<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="表单名称" prop="action">
        <el-input
          v-model="queryParams.action"
          placeholder="表单名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="表描述" prop="formTitle">
        <el-input
          v-model="queryParams.formTitle"
          placeholder="表描述"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <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:form: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:form: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:form: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:form: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 label="表单名称" align="center" prop="action"/><!--onblur="check($event)"-->
      <el-table-column label="表描述" align="center" prop="formTitle"/>
      <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:form:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit-outline"
            @click="handleUpdate1(scope.row)"
            v-hasPermi="['system:form:edit']"
          >设计表单
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleUpdate2(scope.row)"
            v-hasPermi="['system:form:edit']"
          >表单详情
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-setting"
            @click="handleUpdate3(scope.row)"
            v-hasPermi="['system:form:edit']"
          >配置地址
          </el-button>
          <!-- <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate3(scope.row)"
             v-hasPermi="['system:form:edit']"
           >表单添加</el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate4(scope.row)"
             v-hasPermi="['system:form:edit']"
           >表单修改</el-button>-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:form: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="title" :visible.sync="open1" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <!--        <el-form-item label="action值" @blur.native.capture="checket($event)"  prop="action">-->
        <!--          <el-input v-model="form.action" placeholder="action的值" />-->
        <!--        </el-form-item>-->
        <!--        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">-->
        <!--          <el-form-item label="密码" prop="pass">-->
        <!--            <el-input type="password" v-model="ruleForm.action" autocomplete="off"></el-input>-->
        <!--          </el-form-item>-->
        <!--        </el-form>-->
        <el-form-item label="表单名称" prop="action" label-width="80px">
          <el-input v-model="form.action" autocomplete="off" placeholder="请输入表单名称"
                    v-bind:disabled="diasabledInput"></el-input>
        </el-form-item>

        <el-form-item label="表描述" prop="formTitle">
          <el-input v-model="form.formTitle" placeholder="请输入标题头信息"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!--配置地址-->
    <el-dialog :title="title" :visible.sync="open2" width="500px" append-to-body>
      <el-form ref="form"  :rules="rules" label-width="80px">
        <div style="width: 500px">
          <template>
            <el-form-item label="数据列表地址" label-width="100px">
              <el-input style="width: 250px" v-model="asd" disabled></el-input>
              <el-button @click="sdf">打开</el-button>
            </el-form-item>
            <el-form-item label="数据添加地址" label-width="100px">
              <el-input style="width: 250px" v-model="asd1" disabled></el-input>
              <el-button @click="sdf1">打开</el-button>
            </el-form-item>
            <!--<el-form-item label="数据修改地址" label-width="100px">
              <el-input style="width: 250px" v-model="asd2" disabled></el-input>
              <el-button  @click="sdf2">打开</el-button>
            </el-form-item>-->

          </template>
        </div>
      </el-form>
    </el-dialog>

    <!-- 给form-list上添加上v-model 的值   问题：现在提交form-list input上的值提交时找不到                -->
    <el-dialog title="添加"  :visible.sync="open3" 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="addFrom">添 加</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {listForm, getForm, delForm, addForm, updateForm, exportForm, CheckName} from "@/api/system/form";
    import {addFromData,addFrom11} from "@/api/system/autoform";
    import FormList from "./config/FormList";
    import draggable from 'vuedraggable'
    import {
        formConf
    } from '@/utils/generator/config'
    export default {
        name: "Form",
        components:{
            FormList,
            draggable
        },
        data() {
            var validatePass = (rule, value, callback) => {
                CheckName(this.form.action).then(response => {
                    if (response.data == 1 || response.data == 0) {
                        callback(new Error('已存在,请重新输入或含有中文字符!!'));
                    }
                    callback();
                })
            };

            return {
                formConf,
                diasabledInput: false,
                // checkPass:"",
                asd: "",//查询
                asd1: "",//新增
                asd2: "",//修改
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                actions: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 总条数
                total: 0,
                // 【请填写功能名称】表格数据
                formList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                // open: false,
                open1: false,
                open2: false,
                open3: false,

                tableMap:{},
                drawingList:{},
                formData:{},
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    formId: undefined,
                    action: undefined,
                    method: undefined,
                    formTitle: undefined,
                    orderBy: undefined,
                    flowid: undefined,
                    vueJsonText: undefined,
                    rolePermissions: undefined
                },
                // 表单参数
                form: {pass: ''},
                formToList: {},

                formqqq:{},
                activeId: 6,
                // 表单校验
                rules: {
                    action: [
                        {required: true, message: "表单名称的值不能为空", trigger: "blur"},
                        {required: true, validator: validatePass, trigger: 'blur'}
                    ],


                    formId: [
                        {required: true, message: "Form表单的id值不能为空", trigger: "blur"}
                    ],
                    method: [
                        {required: true, message: "Method的值不能为空", trigger: "blur"}
                    ],
                    formTitle: [
                        {required: true, message: "标题头信息不能为空", trigger: "blur"}
                    ],
                    remark: [
                        {required: true, message: "表单描述说明不能为空", trigger: "blur"}
                    ],
                    createBy: [
                        {required: true, message: "创建着不能为空", trigger: "blur"}
                    ],
                    createTime: [
                        {required: true, message: " 创建时间   不能为空", trigger: "blur"}
                    ],
                },

            }
        },
        created() {
            this.getList();
        },
        methods: {

            sdf: function (row) {
                var row = this.formToList
                // 数据列表地址
                this.$router.push({path: '/autoforms/configIndex/', query: {tableName: row.action, tableTitle: row.formTitle}})
            },
            sdf1: function (row) {
                this.open3 = true
                var row = this.formToList
                // this.dynComponent = resolve => require(['@/views/system/autoform/config/form_' + row.action + '.vue'], resolve)
                //   this.$router.push({path: '/autoform/config/', query: {tableName: row.action, tableTitle: row.formTitle}})
            },
            sdf2: function () {
                // 后台修改
                this.$router.push('/autoform/configEdit/')
            },

            /** 查询【请填写功能名称】列表 */
            getList() {
                this.loading = true;
                listForm(this.queryParams).then(response => {
                    this.formList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            // 取消按钮
            cancel() {
                // this.open = false;
                this.open1 = false;
                this.open2 = false;
                this.open3 = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    id: undefined,
                    formId: undefined,
                    action: undefined,
                    method: undefined,
                    formTitle: undefined,
                    orderBy: undefined,
                    flowid: undefined,
                    vueJsonText: undefined,
                    remark: undefined,
                    createBy: undefined,
                    createTime: undefined,
                    rolePermissions: undefined
                };
                this.resetForm("form");
            },

            addFrom(){
                //  alert(JSON.stringify(this.tableMap))
                console.log(JSON.stringify(this.drawingList))
                alert(this.drawingList)
                // addFrom11(this.formToList.action, this.drawingList).then(response => {
                //         this.msgSuccess("添加成功");
                addFrom11(this.formToList.action,JSON.stringify(this.drawingList)).then(response => {
                    this.msgSuccess("添加成功");
                    this.open3 = false;
                    this.open2 = false;

                })


            },
            //     addFromData(this.form.action, JSON.stringify(this.drawingList)).then(response => {
            //         if (response.code === 200) {
            //             alert()
            //             this.msgSuccess("新增成功");
            //             this.open3 = false;
            //             this.getList();
            //         }
            //     });
            // },

            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length != 1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open1 = true;
                this.title = "添加";
                this.diasabledInput = false;
            },

            // checket: function(e){
            //
            //     CheckName(this.form.action).then(response => {
            //         if(response.data==1) {
            //             alert("表名已存在")
            //             // action: [
            //             //     { validator: validatePass2, trigger: 'blur' }
            //             // ]
            //         }
            //     })
            // },

            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();

                const id = row.id || this.ids
                getForm(id).then(response => {
                    this.form = response.data;
                    this.open1 = true;
                    this.title = "修改";
                    this.diasabledInput = false;
                });
            },
            /** 表单设计按钮操作 */
            handleUpdate1(row) {
                this.$router.push(
                    {path: '/autoform/createform/', query: {tableName: row.action, title: row.formTitle}}
                )
            },
            /** 表单详情按钮操作 */
            handleUpdate2(row) {
                this.$router.push(
                    {
                        path: '/autoform/configIndex/',
                        props: route => ({tableName: this.queryParams.action, title: this.queryParams.formTitle})
                    }
                )
            },
            /** 表单添加操作 */
            // handleUpdate3(row) {
            //     this.$router.push(
            //         {path: '/autoform/config/',props: route => ({ tableName: this.queryParams.action, title: this.queryParams.formTitle})}
            //     )
            // },
            // /** 表单修改按钮操作 */
            // handleUpdate4(row) {
            //     this.$router.push(
            //         {path: '/autoform/configEdit/',props: route => ({ tableName: this.queryParams.action, title: this.queryParams.formTitle})}
            //     )
            // },
            /** 配置地址按钮操作 */
            handleUpdate3(row) {
                this.reset();
                this.formToList = row
                this.asd = "/autoforms/configIndex?tableName=" + row.action + "&tableTitle=" + row.formTitle
                this.asd1 = "/autoforms/configIndex?tableName=" + row.action + "&tableTitle=" + row.formTitle
                this.asd2 = "/autoforms/configIndex?tableName=" + row.action + "&tableTitle=" + row.formTitle

                const id = row.id || this.ids
                getForm(id).then(response => {
                    this.form = response.data;
                    this.drawingList=JSON.parse(response.data.vueJsonField);
                    this.open2 = true;
                    this.title = "配置地址";
                });
            },
            /** 提交按钮 */
            submitForm: function () {
                this.$refs["form"].validate(valid => {

                    if (valid) {
                        if (this.form.id != undefined) {
                            updateForm(this.form).then(response => {
                                if (response.code === 200) {
                                    this.msgSuccess("修改成功");
                                    this.open1 = false;
                                    this.getList();
                                }
                            });
                        } else {
                            addForm(this.form.action, this.form.formTitle).then(response => {
                                if (response.code === 200) {
                                    this.msgSuccess("新增成功");
                                    this.open1 = false;
                                    this.getList();
                                }
                            });
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                //  const ids = row.id || this.ids;
                const action = row.action || this.actions;
                //this.$confirm('是否确认删除编号为"' + ids+"名称为"+action + '"的数据项?', "警告", {
                this.$confirm('是否确认删除名称为:"' + action + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return delForm(action);

                }).then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                }).catch(function () {
                });
            },
            /** 导出按钮操作 */
            handleExport() {
                const queryParams = this.queryParams;
                this.$confirm('是否确认导出所有【请填写功能名称】数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return exportForm(queryParams);
                }).then(response => {
                    this.download(response.msg);
                }).catch(function () {
                });
            }
        }
    };
</script>

<style>

  .qq {
    margin-bottom: 8px;
  }

</style>
