<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('download.softwareDownload') }}</span>
      </div>
      <div>
        <!--MT4-->
        <div class="download-tabs">
          <div class="tab-left">
            <div style="height: 100%;padding: 16px 0;display: flex;justify-content: center;align-items: center;">
              <img class="tab-left-img" src="https://htfx.oss-cn-hongkong.aliyuncs.com/crmhtfx/icon/mt4.png">
            </div>
          </div>
          <div class="tab-right">
            <div class="tab-card" v-for="(item, index) in downListMt4">
              <div class="img" :style="{'background-image': `url(${item.logo_name})`}" ></div>
              <span>{{item.title}}</span>
              <button class="tab-card-1" @click="download(item)">{{ t('download.download') }}</button>
              <div class="tab-card-before" v-if=" (index+1)%5 != 0 && index+1 != downListMt4.length"></div>
            </div>
          </div>
        </div >
        <!--MT5-->
        <div class="download-tabs" style="padding-top: 38px;">
          <div class="tab-left">
            <div style="height: 100%;padding: 16px 0;display: flex;justify-content: center;align-items: center;">
              <img class="tab-left-img" src="https://htfx.oss-cn-hongkong.aliyuncs.com/crmhtfx/icon/mt5.png">
            </div>
          </div>
          <div class="tab-right">
            <div class="tab-card" v-for="(item, index) in downListMt5">
              <div class="img" :style="{'background-image': `url(${item.logo_name})`}" ></div>
              <span>{{item.title}}</span>
              <button class="tab-card-2"  @click="download(item)">{{ t('download.download') }}</button>
              <div class="tab-card-before" v-if=" (index+1)%5 != 0 && index+1 != downListMt5.length"></div>
            </div>
          </div>
        </div >
      </div>
    </div>
  </div>
</template>

<script setup name="Index">

import BannerBar from "@/components/BannerBar/index.vue";
import useAppStore from "@/store/modules/app.js";
import {queryBannerList,queryDownList} from "@/api/download.js";
import {serverLang} from "@/utils/i18n.js";
import {useLocale} from "element-plus";

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

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

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 loadDownList() {
  queryDownList({
    qcc_language: serverLang(),
    position: 1,
    type: 2
  }).then(resp => {
    if (resp.data) {
      downListMt4.value = resp.data.mt4List.map(i => {
        return {
          title: i.title,
          file_url: i.file_url,
          logo_name: i.logo_name,
          status: i.status,
        }
      })
      downListMt5.value = resp.data.mt5List.map(i => {
        return {
          title: i.title,
          file_url: i.file_url,
          logo_name: i.logo_name,
          status: i.status,
        }
      })
    }
  })
}

function download(item){
  window.open(item.file_url, '__blank')
}

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

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

  .download-tabs{
    display: flex;
    width: 100%;
    .tab-left{
      width: 20%;
      height: 329px;
      .tab-left-img{
        width: 67.6%;
      }
    }
    .tab-right{
      width: 80%;
      display: flex;
      flex-wrap: wrap;

      .tab-card:not(:last-of-type) {
        border-right: 1px solid #C7C7C7;
      }

      .tab-card{
        display: flex;
        flex-direction:column;
        width: 20%;
        height: 329px;
        position:relative;

        .img {
          width: 42.27%;
          padding-top: 42.27%;
          margin: 59px auto 0px;
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
        }
        span {
          max-width: 100%;
          width: 126px;
          font-size: 18px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 26.06px;
          color: rgba(0, 0, 0, 1);
          text-align: center;
          vertical-align: top;
          margin: 27px auto 0px;
        }
        .tab-card-1 {
          max-width: 100%;
          width: 51%;
          height: 32px;
          border: none;
          margin: auto auto 38px;
          color: rgba(255, 255, 255, 1);
          background: rgba(41, 187, 228, 1);
        }
        .tab-card-2{
          max-width: 100%;
          width: 51%;
          height: 32px;
          border: none;
          margin: auto auto 38px;
          color: rgba(255, 255, 255, 1);
          background: rgba(15, 54, 117, 1);
        }
        .tab-card-1:hover{
          cursor:pointer;
          background: #50ccea;
        }
        .tab-card-2:hover{
          cursor:pointer;
          background: #3d5489;
        }
      }
    }

  }

}

</style>