<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>
        <!--<input type="file" value="" id="file" @change="uploadConfig">-->
        <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">
          删除
        </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="名称" prop="name"/>
      <el-table-column label="key" prop="key" :show-overflow-tooltip="true"/>
      <el-table-column label="版本" prop="version"/>
      <el-table-column label="描述" prop="description"/>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini" type="warning"
            @click="showImage(scope.$index, scope.row)">查看模型图
          </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="activitiImg.title" :visible.sync="activitiImg.open" width="1000px">
      <el-image :src="activitiImg.src"></el-image>
    </el-dialog>
  </div>
</template>
<style scoped>

</style>
<script>
  import { list, upload, delTitle } from '@/api/activiti/definition.js'

  export default {
    data: function() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        // 分页参数
        total: 0,
        pageNum: 1,
        pageSize: 10,
        tableData: [],
        // 表单参数
        // 是否显示弹出层
        // 分类下拉
        // 文件
        form: {},
        //删除id
        multipleSelection: [],
        activitiImg: {
          title: '查看模型图',
          open: false,
          src: ''
        }

      }
    },

    // 初始化方法
    created() {
      //表格初始化
      this.getList()
    },
    methods: {
      //文件上传
      uploadConfig(e) {
        let formData = new FormData();
        formData.append('processDefinition', e.target.files[0]);
        upload(formData).then(
          response => {
            this.msgSuccess('成功')
            this.reIds()
            this.reList()
          }
        )

      },
      handleSelectionChange(val) {
        this.multipleSelection = []
        for (let i = 0; i < val.length; i++) {
          this.multipleSelection[i] = val[i].id
        }
      },
      /** 查询角色列表 */
      getList() {
        this.loading = true
        list(this.addDateRange(this.queryParams)).then(
          response => {
            this.tableData = response.data
            this.total = 10
            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()
      }
      ,
      reList() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10
        }
        this.getList()
      },
      showImage(index, row) {
        this.activitiImg.src=undefined
        let modelKey = row.key
        let version = row.version
        this.activitiImg.src=process.env.VUE_APP_BASE_URL + '/leaveNew/read-activiti?processDefinitionKey=' + modelKey +'&version='+version+ '&t='+Math.random();
        this.activitiImg.open=true;
      }
    }

  }
</script>
