<!--
 * @Author: Jason Liu
 * @Date: 2022-06-20 10:50:07
 * @Desc: 
-->
<template>
  <div class="job_set_container">
    <a-spin :spinning="loading">
      <a-row>
        <a-col :span="16">
          <span class="search_label"> 流程组：</span>
          <a-select
            placeholder="请选择流程组"
            allowClear
            v-model="pager.queryParams.F_flowGroupId_eq"
            :options="groups"
            @change="search"
          >
          </a-select>
          <span class="search_label"> 流程名称：</span>
          <a-input-search
            placeholder="请输入流程名称"
            allowClear
            v-model.lazy="pager.queryParams.F_flowName_like"
            @search="search"
          />
        </a-col>
        <a-col :span="8" class="api_tool">
          <a-button type="primary" icon="search" @click="search"> 查询 </a-button>
          &nbsp;
          <a-button type="primary" icon="plus" @click="editFlow({ id: undefined })">
            新增设计
          </a-button>
        </a-col>
      </a-row>
      <div class="table_list">
        <vxe-table
          show-overflow
          show-header-overflow
          border
          resizable
          :loading="loading"
          :row-config="{ isHover: true }"
          :data="lists"
          height="auto"
        >
          <vxe-column type="seq" title="序号" width="50" align="center">
          </vxe-column>
          <vxe-column field="flowName" title="流程名称"> </vxe-column>
          <vxe-column field="workflowGroup.flowGroupName" title="流程组">
          </vxe-column>
          <vxe-column field="flowDesc" title="流程描述"> </vxe-column>
          <vxe-column field="createTime" title="创建时间"> </vxe-column>
          <vxe-column field="createBy" title="创建人"> </vxe-column>
          <vxe-column field="title" title="操作" width="210" align="center">
            <template #default="{ row }">
              <a-button type="link" @click="editFlow(row)">编辑</a-button>
              <a-popconfirm
                :title="`确认要删除[${row.flowName}]吗?`"
                ok-text="是"
                cancel-text="否"
                @confirm="deleteFlow(row)"
              >
                <a-button type="link" class="a_danger">删除</a-button>
              </a-popconfirm>
            </template>
          </vxe-column>
          <template #empty>
            <a-empty
              :image-style="{
                height: '80px',
              }"
            >
              <span slot="description"> 暂无数据 </span>
            </a-empty>
          </template>
        </vxe-table>
      </div>
      <vxe-pager
        background
        :current-page.sync="pager.pageNum"
        :page-size.sync="pager.pageSize"
        :total="total"
        @page-change="getFlowList"
        :layouts="['Total', 'PrevJump', 'JumpNumber', 'NextJump', 'FullJump']"
      >
      </vxe-pager>
    </a-spin>
    <job-designer
      v-model="setting.show"
      :process-id="setting.flowId"
      :job-type="'flow'"
      @update="getFlowList"
    />
  </div>
</template>

<script>
/**
 * @Author: Jason Liu
 * @description: 调度中心
 */
const $dispatchcenter = require("@/api/dispatchcenter");

//流程设计

const jobDesigner = require("@/components/jobDesigner").default;
export default {
  components: { jobDesigner },
  data() {
    return {
      total: 0,
      pager: {
        pageNum: 1,
        pageSize: 15,
        queryParams: {
          F_isDel_eq: 0,
          F_flowName_like: undefined,
          F_flowGroupId_eq: undefined,
        },
      },
      loading: false,
      lists: [],
      groups: [],
      setting: {
        show: false,
        flowId: undefined,
      },
    };
  },
  created() {
    this.getFlowList();
    this.getGroupList();
  },
  methods: {
    /**
     * @Author: Jason Liu
     * @description: 执行流程
     */
    startFlow(row) {
      $dispatchcenter
        .startFlow(row)
        .then((req) => {
          this.$message.success("已发送流程启动请求！");
          row.start = true;
          setTimeout(() => {
            row.start = false;
          }, 8000);
        })
        .finally(() => {
          //this.getFlowList();
        });
    },
    /**
     * @Author: Jason Liu
     * @description: 编辑流程
     */
    editFlow({ id }) {
      this.setting = {
        show: true,
        flowId: id,
      };
    },
    /**
     * @Author: Jason Liu
     * @description: 删除流程
     */
    deleteFlow(row) {
      $dispatchcenter
        .deleteFlowInfo({ ids: row.id })
        .then((req) => {
          this.$message.success("流程删除成功！");
        })
        .finally(() => {
          this.getFlowList();
        });
    },
    /**
     * @Author: Jason Liu
     * @description: 获取分组列表
     */
    getGroupList() {
      $dispatchcenter
        .getCategoryList({
          pageNum: 1,
          pageSize: 10000,
        })
        .then((req) => {
          this.groups = req.data.map((row) => {
            return {
              value: row.id,
              label: row.flowGroupName,
            };
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /**
     * @Author: Jason Liu
     * @description: 查询
     */
    search() {
      this.pager.pageNum = 1;
      this.getFlowList();
    },
    /**
     * @Author: Jason Liu
     * @description: 获取流程设计列表
     */
    getFlowList() {
      this.loading = true;
      $dispatchcenter
        .getFlowList(this.pager)
        .then((req) => {
          this.total = Number(req.count);
          this.lists = req.data.map((row) => {
            row.start = false;
            return row;
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="less">
.job_set_container {
  background: #fff;
  height: 100%;
  padding: 16px;

  .search_key {
    width: 220px;
  }

  .search_label {
    font-weight: 500;
    margin-left: 24px;
    line-height: 32px;
    margin-right: 10px;
    text-align: right;
    color: #000000;
  }

  .ant-input-search,
  .ant-select {
    width: 200px;
  }

  .api_tool {
    text-align: right;
  }

  .table_list {
    width: 100%;
    height: calc(100vh - 230px);
    display: inline-block;
    margin-top: 16px;
  }
}
</style>
