<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,
          [$style.lawCaseList]: true,
        }"
      >
        <a-tab-pane v-for="{ key, tab, filterExpressions } in computeTabs" :key="key" :tab="tab">
          <sd-data-table-ex
            :ref="key"
            :data-url="dataUrl"
            :form-id="formId"
            :page-id="pageId"
            :ext-params="extParams"
            :columns="computedColumns"
            :actions="actionsCompute"
            :search-fields="searchFields"
            :hide-pagination="hidePagination"
            :filter-expressions="filterExpressions"
            :class="{ [$style.fuzzyAdvSearch]: fuzzyAndAdvSearch }"
            :modal-props="{
              width: (modalProps && modalProps.width) || 800 + detailColumns * 150,
            }"
            :scroll="{ x: scrollX }"
            :process-req="processReq"
            @tableDataLoaded="tableDataLoaded"
          >
            <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>
            <!-- 案件名称 -->
            <div slot="CASE_NAME" slot-scope="text, record">
              <span v-if="record.IMPORTANT === '是'" :class="$style.importCase"
                ><a-tag color="red">重大</a-tag></span
              >
              <span :title="record.CASE_NAME">{{ record.CASE_NAME }}</span>
            </div>
            <!-- 纠纷名称 -->
            <div slot="DISPUTE_NAME" slot-scope="text, record">
              <span v-if="record.IMPORTANT === '是'" :class="$style.importCase"
                ><a-tag color="red">重大</a-tag></span
              >
              <span :title="record.DISPUTE_NAME">{{ record.DISPUTE_NAME }}</span>
            </div>
          </sd-data-table-ex>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <component :is="actionComponent" ref="actionComponent" />
  </div>
</template>

<script>
// sd-skip-auto-import
import TableActionTypes from '@/common/services/table-action-types'
import SdListMixin from '@/application-manage/sd-list-mixin.vue'
import sdSearchForm from '@/application-manage/sd-search-form'
import components from './_import-components/law-my-case-list-import'
const ScopeWatcher = {
  watch: {
    'formData.attrFD.columns': {
      immediate: true,
      handler(e) {
        this.$emit('columnsChange', e)
      },
    },
    'formData.attrFD.modalProps': {
      immediate: true,
      handler(e) {
        this.$emit('modalChange', e)
      },
    },
  },
  props: { formData: { type: Object, required: true } },
  render() {},
}
export default {
  name: 'LawMyCaseList',
  metaInfo() {
    return { title: this.pageTitle }
  },
  components: { ...components, sdSearchForm: sdSearchForm, ScopeWatcher: ScopeWatcher },
  mixins: [SdListMixin],
  props: {
    dataUrl: {
      type: String,
      default: 'api/xcoa-mobile/v1/iam-page/businessList',
    },
    hidePagination: {
      type: Boolean,
      default: false,
    },
    maxResults: {
      type: Number,
      defalut: null,
    },
    orderBy: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  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,
      modalProps: {},
    }
  },
  computed: {
    computedColumns() {
      const a = []
      this.columns.forEach((item) => {
        if (item.dataIndex === 'CASE_NAME') {
          item.scopedSlots = {
            customRender: item.dataIndex,
          }
        }
        if (item.dataIndex === 'DISPUTE_NAME') {
          item.scopedSlots = {
            customRender: item.dataIndex,
          }
        }
        if (item.dataIndex === 'DISPUTE_STAGE') {
          item.title = '纠纷状态'
        }
        a.push(item)
      })
      return a
    },
    actionsCompute() {
      return this.actions
        .concat(this.configButtons)
        .filter((e) => !this.readonly || e.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((e) => {
          this.$refs[e.key]?.[0]?.$refs.dataTable.onSearchChange('')
        })
        this.$nextTick(() => {
          this.showfuzzySearch = true
        })
      }
      this.advSearchBtnActived = !this.advSearchBtnActived
    },
    tableDataLoaded(e) {
      this.$emit('setNums', e.respData.totalSize)
    },
    processReq(req) {
      if (!req.data.orderBy && this.orderBy) {
        req.data.orderBy = this.orderBy.map((item) => item + ' DESC').join(',')
      }
      req.data.formId = this.formId
      if (this.maxResults) {
        req.data.maxResults = this.maxResults
      }
      return req
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
@import '@/application-manage/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;
  }
  .law-case-list {
    :global(.header_sd-data-table_common) {
      display: none;
    }
  }
}
.hidden-tab {
  :global(.ant-tabs-bar) {
    visibility: hidden;
  }
}
</style>
