<template>
    <div class="app-container home">
        <banner-bar v-if="bannerList&&bannerList.length" class="banner-bar" :options="bannerList" @close="closeBanner" :show="showBanner" />
        <div class="page-content">
            <div class="report" >
                <el-form :model="queryParams" autocapitalize="off" :inline="true" label-position="top" size="large" >
                  <el-form-item :label="t('form.mtAccount.label')">
                      <el-select
                          v-model="queryMtAccountIndex"
                      :placeholder="t('common.selectChoose')"
                      @clear="queryMtAccountIndex = null"
                      style="width: 270px"
                      >
                      <el-option v-for="(item, index) in mtAccountList" :key="index" :label="item.mt4_server_name + ' ' + item.mt4_login" :value="index" ></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item :label="t('form.openTime.label')">
                      <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-button :loading="exportLoading" icon="Download" @click="handleExport">{{ t('form.export') }}
                        <template #loading>
                          <l-ring-2 size="20" stroke="2" stroke-length="0.25" bg-opacity="0.1" speed="0.8" color="rgb(41, 187, 228)" style="margin-right: 17px;" ></l-ring-2>
                        </template>
                      </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" :width="(item.field.endsWith('Time') || item.field.endsWith('time'))?160:'120'" />
                </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="TradeList">
import BannerBar from "@/components/BannerBar"
import useAppStore from '@/store/modules/app'
import { useLocale } from 'element-plus'
import { serverLang, clientLang } from '@/utils/i18n'
import { queryBannerList, getMtTableInfo, queryMyTradeList } from '@/api/common'
import { generateShortcuts } from '@/utils/shortcutsUtils';
import dayjs from 'dayjs'

const route = useRoute();
const state = route.query
const { proxy } = getCurrentInstance();
const { t } = useLocale()
const appStore = useAppStore()
const showBanner = ref(appStore.showBanner == '1')
const bannerList = ref([])

const shortcuts = ref(generateShortcuts(t))

function closeBanner() {
  showBanner.value = false
  appStore.setShowBanner('0')
}

function loadBannerList() {
  queryBannerList({
    qcc_language: serverLang(),
    position: 1,
    type: 2
  }).then(resp => {
    if (resp.data) {
      bannerList.value = resp.data
    }
  })
}

const mtAccountList = ref([])
const queryMtAccountIndex = ref(null)
const loading = ref(false);
const dataList = ref([])
const colList = ref([])
const total = ref(0)
const data = reactive({
  queryParams: {
    curr_page: 1,
    page_size: 10,
    qcc_language: serverLang(),
    mt4_server: undefined,
    mt4_login: undefined
  },
  dateRange: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")]
});

const { queryParams, dateRange } = toRefs(data);

watch(queryMtAccountIndex, (n, o) => {
  if(n == null || n < 0 || !mtAccountList.value || !mtAccountList.value.length) {
    queryParams.value.mt4_server = undefined
    queryParams.value.mt4_login = undefined
  } else {
    const { mt4_login, mt4_server } = mtAccountList.value[queryMtAccountIndex.value]
    queryParams.value.mt4_server = mt4_server
    queryParams.value.mt4_login = mt4_login
  }
}, { immediate: true })

function getList() {
  loading.value = true;
  if (dateRange.value && dateRange.value.length) {
    queryParams.value.open_time_start = dateRange.value[0]
    queryParams.value.open_time_end = dateRange.value[1]
  } else {
    queryParams.value.open_time_start = undefined
    queryParams.value.open_time_end = undefined
  }
  queryMyTradeList(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();
}
const exportLoading = ref(false)
function handleExport() {
  exportLoading.value = true
  proxy.download("/app/customer/queryMyTradeListExport", {
    ...queryParams.value
  }, `export.xlsx`,null , () => {
    exportLoading.value = false
  });
}

function loadMtAccountList() {
  getMtTableInfo({
    mt4_server: '',
    language: serverLang(),
    server_type: ''
  }).then(resp => {
    if (resp.data) {
      mtAccountList.value = resp.data;
      if (state && state.mt4_login) {
          for (let index = 0; index < mtAccountList.value.length; index++) {
            const element = mtAccountList.value[index];
            if (element.mt4_login == state.mt4_login && element.mt4_server == state.mt4_server) {
                queryMtAccountIndex.value = index
                queryParams.value.mt4_server = element.mt4_server
                queryParams.value.mt4_login = element.mt4_login
                getList()
            }
          }
      }
    }
  })
}

function loadPageData() {
  loadBannerList();
  loadMtAccountList();
}

loadPageData();
</script>

<style lang="scss" scoped>
.banner-bar {
  margin-bottom: 5px;
}

.page-content {
  width: 100%;
  display: flex;
  flex-direction: column;

  .title-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;

    .title {
      font-size: 34px;
      font-weight: 700;
    }
  }
}

.report {
  width: 100%;
  margin-top: 20px;

  :deep(.el-form-item__label) {
    font-size: 18px;
    color: #333333;
  }
}
</style>