<template>
  <div class="app-container home">
    <kyc-tip-bar v-model:status="kycStatus" />
    <banner-bar v-if="bannerList&&bannerList.length" class="banner-bar" :options="bannerList" @close="closeBanner" :show="showBanner" />
    <div class="page-content">
      <div class="title-bar">
        <span class="title">{{ t('home.title') }}</span>
        <router-link to="/openAccount" v-slot="{ navigate }" >
          <el-button  type="Info" class="create-btn cus-btn" icon="Plus" plain @click="navigate" >{{ t('home.newAccount') }}</el-button>
        </router-link>
      </div>
      <div class="mt-tabs">
        <div class="tab-items">
          <div :class="['tab-item', { 'tab-item-active': activeMtName === 'live4'}]" @click="tabClick('live4')">{{ t('home.mt4Live') }}</div>
          <div :class="['tab-item', { 'tab-item-active': activeMtName === 'live5'}]" @click="tabClick('live5')">{{ t('home.mt5Live') }}</div>
          <div :class="['tab-item', { 'tab-item-active': activeMtName === 'demo'}]" @click="tabClick('demo')">{{ t('home.mtDemo') }}</div>
          <div :class="['tab-item', { 'tab-item-active': activeMtName === 'archiving'}]" @click="tabClick('archiving')">{{ t('home.archiving') }}</div>
        </div>
        <div class="tab-btns">
          <div class="tab-btn" :class="{'tab-btn-active': itemStyle == 'line'}" @click="switchStyle('line')" >
            <svg-icon icon-class="line" style="width: 16px;height: 16px;" />
          </div>
          <div class="tab-btn" :class="{'tab-btn-active': itemStyle == 'block'}" @click="switchStyle('block')" >
            <svg-icon icon-class="block" style="width: 16px;height: 16px;" />
          </div>
        </div>
        <div class="tab-active-bar"></div>
      </div>
      <template v-if="itemStyle == 'line'" >
        <div class="mt-table" v-show="activeMtName ==='live4'" >
          <mt-account-card-line :item="item" mt-type="live"
            @openChangeLeverage="openChangeLeverage" 
            @openChangeMtPwd="openChangeMtPwd"
            @openChangeArchiving="openChangeArchiving"
            v-for="(item, index) in mt4LiveList" 
            v-if="mt4LiveList && mt4LiveList.length" />
          <el-empty v-else-if="!loadingMt" >
            <template #image>
              <svg-icon icon-class="empty" class="empty-class" />
            </template>
            <template #description>
              <span>{{ t('home.noAccount') }}</span>
            </template>
            <router-link to="/openAccount" v-slot="{ navigate }" >
              <el-button  type="primary" class="cus-btn" plain @click="navigate" >{{ t('home.newAccount') }}</el-button>
            </router-link>
          </el-empty>
          <data-loading v-else-if="loadingMt" />
        </div>
        <div class="mt-table" v-show="activeMtName ==='live5'">
          <mt-account-card-line :item="item" mt-type="live"
            @openChangeLeverage="openChangeLeverage" 
            @openChangeMtPwd="openChangeMtPwd"
            @openChangeArchiving="openChangeArchiving"
            v-for="(item, index) in mt5LiveList"
            v-if="mt5LiveList && mt5LiveList.length" />
          <el-empty v-else-if="!loadingMt" >
            <template #image>
              <svg-icon icon-class="empty" class="empty-class" />
            </template>
            <template #description>
              <span>{{ t('home.noAccount') }}</span>
            </template>
            <router-link to="/openAccount" v-slot="{ navigate }" >
              <el-button  type="primary" class="cus-btn" plain @click="navigate" >{{ t('home.newAccount') }}</el-button>
            </router-link>
          </el-empty>
          <data-loading v-else-if="loadingMt" />
        </div>
        <div class="mt-table" v-show="activeMtName ==='demo'">
          <mt-account-card-line :item="item" mt-type="demo"
            @openChangeLeverage="openChangeLeverage" 
            @openChangeMtPwd="openChangeMtPwd"
            @openChangeArchiving="openChangeArchiving"
            v-for="(item, index) in mtDemoList"
            v-if="mtDemoList && mtDemoList.length" />
          <el-empty v-else-if="!loadingMt" >
            <template #image>
              <svg-icon icon-class="empty" class="empty-class" />
            </template>
            <template #description>
              <span>{{ t('home.noAccount') }}</span>
            </template>
            <router-link to="/openAccount" v-slot="{ navigate }" >
              <el-button  type="primary" class="cus-btn" plain @click="navigate" >{{ t('home.newAccount') }}</el-button>
            </router-link>
          </el-empty>
          <data-loading v-else-if="loadingMt" />
        </div>
        <div class="mt-table" v-show="activeMtName ==='archiving'">
          <mt-account-card-line :item="item" :isArch="true" mt-type="archiving"
            @openChangeLeverage="openChangeLeverage" 
            @openChangeMtPwd="openChangeMtPwd"
            @openChangeArchiving="openChangeArchiving"
            v-for="(item, index) in archivingList"
            v-if="archivingList && archivingList.length" />
          <el-empty v-else-if="!loadingMtArchiving" >
            <template #image>
              <svg-icon icon-class="empty" class="empty-class" />
            </template>
            <template #description>
              <span>{{ t('home.noAccount') }}</span>
            </template>
          </el-empty>
          <data-loading v-else-if="loadingMtArchiving" />
        </div> 
      </template>
      <template v-if="itemStyle == 'block'">
        <div class="mt-table" v-show="activeMtName ==='live4'" >
          <el-space wrap style="width: 100%;" :size="20" v-if="mt4LiveList && mt4LiveList.length" >
            <mt-account-card-block :item="item" mt-type="live"
              @openChangeLeverage="openChangeLeverage" 
              @openChangeMtPwd="openChangeMtPwd"
              @openChangeArchiving="openChangeArchiving"
              v-for="(item, index) in mt4LiveList" 
              />
          </el-space>
          <el-empty v-else-if="!loadingMt" >
            <template #image>
              <svg-icon icon-class="empty" class="empty-class" />
            </template>
            <template #description>
              <span>{{ t('home.noAccount') }}</span>
            </template>
            <router-link to="/openAccount" v-slot="{ navigate }" >
              <el-button  type="primary" class="cus-btn" plain @click="navigate" >{{ t('home.newAccount') }}</el-button>
            </router-link>
          </el-empty>
          <data-loading v-else-if="loadingMt" />
        </div>
        <div class="mt-table" v-show="activeMtName ==='live5'">
          <el-space wrap style="width: 100%;" :size="20" v-if="mt5LiveList && mt5LiveList.length" >
            <mt-account-card-block :item="item" mt-type="live"
              @openChangeLeverage="openChangeLeverage" 
              @openChangeMtPwd="openChangeMtPwd"
              @openChangeArchiving="openChangeArchiving"
              v-for="(item, index) in mt5LiveList"
               />
          </el-space>
          <el-empty v-else-if="!loadingMt" >
            <template #image>
              <svg-icon icon-class="empty" class="empty-class" />
            </template>
            <template #description>
              <span>{{ t('home.noAccount') }}</span>
            </template>
            <router-link to="/openAccount" v-slot="{ navigate }" >
              <el-button  type="primary" class="cus-btn" plain @click="navigate" >{{ t('home.newAccount') }}</el-button>
            </router-link>
          </el-empty>
          <data-loading v-else-if="loadingMt" />
        </div>
        <div class="mt-table" v-show="activeMtName ==='demo'">
          <el-space wrap style="width: 100%;" :size="20" v-if="mtDemoList && mtDemoList.length" >
            <mt-account-card-block :item="item" mt-type="demo"
              @openChangeLeverage="openChangeLeverage" 
              @openChangeMtPwd="openChangeMtPwd"
              @openChangeArchiving="openChangeArchiving"
              v-for="(item, index) in mtDemoList"
               />
          </el-space>
          <el-empty v-else-if="!loadingMt" >
            <template #image>
              <svg-icon icon-class="empty" class="empty-class" />
            </template>
            <template #description>
              <span>{{ t('home.noAccount') }}</span>
            </template>
            <router-link to="/openAccount" v-slot="{ navigate }" >
              <el-button  type="primary" class="cus-btn" plain @click="navigate" >{{ t('home.newAccount') }}</el-button>
            </router-link>
          </el-empty>
          <data-loading v-else-if="loadingMt" />
        </div>
        <div class="mt-table" v-show="activeMtName ==='archiving'">
          <el-space wrap style="width: 100%;" :size="20" v-if="archivingList && archivingList.length" >
            <mt-account-card-block :item="item" :isArch="true" mt-type="archiving"
              @openChangeLeverage="openChangeLeverage" 
              @openChangeMtPwd="openChangeMtPwd"
              @openChangeArchiving="openChangeArchiving"
              v-for="(item, index) in archivingList"
               />
          </el-space>
          <el-empty v-else-if="!loadingMtArchiving" >
            <template #image>
              <svg-icon icon-class="empty" class="empty-class" />
            </template>
            <template #description>
              <span>{{ t('home.noAccount') }}</span>
            </template>
          </el-empty>
          <data-loading v-else-if="loadingMtArchiving" />
        </div>
      </template>
    </div>
    <change-leverage v-model:show="showChangeLeverage" :data="changeLeverageData" @change="handleLeverageChange" />
    <change-mt-pwd v-model:show="showChangeMtPwd" :data="changeMtPwdData" :type="paaswordType" />
  </div>
</template>

<script setup name="Index">
import KycTipBar from "@/components/KycTipBar"
import BannerBar from "@/components/BannerBar"
import MtAccountCardLine from "./mtAccountLine.vue"
import MtAccountCardBlock from "./mtAccountBlock.vue"
import useAppStore from '@/store/modules/app'
import { queryBannerList, getMtTableInfo, queryHistoryMtLogin, savePlaceFile } from '@/api/common'
import { serverLang } from '@/utils/i18n'
import { useLocale } from 'element-plus'
import { ref } from "vue"
import ChangeLeverage from "./changeLeverage.vue"
import ChangeMtPwd from "./changeMtPwd.vue"
import DataLoading from "@/components/DataLoading"

const { t } = useLocale()
const appStore = useAppStore()
const router = useRouter();

const loadingMt = ref(false)
const loadingMtArchiving = ref(false)

const kycStatus = ref(false)

const showChangeLeverage = ref(false)
const showChangeMtPwd = ref(false)
const changeLeverageData = ref(null)
const changeMtPwdData = ref(null)

const itemStyle = ref(appStore.accountStyle?appStore.accountStyle:'line')

function openChangeLeverage(data) {
  changeLeverageData.value = {
    mt4_server: data.mt4_server,
    mt4_login: data.mt4_login, 
    mt4_leverage_old: data.mt4_leverage
  }
  showChangeLeverage.value = true
}

function handleLeverageChange() {
  loadMtTable()
}

// 0交易密码, 1:只读密码
const paaswordType = ref(0)

function openChangeMtPwd(data, type) {
  paaswordType.value = type
  changeMtPwdData.value = {
    mt4_server: data.mt4_server,
    mt4_login: data.mt4_login
  }
  showChangeMtPwd.value = true
}

function openChangeArchiving(data) {
  openMsg({
    title: t('home.mtArchiving'),
    width: '600',
    status: 'warning',
    btn: {
      cancel: {
        text: t('common.cancelText')
      },
      ok: {
        text: t('common.okText')
      }
    }
  }).then(() => {
    doArchiving(data)
  }).catch(()=> {})
}

function doArchiving(data) {
  savePlaceFile({
    id: data.id
  }).then(resp => {
    window.showTip({
      title: t('common.success.action'),
      status: 'success'
    })
    loadMtTable()
    loadArchivingList()
  })
}

const showBanner = ref(appStore.showBanner == '1')
const bannerList = ref([])

const activeMtName = ref('live4')
const mt4LiveList = ref([])
const mt5LiveList = ref([])
const mtDemoList = ref([])
const archivingList = ref([])

function tabClick(data) {
  if (activeMtName.value == data) {
    return
  }
  if (data == 'archiving') {
    loadArchivingList()
  } else {
    loadMtTable()
  }
  activeMtName.value = data
}

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

function goTradeList(item) {
  router.push({ name: 'TradeList', query: {mt4_login: item.mt4_login, mt4_server: item.mt4_server} });
}

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

function loadMtTable() {
  loadingMt.value = true
  getMtTableInfo({
    mt4_server: '',
    language: serverLang(),
    server_type: ''
  }).then(resp => {
    if (resp.data) {
      mt4LiveList.value = resp.data.filter(i => i.mt_versions == 4 && i.server_type == 'live')
      mt5LiveList.value = resp.data.filter(i => i.mt_versions == 5 && i.server_type == 'live')
      mtDemoList.value = resp.data.filter(i => i.server_type == 'test')
    }
    loadingMt.value = false
  }).catch(() => {
    loadingMt.value = false
  })
}

function loadArchivingList() {
  loadingMtArchiving.value = true
  queryHistoryMtLogin({
    language: serverLang()
  }).then(resp => {
    archivingList.value = resp.data
    loadingMtArchiving.value = false
  }).catch(() => {
    loadingMtArchiving.value = false
  })
}

function switchStyle(data) {
  if (data == itemStyle.value) {
    return
  } else {
    itemStyle.value = data
    appStore.setAccountStyle(data)
  }
}

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

loadPageData();
</script>

<style scoped lang="scss">
.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;
    }
  }

  .mt-tabs {
    width: 100%;
    position: relative;
    .tab-items {
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      height: 40px;
      color: rgba(102, 102, 102, 1);
      user-select: none;

      .tab-item {
        padding: 0 50px;
        min-width: 170px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        cursor: pointer;
        white-space: nowrap;
      }

      .tab-item-active {
        color: rgba(51, 51, 51, 1);
        font-weight: 700;
        position: relative;
        &::after {
          content: '';
          position: absolute;
          bottom: -4px;
          height: 4px;
          width: 100%;
          background-color: rgba(51, 51, 51, 1);
        }
      }
    }

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

    .tab-btns {
      position: absolute;
      bottom: 0;
      right: 0;
      display: flex;

      .tab-btn {
        cursor: pointer;
        width: 38px;
        height: 38px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .tab-btn-active {
        background: rgba(236, 236, 236, 1);
      }
    }
  }

  .mt-table {
    width: 100%;
    padding-bottom: 100px;
  }
}

.empty-class {
  width: 77px;
  height: 106px;
}

.create-btn {
  border: none !important;
  background-color: #F3F5F7;
  color: #29BBE4;
}

.create-btn:hover, .create-btn:active {
  background-color: #d4d4d4;
}

</style>