<template>
  <div :class="$style.warpper">
    <sd-search-form
      v-if="onlListColumnDefs.length"
      v-show="showAdvSearch"
      ref="searchForm"
      :onl-list-column-defs="onlListColumnDefs"
      :daochushow="daochushow"
      @search="(value) => (customFilterExpressions = value)"
      @close="() => (advSearchBtnActived = false)"
      @fnexport="fnexport"
    />
    <a-card>
      <a-tabs
        v-model="activeKey"
        :class="{ ['sd-has-table']: true, [$style.hiddenTab]: tabs.length === 1 }"
      >
        <a-tab-pane v-for="{ key, tab, filterExpressions } in computeTabs" :key="key" :tab="tab">
          <sd-data-table
            v-if="formId && pageId"
            :ref="key"
            data-url="api/framework/v1/page/businessList"
            :process-req="processReq"
            :columns="columns"
            :actions="actionsCompute"
            :filter-expressions="filterExpressions"
            :search-fields="searchFields"
            :class="{ [$style.fuzzyAdvSearch]: fuzzyAndAdvSearch }"
            :scroll="{ x: scrollX }"
            :show-selection="showSelection"
            @rowClick="openTask"
          >
            <!-- 既有高级查询，又有模糊查询，显示高级查询图标 -->
            <template v-if="fuzzyAndAdvSearch" slot="headerPrefix">
              <sd-advance-search-btn
                :actived="advSearchBtnActived"
                :class="$style.advsearchbtn"
                @click="switchSearch"
              />
            </template>
          </sd-data-table>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <component :is="actionComponent" ref="actionComponent" />
  </div>
</template>

<script>
import qs from 'qs'
import todoListService from '@/todo/todo-list-service'
import crossWindowWatcher from '@/common/services/cross-window-watcher'
import SdListMixin from './sd-list-mixin.vue'
import components from './_import-components/sd-task-list-import'
import sdSearchForm from './sd-search-form'
export default {
  name: 'SdTaskList',
  metaInfo() {
    return {
      title: this.pageTitle,
    }
  },
  components: { ...components, sdSearchForm },
  mixins: [SdListMixin],
  props: {
    // 允许新建
    creatable: {
      type: Boolean,
      default: true,
    },
    filter: {
      type: Array,
      default: () => [],
    },
    daochushow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {}
  },
  computed: {
    actionsCompute() {
      const actions = [
        {
          label: '导出',
          id: 'export',
          permission: this.formId + '-export',
          callback: () => {
            this.$refs[this.activeKey][0].exportExcel()
          },
        },
      ]
      if (this.creatable) {
        actions.push({
          label: '新建',
          id: 'new',
          type: 'primary',
          permission: this.formId + '-create',
          callback: this.createFlow,
        })
      }
      return actions.concat(this.configButtons).filter((btn) => {
        return !this.readonly || btn.type === 'inline'
      })
    },
    searchFields() {
      if (this.showfuzzySearch) {
        return ['title']
      }
      return []
    },
  },
  watch: {
    moduleId() {
      this.loadListDef(true)
    },
  },
  created() {
    this.loadListDef(true)
  },
  methods: {
    openTask(record) {
      todoListService.openTaskItem(record)
    },
    createFlow() {
      const extParams = this.extParams ? '&' + qs.stringify(this.extParams) : ''
      crossWindowWatcher
        .waitForChanged(`/sd-flow-guide?moduleId=${this.moduleId}${extParams}`)
        .then((refreshFlag) => {
          if (refreshFlag) {
            this.$refs[this.activeKey][0].refresh(true)
          }
        })
      return Promise.resolve()
    },
    // 切换查询（高级查询、模糊查询）
    switchSearch() {
      if (this.advSearchBtnActived) {
        // 显示了高级查询，则重置
        this.$refs.searchForm.reset()
      } else {
        // 未显示高级查询，则置空模糊查询
        this.showfuzzySearch = false
        this.tabs.forEach((tab) => {
          this.$refs[tab.key]?.[0]?.onSearchChange('')
        })
        this.$nextTick(() => {
          this.showfuzzySearch = true
        })
      }
      this.advSearchBtnActived = !this.advSearchBtnActived
    },
    processReq(req) {
      req.data.formId = this.formId
      return req
    },
    fnexport() {
      this.$emit('fnexport')
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
@import './advance-search.scss';
.warpper {
  display: flex;
  flex-direction: column;
  height: 100%;
  > div:first-child {
    margin-bottom: 10px;
  }
  > div:last-child {
    flex: 1;
    min-height: auto;
  }
  :global(.ant-table-title) {
    display: none;
  }
  form + div {
    float: right;
  }
}
.hidden-tab {
  :global(.ant-tabs-bar) {
    visibility: hidden;
  }
}
</style>
