<template>
  <section class="flow-approve-box">
    <div class="flow-content">
      <!-- 搜索区域 -->
      <div class="search-box">
        <div class="search-segment" style="flex: 1">
          <a-input
            v-model="query.processName"
            placeholder="流程名称"
            allow-clear
            size="small"
            :maxlength="16"
            @pressEnter="onSearch"
          >
            <a-icon slot="suffix" type="search" class="cursor-pointer" @click="onSearch" />
          </a-input>
        </div>
        <div class="search-segment">
          <a-tooltip title="重置">
            <a-button size="small" @click="onSearchReset">
              <a-icon type="reload" />
            </a-button>
          </a-tooltip>
        </div>
        <div class="search-segment">
          <a-popover
            placement="rightTop"
            trigger="click"
            overlay-class-name="flow-search-more-popover"
          >
            <template slot="content">
              <div>
                <div class="search-more-title">高级筛选</div>
                <div class="search-more-box">
                  <a-select
                    v-model="query.groupId"
                    class="column"
                    allow-clear
                    placeholder="流程分组"
                    size="small"
                    :options="groupOptions"
                    :filter-option="false"
                  />
                  <a-select
                    v-model="query.instanceState"
                    class="column"
                    allow-clear
                    placeholder="流程状态"
                    size="small"
                    :options="statusOptions"
                    :filter-option="false"
                  />
                </div>
                <div class="search-more-action">
                  <a-button size="small" @click="onSearchReset">重置</a-button>
                  <a-button type="primary" size="small" @click="onSearch">检索</a-button>
                </div>
              </div>
            </template>
            <a-button size="small">
              <a-icon type="filter" />
            </a-button>
          </a-popover>
        </div>
      </div>

      <!-- 流程列表 -->
      <div class="flow-list-box" ref="scrollBox" @scroll.passive="handleScroll">
        <div v-if="flowInstances.length === 0" class="empty-box">
          <a-empty />
        </div>
        <div
          v-for="(instance, index) in flowInstances"
          :key="index"
          class="item-box"
          :class="[
            selectedFlow && selectedFlow.instanceId === instance.instanceId ? 'item-box-choosed' : '',
            index === flowInstances.length - 1 ? 'mb-0' : ''
          ]"
          @click="onFlowInstClicked(instance)"
        >
          <FlowCard :flow-instance="instance" />
        </div>
        <div v-if="loading" class="text-center">加载中...</div>
        <div v-if="!haveMore" class="text-center">没有更多了</div>
      </div>
    </div>

    <!-- 流程详情 -->
    <div class="flow-detail-content">
      <FlowDetail
        v-model="selectedFlow"
        :cancelable="true"
        :actionable="false"
        @refresh="refresh"
      />
    </div>
  </section>
</template>

<script>
import FlowCard from '../component/flowCard.vue';
import FlowDetail from '@/views/workFlow/workspace/component/flowDetail.vue';
import { STATUS_LIST } from '@/views/workFlow/common/flowConstant';
import { getAction, postAction } from '@api/manage'

export default {
  name: 'About',
  components: {
    FlowCard,
    FlowDetail
  },
  data() {
    return {
      query: {
        processName: '',
        instanceState: null,
        groupId: null,
        pageNum: 1,
        pageSize: 10
      },
      groupOptions: [],
      flowInstances: [],
      selectedFlow: {},
      loading: false,
      haveMore: true,
      statusOptions: STATUS_LIST.map(item => ({
        label: item.name,
        value: item.value
      }))
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    onSearchReset() {
      this.query = {
        processName: '',
        instanceState: null,
        groupId: null,
        pageNum: 1,
        pageSize: 10
      };
      this.haveMore = true;
      this.loadData();
    },
    onSearch() {
      this.query.pageNum = 1;
      this.loadData();
    },
    onFlowInstClicked(instance) {
      this.selectedFlow = instance;
    },
    handleScroll() {
      const container = this.$refs.scrollBox;
      if (container.scrollTop + container.clientHeight + 10 >= container.scrollHeight) {
        this.loadFlowInsts();
      }
    },
    loadFlowInsts() {
      if (!this.haveMore || this.loading) return;
      this.query.pageNum++;
      this.loadData();
    },
    loadData() {
      this.loading = true;
      postAction('/workflow/workspace/process/ccList',this.query).then(res => {
        const list = res.result.records || [];
        if (this.query.pageNum === 1) {
          this.flowInstances = list;
        } else {
          this.flowInstances = this.flowInstances.concat(list);
        }
        this.haveMore = this.flowInstances.length < res.result.total;
        this.loading = false;
      });
      getAction('/workflow/group/options').then(res => {
        this.groupOptions = res.result;
      });
    },
    refresh() {
      this.loadData();
    }
  }
};
</script>

<style scoped lang="less">
@import '../base.less';

.flow-approve-box {
  display: flex;
  flex-direction: row;
}
.flow-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.search-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}
.search-segment {
  margin-right: 12px;
}
.flow-list-box {
  flex: 1;
  overflow-y: auto;
  height: 500px;
}
.text-center {
  text-align: center;
  margin: 12px 0;
}
</style>
