<!-- 搜索表单 -->
<template>
  <a-space :size="10" style="flex-wrap: wrap">
<!--    <a-button type="primary" class="ele-btn-icon" @click="add">-->
<!--      <template #icon>-->
<!--        <PlusOutlined/>-->
<!--      </template>-->
<!--      <span>创建订单</span>-->
<!--    </a-button>-->
    <a-input-search
      allow-clear
      placeholder="请输入项目名称"
      v-model:value="where.keywords"
      @pressEnter="search"
      @search="search"
    />
    <a-button @click="reset">重置</a-button>
    <a-range-picker
      v-model:value="dateRange"
      @change="search"
      value-format="YYYY-MM-DD"
    />
    <a-button type="text" @click="onSearch('monthTotalPrice')">
      <a-tooltip title="今年已收续费总额" class="flex flex-col">
        <span class="text-gray-400">本月已收：</span>
        <span class="text-orange-600 font-bold">￥{{ formatNumber(count.monthTotalPrice) }}</span>
      </a-tooltip>
    </a-button>
    <a-button type="text" @click="onSearch('yearTotalPrice')">
      <a-tooltip title="今年已收续费总额" class="flex flex-col">
        <span class="text-gray-400">今年已收：</span>
        <span class="text-green-600 font-bold">￥{{ formatNumber(count.yearTotalPrice) }}</span>
      </a-tooltip>
    </a-button>
    <a-button type="text" @click="onSearch('lastTotalPrice')">
      <a-tooltip title="去年已收续费总额" class="flex flex-col">
        <span class="text-gray-400">去年总额：</span>
        <span class="text-gray-700 font-bold">￥{{ formatNumber(count.lastTotalPrice) }}</span>
      </a-tooltip>
    </a-button>
  </a-space>
</template>

<script lang="ts" setup>
import {PlusOutlined} from '@ant-design/icons-vue';
import {watch, ref} from 'vue';
import useSearch from "@/utils/use-search";
import {formatNumber} from 'ele-admin-pro/es';
import {ProjectCount, ProjectParam} from "@/api/project/project/model";
import {ProjectRenewParam} from "@/api/project/projectRenew/model";
import {countProjectRenew} from "@/api/project/projectRenew";

const props = withDefaults(
  defineProps<{
    // 选中的角色
    selection?: [];
  }>(),
  {}
);

const emit = defineEmits<{
  (e: 'search', where?: ProjectRenewParam): void;
  (e: 'add'): void;
  (e: 'remove'): void;
  (e: 'batchMove'): void;
}>();

// 日期范围选择
const dateRange = ref<[string, string]>(['', '']);
const count = ref<ProjectCount>({
  // 今年已收续费总总额
  yearTotalPrice: undefined,
  // 去年已收续费总额
  lastTotalPrice: undefined,
  // 近30天可催收的续费总额
  totalPrice30: undefined,
  // 本月已收续费总额
  monthTotalPrice: undefined
});

// 表单数据
const {where,resetFields} = useSearch<ProjectParam>({
  appId: undefined,
  userId: undefined,
  appStatus: undefined,
  keywords: ''
});

// 新增
const add = () => {
  emit('add');
};

/*  重置 */
const reset = () => {
  resetFields();
  search();
};

/* 搜索 */
const search = () => {
  emit('search', where);
};

const onSearch = (text: string) => {
  where.sceneType = text
  search();
}

countProjectRenew().then(data => {
  count.value = data;
})

watch(
  () => props.selection,
  () => {
  }
);
</script>
