<template>
  <div id="dowebok" ref="dowebok">
    <div class="section" v-if="0">
      <div class="banner-block col-xs-8">
        <!-- <el-carousel :interval="6000" height="490px">
          <el-carousel-item v-for="item in pcBannerList" :key="item.id">
             <img :src="item.imgurl" width="100%" height="100%" />
          </el-carousel-item>
        </el-carousel> -->
<!--        <img src="../../assets/img/index_banner_2.png" alt="" class="index_banner">-->
        <div class="banner_right">
          <p class="banner_right_p">The world's top security risk control system</p>
<!--          <input type="text" :placeholder="$t('login.pleaseEmail')" class="banner_right_input">-->
<!--          <div class="banner_right_code">-->
<!--            <input type="text" :placeholder="$t('setting.enterCode')" class="banner_right_input">-->
<!--            <button>{{ $t("login.verCode") }}</button>-->
<!--          </div>-->
<!--          <button class="banner_right_sign">{{$t('common.sign_up')}}</button>-->
        </div>
      </div>
      <!-- 公告 -->
      <!-- <div class="notice container d-flex align-items-center">
        <div class="item d-flex" @click="$router.push(`/notice/${item.id}`)" v-for="(item) in noticeList" :key="item.id">
          <div class="title text-truncate">{{item.title}}</div>
          <div class="time">{{getNoticeDate(item.created_at)}}</div>
        </div>
        <router-link to="/notice" class="text-warning">{{$t('home.more')}}</router-link>
      </div> -->
      <!-- 走马灯 -->
      <!-- <div class="marquee">
        <div class="marquee-pargress d-flex">
          <ul class="marquee-list d-flex" v-for="box in 4" :key="box">
            <li
              class="item border-right"
              v-for="item in homeList"
              :key="item.pair + '' + box"
            >
              <div class="symbol fn-16 mb-2">{{ item.pair }}</div>
              <div class="d-flex justify-content-between">
                <span>{{ item.price }}</span>
                <span :class="item.increase >= 0 ? 'increace' : 'decreace'">
                  {{ item.increaseStr }}
                  <i class="el-icon-caret-top" v-if="item.increase >= 0"></i>
                  <i class="el-icon-caret-bottom" v-else></i>
                </span>
              </div>
            </li>
          </ul>
        </div>
      </div> -->
    </div>
    <div class="section-block section-block-1 ">
      <div class="d-flex justify-content-between" v-if="isLogin">
        <div class="block-1-left">
          <h1>{{ $t("cxiNewText.a24") }}</h1>
          <div class="mt-4 mb-3 fn-18">{{ $t("cxiNewText.a82") }}</div>
          <div class="btn1 mb-3"><router-link to="/wallet/assets/exchange?buy=1" class="target-a">{{ $t("cxiNewText.a24") }}</router-link></div>
        </div>
        <div class="d-flex block-1-right">
          <img src="../../../static/images/lightImageUrl_2.png" alt="" style="width: 420px;height: 290px;margin: 35px 10px;">
        </div>
      </div>
      <div class="d-flex justify-content-between" v-if="!isLogin">
        <div class="block-1-left">
          <h1>{{ $t("cxiNewText.a22") }}</h1>
          <div class="mt-4 mb-3 fn-18">{{ $t("cxiNewText.a23") }}</div>
          <div class="btn3 mb-3"><router-link to="/sign-up" class="target-a">{{ $t("cxiNewText.a25") }}</router-link></div>
        </div>
        <div class="d-flex block-1-right">
          <img src="../../../static/images/lightImageUrl.png" alt="" style="width: 350px;height: 310px;margin: 25px 45px;">
        </div>
      </div>
      <div class="table1" style="width:95%;text-align: center;">
        <div class="tr1">
          <h1 class="td1">{{ $t("cxiNewText.a0") }}</h1>
          <h1 class="td1" style="text-align: center;">{{ $t("cxiNewText.a1") }}</h1>
          <h1 class="td1" style="text-align: center;">{{ $t("cxiNewText.a2") }}</h1>
          <h1 class="td1" style="text-align: center;">{{ $t("cxiNewText.a3") }}</h1>
        </div>
        <div class="tr1">
          <div class="td1">{{ $t("cxiNewText.a4") }}</div>
          <div class="td1" style="text-align: center;">{{ $t("cxiNewText.a5") }}</div>
          <div class="td1" style="text-align: center;">{{ $t("cxiNewText.a6") }}</div>
          <div class="td1" style="text-align: center;">{{ $t("cxiNewText.a7") }}</div>
        </div>
      </div>
    </div>
    <div class="section-block section-block-2">
      <h1>{{ $t("cxiNewText.a80") }}</h1>
      <div style="font-size: 20px;margin-bottom: 3rem;color: #6A6E74;">{{ $t("cxiNewText.a81") }}</div>
      <div class="d-flex justify-content-between" style="flex-wrap:wrap;" v-for="(parentItem, index11) in marketList" :key="index11" >
        <template v-if="parentItem.coin_name=='USDT'">
          <div class="cell" v-for="(item, index) in parentItem.marketInfoList.slice(0,8)" :key="index">
            <div class="cell-b">
                <img alt="" :src="item.coin_icon" width="36" height="36" />
                <span>{{item.coin_name}}</span>
                <div :class="item.increase * 1 < 0 ? 'green-f color-sell' : 'green-f color-buy'">{{item.increaseStr}}</div>
              </div>
            <div class="cell-b" style="margin-top: 30px;">
              <div style="color:#9292AA;font-weight: bold;font-size: 20px;">${{ item.close }}</div>
              <div><router-link to="/sign-in" style="background: #EAECEF;padding: 10px;line-height: 14px;">
                <img src="../../../static/images/icon/right.png" alt="" width="20" height="20" />
              </router-link></div>
            </div>
          </div>
        </template>
      </div>
      <div class="btn3"><router-link to="/sign-in" class="target-a">{{ $t("cxiNewText.a21") }}</router-link></div>
    </div>
    <div class="section-block section-block-3">
      <div class="d-flex justify-content-between" style="align-items: center;margin-top: 40px;">
        <h1>{{ $t("cxiNewText.a41") }}</h1>
        <!-- <span>
          <router-link to="/college/list/18" style="color:#999;">{{ $t("cxiNewText.a18") }}</router-link>
          <img src="../../../static/images/icon/right.png" alt="" width="10" height="10" />
        </span> -->
      </div>
      <div style="font-size: 20px;margin-bottom: 3rem;color: #6A6E74;">{{ $t("cxiNewText.a42") }}</div>
      <div class="d-flex justify-content-between">
        <div style="display: flex;flex-direction: column;justify-content: center;">
          <div class="d-flex mb-4">
            <img src="../../../static/images/icon_1.png" alt="" class="img">
            <div style="margin-left:40px;"><div style="font-size: 20px;">{{ $t("cxiNewText.a43") }}</div><div style="color: #6A6E74;">{{ $t("cxiNewText.a44") }}</div></div>
          </div>
          <div class="d-flex mb-4">
            <img src="../../../static/images/icon_2.png" alt="" class="img">
            <div style="margin-left:40px;"><div style="font-size: 20px;">{{ $t("cxiNewText.a45") }}</div><div style="color: #6A6E74;">{{ $t("cxiNewText.a46") }}</div></div>
          </div>
          <div class="d-flex mb-4">
            <img src="../../../static/images/icon_3.png" alt="" class="img">
            <div style="margin-left:40px;"><div style="font-size: 20px;">{{ $t("cxiNewText.a47") }}</div><div style="color: #6A6E74;">{{ $t("cxiNewText.a48") }}</div></div>
          </div>
        </div>
        <img src="../../../static/images/trusted-section.png" alt="" style="width:443px;height:403px;flex-shrink: 0;">
      </div>
    </div>
    <div class="section-block section-block-4">
      <h1>{{ $t("cxiNewText.a71") }}</h1>
      <div style="color: #6A6E74;margin-bottom: 30px;">{{ $t("cxiNewText.a72") }}</div>
      <!-- <div class="d-flex mt-3 mb-4">
          <div class="label-1" v-for="(itemV, index) in guideList" :key="index" :class="itemV.id == cid ? 'de' : 'in'"
           @click="routerLink(itemV.id)">{{itemV.label}}</div>
      </div> -->
      <div class="d-flex justify-content-between">
          <div class="img-box" v-for="(item, index) in articleList" :key="index">
              <router-link class="post-link" :to="`/college/detail/${item.category_id}/${item.id}`">
                  <img :src="item.full_cover" alt="" >
              </router-link>
              <div>{{ item.title }}</div>
          </div>
      </div>
    </div>
    <div class="section-block section-block-5">
      <div class="d-flex justify-content-between ">
        <h1>{{ $t("cxiNewText.a38") }}</h1>
      </div>
      <div style="font-size: 20px;margin-bottom: 3rem;color: #6A6E74;">{{ $t("cxiNewText.a39") }}</div>
      <div class="d-flex justify-content-between" style="align-items: center;">
        <img src="../../../static/images/illustration-3.png" alt="" style="height:430px;margin-right:80px;">
        <div>
          <div class="d-flex mb-5" style="background:#FAFAFA;align-items: center;">
            <!-- <img src="../../../static/images/11111.png" alt="" width="80" height="80"> -->
            <div style="width:80px;height:80px;"><!-- img代替符 --></div>
            <div>
              <div>{{ $t("cxiNewText.a40") }}</div><div style="font-weight:bold;">IOS & Android</div>
            </div>
          </div>
          <div class="d-flex" style="flex-wrap: wrap;">
            <div class="icon-box"><img src="../../../static/images/icon/ios.png" alt=""><div>APP Store</div></div>
            <div class="icon-box"><img src="../../../static/images/icon/andriod.png" alt=""><div>Android APK</div></div>
            <!-- <div class="icon-box"><img src="../../../static/images/icon/google-play.png" alt=""><div>Google Play</div></div> -->
            <!-- <div class="icon-box"><img src="../../../static/images/icon/imac.png" alt=""><div>MacOS</div></div> -->
            <!-- <div class="icon-box"><img src="../../../static/images/icon/windows.png" alt=""><div>Windows</div></div> -->
            <!-- <div class="icon-box"><img src="../../../static/images/icon/linux.png" alt=""><div>Linux</div></div> -->
            <!-- <div class="icon-box"><img src="../../../static/images/icon/api.png" alt=""><div>API</div></div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="section-block section-block-6">
      <h1 class="mb-4">{{ $t("cxiNewText.a21") }}</h1>
      <div class="btn3"><router-link to="/sign-up" class="target-a">{{ $t("cxiNewText.a57") }}</router-link></div>
    </div>
    <div class="section1 markets" v-if="0">
      <div class="new-ticker-block new-ticker-block-section">
        <div class="container">
          <div class="markets__container new-ticker-block-wrap shadow">
            <div class="ticker-head">
              <ul class="nav nav-tabs ticker-nav" role="tablist">
                <li class="nav-item">
                  <div class="markets__title">
                     {{ $t("home.marketCenter") }}
<!--                      {{$t('addinfo.MarketTrend')}}-->
                    <span class="markets__title_span">/ 24{{$t("addinfo.HourlyCurrencyUpdates") }}</span>
                  </div>
                </li>
                <!-- <li class="nav-item">
                  <a
                    class="nav-link"
                    href="javascript:void(0);"
                    @click="tab = 'Optional'"
                    :class="{ active: tab == 'Optional' }"
                  >
                    {{ $t("home.optional") }}
                    <i class="fa fa-stroopwafel"></i>
                  </a>
                </li>
                <li
                  class="nav-item"
                  @click="tab = item.coin_name"
                  v-for="item in marketList"
                  :key="item.coin_name"
                >
                  <a
                    class="nav-link"
                    :class="{ active: tab == item.coin_name }"
                    href="javascript:void(0);"
                    >{{ item.coin_name }}</a
                  >
                </li> -->
              </ul>
            </div>
            <div class="market-ticker-block">
              <!-- Tab panes -->
              <div class="tab-content">
                <div
                  class="tab-pane fade in show"
                  :class="{ active: 'Optional' == tab }"
                >
                  <table class="table coin-list table-hover">
                    <thead>
                      <tr>
                        <th></th>
                        <th scope="col">{{ $t("home.coinType") }}</th>
                        <th scope="col">{{ $t("home.latestPrice") }}</th>
                        <th scope="col">
                          {{ $t("home.upAndDown") }}
                          <span class="ti-arrow-down"></span>
                        </th>
                        <th scope="col">{{ $t("home.heigh") }}</th>
                        <th scope="col">{{ $t("home.low") }}</th>
                        <th scope="col">
                          <div class="text-center">{{ $t("home.vol") }}</div>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr
                        v-for="item in collect"
                        v-show="isShow(item.pair_name)"
                        :key="item.pair_name"
                      >
                        <td>
                          <i
                            href="javascript:void(0);"
                            @click="option(item)"
                            :class="{ active: isCoolect(item) }"
                            class="el-icon-star-on fn-22"
                          ></i>
                        </td>
                        <td>
                          <router-link :to="`/exchange/${item.symbol}`">{{
                            item.pair_name
                          }}</router-link>
                        </td>
                        <td>
                          <span
                            :class="
                              item.increase * 1 >= 0 ? 'increace' : 'decreace'
                            "
                            >{{ item.close }}</span
                          >
                        </td>
                        <td>
                          <span
                            :class="
                              item.increase * 1 >= 0 ? 'increace' : 'decreace'
                            "
                            >{{ item.increaseStr }}</span
                          >
                        </td>
                        <td>{{ item.high }}</td>
                        <td>{{ item.low }}</td>
                        <td class="text-center">{{ item.vol }}</td>
                      </tr>
                      <tr v-if="!collect.length">
                        <td colspan="7">
                          <no-record />
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div
                  class="tab-pane fade in show"
                  :class="{ active: parentItem.coin_name == tab }"
                  v-for="parentItem in marketList"
                  :key="parentItem.coin_name"
                >
                  <table class="table coin-list table-hover">
                    <thead>
                      <tr>
                        <!-- <th></th> -->
                        <!-- <th scope="col" class="table_th">{{ $t("home.coinType") }}</th> -->
                        <th scope="col" class="table_th">{{ $t("option.coinType") }}</th>
                        <!-- <th scope="col" class="table_th">{{ $t("home.low") }}</th> -->
                        <th scope="col" class="table_th">{{ $t("home.latestPrice") }}</th>
                        <th scope="col" class="table_th">
                           {{ $t("home.upAndDown") }}
<!--                          24小时涨停-->
                          <span class="ti-arrow-down"></span>
                        </th>
                        <th scope="col" class="table_th">{{$t("common.markets")}}</th>
                        <th scope="col" class="table_th">{{ $t("wallet.transaction") }}</th>
                        <!-- <th scope="col" class="table_th">{{ $t("home.heigh") }}</th> -->

                        <!-- <th scope="col" class="table_th">
                          <div class="text-center">{{ $t("home.vol") }}</div>
                        </th> -->
                      </tr>
                    </thead>
                    <tbody>
                      <template
                        v-for="(item, idx) in parentItem.marketInfoList"
                      >
                        <tr
                          v-if="idx < 8"
                          v-show="isShow(item.pair_name)"
                          :key="item.pair_name"
                        >
                          <!-- <td>
                            <i
                              href="javascript:void(0);"
                              @click="option(item)"
                              :class="{ active: isCoolect(item) }"
                              class="el-icon-star-on star-icon fn-22"
                            ></i>
                          </td> -->
                          <td>
                            <router-link :to="`/exchange/${item.symbol}`">
                              <img :src="item.coin_icon" alt="" class="coin_icon">
                              {{item.pair_name}}
                            </router-link>
                          </td>
                          <td>
                            <span
                              :class="
                                item.increase * 1 >= 0 ? 'increace' : 'decreace'
                              "
                              >{{ item.close }}</span
                            >
                          </td>
                          <!-- <td>{{ item.low }}</td> -->
                          <td>
                            <span
                              :class="
                                item.increase * 1 >= 0 ? 'increace' : 'decreace'
                              "
                              >{{ item.increaseStr }}</span
                            >
                          </td>
                          <td>
                            <!-- <span
                              :class="
                                item.increase * 1 >= 0 ? 'increace' : 'decreace'
                              "
                              >{{ item.increaseStr }}</span
                            > -->
                            <!-- <img src="../../assets/img/increace.png" class="td_img" alt="" v-show="item.increase * 1 >= 0">
                            <img src="../../assets/img/decreace.png" class="td_img" alt="" v-show="item.increase * 1 < 0"> -->
                            <!-- <svg width="109" height="39">
                                <g style="transform: translate(0, 10px)">
                                    <path :d="item.line"  :class="item.increase *1 <0 ?'path_decreace':'path_increace'"/>
                                </g>
                            </svg> -->
                            <price-line :line="item.prices" :increase="item.increase"  class="td_img"/>
                          </td>
                          <td>
                            <router-link :to="`/exchange/${item.symbol}`">
                              <button class="td_button">{{ $t("otc.b7") }}</button>
                            </router-link>
                          </td>
                          <!-- <td>{{ item.high }}</td> -->

                          <!-- <td class="text-center">{{ item.vol }}</td> -->
                        </tr>
                      </template>
                    </tbody>
                  </table>
                  <!-- coin-list table -->
                </div>
                <!-- market-ticker-block -->
              </div>
            </div>
          </div>



          <div class="text-center">
            <!-- tag="button"
              type="button" -->
            <router-link
              to="/market"

              class="view-more btn btn-outline-light"
            >
               {{ $t("home.more") }}
<!--              查看更多-->
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="banner-block col-xs-8 banner2" v-if="0">
      <p class="banner_right_p">{{$t("addinfo.TopEncryptionRiskManagement")}}</p>
      <p class="banner_right_p1">{{ $t("addinfo.EscortYourPropertySafety") }}</p>
      <div class="banner_right_button">{{ $t("addinfo.ProvidedByTheExperimentalCenter") }}</div>
    </div>




    <div class="banner-block col-xs-8 banner3" v-if="0">
      <p class="banner3_p">
        <span>{{ $t("addinfo.ProvidedByTheExperimentalCenter") }}</span><br/>
        <span class="banner3_p_span">{{ $t("addinfo.ScanTheQRCodeBelowToDownload") }}</span>
      </p>
      <div class="banner3_content">
        <div class="banner3_content_item">
          <!-- <img src="../../assets/img/homescaniso.png" alt="" class="banner3_content_item_code"> -->
          <img src="../../assets/img/download.png" alt="" class="banner3_content_item_code">
          <img src="../../assets/img/Android.png" alt="" class="banner3_content_item_code1">
          <div class="introduce">
            <!-- <span class="glyphicon glyphicon-phone"></span> -->
            <span>{{ $t("addinfo.AndroidScanCodeDownload")}}</span>
          </div>
        </div>
        <div class="banner3_content_item">
          <!-- <img src="../../assets/img/homescaniso.png" alt="" class="banner3_content_item_code"> -->
          <img src="../../assets/img/download_io.png" alt="" class="banner3_content_item_code">
          <!-- <img src="../../assets/img/IOS.png" alt="" class="banner3_content_item_code1"> -->
          <img src="../../assets/img/IOS.png" alt="" class="banner3_content_item_code1">
          <div class="introduce">
            <!-- <ion-icon name="phone-portrait"></ion-icon> -->
            <span>{{ $t("addinfo.IOSScanCodeDownload")}}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="section news">
      <div class="lattest-news-section">
        <div class="container">
          <header>
            <h3 class="news-title">{{$t('common.noviceTutorial')}}</h3>
            <div class="tips">{{$t('home.core_advantages')}}</div>
          </header>
          <div class="row content">
            <template v-for="(item, idx) in articleList">
              <router-link tag="div" :to="{name:'college-detail',params:{cid:item.category_id,aid:item.id}}" class="item rounded" :key="idx">
                <figure>
                  <img :src="item.full_cover" alt="" />
                  <figcaption>
                    <h5 class="mt-4">{{ truncate(item.title, 26) }}</h5>
                  </figcaption>
                  <div class="eps-2" v-html="item.excerpt"></div>
                </figure>
                <article class="post-style-one" v-if="false">
                  <span class="post-metat-date">{{ item.updated_at }}</span>
                  <p class="post-entry" v-html="item.excerpt"></p>

                  <router-link
                    class="post-link"
                    :to="`/college/detail/${item.category_id}/${item.id}`"
                    >{{ $t("home.detail") }}</router-link
                  >
                </article>
              </router-link>
            </template>
          </div>
        </div>
      </div>
    </div> -->

    <!-- <div class="section">
      多平台下载
      <div class="multi-platform" ref="platform">
        <div class="d-flex container align-items-center">
          <div class="left text-center d-flex align-items-center">
            <div class="d-flex flex-column align-items-center">
              <div class="h2">{{ $t("home.download") }}</div>
              <div class="tip1">{{ $t("home.easy") }}</div>
              <div class="qr-code-box">
                <vue-qr :text="downloadLink" :margin="0" :size="200" />
                <div class="label">
                  <img
                    class="scan-icon"
                    src="../../assets/img/homescan.png"
                    alt=""
                  />
                  {{ $t("home.skan") }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <img
              class=""
              src="../../assets/img/home_bgb.png"
              alt=""
            />
        </div>
      </div>
    </div> -->


    <!-- lattest-news-section -->
    <div class="colto-section" v-if="0">
      <div class="container">
        <div
          class="colto-content-wrap d-flex flex-column align-items-center justify-content-center"
        >
          <div class="colto-content">
            <!-- <div class="title">{{ $t("common.start-trade") }}</div> -->
            <div class="title">{{ $t("addinfo.UseNow") }} Fire phoenix</div>
          </div>
          <div class="colto-btn-group" v-if="!isLogin">
            <router-link tag="button" to="/sign-in" class="btn btn-success rounded-pill callto-btn container_button">{{
              $t("common.login")
            }}</router-link>
            <span>or</span>
            <router-link tag="button" to="/sign-up" class="btn btn-primary rounded-pill callto-btn container_button1">{{
              $t("common.register")
            }}</router-link>
          </div>
          <div v-else class="colto-btn-group">
            <router-link tag="button" to="/exchange" class="btn btn-primary rounded-pill callto-btn">{{
              $t("common.trading")
            }}</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
// import VueAwesomeSwiper from "vue-awesome-swiper";
import vueQr from "vue-qr";
import Home from "@/api/home";
// import "swiper/swiper-bundle.css";
import Socket from "@/api/server/Socket.js";
import College from "@/api/college";
import Member from "@/api/member";
import * as d3 from 'd3';
import priceLine from "../market/price-line";
// Vue.use(VueAwesomeSwiper);
export default {
  components: {
    vueQr,
    priceLine
  },

  computed: {
    isLogin() {
      return Boolean(localStorage.token);
    },
    downloadLink() {
      return "https://app.cxicoin.com/download/FirePhoenix.html";
    },
    // 特色卡片列表
    featuresList() {
      return [
        {
          zoom: false,
          bgclr: "rgba(76, 48, 115, 1)",
          picture: require("@/assets/img/features/trade.png"),
          thumb: require("@/assets/img/features/trade-thumb.png"),
          title: this.$t("home.stablecoin_title"),
          content: this.$t("home.stablecoin_cont"),
        },
        {
          zoom: false,
          bgclr: "rgba(60, 52, 125, 1)",
          picture: require("@/assets/img/features/safe.png"),
          thumb: require("@/assets/img/features/safe-thumb.png"),
          title: this.$t("home.security_title"),
          content: this.$t("home.security_cont"),
        },
        {
          zoom: false,
          bgclr: "rgba(93, 46, 93, 1)", // 背景色
          picture: require("@/assets/img/features/server.png"),
          thumb: require("@/assets/img/features/server-thumb.png"),
          title: this.$t("home.service_title"),
          content: this.$t("home.service_cont"),
        },
        {
          zoom: false,
          bgclr: "rgba(60, 52, 125, 1)",
          picture: require("@/assets/img/features/analysis.png"),
          thumb: require("@/assets/img/features/analysis-thumb.png"),
          title: this.$t("home.analy_title"),
          content: this.$t("home.analy_cont"),
        },
        {
          zoom: false,
          bgclr: "rgba(76, 48, 115, 1)",
          picture: require("@/assets/img/features/tech.png"),
          thumb: require("@/assets/img/features/tech-thumb.png"),
          title: this.$t("home.technology_title"),
          content: this.$t("home.technology_cont"),
        },
        {
          zoom: false,
          bgclr: "rgba(93, 46, 93, 1)",
          picture: require("@/assets/img/features/flow.png"),
          thumb: require("@/assets/img/features/flow-thumb.png"),
          title: this.$t("home.liquidity_title"),
          content: this.$t("home.liquidity_cont"),
        },
      ];
    },
  },

  data() {
    return {
        swiperOptions: {
            pagination: {
            el: ".swiper-pagination",
            },
        },
        bannerList: [],
        articleList: [],
        homeList: [],
        iconList: [],
        marketList: [],
        tab: "Optional",
        searchTxt: "",
        skro: new Skroll(),
        collect: [],
        ws: null,
        pcBannerList:[],
        noticeList:[],
        data: [99, 71, 78, 25, 36, 92],
        line: '',
        guideList: [],
        cid: '',
    };
  },
  methods: {
    getScales(data) {
        const x = d3.scaleTime().range([0, 100]);
        const y = d3.scaleLinear().range([39, 0]);
        d3.axisLeft().scale(x);
        d3.axisBottom().scale(y);
        x.domain(d3.extent(data, (d, i) => i));
        y.domain([0, d3.max(data, d => d)]);
        return { x, y };
        },
    calculatePath() {
        this.marketList[0].marketInfoList.map(item=>{
            const scale = this.getScales(item.prices);
            const path = d3.line()
            .x((d, i) => scale.x(i))
            .y(d => scale.y(d));
            // this.calculatePath(item.prices)
            item.line = path(item.prices);
        })
        console.info(this.marketList[0].marketInfoList)
    },
    truncate(str, length) {
        return _.truncate(str, { length });
    },
    isShow(str) {
        let reg = new RegExp(this.searchTxt, "ig");
        return reg.test(str);
    },
    filterCode: function (str) {
        return str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "");
    },
    swiperPrev() {
        let $swiper = this.$refs.swiper.$swiper;
        $swiper.slidePrev();
    },
    swiperNext() {
        let $swiper = this.$refs.swiper.$swiper;
        $swiper.slideNext();
    },
    indexList() {
        Home.indexList().then((res) => {
            // console.info(res)
            this.bannerList = res.bannerList;

            this.homeList = res.homeList;
            this.marketList = res.marketList;
            // this.calculatePath()
            this.iconList = res.iconList;
            this.pcBannerList = res.pcBannerList
            this.tab = this.marketList[0].coin_name;
            setTimeout(() => {
                this.skroll();
            }, 100);
        })
        .catch((res) => {});
    },
    skroll() {
        let skro = this.skro;

        skro
            .add(".marquee-list .item", {
            animation: "fadeInLeft",
            delay: 80,
            duration: 1000,
            })
            .add(".new-ticker-block", {
            animation: "fadeInRight",
            delay: 80,
            duration: 800,
            })
            .add(".shlitu", {
            animation: "fadeInLeft",
            delay: 80,
            duration: 800,
            })
            .add(".activity-box", {
            animation: "zoomIn",
            delay: 80,
            duration: 800,
            })
            .add(".lattest-news-section .item", {
            animation: "zoomIn",
            wait: 150,
            delay: 80,
            duration: 800,
            })
            .init();
    },

    // 是否为自选
    isCoolect(i) {
        return this.collect.map((item) => item.pair_name).includes(i.pair_name);
    },

    // 获取自选交易列表
    getCollect() {
        Home.getCollect().then((res) => {
            this.collect = res || [];
        })
        .catch((err) => {});
    },

    // 添加自选
    option(item) {
      let data = {
        pair_name: item.pair_name,
      };
      Home.option(data)
        .then((res) => {
          this.getCollect();
          if (res) {
            this.$message.success(this.$t("home.add"));
          } else {
            this.$message.success(this.$t("home.cancel"));
          }
        })
        .catch((err) => {});
    },

    // 替换自选数据
    replaceOptional() {
      let collect = this.collect.map((item) => item.pair_name);
      this.marketList.forEach((parentItem) => {
        parentItem.marketInfoList.forEach((item) => {
          let idx = collect.indexOf(item.pair_name);
          if (idx != -1) {
            this.collect.splice(idx, 1, item);
          }
        });
      });
    },

    // 链接socket
    indexMarketList() {
        const ws = new Socket(this.Globals.Server.Path.WS);
        ws.on("open", () => {
            this.ws = ws;
            ws.send({
            cmd: "sub",
            msg: "indexMarketList",
            });
        });
        ws.on("message", (res) => {
            console.info(res)
            let { data, msg, code, sub, type, status } = res;
            if (sub == "indexMarketList") {
                this.marketList = data;
                this.replaceOptional();
                // this.calculatePath()
            } else if (type == "ping") {
                ws.send({
                    cmd: "pong",
                });
            }
        });
    },

    // 鼠标移入卡片的样式
    addZoom(idx) {
      // 放大图片
      this.featuresList.forEach((item, key, arr) => {
        if (idx == key) {
          arr[key].zoom = true;
        } else {
          arr[key].zoom = false;
        }
      });
    },

    // 鼠标移出卡片的样式
    removeZoom(idx) {
      this.featuresList[idx].zoom = false;
    },

    // 新手教程
    getCollegeLinks() {
      College.getCategoryList().then(list => {
          list.forEach(item => {
              if (this.cid === '') this.cid = item.id;
              this.guideList.push({
                  url : `/college/list/${item.id}`,
                  label : item.name,
                  value : item.name,
                  id : item.id
              })
          })
      }).catch(err => {});
    },
    routerLink(e){
      this.cid = e;
      this.getArticleListItem();
    },
    getArticleListItem() {
      College.getArticleList(this.cid).then(data => {
          this.articleList = data.splice(0, 3);
      }).catch();
    },
    getArticleList() {
      College.getArticleList(18).then(data => {
        this.articleList = data.splice(0,3);
        setTimeout(() => {
          this.skroll();
        }, 100);
      }).catch();
    },
    // 獲取公告列表
    article(){
      Member.article({type:'notice'}).then(res=>{
        this.noticeList = res.data.splice(0,4)
      })
    },
    getNoticeDate(str){
      let _time = new Date(str);
      return (_time.getMonth()+1)+'-'+_time.getDate()
    }
  },
created(){
    this.indexList();
},
mounted() {
    this.article()
    if (this.isLogin) {
        this.getCollect();
    }
    this.indexMarketList();
    this.getCollegeLinks();
    this.getArticleList()
    /*
     * swiper 轮播图效果
     */
    // features 卡片轮播
    const mySwiper = new Swiper(".swiper-container", {
      // slidesPerGroup: 1,
      // loop: true,
      // loopFillGroupWithBlank: true,
      slidesPerView: 3, // 每个视口显示个数
      // spaceBetween: 30,    // 盒子之间的距离 由于异形slide初始化缩小了 因此不再设置距离
      // freeMode: false,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },

      // navigation: {
      //     nextEl: '.swiper-button-next',
      //     prevEl: '.swiper-button-prev',
      // },
      // on: {
      //     transitionEnd: function () {
      //         $('.features aside ul').css('margin-left', `calc(50% - 640px)`)
      //     },
      // },
    });

    $(".prevBtn").click(function () {
      // if (mySwiper.activeIndex <= 0) {
      //     console.log(1)
      //     $(this).addClass('my-button-disabled');

      // } else { // 1+
      mySwiper.slidePrev();
      // }
    });

    $(".nextBtn").click(function () {
      // console.dir(mySwiper)
      // if (mySwiper.realIndex == )
      mySwiper.slideNext();
    });
  },
};
</script>

<style lang="scss" scoped>
#dowebok{
    background: white !important;
}
path{
    // stroke: #76BF8A;
    fill: none;
    stroke-width: 3px;
}
.path_decreace{
    stroke: #ff231f;
}
.path_increace{
    stroke: #76BF8A;
}
// .view-more {
//     background: #fd5b2c !important;
// }
.notice{
   white-space: nowrap;
  .item{
    white-space: nowrap;
    padding: 15px 0;
    width: 24%;
    box-sizing: border-box;
    padding-right: 20px;
    cursor: pointer;
    .title{
      width: 80%;
    }
    .time{
      margin-left: 5px;
      color: #999;
    }
  }
}

.section {
    background-image:url(../../assets/img/index_banner_2.png);
    width:100%;
    height:100%;
    background-size:100% 100%;
    overflow-x: hidden;
}

.news {
  // height: 720px;
  background-color: #f4f5e6;
  color: #172636;
  padding: 80px 0 0;
  header {
    height: 38px;
    text-align:center;
    h3 {
      // border : 1px solid red;
      margin-bottom: 0 !important; // 去除mb-4效果
      @include font(Overpass, 30, 38, bold);
      position: relative;
      &::after{
          position: absolute;
          content: '';
          display: block;
          left: 50%;
          bottom:-10px;
          transform: translateX(-50%);
          height: 3px;
          width: 50px;
          background: #4681FB;
      }
    }
    .tips{
        margin-top: 20px;
        font-size: 14px;
    }
  }

  .content {
    margin: 50px auto;
    // border: 1px solid yellow;
    @include flexible(row, space-between, flex-start, wrap);
    .item {
      border-radius: 2px;
      width: 370px;
      padding: 10px;
      margin-bottom: 20px;
      @include flexible(row, flex-start, center);
      // border: 1px solid red;
      figure {
        width: 100%;
        padding: 5px;
        flex-shrink: 0;
        img {
          display: block;
          width: 100%;
          height: 230px;
        }
        figcaption {
          @include font(Overpass, 15, 50);
        }
        // border: 1px solid red;
      }
      article {
        border: none !important;
        height: 100%;
        overflow: hidden;
        margin-bottom: 41px;
      }
      .eps-2 {
        font-size: 12px;
        color: #8a8a98;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        word-break: break-all;
      }
    }
  }
}
.ticker-nav .nav-item {
  color: #888894;
}
.ticker-nav .nav-item a {
  font-weight: normal !important;
}

.ticker-nav .nav-item a.active {
  @include font(Overpass, 15, null, white, 800);
  @include flexible(row, center, center);

  &::after {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
  }
}

.start-trade {
  background: #fd5b2c !important;
  padding: 0 !important;
  border: none;
  width: 196px;
  height: 58px;
  border-radius: 29px;
  text-align: center;
  @include font(Overpass, 18, 58, #fff);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.marquee {
  li.item {
    padding: 10px 18px !important;
  }
}

.markets {
  // border: 1px solid red;
  .markets__title {
    line-height: 55px;
    // color: white;
    color:#172636;
    font-size: 24px;
    padding-left: 15px;
  }

  .markets__container {
    // border : 1px solid blue;
    margin: 50px auto 50px; // 居中
  }
}

.features {
  width: 100%;
  // 固定高度 宽度自适应
  height: 700px;
  padding: 70px 0 0;
  // 图片默认底部对齐 水平居中
  background: #2c2c38;
  // background: #fff;
  // 只设置宽度100% 高度自适应
  // 超出的部分被裁剪
  background-size: auto 100%;
  color: white;
}

.features header {
  width: 1280px;
  margin: 0 auto;
  height: 38px;
  @include flexible(row, center, center);

  h3 {
    @include font(Overpass, 30, 38, bold);
  }
}

.features aside {
  width: 1350px;
  margin: 35px auto 0px; // 居中
  padding: 0 85px;
  position: relative;
}

.features aside ul {
  height: 500px;

  li.swiper-slide {
    // 原始尺寸
    // width           : 330px !important;
    // height          : 400px !important;
    transition: transform 500ms ease 100ms;
    border-radius: 8px;
    overflow: hidden;
    // 放大尺寸
    width: 363px !important;
    height: 440px !important;
    margin: 0 15px;
    transform: scale(0.9); // 初始化收缩

    box-shadow: 0 0.5em 1rem rgba(0, 0, 0, 0.15);
    display: flex;

    flex-direction: column;

    section {
      padding: 80px 0 0 0;
      flex-grow: 1;
      text-align: center;
    }

    h3 {
      @include font(Overpass, 22, 30);
      padding: 50px;
      // height: 100px;
      text-align: center;
    }
    .default {
      display: block;
      background: #383847;
    }
    .active {
      display: none;
    }
  }

  li:hover {
    .default {
      display: none;
    }
    .active {
      display: block;
    }
    // 异形切换 还原大小
    transform: scale(1);
    background: #383847;
    border: 1px solid #383847;
    color: white;

    div {
      height: 120px;
      padding: 20px;
      text-align: left;
    }

    h3 {
      padding: 20px;
      // height: 80px;
      text-align: left;
    }

    section {
      padding: 0 20px;
      height: 100%;
      // display: none; // 初始化隐藏
      @include font(Overpass, 14, 24, white);
      // text-indent: 20px;
      text-align: left;
    }
  }
}

.my-button-disabled {
  opacity: 0.2;
  cursor: default;
}

.features aside .turning {
  position: absolute;

  width: 100%;
  left: 0;
  top: calc(50% - 40px);

  @include flexible(row, space-between, center);

  // border: 1px solid blue;
  a {
    width: 50px;
    height: 50px;

    @include flexible(row, center, center);
    color: white;
    &:first-child {
      background: url("../../assets/img/arrow-left.svg") center center;
      background-size: 100%;
    }

    &:last-child {
      background: url("../../assets/img/arrow-right.svg") center center;
      background-size: 100%;
    }
  }

  .disabled {
    color: #666;
    cursor: default;
  }
}

.swiper-container {
  .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: inset 0 0 5px #eee;
    border: 1px solid #fff;
    margin: 0 8px !important;
  }

  // 箭头颜色
  --swiper-theme-color: #fff;

  // 分页选中的底色
  --swiper-pagination-color: rgba(0, 0, 0, 0.5);

  /* 两种都可以 */
  .swiper-slide {
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 50px;
    height: 50px;
    background: url("../../assets/img/circle@2x.png") center center;
    background-size: 100%;

    // border: 1px solid pink;
    &::after {
      font-size: 16px !important;
    }
  }

  .swiper-button-next {
    right: 0;
  }

  .swiper-button-prev {
    left: 0;
  }

  .swiper-slide-active,
  .swiper-slide-duplicate-active {
    // transition: all 1s;
    // // 异形切换
    // transform: scale(1);
    // //
    // opacity: 1;
    // //
    // margin-right: 30px;
    // section {
    //     background: none!important;

    //     div {
    //         // display : block;
    //         color: rgba(255, 255, 255, 1);
    //     }
    // }
  }
}
.banner-block{
  display: flex;
  align-items: center;
  padding-left: 10px;
  .index_banner{
    width: 758px;
    height: 463px;
  }
  .banner_right{
    width: 440px;
    margin-left: 353px;
    display: flex;
    flex-direction: column;

    .banner_right_p{
      color: #0a1015;
      font-size: 48px;
      font-weight: bold;
      margin-bottom: 30px;
    }
    .banner_right_input{
      background-color: rgba(23, 38, 54, 100);
      color: white;
      font-size: 15px;
      height: 44px;
      border: none;
      padding-left: 10px;
    }
    .banner_right_code{
      margin-top: 20px;
      margin-bottom: 30px;
      input{
        width: 310px;

      }
      button{
        width: 125px;
        height: 44px;
        border: none;
        background-color: rgba(49, 65, 132, 100);
        color: rgba(255, 255, 255, 100);
        font-size: 15px;
      }
    }
    .banner_right_sign{
      height: 44px;
      border: none;
      background-color: rgba(49, 65, 132, 100);
      color: rgba(255, 255, 255, 100);
      width: 100%;
      font-size: 20px;
    }
  }
}
.markets__title_span{
  font-size: 16px;
  color: #A1A7AE;
  display: inline-block;
  margin-left: 22px;
}
.table_th{
  background-color: white;
  text-align: center;
  color: #9B9B9B;
}
.coin-list tbody tr{
  background: transparent;
  text-align: center;
  td{
    min-width: 150px;
  }

}
.td_img{
  width: 109px;
  height: 39px !important;
  margin: 0 auto;
}
.td_button{
  width: 140px;
  height: 34px;
  color: #2CB8FF ;
  font-size: 14px;
  border: 1px solid #4B5763;
  background: transparent;
}
.btn-outline-light{
  border: none;
}
.coin_icon{
  width: 34px;
  height: 34px;
  margin-right:20px ;
}
.banner2{
  background: url('../../assets/img/banner2.png') 100% 100% no-repeat;
  padding-left: 233px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items:flex-start;
  width: 100%;
  .banner_right_p{
    color: white;
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 0;
  }
  .banner_right_p1{
    color: #A0A7AD;
    font-size: 36px;
    margin-bottom: 51px;
  }
  .banner_right_button{
    width: 420px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    background: #3553D2;
    color: white;
    font-size: 20px;
    border: none;
    cursor: pointer;
  }
}
.banner3{
  background: url('../../assets/img/banner3.jpg')  no-repeat;
  background-color: #FFFFFF;
  padding-right: 230px;
  padding-top: 129px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  .banner3_p{
    font-size: 16px;
    color: #000000;
    margin-bottom: 25px;

    .banner3_p_span{
      font-size: 28px;
      color: #000000;
      font-weight: bold;
    }
  }
  .banner3_content{
    display: flex;

    .banner3_content_item{
      display: flex;
      flex-direction: column;
      margin-left: 90px;
      align-items: center;

      .banner3_content_item_code{
        width: 160px;
        height: 160px;
        margin-bottom: 20px;
      }
      .banner3_content_item_code1{
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
      }

      .introduce{
        display: flex;
        align-items: center;
        color: white;
        font-size: 14px;
        width: 160px;
        justify-content: center;
        img{
          width: 23px;
          height: 23px;
          margin-right: 9px;
        }
      }

    }
    .banner3_content_item:first-child{
      margin-left: 0;
    }
  }
}
.colto-section{
  background: white;
}
.container_button{
  background: #3553D2 ;
}
.container_button1{
  background: #6C7EE4  ;
}

.section-block{
  width: 1100px;
  margin: 0 auto 30px;
  padding-bottom: 20px;

  h1{
    font-size: 36px;
    font-weight: 600;
  }
  h2{
    font-size: 28px;
    font-weight: 600;
  }
  h3{
    font-size: 26px;
    font-weight: 600;
  }
  .btn3{
    display: inline-block;
    width: auto;
    padding: 10px 20px;
    text-align: center;
    background: #326AEB;
    border-radius: 4px;
    min-width: 200px;
    cursor: pointer;
    a{
      color: #fff;
    }
  }
}
.section-block-1{
  width: 100%;
  padding: 40px calc(50% - 550px);
  // background: url('../../../static/images/banner-1.png') no-repeat;
  background-size: cover;
  background-color: #fafafa;
  .btn1{
    width: 55%;
    padding: 10px 0px;
    text-align: center;
    background: #326AEB;
    border-radius: 4px;
    cursor: pointer;
    a{
      color: #fff;
    }
  }
  .btn2{
    width: 48%;
    padding: 10px 0px;
    text-align: center;
    background-color: #EAECEF;
    border-radius: 4px;
  }
  .table1{
    width:100%;
    display: table;
    .tr1{
      display: table-row;
      .td1{
        display: table-cell;
        padding: 0px 10px;
      }
    }
  }
  .block-1-left{
    width:55%;
    display: flex;flex-direction: column;
    justify-content: center;align-items: flex-start;
  }
  .block-1-right{
    width: 440px;height: 360px;
    flex-shrink: 0;border-radius: 10px;
    background-color: #fff;margin: 20px 0px;
    box-shadow: 0px 0px 6px 0px rgba(68, 68, 68, 0.14);
  }
}
.section-block-2{

  .cell{
    width: 23.5%;
    height: 155px;
    background-color: #FAFAFA;
    margin-bottom: 25px;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 25px 20px;
  }
  .green-f{
    font-size: 22px;
    font-weight: bold;
    font-family: PingFang SC;
  }
  .cell-b{
    display: flex;
    justify-content: space-between;
    align-items: center;

    &>img{
      margin-right: 10px;
      border-radius: 50%;overflow: hidden;
    }
    span:nth-of-type(1){
      flex: 1;
      font-size: 22px;
      font-weight: bold;
      color: #444;
    }
    div:nth-of-type(2){
      border-radius: 50%;
      overflow: hidden;
    }
  }
}
.section-block-3{
  .img{
    width:60px;
    height:60px;
  }
}
.section-block-4{
  .label-1{
    background: #F5F5F6;
    padding: 10px 20px;
    margin-right: 30px;
    cursor: pointer;
  }
  .img-box{
    width: 32%;
    img{
      width: 100%;
      height: 220px;
      background: #000;
      border-radius: 10px;
      margin-bottom: 0.5rem;
    }
  }
  .de{
      color: #fff;
      background: #326AEB;
  }
  .in{
      background: #F5F5F6;
  }
}
.section-block-5{
  padding: 40px 0px;
  .icon-box{
    width: 25%;
    margin-right: 20px;
    margin-bottom: 40px;
    text-align: center;
    img{
      width: 30px;
      height: 30px;
    }
  }
}
.section-block-6{
  width: 100%;
  padding: 40px calc(50% - 550px);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #FAFAFA;
}
</style>
