<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="流程名称"
            allowClear
            size="small"
            @pressEnter="onSearch"
            :maxlength="16"
          >
            <a-icon slot="suffix" type="search" @click="onSearch" class="cursor-pointer" />
          </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"
            overlayClassName="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"
                    allowClear
                    placeholder="流程分组"
                    :options="groupOptions"
                    size="small"
                    class="column"
                  />
                  <a-select
                    v-model="query.instanceState"
                    allowClear
                    placeholder="流程状态"
                    :options="statusOptions"
                    size="small"
                    class="column"
                  />
                </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">
        <div v-if="flowInstances.length === 0" class="empty-box">
          <a-empty />
        </div>
        <div
          v-else
          ref="scrollContainer"
          style="height: 100%; overflow-y: auto"
          @scroll="handleScroll"
        >
          <div
            v-for="(instance, index) in flowInstances"
            :key="index"
            class="item-box"
            :class="[
              selectedFlow.instanceId === instance.instanceId ? 'item-box-choosed' : '',
              index === flowInstances.length - 1 ? 'mb-0' : ''
            ]"
            @click="onFlowInstClicked(instance)"
          >
            <FlowCard :flowInstance="instance" />
          </div>
          <div v-if="loading" class="text-center">加载中...</div>
          <div v-if="!haveMore && !loading" class="text-center">没有更多了</div>
        </div>
      </div>
    </div>

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

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

export default {
  name: 'Apply',
  components: {
    FlowCard,
    FlowDetail
  },
  data() {
    return {
      query: {
        processName: '',
        instanceState: null,
        groupId: null,
        pageNum: 1,
        pageSize: 10
      },
      flowInstances: [],
      selectedFlow: {},
      haveMore: true,
      loading: false,
      groupOptions: [],
      statusOptions: STATUS_LIST.map(item => ({
        label: item.name,
        value: item.value
      }))
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    onSearch() {
      this.query.pageNum = 1;
      this.loadData();
    },
    onSearchReset() {
      this.query = {
        processName: '',
        instanceState: null,
        groupId: null,
        pageNum: 1,
        pageSize: 10
      };
      this.haveMore = true;
      this.loadData();
    },
    onFlowInstClicked(instance) {
      this.selectedFlow = instance;
      console.log("*******selectEdFlow",this.selectedFlow)
    },
    loadFlowInsts() {
      this.query.pageNum++;
      this.loadData();
    },
    loadData() {
      this.haveMore = true;
      this.loading = true;
      postAction('/workflow/workspace/process/applyList',this.query).then(res => {
        const list = res.result.records || [];
        if (res.result.current === 1) {
          this.flowInstances = list;
        } else {
          this.flowInstances.push(...list);
        }
        if (this.flowInstances.length >= res.result.total) {
          this.haveMore = false;
        }
        this.loading = false;
      });
      getAction('/workflow/group/options').then(res => {
        this.groupOptions = res.result || [];
      });
    },
    handleScroll(e) {
      const el = e.target;
      if (
        this.haveMore &&
        !this.loading &&
        el.scrollTop + el.clientHeight + 20 >= el.scrollHeight
      ) {
        this.loadFlowInsts();
      }
    },
    refresh() {
      this.loadData();
    }
  }
};
</script>

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