<template>
    <div>
        <el-card class="!border-none mb-4" shadow="never">
            <el-form class="mb-[-16px]" :model="queryParams" inline>
                <el-form-item label="门店" prop="store_id">
                    <!-- <el-input class="w-[280px]" v-model="queryParams.store_name" clearable placeholder="请输入门店id" /> -->
                    <el-select v-model="queryParams.store_id" filterable remote reserve-keyword placeholder="输入门店名称搜索"
                        remote-show-suffix :remote-method="remoteMethod" :loading="storeloading" style="width: 240px" @change="handleClick({ paneName: activeName })">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="时间" prop="create_time">
                    <el-date-picker v-model="startEndTime" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" unlink-panels :shortcuts="shortcuts" @change="handleClick({ paneName: activeName })" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleClick({ paneName: activeName })">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none" shadow="never">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="日订单" name="first">
                    <billTable ref="billTableRef1" :queryParams="queryParams" type="day"></billTable>
                </el-tab-pane>
                <el-tab-pane label="周订单" name="second">
                    <billTable ref="billTableRef2" :queryParams="queryParams" type="week"></billTable>
                </el-tab-pane>
                <el-tab-pane label="月订单" name="three">
                    <billTable ref="billTableRef3" :queryParams="queryParams" type="month"></billTable>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script lang="ts" setup name="storeCashFinanceFlowLists">
import { watch } from 'vue';
import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions'
import { timeFormat } from '@/utils/util'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'
import { apiSystemStoreLists } from '@/api/system_store'
import billTable from "./components/billTable.vue";
import shortcuts from "@/utils/shortcuts";
import moment from 'moment';

const startEndTime = ref([]);

// 查询条件
const queryParams = reactive({
    store_id: '',
    start_time: '',
    end_time: ''
})

watch(() => startEndTime.value, (n, o) => {
    queryParams.start_time = moment(n[0]).format('YYYY-MM-DD') + ' 00:00:00';
    queryParams.end_time = moment(n[1]).format('YYYY-MM-DD') + ' 23:59:59';
}, { deep: true })

const storeloading = ref(false);
const storeList = ref([]);
const remoteMethod = (e: string = '') => {
    storeloading.value = true;
    apiSystemStoreLists({
        name: e,
        page_size: 50
    }).then(res => {
        storeList.value = res.lists;
        setTimeout(() => {
            storeloading.value = false;
        }, 300)
    }).catch(err => {
        setTimeout(() => {
            storeloading.value = false;
        }, 300)
    })
}

const billTableRef1 = ref(null);
const billTableRef2 = ref(null);
const billTableRef3 = ref(null);

const activeName = ref('first');
const handleClick = (tab: any) => {
    if (tab.paneName == "first") {
        billTableRef1.value.getLists();
    } else if (tab.paneName == "second") {
        billTableRef2.value.getLists();
    } else if (tab.paneName == "three") {
        billTableRef3.value.getLists();
    }
};

const resetParams = () => {
    queryParams.store_id = '';
    queryParams.create_time = '';
    handleClick({
        paneName: activeName.value
    })
}

nextTick(() => {
    handleClick({
        paneName: activeName.value
    })
})

</script>
