<template>
  <div class="app-container"><!--从这一层开始嵌入页面-->
    <el-card>
      <el-form label-width="80px">
        <div class="search">
          <div class="sl">
            <el-form-item label="流程标题">
              <el-input
                placeholder="输入流程标题"
                v-model.trim="queryParams.title"
                clearable
                @clear="handleQuery"
              />
            </el-form-item>
          </div>
          <div class="sr">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh-left" @click="resetQuery">重置</el-button>
          </div>
        </div><!--search 搜索-->
      </el-form><!--el-form-->
    </el-card><!--el-card-->
    <el-card>
      <el-tabs v-model="activeName"  @tab-click="state">
        <el-tab-pane :label="'待办('+ statustotal+')'" name="taskToDo">
          <el-table :data="postList" style="width: 100%" height="529" v-loading="loading">
            <el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
            <el-table-column prop="procDefName" label="流程类型" width="110px" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="title" label="流程标题" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="curActDefName" label="当前环节" width="95px" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="prevActDefName" label="上一环节" width="100px" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span v-if="!scope.row.prevActDefName">/</span>
                <span v-else>{{ scope.row.prevActDefName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="sendUserName" label="上一环节处理人" width="115px" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="startUserName" label="发起人" width="70px" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="sendTime" label="接收时间" width="95px">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.sendTime,'{y}-{m}-{d}')}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80px" >
              <template slot-scope="scope">
                <el-button type="text" icon="el-icon-info" @click="handleDeal(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table><!--el-table-->
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getListData"
          />
        </el-tab-pane><!--el-tab-pane-->
        <el-tab-pane :label="'已办('+doneTotal+')'" name="taskDealed">
          <el-table :data="postList" style="width: 100%" height="529" v-loading="loading">
            <el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
            <el-table-column prop="procDefName" label="流程类型" width="110px" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="title" label="流程标题" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="curActDefName" width="100px" label="处理环节"></el-table-column>
            <el-table-column label="上一环节" width="100px" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span v-if="!scope.row.prevActDefName">/</span>
                <span v-else>{{ scope.row.prevActDefName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="sendUserName" label="上一环节处理人" width="115px" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="startUserName" label="发起人" width="70px" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="sendTime" label="接收时间" width="95px">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.sendTime,'{y}-{m}-{d}')}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100" >
              <template slot-scope="scope">
                <el-button type="text" icon="el-icon-info" @click="handleDeal(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table><!--el-table-->
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getListData"
          />
        </el-tab-pane><!--el-tab-pane-->
        <el-tab-pane :label="'办结('+finishedTotal+')'" name="taskFinish">
          <el-table :data="postList" style="width: 100%" height="529" v-loading="loading">
            <el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
            <el-table-column prop="procDefName" label="流程类型" width="110px" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="title" label="流程标题"  :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="startUserName" label="发起人" width="95px" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="startTime" label="发起时间" width="95px">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.startTime,'{y}-{m}-{d}')}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="sendTime" label="接收时间" width="95px">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.sendTime,'{y}-{m}-{d}')}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80px" >
              <template slot-scope="scope">
                <el-button type="text" icon="el-icon-info" @click="handleDeal(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table><!--el-table-->
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getListData"
          />
        </el-tab-pane><!--el-tab-pane-->
      </el-tabs><!--el-tabs-->
    </el-card>
    <!-- 流程处理抽屉组件 -->
    <DealDrawer v-if="dealDrawerShow" ref="dealDrawer" @closeDrawer="handleCloseChange"></DealDrawer>
  </div>
</template>

<script>
import { workflowToDoList } from "@/api/my_business/workflow";
import DealDrawer from "@/components/DealDrawer";
import {  getUserMsgCount } from "@/api/message/message"

export default {
  name: "Post",
  dicts: ["sys_normal_disable", "sys_operterType"],
  components: {
    DealDrawer
  },
  data() {
    return {
      pageSizes: [10,20,50,100],
      dealDrawerShow: false,
      boxClass: false,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      postList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNumber: 1,
        pageSize: 10,
        title: "",
        status: 1,
      },
      // 表单校验
      rules: {
        postName: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
        postCode: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
        postSort: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
      },
      doneTotal: 0,
      finishedTotal: 0,
      taskData: [], // 任务数据
      deptOptions: [],
      drawer: false,
      taskFormData: {},
      varChangeColor1: true,
      varChangeColor2: false,
      pListData: {},
      statustotal: "",
      adUpdateDisuseDetails: "",
      userInfo: this.$store.getters.userInfo,
      activeName: "taskToDo",
      classLevelOptions: [],
    };
  },
  created() {
    // 初始化获取待办清单
    this.getListData()
    // 获取已办、办结统计页签数量
    this.getOtherActiveCount()
  },
  methods: {
    // 流程处理事件
    handleDeal(row) {
      this.dealDrawerShow = true;
      let flowUrl = this.buildFlowUrl(row)
      this.$nextTick(() => {
        this.$refs.dealDrawer.init(flowUrl);
      });

      //
    },
    buildFlowUrl(row) {
      let res = row.url;
      //待办=1、已办=2、办结=3
      res += "&invokeFrom=list&status="+row.status
      return res;
    },
    getOtherActiveCount() {
      // 获取已办统计数量
      this.loading = true
      let params = {
        pageNumber: 1,
        pageSize: 10,
        status: 2,
      };
      workflowToDoList(params).then((response) => {
        this.doneTotal = response.data.totalCount || 0;
        this.loading = false
      });
      // 获取办结统计数量
      this.loading = true
      let params2 = {
        pageNumber: 1,
        pageSize: 10,
        status: 3,
      };
      workflowToDoList(params2).then((response) => {
        this.finishedTotal = response.data.totalCount || 0;
        this.loading = false
      });
    },
    /** 查询列表 */
    getListData() {
      let self = this
      self.loading = true;
      self.postList = [];
      workflowToDoList(self.queryParams).then((response) => {
        if (self.activeName == "taskToDo") {
          // 待办
          self.statustotal = response.data.totalCount;
          // this.$store.commit("SET_THINGNUMBER", response.data.totalCount || 0);
          self.total = response.data.totalCount;
        }
        if (self.activeName == "taskDealed") {
          // 已办
          self.doneTotal = response.data.totalCount;
          self.total = response.data.totalCount;
        }
        if (self.activeName == "taskFinish") {
          // 办结
          self.finishedTotal = response.data.totalCount;
          self.total = response.data.totalCount;
        }

        self.postList = response.data.result;
        setTimeout(function () {
          self.loading = false;
        }, 500);

      }).catch(err => {
        console.info("err=============", err)
        setTimeout(function () {
          self.loading = false;
        }, 500);
      });
    },
    // 取消按钮
    handleCloseChange() {
      this.dealDrawerShow = false
      getUserMsgCount(this.$store.getters.userId).then(res => {
        this.$store.commit("SET_UNREAD_MSG_NUMBER", res.data);
      });
      this.getListData();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNumber = 1;
      this.getListData();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.pageNumber = 1;
      this.queryParams.pageSize = 10;
      this.queryParams.title = "";
      this.handleQuery();
    },
    /** 详情按钮操作 */
    handleDetails(row) {

    },
    state(tab) {
      let p = Number(tab.index) + 1;
      if (p == 1) {
        this.varChangeColor1 = true;
        this.varChangeColor2 = false;
      }
      if (p == 2 || p == 3) {
        this.varChangeColor1 = false;
        this.varChangeColor2 = true;
      }
      this.queryParams.status = p;
      this.queryParams.pageNumber = 1;
      this.queryParams.title = "";
      this.total = 0;
      this.getListData();
      // this.getshulian();
    },
  },
};
</script>
