<template>
  <div>
    <div class="search-bar">
      <div>
        <label>流程标识</label>
        <el-input
          style="width: 300px; height: 32px; margin-right: 10px"
          v-model="searchParams.key"
        ></el-input>
      </div>
      <div>
        <label>流程名称</label>
        <el-input
          style="width: 300px; height: 32px; margin-right: 10px"
          v-model="searchParams.name"
        ></el-input>
      </div>
      <div>
        <label>版本</label>
        <el-select
          style="width: 300px; height: 32px; margin-right: 10px"
          v-model="searchParams.latest"
        >
          <el-option label="只看新版本" value="true"></el-option>
          <el-option label="全部版本" value="false"></el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" @click="search" icon="Search">搜索</el-button>
        <el-button type="default" @click="reset" icon="Refresh">重置</el-button>
      </div>
    </div>
    <TableTemplate
      :data="tableData"
      :total="total"
      @page-change="handlePageChange"
    >
      <template #toolbar>
        <el-button type="primary" @click="showAddDialog = true" plain
          >部署</el-button
        >
      </template>
      <template #columns>
        <el-table-column prop="id" label="流程定义ID"> </el-table-column>
        <el-table-column prop="deploymentId" label="流程部署ID">
        </el-table-column>
        <el-table-column prop="key" label="流程定义key"> </el-table-column>
        <el-table-column prop="name" label="流程名称"> </el-table-column>
        <el-table-column prop="resourceName" label="流程资源定义">
        </el-table-column>
        <el-table-column prop="version" label="版本号"> </el-table-column>
        <el-table-column prop="version" width="200" label="详情">
          <template #default="scope">
            <el-button
              text
              type="primary"
              @click="handleDefinition(scope.$index, scope.row)"
              >查看定义</el-button
            >
            <el-button
              text
              type="primary"
              @click="handleProcess(scope.$index, scope.row)"
              >流程图</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="version" label="操作" width="270">
          <template #default="scope">
            <el-button
              v-if="scope.row.suspended"
              type="primary"
              text
              @click="handleActive(scope.$index, scope.row)"
              >激活</el-button
            >
            <el-button
              v-if="!scope.row.suspended"
              type="primary"
              text
              @click="handleHangOff(scope.$index, scope.row)"
              >挂起</el-button
            >
            <el-button
              text
              type="primary"
              @click="handleExchange(scope.$index, scope.row)"
              >转为模型</el-button
            >
            <el-button
              type="primary"
              text
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </template>
    </TableTemplate>
    <el-dialog title="上传部署文件" v-model="showAddDialog" width="30%">
      <input id="deployFile" type="file" />
      <div>提示：仅允许导入“bpmn”、“xml”或“zip”格式文件！</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showAddDialog = false">取 消</el-button>
          <el-button type="primary" @click="handleUpload">确 定</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      :title="`${type === 'hang' ? '挂起' : '激活'}流程定义`"
      v-model="showHangOffDialog"
      width="30%"
    >
      <el-switch
        v-model="suspend.value1"
        :active-text="`${type === 'hang' ? '挂起' : '激活'}关联流程实例`"
      >
      </el-switch>
      <br />
      <el-switch
        v-model="suspend.value2"
        :active-text="`定时${type === 'hang' ? '挂起' : '激活'}`"
      >
      </el-switch>
      <br />
      <el-date-picker
        :disabled="!suspend.value2"
        v-model="suspend.date"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        :placeholder="`选择${type === 'hang' ? '挂起' : '激活'}时间`"
      >
      </el-date-picker>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showHangOffDialog = false">取 消</el-button>
          <el-button type="primary" @click="handleSuspendRequest"
            >确 定</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import TableTemplate from "@/components/TableTemplate";
import {
  getProcesslists,
  exchangeById,
  deleteProcessByDeployId,
  uploadProcess,
  suspendProcess,
  activateProcess,
} from "@/api/process/deployService";
import commonHelper from "@/utils/common.js";
import { computed, onMounted, reactive } from "vue";

const responseData = ref({});
const searchParams = reactive({
  key: "",
  name: "",
  latest: "true",
  orderByColumn: "processSort",
  isAsc: "asc",
  pageNum: 1,
  pageSize: 10,
});
const showAddDialog = ref(false);
const showHangOffDialog = ref(false);
const suspend = reactive({
  value1: true,
  value2: false,
  date: "",
});
const currentRow = ref(null);
const type = ref("");

const tableData = computed(() => {
  return responseData.value.rows || [];
});

const total = computed(() => {
  return responseData.value.total || 0;
});
onMounted(() => {
  getListAndRenderByParams(searchParams);
});
const handlePageChange = ({ pageNum, pageSize }) => {
  searchParams.pageNum = pageNum;
  searchParams.pageSize = pageSize;
  getListAndRenderByParams(searchParams);
};
const getListAndRenderByParams = (params) => {
  getProcesslists(params).then((res) => {
    responseData.value = res;
    console.log("拿到processList", responseData.value);
  });
};
const search = () => {
  getListAndRenderByParams(searchParams);
};
const reset = () => {
  searchParams.key = "";
  searchParams.name = "";
  searchParams.latest = "true";
  getListAndRenderByParams(searchParams);
};
const handleDefinition = (index, row) => {
  const { deploymentId, resourceName } = row;
  const path = `/flow/manage/showProcessDefinition/${deploymentId}/${resourceName}`;
  commonHelper.openWindow(path);
};
const handleProcess = (index, row) => {
  const { id } = row;
  console.log("id是多少", id);
  const path = `/flow/manage/showresource?pdid=${id}`;
  commonHelper.openWindow(path);
};
const handleExchange = (index, row) => {
  const { id } = row;
  exchangeById(id).then((res) => {
    ElMessage({ type: "success", message: "转化成功" });
  });
};
const handleHangOff = (index, row) => {
  showHangOffDialog.value = true;
  type.value = "hang";
  currentRow.value = row;
};
const handleActive = (index, row) => {
  showHangOffDialog.value = true;
  type.value = "active";
  currentRow.value = row;
};
const handleSuspendRequest = () => {
  const { id } = currentRow.value;
  const params = {
    flag: true,
    pdid: id,
  };
  if (suspend.date) {
    params.date = suspend.date;
  }
  type.value === "hang" &&
    suspendProcess(params).then(() => {
      ElMessage({ type: "success", message: "挂起成功" });
      showHangOffDialog.value = false;
      getListAndRenderByParams(searchParams);
    });

  type.value === "active" &&
    activateProcess(params).then(() => {
      ElMessage({ type: "success", message: "激活成功" });
      showHangOffDialog.value = false;
      getListAndRenderByParams(searchParams);
    });
};
const handleDelete = (index, row) => {
  ElMessageBox.confirm("确定删除该条流程信息吗？", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      const { deploymentId } = row;
      deleteProcessByDeployId(deploymentId).then((res) => {
        ElMessage({ type: "success", message: "删除成功" });
        this.getListAndRenderByParams(this.searchParams);
      });
    })
    .catch(() => {
      ElMessage({ type: "info", message: "Delete canceled" });
    });
};
const handleUpload = () => {
  const deploy = document.querySelector("#deployFile");
  const uploadfile = deploy.files[0];
  uploadProcess({
    uploadfile,
  }).then(() => {
    showAddDialog.value = false;
    console.log("file-name");
    getListAndRenderByParams(searchParams);
  });
};
</script>

<style scoped>
.search-bar {
  display: flex;
  margin-top: 8px;
  margin-left: 8px;
}
label {
  font-size: 14px;
  color: #606266;
  margin-right: 8px;
}
.el-input {
  display: inline-block;
  width: 300px;
  margin-right: 10px;
}
.el-switch {
  margin-bottom: 16px;
}
</style>