<template>
  <section class="flow-approve-box">
    <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
              :maxLength="16"
              size="small"
              @pressEnter="onSearch"
            >
              <template #suffix>
                <i class="x-iconfont x-icon-search cursor-pointer" @click="onSearch"></i>
              </template>
            </a-input>
          </div>
          <div class="search-segment">
            <a-tooltip placement="top">
              <template slot="title">重置</template>
              <a-button size="small" @click="onSearchReset">
                <i class="x-iconfont x-icon-refresh-right"></i>
              </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"
                      class="column"
                      allow-clear
                      placeholder="流程分组"
                      :options="groupOptions"
                      size="small"
                    />
                    <a-select
                      v-model="query.instanceState"
                      class="column"
                      allow-clear
                      placeholder="流程状态"
                      :options="statusOptions"
                      size="small"
                    />
                  </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">
                <i class="x-iconfont x-icon-filter"></i>
              </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
            class="flow-list-scroll"
            v-infinite-scroll="loadFlowInsts"
            :infinite-scroll-disabled="loading || !haveMore"
            infinite-scroll-distance="10"
          >
            <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 :flow-instance="instance" />
            </div>
            <div v-if="loading" class="text-center">加载中...</div>
            <div v-if="!haveMore" class="text-center">没有更多了</div>
          </div>
        </div>
      </div>

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

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

export default {
  name: 'Todo',
  components: {
    FlowDetail,
    FlowCard
  },
  data() {
    return {
      query: {
        processName: '',
        instanceState: null,
        groupId: null,
        pageNum: 1,
        pageSize: 10
      },
      groupOptions: [],
      statusOptions: STATUS_LIST.map(item => ({
        label: item.name,
        value: item.value
      })),
      flowInstances: [],
      selectedFlow: {},
      haveMore: true,
      loading: false
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    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();
    },
    onSearch() {
      this.query.pageNum = 1;
      this.loadData();
    },
    loadData() {
      this.haveMore = true;
      this.loading = true;
      postAction('/workflow/workspace/process/todoTask',this.query).then(res => {
        const list = res.result.records || [];
        if (res.result.current === 1) {
          this.flowInstances = list;
        } else {
          this.flowInstances = this.flowInstances.concat(list);
        }
        if (this.flowInstances.length >= res.result.total) {
          this.haveMore = false;
        }
        this.loading = false;
      });
      getAction('/workflow/group/options').then(res => {
        this.groupOptions = res.result;
      });
    },
    refresh() {
      this.loadData();
    }
  }
};
</script>

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