<template>
  <div class="container">
    <Breadcrumb :items="['menu.list', 'menu.list.searchTable']" />
    <SearchTable
      :form-model="formModel"
      :form-items="formItems"
      :data="renderData"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      :title="$t('menu.list.searchTable')"
      :search-button-text="$t('searchTable.form.search')"
      :reset-button-text="$t('searchTable.form.reset')"
      :download-button-text="$t('searchTable.operation.download')"
      :refresh-tooltip-text="$t('searchTable.actions.refresh')"
      :density-tooltip-text="$t('searchTable.actions.density')"
      :column-setting-tooltip-text="$t('searchTable.actions.columnSetting')"
      @search="search"
      @reset="reset"
      @page-change="onPageChange"
      @refresh="search"
    >
      <!-- 工具栏左侧插槽 -->
      <template #toolbar-left>
        <a-button type="primary">
          <template #icon>
            <icon-plus />
          </template>
          {{ $t('searchTable.operation.create') }}
        </a-button>
        <a-upload action="/">
          <template #upload-button>
            <a-button>
              {{ $t('searchTable.operation.import') }}
            </a-button>
          </template>
        </a-upload>
      </template>

      <!-- 表格自定义列插槽 -->
      <template #index="{ rowIndex }">
        {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
      </template>
      <template #contentType="{ record }">
        <a-space>
          <a-avatar v-if="record.contentType === 'img'" :size="16" shape="square">
            <img
              alt="avatar"
              src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/581b17753093199839f2e327e726b157.svg~tplv-49unhts6dw-image.image"
            />
          </a-avatar>
          <a-avatar v-else-if="record.contentType === 'horizontalVideo'" :size="16" shape="square">
            <img
              alt="avatar"
              src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77721e365eb2ab786c889682cbc721c1.svg~tplv-49unhts6dw-image.image"
            />
          </a-avatar>
          <a-avatar v-else :size="16" shape="square">
            <img
              alt="avatar"
              src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/ea8b09190046da0ea7e070d83c5d1731.svg~tplv-49unhts6dw-image.image"
            />
          </a-avatar>
          {{ $t(`searchTable.form.contentType.${record.contentType}`) }}
        </a-space>
      </template>
      <template #filterType="{ record }">
        {{ $t(`searchTable.form.filterType.${record.filterType}`) }}
      </template>
      <template #status="{ record }">
        <span v-if="record.status === 'offline'" class="circle"></span>
        <span v-else class="circle pass"></span>
        {{ $t(`searchTable.form.status.${record.status}`) }}
      </template>
      <template #operations>
        <a-button v-permission="['admin']" type="text" size="small">
          {{ $t('searchTable.columns.operations.view') }}
        </a-button>
      </template>
    </SearchTable>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive } from 'vue'
import { useI18n } from 'vue-i18n'
import useLoading from '@/hooks/loading'
import { queryPolicyList, PolicyRecord, PolicyParams } from '@/api/list'
import { Pagination } from '@/types/global'
import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface'
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'
import type { FormItem } from '@/components/search-form/types'

const generateFormModel = () => {
  return {
    number: '',
    name: '',
    contentType: '',
    filterType: '',
    createdTime: [],
    status: '',
  }
}
const { loading, setLoading } = useLoading(true)
const { t } = useI18n()
const renderData = ref<PolicyRecord[]>([])
const formModel = ref(generateFormModel())

const basePagination: Pagination = {
  current: 1,
  pageSize: 20,
}
const pagination = reactive({
  ...basePagination,
})

const contentTypeOptions = computed<SelectOptionData[]>(() => [
  {
    label: t('searchTable.form.contentType.img'),
    value: 'img',
  },
  {
    label: t('searchTable.form.contentType.horizontalVideo'),
    value: 'horizontalVideo',
  },
  {
    label: t('searchTable.form.contentType.verticalVideo'),
    value: 'verticalVideo',
  },
])
const filterTypeOptions = computed<SelectOptionData[]>(() => [
  {
    label: t('searchTable.form.filterType.artificial'),
    value: 'artificial',
  },
  {
    label: t('searchTable.form.filterType.rules'),
    value: 'rules',
  },
])
const statusOptions = computed<SelectOptionData[]>(() => [
  {
    label: t('searchTable.form.status.online'),
    value: 'online',
  },
  {
    label: t('searchTable.form.status.offline'),
    value: 'offline',
  },
])

// 表单项配置
const formItems = computed<FormItem[]>(() => [
  {
    field: 'number',
    label: t('searchTable.form.number'),
    type: 'input',
    placeholder: t('searchTable.form.number.placeholder'),
  },
  {
    field: 'name',
    label: t('searchTable.form.name'),
    type: 'input',
    placeholder: t('searchTable.form.name.placeholder'),
  },
  {
    field: 'contentType',
    label: t('searchTable.form.contentType'),
    type: 'select',
    options: contentTypeOptions.value,
  },
  {
    field: 'filterType',
    label: t('searchTable.form.filterType'),
    type: 'select',
    options: filterTypeOptions.value,
  },
  {
    field: 'createdTime',
    label: t('searchTable.form.createdTime'),
    type: 'dateRange',
  },
  {
    field: 'status',
    label: t('searchTable.form.status'),
    type: 'select',
    options: statusOptions.value,
  },
])

// 表格列配置
const columns = computed<TableColumnData[]>(() => [
  {
    title: t('searchTable.columns.index'),
    dataIndex: 'index',
    slotName: 'index',
  },
  {
    title: t('searchTable.columns.number'),
    dataIndex: 'number',
  },
  {
    title: t('searchTable.columns.name'),
    dataIndex: 'name',
  },
  {
    title: t('searchTable.columns.contentType'),
    dataIndex: 'contentType',
    slotName: 'contentType',
  },
  {
    title: t('searchTable.columns.filterType'),
    dataIndex: 'filterType',
    slotName: 'filterType',
  },
  {
    title: t('searchTable.columns.count'),
    dataIndex: 'count',
  },
  {
    title: t('searchTable.columns.createdTime'),
    dataIndex: 'createdTime',
  },
  {
    title: t('searchTable.columns.status'),
    dataIndex: 'status',
    slotName: 'status',
  },
  {
    title: t('searchTable.columns.operations'),
    dataIndex: 'operations',
    slotName: 'operations',
  },
])

const fetchData = async (params: PolicyParams = { current: 1, pageSize: 20 }) => {
  setLoading(true)
  try {
    const { data } = await queryPolicyList(params)
    renderData.value = data.list
    pagination.current = params.current
    pagination.total = data.total
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false)
  }
}

const search = () => {
  fetchData({
    ...basePagination,
    ...formModel.value,
  } as unknown as PolicyParams)
}
const onPageChange = (current: number) => {
  fetchData({ ...basePagination, current })
}

fetchData()
const reset = () => {
  formModel.value = generateFormModel()
}
</script>

<script lang="ts">
export default {
  name: 'SearchTable',
}
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}
</style>
