<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="标题">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入标题"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <!--
                <el-button type="success" icon="el-icon-plus" size="mini" @click="addForm">新增</el-button>
        -->
        <el-button type="primary" icon="el-icon-search" size="mini" @click="insert">新增</el-button>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="info" icon="el-icon-refresh-right" size="mini" @click="reList">清空</el-button>

        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteTi" v-hasPermi="['blog:blog:remove']">
          删除
        </el-button>

      </el-form-item>
    </el-form>
    <el-table v-loading="loading" ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{ (queryParams.pageNum-1) * queryParams.pageSize + (scope.$index + 1) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="模型key" prop="modelKey"/>
      <el-table-column label="模块key" prop="modulId"/>
      <el-table-column label="名称" prop="fName"/>
      <el-table-column label="key" prop="fKey" :show-overflow-tooltip="true"/>
      <el-table-column label="版本" prop="fVersion"/>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="showForm(scope.$index, scope.row)">查看表单
          </el-button>

          <el-button
            size="mini"
            @click="showJson(scope.$index, scope.row)">查看json
          </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="open" width="1000px">
      <template>
        <el-card
          header="ele-form演示"
          style="max-width:1200px;margin: 50px auto;"
        >
          <ele-form
            :isShowSubmitBtn=true
            :isShowBackBtn=false
            :isShowResetBtn=true
            :rules="formObj.rules"
            :form-desc="formObj.formDesc"
            :form-data="formObj.formData"
            :request-fn="handleRequest"
            @request-success="handleRequestSuccess"
          ></ele-form>
        </el-card>
        <div slot="footer" class="dialog-footer">
          <el-button type="success" @click="cancel" plain>关闭</el-button>
        </div>
      </template>

    </el-dialog>

    <el-dialog :close-on-click-modal=false :title="fromDataTitle" :visible.sync="fromDataOpen" width="1000px">
      <el-form ref="form" label-width="80px">
        <el-form-item label="模型key">
          <el-input v-model="myFormData.modelKey"></el-input>
        </el-form-item>
        <el-form-item label="模型版本">
          <el-input v-model="myFormData.modelVersion"></el-input>
        </el-form-item>
        <el-form-item label="模块key">
          <el-input v-model="myFormData.modulId"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="myFormData.fName"></el-input>
        </el-form-item>
        <el-form-item label="表单key">
          <el-input v-model="myFormData.fKey"></el-input>
        </el-form-item>
        <el-form-item label="表单版本">
          <el-input v-model="myFormData.fVersion"></el-input>
        </el-form-item>
        <el-form-item label="表单json">
          <v-jsoneditor v-model="myFormData.jsonData" height="400px"/>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="save" plain>保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--在模板中使用vue-json-editor-->
  </div>
</template>
<style scoped>

</style>
<script>

  import { list, get, insert, update ,delTitle } from '@/api/activiti/form.js'

  export default {
    data: function() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        // 分页参数
        total: 0,
        pageNum: 1,
        pageSize: 10,
        tableData: [],
        // 表单参数
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        form: {},
        //删除id
        multipleSelection: [],
        formObj: {
          // 表单数据
          formData: {},
          formDesc: {},
          rules: {}

        },
        fromDataTitle: '',
        fromDataOpen: false,
        myFormData: {
          fId: undefined,
          modulId: undefined,
          fName: undefined,
          fKey: undefined,
          fVersion: undefined,
          modelKey: undefined,
          modelVersion: undefined,
          jsonData: {}
        }
      }
    },

    // 初始化方法
    created() {
      //表格初始化
      this.getList()
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = []
        for (let i = 0; i < val.length; i++) {
          this.multipleSelection[i] = val[i].fId
        }
      },
      /** 查询角色列表 */
      getList() {
        this.loading = true
        list(this.addDateRange(this.queryParams)).then(
          response => {
            this.tableData = response.rows
            this.total = response.total
            this.loading = false
          }
        )
      }
      ,
      deleteTi() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定 ',
          cancelButtonText: '取消 ',
          type: 'warning',
          center: true
        }).then(() => {
          let ids = this.multipleSelection
          if (ids.length === 0) {
            this.msgError('你没有选择文章')
            return
          }
          delTitle(ids)
          this.msgSuccess('成功')
          this.reIds()
          this.reList()
        }).catch(() => {
          this.msgSuccess('已取消删除')
        })
      }
      ,
      reIds() {
        this.multipleSelection = []
      }
      ,
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      //表单
      addForm() {
        this.open = true
        this.title = '添加文章'
      },
      reset() {
        this.formObj.formDesc = {}
        this.formObj.rules = {}
        this.formObj.formData = {}
      },
      //关闭按钮
      cancel() {
        this.open = false
        this.reset()
      },
      showForm(index, row) {
        this.reset()
        get(row.fId).then(response => {
          let jsonData = response.data.jsonData
          let parse = JSON.parse(jsonData)
          this.formObj.formDesc = parse.formDesc
          this.formObj.rules = parse.rules
          let formData = parse.formData
          if (null != formData) {
            this.formObj.formData = parse.formData
          }
          this.open = true
          this.title = '查看'
          console.log(this.formObj)
        })
      },
      insert() {
        this.formReset()
        this.fromDataOpen = true
        this.fromDataTitle = '查看'
      },
      formReset() {
        this.myFormData.fId = undefined
        this.myFormData.modulId = undefined
        this.myFormData.fName = undefined
        this.myFormData.fKey = undefined
        this.myFormData.fVersion = undefined
        this.myFormData.modelKey = undefined
        this.myFormData.modelVersion = undefined
        this.myFormData.jsonData = {}
      },
      showJson(index, row) {
        this.reset()
        get(row.fId).then(response => {
          this.myFormData = response.data
          let parse = JSON.parse(response.data.jsonData)
          this.fromDataOpen = true
          this.fromDataTitle = '查看'
          this.myFormData.jsonData = parse
        })
      },
      save() {
        console.log(this.myFormData)
        try {
          this.myFormData.jsonData = JSON.stringify(this.myFormData.jsonData)
        } catch (err) {
          alert('json序列化失败!')
        }
        if (this.myFormData.fId == undefined) {
          insert(this.myFormData).then(response => {

          })
        } else {
          update(this.myFormData).then(response => {

          })
        }

        this.fromDataOpen = false
      },
      onJsonChange(value) {
        console.log('value:', value)
      },
      reList() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10
        }
        this.getList()
      },
      handleRequest(data) {
        alert(JSON.stringify(data))
        console.log(data)
        return Promise.resolve()
      },
      handleRequestSuccess() {
        this.$message.success('发送成功')
      }
    }

  }
</script>
