<template>
  <div>
    <page-table ref="pageTable" url="/report/design/listPage">
      <template v-slot:condition="{condition}">
        <el-col :span="3">
          <el-input v-model="condition.name" clearable placeholder="请输入流程名称" />
        </el-col>
        <el-col :span="3">
          <vocabulary-select v-model="condition.category" code="FLOW_TEMPLATE_CATEGORY" clearable placeholder="请选择类别" />
        </el-col>
      </template>
      <template>
        <el-table-column label="报表编码" prop="id" show-overflow-tooltip />
        <el-table-column label="报表名称" prop="name" show-overflow-tooltip />
        <el-table-column label="版本号" prop="version" />
        <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip />
        <el-table-column label="修改时间" prop="updateTime" width="140" />
        <el-table-column label="操作" >
          <template slot-scope="{row}">
            <el-button type="text" @click="handleDesign(row)">设计</el-button>
            <el-button type="text" @click="handlePreview(row)">预览</el-button>
            <el-button type="text" @click="copyUrl(row,$event);">复制链接</el-button>
<!--            <el-button type="text" @click="handleDeployment(row)">部署</el-button>-->
            <el-button type="text" @click="handleDel(row)">删除</el-button>
          </template>
        </el-table-column>

      </template>
      <template v-slot:operateButton>
        <el-button type="primary" @click="handleEdit(null)">新增</el-button>
      </template>
    </page-table>

    <edit :id="id" :show="showEdit" @close="closeEdit" />
  </div>
</template>

<script>

import edit from './edit'
import PageTable from './components/PageTable/PageTable'
import VocabularySelect from './components/vocabulary/VocabularySelect'
import { del, deployment } from './api/flow/template'
import clip from './utils/clipboard' // use clipboard directly

export default {
  name: 'ReportDesign',
  components: { VocabularySelect, PageTable, edit },
  data() {
    return {
      id: null,
      showEdit: false,
      loading: false
    }
  },
  methods: {
    handleEdit(data) {
      if (data != null) {
        this.id = data.id
      } else {
        this.id = null
      }
      this.showEdit = true
    },
    closeEdit() {
      this.showEdit = false;
      this.$refs.pageTable.getPage()
    },
    handleDesign(row) {
      this.showEdit = true;
      this.id = row.id
    },
    handlePreview(row) {
      this.$router.push({name: "Report", query: {id: row.id}})
    },
    copyUrl(row,event) {
      let url = `/report/report/view?id=${row.id}`;
      clip(url, event)
      this.$message.success("复制成功")
    },
    handleDeployment(row) {
      deployment(row.id).then(() => {
        this.$message.success('部署成功')
        this.$refs.pageTable.getPage()
      })
    },
    handleDel(row) {
      del(row.id).then(() => {
        this.$message.success('删除成功')
        this.$refs.pageTable.getPage()
      })
    }

  }

}
</script>

<style scoped>

</style>
