<template>
  <div class="processManage">
    <router-view />
    <template v-if="!$route.params.id">
      <div>
        <div class="search" style="margin-bottom: 20px">
          <div class="left">
            <div>
              <el-button type="primary" @click="modifyClick">新增定义部署文档</el-button>
              <el-button type="primary" @click="refresh">刷新</el-button>
            </div>
          </div>
          <div class="right"></div>
        </div>
        <div style="width: 100%">
          <cy-comm-table
            ref="commTable"
            v-loading="loading"
            :columns="columns"
            :table-options="tableOptions"
            :data="tableData"
            :count="total"
          />
        </div>
      </div>
      <cy-dialog ref="deploymentDocuments" title="新增定义部署文档">
        <el-form
          ref="deploymentDocumentsForm"
          v-loading="isLoading"
          :model="deploymentDocumentsForm"
          :rules="deploymentDocumentsFormRules"
          label-width="120px"
          label-position="left"
        >
          <el-form-item label="流程部署名称：" prop="deployName">
            <el-input
              v-model="deploymentDocumentsForm.deployName"
              placeholder="请输入流程部署名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="上传附件："
            class="form-required"
          >
            <cy-upload
              ref="flowableFile"
              :upload-params="{
                mouldName: 'flowableFile'
              }"
              :file-data="deploymentDocumentsForm.flowableFile"
              :upload-from-orange-status="true"
              placeholder="请上传附件"
            />
          </el-form-item>
        </el-form>
        <template slot="footer">
          <el-button type="primary" @click="deploymentDocuments">确定</el-button>
          <el-button type="normal" @click="$refs.deploymentDocuments.show = false">关闭</el-button>
        </template>
      </cy-dialog>
    </template>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import indexTable from './indexTable'
import { getList, doDeploy, doSetViewImg } from '@/api/systemManage/processManage/processManage'
export default {
  name: 'ProcessManageIndex',
  mixins: [indexTable],
  data() {
    return {
      loading: false,
      isLoading: false,
      tableData: [],
      deploymentDocumentsFormRules: {
        deployName: [
          { required: true, message: '请输入流程部署名称', trigger: 'blur' }
        ]
      },
      page: 1,
      size: 10,
      total: 0,
      deploymentDocumentsForm: {
        deployName: '',
        flowableFile: []
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    if (!this.$route.params.id) {
      this.fetchData()
    }
  },
  methods: {
    fetchData(type) {
      this.loading = true
      const params = {
        page: this.page,
        rows: this.size
      }
      getList(params).then(response => {
        this.tableData = response.rows
        this.loading = false
        this.total = response.records
      })
    },
    modifyClick() {
      this.$refs.deploymentDocuments.show = true
    },
    refresh() {
      this.fetchData()
    },
    deploymentDocuments() {
      const flowableFileList = this.$refs.flowableFile.getFileLists
      if (!flowableFileList.length) {
        this.$message.warning('请上传附件')
        return
      }
      const params = {
        id: flowableFileList.map(item => item.id)[0],
        deployName: this.deploymentDocumentsForm.deployName
      }
      doDeploy(params).then(() => {
        this.$refs.deploymentDocuments.show = false
        this.fetchData()
      })
    },
    handlerOperate(type, row) {
      if (type === 'edit') {
        this.$router.push({
          name: 'ProcessManageProcessDefinitionIndex',
          params: { id: 'children' },
          query: {
            id: row.id
          }
        })
      }
      if (type === 'see') {
        window.open(`${process.env.VUE_APP_BASE_API}/flowable/processDefinition/viewImg?deploymentId=${row.deploymentId}&resourceName=${row.diagramResourceName}`)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.processManage {

}
</style>
