<template>
  <div id="containt">
    <div class="filter-btns">
      <el-select
        class="f-btn"
        v-model="formData.dateRange"
        @change="handleSelectChange"
        clearable
        style="width: 128px !important"
      >
        <el-option :label="$t1('本日')" :value="1"></el-option>
        <el-option :label="$t1('本周')" :value="2"></el-option>
        <el-option :label="$t1('本月')" :value="3"></el-option>
        <el-option :label="$t1('本年')" :value="4"></el-option>
      </el-select>
      <el-select
        class="f-btn"
        v-model="formData.stat"
        :placeholder="$t1('全部状态')"
        clearable
        @clear="formData.stat = null"
        @change="handleSelectChange"
        style="width: 128px !important"
      >
        <el-option :label="$t1('审核中')" :value="1"></el-option>
        <el-option :label="$t1('已完成')" :value="2"></el-option>
        <el-option :label="$t1('已驳回')" :value="3"></el-option>
      </el-select>
      <el-select
        class="f-btn"
        v-model="formData.objTypeCode"
        :placeholder="$t1('流程类型')"
        clearable
        @change="handleSelectChange"
        style="width: 128px !important"
      >
        <el-option
          v-for="(item, index) in objTypeList"
          :key="index"
          :label="item.objTypeName"
          :value="item.objTypeCode"
        ></el-option>
      </el-select>
      <el-input
        v-model="formData.name"
        :placeholder="$t1('流程主题')"
        style="width: 128px !important"
      ></el-input>
      <span class="button-sty">
        <el-date-picker
          v-model="formData.startStartTime"
          type="date"
          :placeholder="$t1('启动时间（开始）')"
          size="small"
          clearable
          value-format="yyyy-MM-dd"
          :picker-options="$baseStartPickerOptions(formData.endStartTime)"
          style="width: 128px !important"
        ></el-date-picker>
        <span>-</span>
        <el-date-picker
          v-model="formData.endStartTime"
          type="date"
          :placeholder="$t1('启动时间（结束）')"
          size="small"
          clearable
          value-format="yyyy-MM-dd"
          :picker-options="$baseEndPickerOptions(formData.startStartTime)"
          style="width: 128px !important"
        ></el-date-picker>
      </span>
      <span class="button-sty">
        <el-date-picker
          v-model="formData.startEndTime"
          type="date"
          :placeholder="$t1('结束时间（开始）')"
          size="small"
          clearable
          value-format="yyyy-MM-dd"
          :picker-options="$baseStartPickerOptions(formData.endEndTime)"
          style="width: 128px !important"
        ></el-date-picker>
        <span>-</span>
        <el-date-picker
          v-model="formData.endEndTime"
          type="date"
          :placeholder="$t1('结束时间（结束）')"
          size="small"
          clearable
          value-format="yyyy-MM-dd"
          :picker-options="$baseEndPickerOptions(formData.startEndTime)"
          style="width: 128px !important"
        ></el-date-picker>
      </span>
      <el-button
        type="primary"
        plain
        class="button-sty"
        @click="resetEvent"
        icon="el-icon-brush"
      >
        {{ $t1("重置") }}
      </el-button>
      <el-button
        type="warning"
        size="small"
        class="button-sty"
        icon="el-icon-search"
        @click="handleSelectChange"
        >{{ $t1("搜索") }}
      </el-button>
    </div>
    <div class="sum-statistics">
      <div class="item">
        <p>总流程数</p>
        <b>{{ countData.total || 0 }}</b>
        <!-- <p class="f-gray">较上月增长 12%</p> -->
        <i class="ico iconfont icon-liuchengshu"></i>
      </div>
      <div class="item">
        <p>快速处理</p>
        <b>{{ countData.count_1 || 0 }}</b>
        <p class="f-gray"><1天完成</p>
        <i class="ico iconfont icon-kuaisuchuli"></i>
      </div>
      <div class="item">
        <p>正常处理</p>
        <b>{{ countData.count_1_3 || 0 }}</b>
        <p class="f-gray">1-3天完成</p>
        <i class="ico iconfont icon-zhengchangchuli"></i>
      </div>
      <div class="item">
        <p>缓慢处理</p>
        <b>{{ countData.count_3_7 || 0 }}</b>
        <p class="f-gray">3-7天完成</p>
        <i class="ico iconfont icon-huanmanchuli"></i>
      </div>
      <div class="item">
        <p>超时处理</p>
        <b>{{ countData.count_7 || 0 }}</b>
        <p class="f-gray">>7天完成</p>
        <i class="ico iconfont icon-chaoshichuli"></i>
      </div>
    </div>
    <el-row style="margin: 0 -5px">
      <el-col :span="16">
        <el-card class="box-style1">
          <div slot="header" class="clearfix">
            <span>流程详情列表</span>
          </div>
          <div style="height: 100%">
            <vxe-grid ref="table-m1" v-bind="vxeOption" :data="tableData">
              <template #form>
                <div class="clearfix screen-btns">
                  <div class="fl">
                    <base-table-export
                      :option="{
                        title: $t1('流程处理耗用时间查询'),
                        targetRef: 'table-m1',
                      }"
                      :parent-target="_self"
                    />
                  </div>
                  <div class="fr">
                    <!-- <vxe-button icon="el-icon-brush" class="button-sty" @click="resetEvent" type="text" status="primary"
                                plain>{{ $t1('重置') }}
                    </vxe-button>
                    <vxe-button status="warning" icon="el-icon-search" class="button-sty" @click="searchEvent">
                      {{ $t1('搜索') }}
                    </vxe-button> -->
                  </div>
                </div>
              </template>
            </vxe-grid>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-style1">
          <div slot="header" class="clearfix">
            <span>节点详情</span>
          </div>
          <div class="node-box">
            <div class="info" v-if="currentRow.name">
              <p class="tit">{{ currentRow.name }}</p>
              <p>总耗时: {{ currentRow.duration }}</p>
              <el-tag type="warning" v-if="currentRow.stat === 1">{{
                $t2("审核中", "components.wf.wfStatus1")
              }}</el-tag>
              <el-tag type="success" v-if="currentRow.stat === 2">{{
                $t2("已完成", "components.wf.wfStatus3")
              }}</el-tag>
              <el-tag type="danger" v-if="currentRow.stat === 3">{{
                $t2("已驳回", "components.wf.wfStatus2")
              }}</el-tag>
            </div>
            <el-steps direction="vertical" :active="1" class="step-box3">
              <el-step v-for="(row, index) in nodeList" :key="index">
                <div slot="title">
                  <div class="name">{{ row.task_name }}</div>
                  <div class="a-time">耗时: {{ row.duration }}</div>
                </div>
                <div slot="description">
                  <p>
                    <span class="use">{{ row.candidate_names }}</span>
                    <span class="time">{{ row.approve_time }}</span>
                  </p>
                  <p v-if="taskStatuses[row.type]" :class="taskStatuses[row.type].class">
                    {{ taskStatuses[row.type].value }}
                  </p>
                  <p v-if="row.opinion">审批意见：{{ row.opinion }}</p>
                </div>
              </el-step>
            </el-steps>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <wfContentDialog
      v-if="showWfDialog"
      :visible.sync="showWfDialog"
      :option.sync="wfContentOption"
    ></wfContentDialog>
  </div>
</template>

<script>
import scriptHttpMixin from "@base/components/xform/mixins/scriptHttp";
import wfContentDialog from "@base/views/user/wf/wf_manage/wfContentDialog";
export default {
  name: "wf_report:index",
  mixins: [scriptHttpMixin],
  components: {
    wfContentDialog,
  },
  data() {
    return {
      vxeOption: {},
      serviceName: "sf-cloud-user",
      tableData: [],
      countData: {},
      currentRow: {},
      nodeList: [],

      taskStatuses: {
        start: {
          class: "f-blue",
          value: this.$t2("开始", "components.wf.startStatus"),
        },
        approve: {
          class: "f-orgn",
          value: this.$t2("待审批", "components.wf.approveStatus"),
        },
        submit: {
          class: "f-green",
          value: this.$t2("同意", "components.wf.submitStatus"),
        },
        reject: {
          class: "f-red",
          value: this.$t2("驳回", "components.wf.rejectStatus"),
        },
        transfer: {
          class: "f-green",
          value: this.$t2("转办", "components.wf.transferStatus"),
        },
        addIncreaseSign: {
          class: "f-green",
          value: this.$t2("加签", "components.wf.addIncreaseSignStatus"),
        },
        revoke: {
          class: "f-red",
          value: this.$t2("撤回", "components.wf.revokeStatus"),
        },
        end: {
          class: "f-gray",
          value: this.$t2("结束", "components.wf.endStatus"),
        },
      },
      formData: {
        dateRange: 3,
        stat: null,
      },
      objTypeList: [],

      showWfDialog: false,
      wfContentOption: {},
    };
  },
  mounted() {
    this.initObjTypeList();
    this.initTableList();
    this.loadWfSummaryCount();
  },
  methods: {
    openWfDialog(row) {
      this.wfContentOption = {
        objId: row.obj_id,
        url: row.url,
        objTypeCode: row.obj_type_code,
        formCode: row.formCode,
      };
      this.showWfDialog = true;
    },
    searchEvent() {
      this.$refs["table-m1"].commitProxy("reload");
    },
    resetEvent() {
      this.formData = {};
      this.$refs["table-m1"].commitProxy("reload");
    },
    initTableList() {
      let that = this;
      let formCode = this.$route.query.formCode;
      let tableOption = {
        vue: this,
        tableRef: "table-m1",
        tableName: "user-wf-report-index-m1",
        path: `/${this.serviceName}/bd_api/intf/wfSummaryList`,
        param: () => {
          return {
            ...this.formData,
          };
        },
        columns: [
          { type: "checkbox", width: 48, resizable: false, fixed: "left" },
          {
            field: "obj_type_name",
            title: this.$t1("流程类型"),
            width: 150,
            fixed: "left",
          },
          { field: "name", title: this.$t1("流程主题"), width: 180 },
          {
            field: "stat",
            title: "状态",
            width: 150,
            slots: {
              default: ({ row }) => {
                if (row.stat === 1) {
                  return [
                    <el-tag type="warning">
                      {this.$t2("审核中", "components.wf.wfStatus1")}
                    </el-tag>,
                  ];
                } else if (row.stat === 2) {
                  return [
                    <el-tag type="success">
                      {this.$t2("已完成", "components.wf.wfStatus2")}
                    </el-tag>,
                  ];
                } else if (row.stat === 3) {
                  return [
                    <el-tag type="info">
                      {this.$t2("已驳回", "components.wf.wfStatus3")}
                    </el-tag>,
                  ];
                }
              },
            },
          },
          { field: "task_name", title: this.$t1("当前节点"), width: 180 },
          {
            field: "candidate_names",
            title: this.$t1("当前处理人"),
            width: 180,
            slots: {
              default: ({ row }) => {
                return [
                  <div class="txt-mid">
                    <i class="iconfont icon-dangqianchuliren"></i>
                    <sapn>{row.candidate_names}</sapn>
                  </div>,
                ];
              },
            },
          },
          { field: "start_time", title: this.$t1("启动时间"), width: 150 },
          { field: "end_time", title: this.$t1("结束时间"), width: 150 },
          {
            field: "duration",
            title: this.$t1("总耗时"),
            width: 180,
            slots: {
              default: ({ row }) => {
                return [
                  <div class="txt-mid">
                    <i class="iconfont icon-shijian"></i>
                    <sapn> {row.duration}</sapn>
                  </div>,
                ];
              },
            },
          },
          {
            field: "task_duration",
            title: this.$t1("当前节点耗时"),
            width: 180,
            slots: {
              default: ({ row }) => {
                return [
                  <div class="txt-mid">
                    <i class="iconfont icon-shijian"></i>
                    <sapn> {row.task_duration}</sapn>
                  </div>,
                ];
              },
            },
          },
          { field: "approver_num", title: this.$t1("审批总人数"), width: 180 },
          { field: "node_num", title: this.$t1("审批节点数量"), width: 180 },
          {
            width: 90,
            fixed: "right",
            title: "",
            sortable: false,
            slots: {
              default: ({ row }) => {
                return [
                  <a
                    href="javascript:void(0);"
                    class="a-link"
                    onclick={() => {
                      this.loadWfSummaryNode(row);
                    }}
                  >
                    <el-tooltip
                      enterable={false}
                      effect="dark"
                      content={this.$t1("查看详情")}
                      placement="top"
                      popper-class="tooltip-skin"
                    >
                      <i class="iconfont icon-dianji" />
                    </el-tooltip>
                  </a>,
                  <a
                    href="javascript:void(0);"
                    class="a-link"
                    onclick={() => {
                      this.openWfDialog(row);
                    }}
                  >
                    <el-tooltip
                      enterable={false}
                      effect="dark"
                      content={this.$t1("查看单据")}
                      placement="top"
                      popper-class="tooltip-skin"
                    >
                      <i class="el-icon-edit" />
                    </el-tooltip>
                  </a>,
                ];
              },
            },
          },
        ],
      };
      this.$vxeTableUtil.initVxeTable(tableOption).then((opts) => {
        this.vxeOption = opts;
      });
    },
    loadWfSummaryCount() {
      this.$http({
        url: `/${this.serviceName}/bd_api/intf/wfSummaryCount`,
        method: "post",
        data: {
          ...this.formData,
        },
        success: (res) => {
          this.countData = res.objx || {};
        },
      });
    },
    loadWfSummaryNode(row) {
      this.$http({
        url: `/${this.serviceName}/bd_api/intf/wfSummaryNode`,
        method: "post",
        data: {
          proc_inst_id: row.proc_inst_id,
        },
        success: (res) => {
          this.currentRow = row;
          this.nodeList = res.objx || [];
        },
      });
    },
    clearWfSummaryNode() {
      this.currentRow = {};
      this.nodeList = [];
    },
    handleSelectChange() {
      if (this.formData.dateRange === "") {
        this.formData.dateRange = null;
      }
      if (this.formData.stat === "") {
        this.formData.stat = null;
      }
      this.loadWfSummaryCount();
      this.searchEvent();
      this.clearWfSummaryNode();
    },
    initObjTypeList() {
      this.$http({
        url: `/${this.serviceName}/wf_info/listGroupPage`,
        method: "post",
        data: {
          type: 99,
        },
        success: (res) => {
          this.objTypeList = res?.objx?.records || [];
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
#containt {
  background: none;
  padding: 10px 0 0;
  box-shadow: none;
}
.filter-btns {
  .f-btn {
    margin-right: 25px;
  }
}
.sum-statistics {
  display: flex;
  margin: 10px -5px 0;
  .item {
    flex: 1;
    background: #fff;
    border: solid 1px #e9e9e9;
    border-radius: 6px;
    margin: 0 5px;
    padding: 10px 14px 8px;
    font-size: 12px;
    position: relative;
    .ico {
      position: absolute;
      top: 50%;
      right: 18px;
      width: 34px;
      height: 34px;
      margin-top: -17px;
      border-radius: 6px;
      text-align: center;
      line-height: 35px;
      font-size: 16;
      background: #eff6ff;
      color: #2f6ffc;
    }
    p {
      margin-bottom: 0;
    }
    > b {
      font-size: 26px;
      margin: 8px 0 3px;
      display: inline-block;
      font-weight: 400;
    }
    &:nth-child(2) .ico {
      background: #faf5ff;
      color: #ab3dfa;
    }
    &:nth-child(3) .ico {
      background: #f0fdf4;
      color: #0aa945;
    }
    &:nth-child(4) .ico {
      background: #fff7ed;
      color: #f5520b;
    }
    &:nth-child(5) .ico {
      background: #fef2f2;
      color: #e70a15;
    }
  }
}
::v-deep .box-style1 {
  margin: 10px 5px 0;
  .el-card__body {
    height: calc(100vh - 254px);
  }
}
.node-box {
  .info {
    border: solid 1px #e6ebf5;
    background: #f6faff;
    border-radius: 4px;
    padding: 10px 14px;
    position: relative;
    font-size: 12px;
    color: #666666;
    margin-bottom: 8px;
    p {
      margin-bottom: 0;
    }
    .el-tag {
      position: absolute;
      right: 12px;
      top: 50%;
      margin-top: -14px;
    }
    .tit {
      font-size: 13px;
      color: #212121;
      margin-bottom: 5px;
    }
  }
  .el-steps {
    height: calc(100vh - 326px);
    overflow: auto;
    padding-right: 10px;
  }
}
</style>
