<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="title-bar">
          <span class="title">{{ t('home.createAccount') }}</span>
        </div>
        <el-alert v-if="await_audit_num" :title="t('home.applyRepeat')" type="error" :closable="false" />
        <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>
          <div class="tab-active-bar"></div>
        </div>
        <div class="mt-table" v-show="activeMtName ==='live4'">
          <el-space wrap style="width: 100%;" :size="20">
            <el-card class="mt-account-card" v-for="(item, index) in mt4LiveList" :key="index" v-if="mt4LiveList && mt4LiveList.length" >
              <div class="title-line">
                <div class="type-name">{{ item.name }}</div>
                <div class="tag" v-if="item.ifCent == 'NO'" >{{ t('home.yuan') }}</div>
                <div class="tag fen" v-else-if="item.ifCent == 'YES'" >{{ t('home.fen') }}</div>
              </div>
              <!-- <div class="sub-title">{{ item.mt4_group }}</div> -->
              <div class="desc"></div>
              <div style="width: 296px;position: absolute;bottom: 150px;">
                <div class="info">
                  <view class="k">{{ t('home.minAmount') }}</view>
                  <view class="v">{{ item.in_min ? item.in_min : 0 }}</view>
                </div>
                <el-divider />
                <!-- <div class="info">
                  <view class="k">{{ t('home.initAmount') }}</view>
                  <view class="v">{{ item.init_amount ? item.init_amount : 0 }}</view>
                </div> -->
              </div>
              <div style="width: 296px;text-align: center;position: absolute; bottom: 42px;">
                <router-link :to="'/account/applyMt/' + item.id" v-slot="{ navigate }" >
                  <el-button :disabled="await_audit_num" class="open-btn" type="primary" @click="navigate" >{{ t('home.startOpen') }}</el-button>
                </router-link>
              </div>
            </el-card>
            <el-empty v-else-if="!loadingMt" style="margin: auto;" >
              <template #image>
                <svg-icon icon-class="empty" class="empty-class" />
              </template>
              <template #description>
                <span></span>
              </template>
            </el-empty>
            <data-loading v-else-if="loadingMt" />
          </el-space>
        </div>
        <div class="mt-table" v-show="activeMtName ==='live5'">
          <el-space wrap style="width: 100%;" :size="20">
            <el-card class="mt-account-card" v-for="(item, index) in mt5LiveList" :key="index" v-if="mt5LiveList && mt5LiveList.length" >
              <div class="title-line">
                <div class="type-name">{{ item.name }}</div>
                <div class="tag" v-if="item.ifCent == 'NO'" >{{ t('home.yuan') }}</div>
                <div class="tag fen" v-else-if="item.ifCent == 'YES'" >{{ t('home.fen') }}</div>
              </div>
              <!-- <div class="sub-title">{{ item.mt4_group }}</div> -->
              <div class="desc"></div>
              <div style="width: 296px;position: absolute;bottom: 150px;">
                <div class="info">
                  <view class="k">{{ t('home.minAmount') }}</view>
                  <view class="v">{{ item.in_min ? item.in_min : 0 }}</view>
                </div>
                <el-divider />
                <!-- <div class="info">
                  <view class="k">{{ t('home.initAmount') }}</view>
                  <view class="v">{{ item.init_amount ? item.init_amount : 0 }}</view>
                </div> -->
              </div>
              <div style="width: 296px;text-align: center;position: absolute; bottom: 42px;">
                <router-link :to="'/account/applyMt/' + item.id" v-slot="{ navigate }" >
                  <el-button :disabled="await_audit_num" class="open-btn" type="primary" @click="navigate" >{{ t('home.startOpen') }}</el-button>
                </router-link>
              </div>
            </el-card>
            <el-empty v-else-if="!loadingMt" style="margin: auto;" >
              <template #image>
                <svg-icon icon-class="empty" class="empty-class" />
              </template>
              <template #description>
                <span></span>
              </template>
            </el-empty>
            <data-loading v-else-if="loadingMt" />
          </el-space>
        </div>
        <div class="mt-table" v-show="activeMtName ==='demo'">
          <el-space wrap style="width: 100%;" :size="20">
            <el-card class="mt-account-card" v-for="(item, index) in mtDemoList" :key="index" v-if="mtDemoList && mtDemoList.length" >
              <div class="title-line">
                <div class="type-name">{{ item.name }}</div>
                <div class="tag" v-if="item.ifCent == 'NO'" >{{ t('home.yuan') }}</div>
                <div class="tag fen" v-else-if="item.ifCent == 'YES'" >{{ t('home.fen') }}</div>
              </div>
              <!-- <div class="sub-title">{{ item.mt4_group }}</div> -->
              <div class="desc"></div>
              <div style="width: 296px;position: absolute;bottom: 150px;">
<!--                <div class="info">-->
<!--                  <view class="k">{{ t('home.minAmount') }}</view>-->
<!--                  <view class="v">{{ item.in_min ? item.in_min : 0 }}</view>-->
<!--                </div>-->
<!--                <el-divider />-->
                <!-- <div class="info">
                  <view class="k">{{ t('home.initAmount') }}</view>
                  <view class="v">{{ item.init_amount ? item.init_amount : 0 }}</view>
                </div> -->
              </div>
              <div style="width: 296px;text-align: center;position: absolute; bottom: 42px;">
                <router-link :to="'/account/applyMt/' + item.id + '?type=demo'" v-slot="{ navigate }" >
                  <el-button :disabled="await_audit_num" class="open-btn" type="primary" @click="navigate" >{{ t('home.startOpen') }}</el-button>
                </router-link>
              </div>
            </el-card>
            <el-empty v-else-if="!loadingMt" style="margin: auto;" >
              <template #image>
                <svg-icon icon-class="empty" class="empty-class" />
              </template>
              <template #description>
                <span></span>
              </template>
            </el-empty>
            <data-loading v-else-if="loadingMt" />
          </el-space>
        </div>
      </div>
    </div>
  </template>
  
<script setup name="Index">
import BannerBar from "@/components/BannerBar"
import useAppStore from '@/store/modules/app'
import { queryBannerList, queryMtTypeListByDemo } from '@/api/common'
import { queryMtTypeList, getApplyMTAwaitAuditNum } from '@/api/account'
import { serverLang } from '@/utils/i18n'
import { useLocale } from 'element-plus'
import { onMounted, ref } from "vue"
import DataLoading from "@/components/DataLoading"

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

const showBanner = ref(appStore.showBanner == '1')
const bannerList = ref([])
const loadingMt = ref(false)
const activeMtName = ref('live4')
const mt4LiveList = ref([])
const mt5LiveList = ref([])
const mtDemoList = ref([])

const await_audit_num = ref(0)

function tabClick(data) {
    if (activeMtName.value == data) {
        return
    }
    activeMtName.value = data
    if (data == 'demo') {
      loadMtDemoType()
    } else {
      loadMtType()
    }
}

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
        }
    })
}

function loadMtType() {
    loadingMt.value = true
    queryMtTypeList({
        qcc_language: serverLang()
    }).then(resp => {
        if (resp.data) {
            mt4LiveList.value = resp.data.filter(i => i.mt_versions == 'MT4' && i.server_type == 'live')
            mt5LiveList.value = resp.data.filter(i => i.mt_versions == 'MT5' && i.server_type == 'live')
            // mtDemoList.value = resp.data.filter(i => i.server_type == 'test')
        }
        loadingMt.value = false
    }).catch(() => {
      loadingMt.value = false
    })
}

function loadMtDemoType() {
  loadingMt.value = true
  queryMtTypeListByDemo({
      qcc_language: serverLang()
  }).then(resp => {
      if (resp.data) {
          mtDemoList.value = resp.data
      }
      loadingMt.value = false
  }).catch(() => {
    loadingMt.value = false
  })
}

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

loadPageData();

onMounted(() => {
  // 查询开户申请待审核数量
  getApplyMTAwaitAuditNum().then(resp => {
    await_audit_num.value = resp.data.await_audit_num
  })
})
</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%;
      .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);
      }
    }
  
    .mt-table {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .mt-account-card {
        margin: 20px 0 0;
        width: 336px;
        position: relative;
  
        :deep(.el-card__body) {
          width: 100%;
          height: 430px;
          padding: 20px !important;
        }

        .title-line {
          width: 100%;
          margin-bottom: 8px;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;

          .type-name {
            font-size: 28px;
            font-weight: 700;
            letter-spacing: 0px;
            line-height: 40.54px;
            color: rgba(51, 51, 51, 1);
          }

          .tag {
            padding: 0 15px;
            height: 27.35px;
            opacity: 1;
            border-radius: 132px;
            background: rgba(37, 192, 229, 1);
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0px;
            color: #fff;
            display: table-cell;
            vertical-align: middle;
            line-height: 27.35px;;
            text-align: center;
            flex-shrink: 0;
          }

          .fen {
            background: #43CF7C;
          }
        }
  
        .sub-title {
          font-size: 16px;
          font-weight: 700;
          letter-spacing: 0px;
          line-height: 23.17px;
          color: rgba(51, 51, 51, 1);
          margin-bottom: 4px;
        }

        .desc {
          font-size: 12px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 17.38px;
          color: rgba(102, 102, 102, 1);
        }

        .info {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .k {
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 23.17px;
            color: rgba(102, 102, 102, 1);
          }

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

        :deep(.el-divider--horizontal) {
          margin: 10px 0;
        }

        .open-btn {
          height: 48px;
          min-width: 168px;
          font-size: 18px;
          font-weight: 400;
        }
      }
    }
  }
  </style>
  
  