<template>
  <div>
    <a-card>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-model-item prop="name" label="模型名称">
                <a-input v-model="queryParam.name" allowClear placeholder="请输入模型名称" ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="16">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search" style="margin-right: 8px">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-right: 8px">重置</a-button>
              </span>
            </a-col>
            <a-col :xl="12" :lg="7" :md="8" :sm="8" style="text-align: right">
              <a-button @click="handleAdd" type="primary" icon="plus" style="background-color: #5FB878;border-color: #5FB878">新增</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-table
        :columns="columns"
        :dataSource="dataSource"
        rowKey="id"
        :loading="loading"
        class="j-table-force-nowrap"
        :pagination="ipagination"
        @change="handleTableChange"
      >
        <template slot="deploymentId" slot-scope="text,record">
          <span v-if="record.deploymentId!=null" style="color: #7ac23c">已部署</span>
          <span v-if="record.deploymentId==null" style="color: #ff0000">未部署</span>
        </template>

        <span slot="action" slot-scope="text, record">
          <a href="javascript:;" @click="openModeler(record)">流程</a>
          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多 <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定部署吗?" @confirm="() => deployProcess(record.id)">
                  <a v-if="record.deploymentId!=null">重新部署</a>
                  <a v-else>部署</a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item>
                <a @click="exportHandle(record.id)">导出</a>
              </a-menu-item>
              <a-menu-item v-if="record.deploymentId ==null" >
                <a-popconfirm title="确定删除吗?" @confirm="() => del(record.id)">
                  <a style="color: red">删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
        <a-divider type="vertical" />
      </a-table>

      <activiti-model-modal ref="modalForm" @ok="modalFormOk" @getModels="getModels"></activiti-model-modal>
      <activiti-model ref="activitiModel" @ok="modalFormOk" ></activiti-model>
    </a-card>
  </div>

</template>

<script>

  import { getAction, deleteAction } from '@/api/manage'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import ActivitiModelModal from './ActivitiModelModal'
  import { getModelList } from '@/api/activiti/activiti'
  import ActivitiModel from './ActivitiModel'

  export default {
    name: 'ActivitiList',
    mixins: [JeecgListMixin, mixinDevice],
    components: {
      ActivitiModelModal, ActivitiModel
    },
    data() {
      return {
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            dataIndex: 'id',
            title: '模型编号',
            align: 'center'
          }, {
            dataIndex: 'name',
            title: '名称',
            align: 'center'
          }, {
            dataIndex: 'key',
            title: '模型KEY',
            align: 'center'
          }, {
            dataIndex: 'deploymentId',
            title: '状态',
            align: 'center',
            scopedSlots: { customRender: 'deploymentId' }
          }, {
            dataIndex: 'createTime',
            title: '创建时间',
            align: 'center'
          }, {
            title: '最后更新时间',
            dataIndex: 'lastUpdateTime',
            align: 'center'
          }, {
            dataIndex: 'version',
            title: '版本',
            align: 'center'
          }, {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }],
        url: {
          list: 'act/remodel/list',
          delete: '/act/remodel/deleteById',
          deploy: '/act/remodel/deploy',
          exportHandle: 'act/remodel/export'
        },
        loading: true,
        queryParam: {
           key: '',
           name: ''
        }
      }
    },
   created() {
     // this.getModels()
   },
   methods: {
     // 导出
     exportHandle(id) {
       let apiBaseUrl = window._CONFIG['domianURL'] || '/tcore-boot'
       let url = apiBaseUrl + '/act/remodel/export?id=' + id
       window.open(url)
     },
     openModeler(row) {
          this.$refs.activitiModel.openModel(row)
       },
      // 查询
      getModels() {
        let param = this.q
        this.loading = true
        getModelList(this.url.list, param).then(res => {
          console.log('查询数据', res)
          this.dataSource = res.result.records
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
          this.loading = false
        })
      },
      // 删除
      del(id) {
        deleteAction(this.url.delete, { id: id }).then(res => {
          if (res.success) {
            this.$message.success(res.message)
             this.searchQuery()
          } else {
            this.$message.error(res.message)
          }
        })
      },
      // 部署
      deployProcess(id) {
        getAction(this.url.deploy, { id: id }).then(res => {
          console.log('流程部署', res)
          if (res.success) {
            this.$message.success(res.result)
             this.searchQuery()
          } else {
            this.$message.error(res.message)
          }
        })
      }
    }
   }
</script>

<style lang="less" scoped>
 .table-operator .ant-btn {
        margin: 3px 8px 4px 0;
    }
</style>
