<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item :label="$t('流程编号')" prop="processInstanceId">
        <el-input
          v-model="queryParams.processInstanceId"
          :placeholder="$t('流程编号')"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item :label="$t('流程名称')" prop="name">
        <el-input
          v-model="queryParams.name"
          :placeholder="$t('任务名称')"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item :label="$t('流程分类')" prop="category">
        <el-select
          v-model="queryParams.category"
          :placeholder="$t('请选择流程分类')"
          clearable
        >
          <el-option
            v-for="dict in this.getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY)"
            :key="dict.value"
            :label="$l(dict, 'label')"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('提交时间')">
        <el-date-picker
          v-model="dateRangeCreateTime"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          :start-placeholder="$t('开始日期')"
          :end-placeholder="$t('结束日期')"
        />
      </el-form-item>
      <el-form-item :label="$t('业务编号')" prop="businessNo">
        <el-input
          v-model="queryParams.businessNo"
          :placeholder="$t('请输入业务编号')"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{
          $t("搜索")
        }}</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">{{
          $t("重置")
        }}</el-button>
        <el-button type="primary" @click="handleQuery2">{{
          $t("批量通过")
        }}</el-button>
        <el-button type="primary" @click="handleQuery3">{{
          $t("批量不通过")
        }}</el-button>
      </el-form-item>
    </el-form>

    <!-- 列表 -->
    <el-table
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column
        :label="$t('流程编号')"
        align="center"
        prop="processInstance.id"
        width="220"
      />
      <el-table-column
        :label="$t('流程名称')"
        align="center"
        prop="processInstance.name"
        width="220"
      />

      <el-table-column :label="$t('流程分类')" align="center" prop="category">
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.BPM_MODEL_CATEGORY"
            :value="scope.row.category"
          />
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('业务编号')"
        align="center"
        prop="businessNo"
      />

      <el-table-column :label="$t('当前审批节点')" align="center" prop="name" />
      <!-- <el-table-column :label="$t('状态')" align="center" prop="version" width="80">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.suspensionState === 1">{{ $t('激活') }}</el-tag>
          <el-tag type="warning" v-if="scope.row.suspensionState === 2">{{ $t('挂起') }}</el-tag>
        </template>
      </el-table-column> -->

      <!-- <el-table-column :label="$t('结果')" align="center" prop="result">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result"/>
        </template>
      </el-table-column> -->
      <el-table-column
        :label="$t('提交时间')"
        align="center"
        prop="createTime"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column :label="$t('结束时间')" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endTime) }}</span>
        </template>
      </el-table-column> -->
      <el-table-column
        :label="$t('操作')"
        align="center"
        fixed="right"
        class-name="small-padding fixed-width"
        width="150"
      >
        <template slot-scope="scope">
          <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleCancel(scope.row)"
                     v-hasPermi="['bpm:task:update']">{{ $t('取消') }}
          </el-button> -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleAudit(scope.row)"
            v-hasPermi="['bpm:task:update']"
            >{{ $t("详情") }}
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleAudit(scope.row)"
            v-hasPermi="['bpm:task:update']"
            >{{ $t("审批") }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="审批意见" prop="comment">
          <el-input
            v-model="form.comment"
            style="width: 300px"
            placeholder="请输入审批意见"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTodoTaskPage } from "@/api/bpm/task";
import { cancelProcessInstance } from "@/api/bpm/processInstance";
import { approveTask2, rejectTask2 } from "@/api/bpm/task";
export default {
  //lanbm 2024-05-08 添加查询条件不清空优化
  name: "BpmTaskTodo",
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 待办任务列表
      list: [],
      // 查询参数
      dateRangeCreateTime: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        name: null,
        businessNo: null,
        category: null,
      },
      titleType: 1,
      title: undefined,
      open: false,
      // 选中数组
      ids: [],
      BpmNameList: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 表单参数
      form: {
        //审批意见
        comment: undefined,
      },
      // 表单校验
      rules: {
        comment: [
          {
            required: true,
            message: this.$t("审批意见不能为空。"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  watch: {
    //lanbm 2024-05-08 添加页面再次进入刷新列表优化
    $route(to) {
      if (this.$route.path == "/task/todo") {
        this.getList();
      }
    },
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 处理查询参数
      let params = { ...this.queryParams };
      this.addBeginAndEndTime(params, this.dateRangeCreateTime, "createTime");
      getTodoTaskPage(params).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    handleQuery2() {
      //批量通过 lanbm 2024-05-20 add
      if (this.ids.length == 0) {
        this.$message.error(this.$t("请选择需要批量通过的任务。"));
        return;
      }
      let firstName = this.BpmNameList[0];
      for (var i = 0; i < this.BpmNameList.length; i++) {
        if (firstName != this.BpmNameList[i]) {
          this.$message.error(this.$t("您选择的任务不全是同一类流程。"));
          return;
        }
      }
      this.form.comment = "";
      this.title = "批量通过";
      this.titleType = 1;
      this.open = true;
    },
    handleQuery3() {
      //批量不通过 lanbm 2024-05-20 add
      if (this.ids.length == 0) {
        //this.modal.msgSuccess
        this.$message.error(this.$t("请选择需要批量不通过的任务。"));
        return;
      }
      let firstName = this.BpmNameList[0];
      for (var i = 0; i < this.BpmNameList.length; i++) {
        if (firstName != this.BpmNameList[i]) {
          this.$message.error(this.$t("您选择的任务不全是同一类流程。"));
          return;
        }
      }
      this.form.comment = "";
      this.title = "批量不通过";
      this.titleType = 2;
      this.open = true;
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        //approveTask2
        if (this.titleType == 1) {
          let p1 = [];
          for (var i = 0; i < this.ids.length; i++) {
            var obj = {};
            obj.id = this.ids[i];
            obj.comment = this.form.comment;
            p1.push(obj);
          }
          approveTask2(p1).then((response) => {
            if (response.data == true) {
              this.open = false;
              this.$modal.msgSuccess(this.$t("批量处理成功"));
              this.getList();
            } else {
              this.open = false;
              this.$modal.msgSuccess(this.$t("批量处理失败"));
            }
          });
        } else {
          let p2 = [];
          for (var i = 0; i < this.ids.length; i++) {
            var obj = {};
            obj.id = this.ids[i];
            obj.comment = this.form.comment;
            p2.push(obj);
          }
          rejectTask2(p2).then((response) => {
            if (response.data == true) {
              this.open = false;
              this.$modal.msgSuccess(this.$t("批量处理成功"));
              this.getList();
            } else {
              this.open = false;
              this.$modal.msgSuccess(this.$t("批量处理失败"));
            }
          });
        }
      });
    },
    cancel() {
      this.title = "";
      this.open = false;
    },
    handleSelectionChange(selection) {
      //表格多选函数 lanbm 2024-05-20 add
      //row.processInstance.id
      this.BpmNameList = selection.map((item) => item.processInstance.name);
      this.ids = selection.map((item) => item.processInstance.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeCreateTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 处理审批按钮 */
    handleAudit(row) {
      //lanbm 2024-06-07 添加根据不同的业务打开不同的展示页面
      let name1 = row.processInstance.name;
      if (name1.includes("银行实收明细核销审核")) {
        this.$router.push({
          path: "/bpm/process-instance/detail2",
          query: { id: row.processInstance.id },
        });
      } else {
        this.$router.push({
          path: "/bpm/process-instance/detail",
          query: { id: row.processInstance.id },
        });
      }
    },
    handleCancel(row) {
      const id = row.id;
      this.$prompt(this.$t("请输入取消原因？"), this.$t("取消流程"), {
        type: "warning",
        confirmButtonText: this.$t("确定"),
        cancelButtonText: this.$t("取消"),
        inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/, // 判断非空，且非空格
        inputErrorMessage: this.$t("取消原因不能为空"),
      })
        .then(({ value }) => {
          return cancelProcessInstance(id, value);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess(this.$t("取消成功"));
        });
    },
  },
};
</script>
