<template>
  <Page>
    <!-- 查询和全局功能 -->
    <Row>
      <Col :span="22">
      <!-- 查询 -->
      <Space v-if="data.isShowQuery" :wrap="true">
        <Input v-model:value="data.query.chatContent" allowClear :placeholder="$t('robot.chatInfo.chatContent')" />
        <Input v-model:value="data.query.robotAccount" allowClear :placeholder="$t('robot.chatInfo.robotAccount')" />
        <Input v-model:value="data.query.anchorName" allowClear :placeholder="$t('robot.chatInfo.anchorName')" />
        <Select v-model:value="data.query.chatType" allowClear :placeholder="$t('robot.chatInfo.chatType')" style="width: 120px">
          <SelectOption :value="1">{{ $t('robot.chatInfo.chatTypeOptions.1') }}</SelectOption>
          <SelectOption :value="2">{{ $t('robot.chatInfo.chatTypeOptions.2') }}</SelectOption>
        </Select>
        <!-- 查询按钮 -->
        <Button @click="handleQuery" :loading="data.loading" :disabled="data.loading"
          style="background-color: #0084CA;color: white">
          {{ $t('common.search') }}
        </Button>
        <Button @click="resetQuery" :loading="data.loading" :disabled="data.loading" danger>
          {{ $t('common.reset') }}
        </Button>
      </Space>

      <!-- 全局功能 -->
      <div style="padding: 15px 0; display: flex; justify-content: space-between; align-items: center;">
      </div>
      </Col>
    </Row>

    <!-- 数据展示 -->
    <Table :dataSource="data.datas" :columns="data.columns" bordered :loading="data.loading"
      :pagination="data.pagination" :scroll="{ x: 2000 }" @change="handleQuery" size="small">
    </Table>
  </Page>
</template>

<script setup lang="ts">
import { reactive, onMounted } from "vue";
import { $t } from '@vben/locales';
import { Page } from '@vben/common-ui';
import { Button, Input, Space, Table, Row, Col, Select, SelectOption } from 'ant-design-vue';
import { chatInfo } from '#/api';
import { d } from './index.ts';

const data = reactive({
  ...d,
});

onMounted(() => {
  handleQuery({ current: data.pagination.current, pageSize: data.pagination.pageSize });
})

/**
 * 包装查询参数
 * @param page
 * @param filter
 * @param sorter
 */
function wrapQueryParam(page, filter, sorter) {
  let { current, pageSize } = { ...data.pagination, ...(page || {}) };
  let param = {
    pageNum: current,
    pageSize: pageSize,
  }
  //查询
  for (const key in data.query) {
    if (data.query[key] == null || data.query[key] === '') {
      continue;
    }
    param[key] = data.query[key];
  }
  //过滤
  if (filter) {
    for (const key in filter) {
      const value = Array.isArray(filter[key]) && filter[key].length > 0 ? filter[key][0] : filter[key];
      param[key] = value || param[key];
    }
  }
  //排序
  if (sorter && sorter.field && sorter.order) {
    param.sorts = [{ name: sorter.field, desc: sorter.order == 'descend' }]
  }
  return param;
}

/**
 * 重置查询
 */
function resetQuery() {
  data.query = {}
  handleQuery({ current: 1, pageSize: data.pagination.pageSize });
}

/**
 * 查询
 * @param page
 * @param filter
 * @param sorter
 */
function handleQuery(page, filter, sorter) {
  data.loading = true;
  let param = wrapQueryParam(page, filter, sorter);
  chatInfo.queryPage(param).then((res) => {
    if (res.error) {
      return;
    }
    data.datas = res.data.list || [];
    data.pagination.total = res.data.total || 0;
    data.pagination.current = res.data.current || res.data.pageNum || 1;
    data.pagination.pageSize = res.data.pageSize && res.data.pageSize > 10 ? res.data.pageSize : 10;
    
  }).finally(() => {
    data.loading = false;
  })
}

function reload() {
  handleQuery({ current: data.pagination.current, pageSize: data.pagination.pageSize });
}
</script>
