<template>
    <div class="app-container home">
        <div class="page-content">
            <div class="title-bar" @click="back">
                <svg-icon icon-class="back" style="width: 30px;height: 30px;margin-right: 20px;color: #000;" />
                <span style="font-size: 32px;font-weight: 700;">{{ t('activity.pointRecord') }}</span>
            </div>
            <div class="report" >
                <el-form :model="queryParams" autocapitalize="off" :inline="true" label-position="top" size="large" >
                    <el-form-item :label="t('report.report16.mt4_server')" >
                        <el-select
                            v-model="queryParams.mt4_server"
                            :placeholder="t('common.selectChoose')"
                            clearable
                            style="width: 270px"
                            >
                            <el-option v-for="(item, index) in mtServerList" :key="index" :label="item.server_name" :value="item.id" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="t('report.report16.mt4_login')">
                        <el-input
                            v-model="queryParams.qcc_fuzzy_search"
                            clearable
                            style="width: 270px"
                            />
                    </el-form-item>
                    <el-form-item :label="t('report.report14.ticket')">
                        <el-input
                            v-model="queryParams.source_id"
                            clearable
                            style="width: 270px"
                            />
                    </el-form-item>
                    <el-form-item :label="t('activity.createTime')">
                        <el-date-picker
                        v-model="dateRange" size="large" style="width: 270px;"
                        value-format="YYYY-MM-DD"
                        type="daterange"
                        range-separator="-"
                        :start-placeholder="t('form.applyTime.start')"
                        :end-placeholder="t('form.applyTime.end')"
                        :shortcuts="shortcuts"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="&emsp;">
                        <el-button type="primary" icon="Search" @click="handleQuery">{{ t('form.search') }}</el-button>
                    </el-form-item>
                </el-form>
                <el-table v-htfx-loading="loading" :data="dataList" style="width: 100%;">
                    <el-table-column v-for="(item, index) in colList" :label="item.title" :prop="item.field" 
                    :align="item.align" :min-width="(item.field.endsWith('Time') || item.field.endsWith('time'))?160:'120'" >
                        <template #default="scope">
                            <template v-if="item.field == 'integral'" >
                                {{ returnFloat3(scope.row[item.field]) }}
                            </template>
                            <template v-else-if="item.field == 'type'" >
                                {{ typeFormatter(scope.row[item.field]) }}
                            </template>
                            <template v-else>
                                {{ scope.row[item.field] }}
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
    
                <pagination v-show="total > 0" :total="total" :autoScroll="false"
                    v-model:page="queryParams.curr_page"
                    v-model:limit="queryParams.page_size"
                    @pagination="getList" />
            </div>
        </div>
    </div>
</template>

<script setup name="PointRecord">
import { useLocale } from 'element-plus'
import { useRoute } from 'vue-router';
import { queryIntegralRecord } from '@/api/shop'
import { serverLang } from '@/utils/i18n'
import { onMounted, ref } from 'vue';
import { returnFloat3, typeFormatter } from '@/utils/htfx'
import { generateShortcuts } from '@/utils/shortcutsUtils';
import dayjs from 'dayjs'
import { mtServer } from '@/api/common'

let { proxy } = getCurrentInstance()
const { t } = useLocale()
const route = useRoute()

const shortcuts = ref(generateShortcuts(t))
const mtServerList = ref([])
const loading = ref(true);
const dataList = ref([])
const colList = ref([])
const total = ref(0)
const data = reactive({
  queryParams: {
    curr_page: 1,
    page_size: 10,
    qcc_fuzzy_search: undefined,
    qcc_language: serverLang(),
    mt4_server: undefined,
    source_id: undefined
  },
  dateRange: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")]
});

const { queryParams, dateRange } = toRefs(data)

const showCancel = ref(false)
const order = ref(null)

function getList() {
    loading.value = true;
    if (dateRange.value && dateRange.value.length) {
        queryParams.value.create_time_start = dateRange.value[0]
        queryParams.value.create_time_end = dateRange.value[1]
    } else {
        queryParams.value.create_time_start = undefined
        queryParams.value.create_time_end = undefined
    }
    queryIntegralRecord(queryParams.value).then(response => {
        dataList.value = response.data.records;
        colList.value = response.data.columns;
        total.value = response.data.totalRecords;
        loading.value = false;
    })
}

function handleQuery() {
    queryParams.value.curr_page = 1
    getList()
}

function back() {
    if (proxy.$route.query.noGoBack) {
        proxy.$router.push({ path: "/" });
    } else {
        proxy.$router.go(-1);
    }
}

function loadServerList() {
    mtServer({
        qcc_language: serverLang()
    }).then(resp => {
        if (resp.data) {
            mtServerList.value = resp.data
        }
    })
}

loadServerList()
getList()
</script>

<style lang="scss" scoped>
.app-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.page-content {
    position: relative;
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.title-bar {
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 6px 0 20px;
    cursor: pointer;
}

</style>