<template>
<el-dialog v-model="show" width="80%" class="dialog-box"
    align-center
    destroy-on-close
    :show-close="false" 
    @close="show = false" >
    <template #header="{ close, titleId, titleClass }">
        <div class="msg-header" >
            <div class="header-title">{{ data && data.version==4 ? 'MT4: ' : 'MT5: ' }}{{ mtLogin }}</div>
            <div class="header-close" >
                <el-icon color="rgba(196, 196, 196, 1)" @click="close" ><Close /></el-icon>
            </div>
        </div>
    </template>
    <div style="height: 80vh;overflow: auto;" v-htfx-loading="loading" class="msg-body" >
        <div style="width: 230px;height: 100%;flex-shrink: 0;flex-grow: 0;border-right: 1px solid #ECECEC;padding-right: 20px;">
            <div class="item">
                <div class="label">{{ t('mtDetail.userName') }}:</div>
                <div class="value">{{ data.NAME }}</div>
            </div>
            <div class="item">
                <div class="label">{{ t('mtDetail.mt4Group') }}:</div>
                <div class="value">{{ data.mg }}</div>
            </div>
            <div class="item">
                <div class="label">{{ t('mtDetail.mt4Leverage') }}:</div>
                <div class="value">{{ data.LEVERAGE }}</div>
            </div>
            <div class="item" v-if="data.version == 4" >
                <div class="label">{{ t('mtDetail.transactionStatus') }}:</div>
                <div class="value" v-if="data && data.STATUS == 0" >{{ t('mtDetail.disable') }}</div>
                <div class="value" v-if="data && data.STATUS == 1" >{{ t('mtDetail.enable') }}</div>
                <div class="value" v-if="data && data.STATUS == 2" >{{ t('mtDetail.readOnly') }}</div>
            </div>
            <div class="item">
                <div class="label">{{ t('mtDetail.remark') }}:</div>
                <div class="value">{{ data.COMMENT }}</div>
            </div>
            <div class="item">
                <div class="label">ID:</div>
                <div class="value">{{ data.ID }}</div>
            </div>
            <div class="item">
                <div class="label">{{ t('mtDetail.createTime') }}:</div>
                <div class="value">{{ data.REGDATE }}</div>
            </div>
            <div class="item">
                <div class="label">{{ t('mtDetail.homePageLastLoginTime') }}:</div>
                <div class="value">{{ data.LASTDATE }}</div>
            </div>
        </div>
        <div class="info">
            <div style="height: 112px;background: #F6F6F6;width: 100%;display: flex;justify-content: space-between;">
                <div class="info-item">
                    <div class="info-item-label">{{ t('mtDetail.balance') }}</div>
                    <div class="info-item-value">{{ returnFloat(data.BALANCE) }}</div>
                </div>
                <div class="info-item">
                    <div class="info-item-label">{{ t('mtDetail.credit') }}</div>
                    <div class="info-item-value">{{ returnFloat(data.CREDIT) }}</div>
                </div>
                <div class="info-item">
                    <div class="info-item-label">{{ t('mtDetail.floatingProfitLoss') }}</div>
                    <div class="info-item-value">{{ returnFloat(data.FOLAT_PL) }}</div>
                </div>
                <div class="info-item">
                    <div class="info-item-label">{{ t('mtDetail.netWorth') }}</div>
                    <div class="info-item-value">{{ returnFloat(data.EQUITY) }}</div>
                </div>
                <div class="info-item">
                    <div class="info-item-label">{{ t('mtDetail.usedMargin') }}</div>
                    <div class="info-item-value">{{ returnFloat(data.MARGIN) }}</div>
                </div>
                <div class="info-item">
                    <div class="info-item-label">{{ t('mtDetail.usableMargin') }}</div>
                    <div class="info-item-value">{{ returnFloat(data.MARGIN_FREE) }}</div>
                </div>
                <div class="info-item">
                    <div class="info-item-label">{{ t('mtDetail.marginLevel') }}</div>
                    <div class="info-item-value">{{ returnFloat(data.MARGIN_LEVEL) }}</div>
                </div>
            </div>
            <div class="mt-tabs">
                <div class="tab-items">
                <div :class="['tab-item', { 'tab-item-active': activeTabName === 'gold_record'}]" @click="tabClick('gold_record')">{{ t('mtDetail.gold_record') }}</div>
                <div :class="['tab-item', { 'tab-item-active': activeTabName === 'position'}]" @click="tabClick('position')">{{ t('mtDetail.position') }}</div>
                <div :class="['tab-item', { 'tab-item-active': activeTabName === 'transaction_history'}]" @click="tabClick('transaction_history')">{{ t('mtDetail.transaction_history') }}</div>
                <div :class="['tab-item', { 'tab-item-active': activeTabName === 'entry_order'}]" @click="tabClick('entry_order')">{{ t('mtDetail.entry_order') }}</div>
                </div>
                <div class="tab-btns">
                    <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" @change="handleDateRange"
                        placement="bottom"
                        :clearable="false"
                    ></el-date-picker>
                </div>
                <div class="tab-active-bar"></div>
            </div>
            <el-table v-if="activeTabName == 'gold_record'" v-htfx-loading="loading1" :data="dataList1" style="width: 100%;">
                <el-table-column :label="t('mtDetail.mt4DetailTime')" align="center" prop="CLOSE_TIME" width="" ></el-table-column>
                <el-table-column :label="t('mtDetail.mt4DetailOperatrType')" align="center" prop="IO_TYPE" width="" ></el-table-column>
                <el-table-column :label="t('mtDetail.mt4DetailAmount')" align="center" prop="PROFIT" width="" ></el-table-column>
                <el-table-column :label="t('mtDetail.remark')" align="center" prop="COMMENT" width="" ></el-table-column>
            </el-table>
            <el-table v-if="activeTabName == 'position'" v-htfx-loading="loading2" :data="dataList2" style="width: 100%;">
                <el-table-column :label="t('mtDetail.ticket')" align="center" prop="TICKET" width="" ></el-table-column>
                <el-table-column :label="t('mtDetail.tradeCategory')" align="center" prop="SYMBOL" width="" ></el-table-column>
                <el-table-column :label="t('mtDetail.cmd')" align="center" prop="CMD" width="" ></el-table-column>
                <el-table-column :label="t('mtDetail.lot')" align="center" prop="LOT" width="" ></el-table-column>
                <el-table-column :label="t('mtDetail.homeKpi1')" align="center" prop="PROFIT" width="" ></el-table-column>
                <el-table-column :label="t('mtDetail.openTime')" align="center" prop="OPEN_TIME" width="" ></el-table-column>
            </el-table>
            <el-table v-if="activeTabName == 'transaction_history'" v-htfx-loading="loading3" :data="dataList3" style="width: 100%;">
                <el-table-column :label="t('mtDetail.ticket')" align="center" prop="TICKET" width="" ></el-table-column>
                <el-table-column :label="t('mtDetail.tradeCategory')" align="center" prop="SYMBOL" width="" ></el-table-column>
                <el-table-column :label="t('mtDetail.cmd')" align="center" prop="CMD" width="" ></el-table-column>
                <el-table-column :label="t('mtDetail.lot')" align="center" prop="LOT" width="" ></el-table-column>
                <el-table-column :label="t('mtDetail.homeKpi1')" align="center" prop="PROFIT" width="" ></el-table-column>
                <el-table-column :label="t('mtDetail.openTime')" align="center" prop="OPEN_TIME" width="" ></el-table-column>
                <el-table-column :label="t('mtDetail.closeTime')" align="center" prop="CLOSE_TIME" width="" ></el-table-column>
            </el-table>
            <el-table v-if="activeTabName == 'entry_order'" v-htfx-loading="loading4" :data="dataList4" style="width: 100%;">
                <el-table-column :label="t('mtDetail.ticket')" align="center" prop="TICKET" width="" ></el-table-column>
                <el-table-column :label="t('mtDetail.tradeCategory')" align="center" prop="SYMBOL" width="" ></el-table-column>
                <el-table-column :label="t('mtDetail.cmd')" align="center" prop="CMD" width="" ></el-table-column>
                <el-table-column :label="t('mtDetail.lot')" align="center" prop="LOT" width="" ></el-table-column>
                <el-table-column :label="t('mtDetail.openTime')" align="center" prop="OPEN_TIME" width="" ></el-table-column>
                <el-table-column :label="data.version==4?'SL':t('mtDetail.mt5DetailPriceorder')" align="center" :prop="data.version==4?'SL':'priceorder'" width="" ></el-table-column>
                <el-table-column :label="data.version==4?'TP':t('mtDetail.mt5DetailPricecurrent')" align="center" :prop="data.version==4?'TP':'pricecurrent'" width="" ></el-table-column>
            </el-table>
            <div style="position: relative;margin-top: auto;margin-bottom: 10px;" >
                <pagination :total="total" :autoScroll="false" v-model:page="curr_page" v-model:limit="page_size" @pagination="loadTableData" />
            </div>
        </div>
    </div>
</el-dialog>
</template>

<script setup>
import { useLocale } from 'element-plus'
import { defineModel, ref, watch } from 'vue'
import { generateShortcuts, today } from '@/utils/shortcutsUtils';
import { isEmpty, getBlank, returnFloat } from '@/utils/htfx'
import { detailTableQuery, detailQuery } from '@/api/account'
import { serverLang } from '@/utils/i18n'

const { t } = useLocale()
const show = defineModel("show")
const shortcuts = ref(generateShortcuts(t))
const dateRange = ref(today())
const loading = ref(false)
const loading1 = ref(false)
const loading2 = ref(false)
const loading3 = ref(false)
const loading4 = ref(false)
const dataList1 = ref([])
const dataList2 = ref([])
const dataList3 = ref([])
const dataList4 = ref([])
const activeTabName = ref("gold_record")
const total = ref(0)
const curr_page = ref(1)
const page_size = ref(10)

const props = defineProps({
    mtServer: {
        type: [String, Number]
    },
    mtLogin: {
        type: [String, Number]
    }
})

const data = ref({})

function loadData() {
    loading.value = true
    detailQuery({
        qcc_mt_server: props.mtServer,
        mt4_login: props.mtLogin,
        mt_login: props.mtLogin,
    }).then(resp => {
        let mg = resp.data.GROUP
        if(!isEmpty(mg) && mg.indexOf('-')>0){
            mg = mg.substring(mg.indexOf('-')+1,mg.length);
        }
        resp.data.mg = mg
        data.value = resp.data
        loading.value = false
    })
    activeTabName.value = "gold_record"
    dateRange.value = today()
    dataList1.value = []
    dataList2.value = []
    dataList3.value = []
    dataList4.value = []
    curr_page.value = 1
    total.value = 0
    loadTableData()
}

function loadTableData() {
    let params = {
        qcc_language: serverLang(),
        qcc_mt_server: props.mtServer,
        mt4_server: props.mtServer,
        mt_server: props.mtServer,
        mt4_login: props.mtLogin,
        mt_login: props.mtLogin,
        query_type: activeTabName.value,
        curr_page: curr_page.value,
        page_size: page_size.value,
        date_start: dateRange.value && dateRange.value.length ? dateRange.value[0] : null,
        date_end: dateRange.value && dateRange.value.length ? dateRange.value[1] : null
    }
    if (activeTabName.value == 'gold_record') {
        loading1.value = true
        dataList1.value = []
        detailTableQuery(params).then(resp => {
            if (resp.data) {
                dataList1.value = resp.data.records
                total.value = resp.data.totalRecords
            }
            loading1.value = false
        }).catch(() => {
            loading1.value = false
        })
    } else if (activeTabName.value == 'position') {
        loading2.value = true
        dataList2.value = []
        detailTableQuery(params).then(resp => {
            if (resp.data) {
                dataList2.value = resp.data.records
                total.value = resp.data.totalRecords
            }
            loading2.value = false
        }).catch(() => {
            loading2.value = false
        })
    } else if (activeTabName.value == 'transaction_history') {
        loading3.value = true
        dataList3.value = []
        detailTableQuery(params).then(resp => {
            if (resp.data) {
                dataList3.value = resp.data.records
                total.value = resp.data.totalRecords
            }
            loading3.value = false
        }).catch(() => {
            loading3.value = false
        })
    } else if (activeTabName.value == 'entry_order') {
        loading4.value = true
        dataList4.value = []
        detailTableQuery(params).then(resp => {
            if (resp.data) {
                dataList4.value = resp.data.records
                total.value = resp.data.totalRecords
            }
            loading4.value = false
        }).catch(() => {
            loading4.value = false
        })
    }
}

function handleDateRange() {
    curr_page.value = 1
    total.value = 0
    loadTableData()
}

function tabClick(data) {
  if (data == activeTabName.value) {
    return
  }
  activeTabName.value = data
  curr_page.value = 1
  total.value = 0
  loadTableData()
}

watch( [() => props.mtLogin, () => props.mtServer, show], (n, o) => {
    if (n[0]&&n[1]&&n[2]&&!o[2]) {
        loadData()
    }
}, {
    immediate: true
    // deep: true
})

</script>

<style lang="scss" scoped>
.dialog-box {
    border-radius: 16px;
    padding: 0;

    .el-dialog__header {
        margin-right: 0;
        padding: 0;
        overflow: hidden;
    }

    .el-dialog__body {
        box-sizing: border-box;
        padding: 40px 30px 30px;
        min-height: 250px;
    }

    .msg-header {
        border-radius: 16px 16px 0 0;
        width: 100%;
        height: 50px;
        position: relative;
        overflow: hidden;
        background-color: #0F3675;
        display: flex;
        align-items: center;
        color: #fff;
        
        .header-title {
            margin-left: 22px;
            font-size: 26px;
            font-weight: 700;
            line-height: 50px;
        }

        .header-close {
            cursor: pointer;
            position: absolute;
            bottom: 0;
            right: 20px;
            font-size: 32px;
        }
    }

    .msg-body {
        background-color: #ffffff;
        display: flex;
    }
}

.item {
    width: 100%;

    .label {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 20.27px;
        color: rgba(102, 102, 102, 1);
        margin-bottom: 4px;
    }


    .value {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0px;
        line-height: 23.17px;
        color: rgba(51, 51, 51, 1);
    }
}

.item:not(:last-child) {
    margin-bottom: 25px;
}

.info {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-grow: 1;
    padding-left: 20px;

    .info-item {
        height: 100%;
        width: 14.2%;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 2%;

        .info-item-label {
            font-size: 0.9375vw;
            font-weight: 400;
            letter-spacing: 0px;
            color: rgba(102, 102, 102, 1);
            margin-bottom: 5%;
        }

        .info-item-value {
            font-size: 1.25vw;
            font-weight: 700;
            letter-spacing: 0px;
            color: rgba(41, 187, 228, 1);
        }
    }
}

.mt-tabs {
    margin-top: 30px;
    margin-bottom: 20px;
    width: 100%;
    position: relative;

    .tab-items {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        height: 2.08vw;
        color: rgba(102, 102, 102, 1);
        user-select: none;

        .tab-item {
            padding: 0 2%;
            min-width: 7.6vw;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9375vw;
            cursor: pointer;
            white-space: nowrap;
        }

        .tab-item-active {
            color: rgba(51, 51, 51, 1);
            font-weight: 700;
            position: relative;

            &::after {
                content: '';
                position: absolute;
                bottom: -2px;
                height: 2px;
                width: 100%;
                background-color: rgba(51, 51, 51, 1);
            }
        }
    }

    .tab-active-bar {
        width: 100%;
        height: 2px;
        border-bottom: 1px solid rgba(236, 236, 236, 1);
    }

    .tab-btns {
        position: absolute;
        bottom: 0;
        right: 0;
    }
}
</style>