
<template>
  <div class="page">
    <LayoutTable :data="tableData" :config="tableConfig" notAdd notDel>
      <el-button
        slot="table-head-left2"
        style="margin-left: 10px"
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
        >新增</el-button
      >

      <el-button
        slot="table-head-left2"
        style="margin-left: 10px"
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
        >导出</el-button
      >
    </LayoutTable>

    <!-- 添加或修改流程表单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="表单名称" prop="formName">
          <el-input v-model="form.formName" placeholder="请输入表单名称" />
        </el-form-item>
        <el-form-item label="表单内容">
          <editor v-model="form.formContent" :min-height="192" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" 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="formTitle"
      :visible.sync="formConfOpen"
      width="60%"
      append-to-body
    >
      <div class="test-form">
        <parser :key="new Date().getTime()" :form-conf="formConf" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listForm, getForm, delForm, addForm, updateForm, exportForm } from "@/api/flowable/form";
import table from "@/assets/mixins/table";
import Editor from "@/components/Editor";
import Parser from "@/components/parser/Parser";
export default {
  name: "Form",
  components: {
    Editor,
    Parser,
  },
  mixins: [table],
  methods: {
    /** 查询流程表单列表 */
    // 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.reset();
    // },
    // // 表单重置
    // reset() {
    //   this.form = {
    //     formId: null,
    //     formName: null,
    //     formContent: null,
    //     createTime: null,
    //     updateTime: null,
    //     createBy: null,
    //     updateBy: null,
    //     remark: null,
    //   };
    //   this.resetForm("form");
    // },


    /** 表单配置信息 */
    handleDetail(row) {

         console.log("详细");
      this.formConfOpen = true;
      this.formTitle = "流程表单配置详细";
      this.formConf = JSON.parse(row.formContent);
    },
    /** 新增按钮操作 */
    handleAdd() {
      // this.reset();
      // this.open = true;
      // this.title = "添加流程表单";

      console.log("新增表单！");

      this.$router.push({
        path: "/tool/build/index",
        query: { formId: null },
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      // this.reset();
      // const formId = row.formId || this.ids
      // getForm(formId).then(response => {
      //   this.form = response.data;
      //   this.open = true;
      //   this.title = "修改流程表单";
      // });
      console.log("row",row);
      this.$router.push({
        path: "/tool/build/index",
        query: { formId: row.id },
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.formId != null) {
            updateForm(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addForm(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
     // const formIds = row.formId || this.ids;

      this.$confirm(
        '是否确认删除流程表单编号为"' + row.id + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delForm(row.id);
        })
        .then(() => {
          this.getData();
          this.$message.success("删除成功");
        });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有流程表单数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return exportForm(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 流程表单表格数据
      formList: [],
      // 弹出层标题
      title: "",
      formConf: {}, // 默认表单数据
      formConfOpen: false,
      formTitle: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        formName: null,
        formContent: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},

      config: {
        search: [
          {
            name: "formName",
            type: "text",
            label: "表单名称",
          },
        ],
        columns: [
          {
            type: "selection",
            width: 60,
          },

          {
            prop: "id",
            label: "序号",
          },

          {
            prop: "formName",
            label: "表单名称",
          },

          {
            prop: "remark",
            label: "备注",
          },

          {
            prop: "createUser",
            label: "创建用户",
          },

          {
            prop: "createTime",
            label: "创建时间",
            width: 140,
            formatter: this.formatterDate,
          },

          {
            label: "操作",
            width: 180,
            formatter: (row) => {
              return (
                <el-row>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    onClick={() => {
                      this.handleDetail(row);
                    }}
                  >
                    详细
                  </el-button>

                  <span> </span>

                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    onClick={() => {
                      this.handleUpdate(row);
                    }}
                  >
                    修改
                  </el-button>

                  <span> </span>

                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    onClick={() => {
                      this.handleDelete(row);
                    }}
                  >
                    删除
                  </el-button>
                </el-row>
              );
            },
          },
        ],
      },
    };
  },
};
</script>
