<template>
  <div :class="$style.warpper">
    <sd-search-form
      v-if="onlListColumnDefs.length"
      v-show="showAdvSearch"
      ref="searchForm"
      :onl-list-column-defs="onlListColumnDefs"
      @search="(value) => (customFilterExpressions = value)"
      @close="() => (advSearchBtnActived = false)"
    />
    <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-ex
            :ref="key"
            :form-id="formId"
            :page-id="pageId"
            :ext-params="extParams"
            :columns="columns"
            :actions="actionsCompute"
            :show-selection="showSelection"
            :search-fields="searchFields"
            :filter-expressions="filterExpressions"
            :class="{ [$style.fuzzyAdvSearch]: fuzzyAndAdvSearch }"
            :modal-props="{
              width: (modalProps && modalProps.width) || 800 + detailColumns * 150,
            }"
            :scroll="{ x: scrollX }"
          >
            <template v-if="!isNewWindow" v-slot:form="{ model, fields, formData }">
              <ScopeWatcher
                :form-data="formData.pageFormData"
                @columnsChange="(val) => (detailColumns = val)"
                @modalChange="(val) => (modalProps = val)"
              />
              <sd-form-by-builder :form-data="formData.pageFormData" />
            </template>
            <!-- 既有高级查询，又有模糊查询，显示高级查询图标 -->
            <template v-if="fuzzyAndAdvSearch" slot="headerPrefix">
              <sd-advance-search-btn
                :actived="advSearchBtnActived"
                :class="$style.advsearchbtn"
                @click="switchSearch"
              />
            </template>
          </sd-data-table-ex>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <component :is="actionComponent" ref="actionComponent" />
  </div>
</template>

<script>
import TableActionTypes from '@/common/services/table-action-types'
import SdListMixin from './sd-list-mixin.vue'
import components from './_import-components/sd-business-list-import'
import sdSearchForm from './sd-search-form'
const ScopeWatcher = {
  watch: {
    'formData.attrFD.columns': {
      immediate: true,
      handler(val) {
        this.$emit('columnsChange', val)
      },
    },
    'formData.attrFD.modalProps': {
      immediate: true,
      handler(val) {
        this.$emit('modalChange', val)
      },
    },
  },
  props: {
    formData: {
      type: Object,
      required: true,
    },
  },
  render() {},
}

export default {
  name: 'SdBusinessList',
  metaInfo() {
    return {
      title: this.pageTitle,
    }
  },
  components: { ...components, sdSearchForm, ScopeWatcher },
  mixins: [SdListMixin],
  data() {
    return {
      isNewWindow: false,
      actions: [
        {
          label: '新建',
          id: 'new',
          type: TableActionTypes.ex.create, // 新建按钮，不需要回调，自动处理
        },
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.ex.delete, // 删除按钮，不需要回调，会自动处理
          permission: 'create',
        },
        {
          label: '导出',
          id: 'export',
          permission: 'export',
          callback: () => {
            this.$refs[this.activeKey][0].exportExcel()
          },
        },
      ],
      detailColumns: 1, // 详情内容的列数，用于计算modal的宽度
      modalProps: {},
    }
  },
  computed: {
    actionsCompute() {
      return this.actions.concat(this.configButtons).filter((btn) => {
        return !this.readonly || btn.type === 'inline'
      })
    },
    searchFields() {
      if (this.showfuzzySearch && this.columns[0]) {
        return [this.columns[0].dataIndex]
      }
      return []
    },
  },
  created() {
    this.loadListDef()
  },
  methods: {
    // 切换查询（高级查询、模糊查询）
    switchSearch() {
      if (this.advSearchBtnActived) {
        // 显示了高级查询，则重置
        this.$refs.searchForm.reset()
      } else {
        // 未显示高级查询，则置空模糊查询
        this.showfuzzySearch = false
        this.tabs.forEach((tab) => {
          this.$refs[tab.key]?.[0]?.$refs.dataTable.onSearchChange('')
        })
        this.$nextTick(() => {
          this.showfuzzySearch = true
        })
      }
      this.advSearchBtnActived = !this.advSearchBtnActived
    },
  },
}
</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>
