<!-- 搜索表单 -->
<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-button type="text" @click="onSearch('Expired')">
      <a-tooltip title="已超过催收日期的续费总金额" class="flex flex-col">
        <span class="text-gray-400">超期续费：</span>
        <span class="text-red-600 font-bold">￥{{ formatNumber(count.expiredPrice) }}</span>
      </a-tooltip>
    </a-button>
    <a-button type="text" @click="onSearch('effectiveTotalPrice')">
      <a-tooltip title="未超催收日期的续费总金额" class="flex flex-col">
        <span class="text-gray-400">正常续费：</span>
        <span class="text-green-500 font-bold">￥{{ formatNumber(count.effectiveTotalPrice) }}</span>
      </a-tooltip>
    </a-button>
    <a-button type="text" @click="onSearch('AllRenewPrice')">
      <a-tooltip title="每年可催收续费总额" class="flex flex-col">
        <span class="text-gray-400">续费总额：</span>
        <span class="text-gray-600 font-bold">￥{{ formatNumber(count.totalRenewPrice) }}</span>
      </a-tooltip>
    </a-button>
    <a-dropdown>
      <a-button v-if="where?.month" type="text">
        <a-tooltip :title="`${where.month}月份可催收的续费总额`" class="flex flex-col">
          <span class="text-gray-400">{{where.month}}月份：</span>
          <span class="text-gray-600 font-bold">￥{{ formatNumber(count.currentQueryTotalPrice) }}</span>
        </a-tooltip>
      </a-button>
      <a-button v-else type="text" @click="onSearch('totalPrice30')">
        <a-tooltip title="近30天可催收的续费总额" class="flex flex-col">
          <span class="text-gray-400">本月续费：</span>
          <span class="text-gray-600 font-bold">￥{{ formatNumber(count.totalPrice30) }}</span>
        </a-tooltip>
      </a-button>
      <template #overlay>
        <a-menu>
          <a-menu-item v-for="(item,index) in monthRenews" :key="index" @click="onMonthSearch(index + 1)">
            <div class="item flex w-full justify-between">
              <span class="text-gray-400">{{ index + 1 }}月</span>
              <span>{{ formatNumber(item) }}</span>
            </div>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
    <a-range-picker
      v-model:value="dateRange"
      @change="search"
      value-format="YYYY-MM-DD"
    />
    <a-input-search
      allow-clear
      placeholder="请输入项目名称"
      v-model:value="where.keywords"
      @pressEnter="search"
      @search="search"
    />
    <a-button @click="reset">重置</a-button>
  </a-space>
</template>

<script lang="ts" setup>
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, listMonthRenewPrice} 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 monthRenews = ref<[]>([]);
const count = ref<ProjectCount>({
  // 今年已收续费总总额
  yearTotalPrice: undefined,
  // 去年已收续费总额
  lastTotalPrice: undefined,
  // 近30天可催收的续费总额
  totalPrice30: undefined,
  // 每年可催收续费总额
  totalRenewPrice: undefined,
  // 已经超过催收时间的续费总额
  expiredPrice: undefined,
  // 有效续费总金额
  effectiveTotalPrice: undefined,
  // 当前查询的总金额
  currentQueryTotalPrice: undefined
});

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

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

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

/* 搜索 */
const search = () => {
  const [d1, d2] = dateRange.value ?? [];
  where.expirationTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
  where.expirationTimeEnd = d2 ? d2 + ' 23:59:59' : undefined;
  emit('search', where);
};

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

const onMonthSearch = (text: number) => {
  resetFields()
  where.month = text
  countProjectRenew({month: where.month}).then(res => {
    count.value = res;
    search();
  })
}

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

listMonthRenewPrice().then(data => {
  monthRenews.value = data;
})

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