<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="top-img"
        style="background-image: url(https://img.js.design/assets/img/666962a5762c95b42d9126d7.png#57b893c00b3d3a45e291fdcaf90c5219);">
        <span class="top-span">{{ t('contact.contactUs') }}</span>
      </div>

      <div class="middle">
        <div class="middle-div">
          <div class="middle-title">{{ t('contact.onlineCustomer') }}</div>
          <div class="middle-val">{{ t('contact.onlineCustomerVal') }}</div>
          <svg-icon class="middle-svg" style="font-size: 64px;" icon-class="kf" />
        </div>
        <div class="middle-div">
          <div class="middle-title">{{ t('contact.email') }}</div>
          <div class="middle-val">{{ email }}</div>
          <svg-icon class="middle-svg" style="font-size: 64px;" icon-class="email2" />
        </div>
        <div class="middle-div">
          <div class="middle-title">{{ t('contact.phone') }}</div>
          <div class="middle-val">{{ phone }}</div>
          <svg-icon class="middle-svg" style="font-size: 64px;" icon-class="phone2" />
        </div>
      </div>
      <div class="bottom">
        <div class="bottom-title">{{t('contact.video')}}</div>
        <div class="bottom-val">
          <el-carousel motion-blur indicator-position="outside" :autoplay="false" loop="false" arrow="never"
            height="400px">
            <div v-for="(item, index) in videoList">
              <el-carousel-item v-if="index%3 == 0 || index == 0" :key="index">
                <div class="bottom-tab">
                  <div class="bottom-itme" v-if="JSON.stringify(videoList[index])!=null">
                    <div class="video-div">
                      <video class="bottom-video"
                        :src="videoList[index].url"
                        type="video/mp4" ref="myVideo"
                             :id="'video'+index"
                        >
                      </video>
                      <div class="prism-big-play-btn" :id="'btn'+index" @click="playVideo(index)" >
                        <div class="outter"></div>
                      </div>
                    </div>
                    <div class="bottom-name" >{{ videoList[index].name }}</div>
                  </div>
                  <div class="bottom-itme" v-if="JSON.stringify(videoList[index+1])!=null">
                    <div class="video-div">
                      <video class="bottom-video"
                             :src="videoList[index+1].url"
                             type="video/mp4"
                             :id="'video'+(index+1)"
                      >
                      </video>
                      <div class="prism-big-play-btn" :id="'btn'+(index+1)" @click="playVideo(index+1)" >
                        <div class="outter"></div>
                      </div>
                    </div>
                    <div class="bottom-name" >{{ videoList[index+1].name }}</div>
                  </div>
                  <div class="bottom-itme" v-if="JSON.stringify(videoList[index+2])!=null">
                    <div class="video-div">
                      <video class="bottom-video"
                             :src="videoList[index+2].url"
                             type="video/mp4"
                             :id="'video'+(index+2)"
                      >
                      </video>
                      <div class="prism-big-play-btn" :id="'btn'+(index+2)" @click="playVideo(index+2)" >
                        <div class="outter"></div>
                      </div>
                    </div>
                    <div class="bottom-name" >{{ videoList[index+2].name }}</div>
                  </div>
                </div>
              </el-carousel-item>
            </div>

          </el-carousel>
        </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, queryPhoneAndEmail, queryVideoList } from "@/api/contact.js";
import { serverLang } from "@/utils/i18n.js";
import { useLocale } from "element-plus";
import { ref } from "vue";

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

const showBanner = ref(appStore.showBanner == '1')
const bannerList = ref([])
const phone = ref(null)
const email = ref(null)
const videoList = ref([])
const height = ref('auto')

function playVideo(idnex){

  let dom = document.getElementById('video'+idnex)
  let btn = document.getElementById('btn'+idnex)
  dom.setAttribute("controls","true")
  dom.play()
  btn.style.display="none"
}

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 loadPhoneAndEmail() {
  queryPhoneAndEmail({
    qcc_language: serverLang()
  }).then(resp => {
    if (resp.data) {
      phone.value = resp.data.phone
      email.value = resp.data.email
    }
  })
}

function loadPVideoList() {
  queryVideoList({
    qcc_language: serverLang()
  }).then(resp => {
    if (resp.data) {
      videoList.value = resp.data.map(i => {
        return { url: i.video_url, name: i.name }
      })
    }
  })
}

function loadPageData() {
  loadBannerList();
  loadPhoneAndEmail();
  loadPVideoList();
}

loadPageData();

</script>

<style scoped lang="scss">
.banner-bar {
  margin-bottom: 5px;
}

.page-content {
  font-family: "Noto Sans SC";

  .top-img {
    width: 100%;
    height: 231px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
  }

  .top-span {
    position: absolute;
    left: 246px;
    top: 89px;
    min-width: 148px;
    height: 53px;
    font-size: 36px;
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
  }

  .middle {
    display: flex;
    justify-content: space-between;
    padding-top: 43px;

    .middle-div {
      position: relative;
      width: 32%;
      height: 228px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.25);

      .middle-title {
        min-width: 116px;
        height: 32px;
        line-height: 32px;
        font-size: 28px;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        margin-top: 40px;
        margin-left: 28px;
      }

      .middle-val {
        padding-top: 12px;
        padding-left: 28px;
        padding-right: 88px;
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 23.17px;
        color: rgba(102, 102, 102, 1);
      }

      .middle-svg {
        position: absolute;
        bottom: 20px;
        right: 24px;
      }
    }


  }

  .bottom {
    padding-top: 43px;

    .bottom-title {
      font-size: 36px;
      font-weight: 700;
      letter-spacing: 1px;
      line-height: 52.13px;
      color: rgba(51, 51, 51, 1);
    }

    .bottom-val {
      padding-top: 17px;


      .bottom-tab {
        display: flex;
        padding-top: 43px;
        gap: 5%;

        .bottom-itme {
          width: 30%;


          .video-div {
            position: relative;

            .bottom-video {
              width: 100%;
              height: 264.96px;
              background: #000;
            }

            .prism-big-play-btn {
              position: absolute;
              transform: translate(-50%, -50%);
              left: 50%;
              top: 48%;
              width: 64px;
              height: 64px;
              background: url("../../assets/images/bf.png") no-repeat;
              background-size: contain;
              cursor: pointer;

              .outter {
                border: 7px solid rgba(255, 255, 255, 0.51);
                width: 64px;
                height: 64px;
                border-radius: 100%;
                position: absolute;
                box-sizing: border-box;
                top: 0;
                left: 0;
              }

              .outter:hover {
                content: "";
                width: 80px;
                height: 80px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -40px;
                margin-top: -40px;
                border-radius: 50%;
                //a1为经过@keyframes 规则建立的动画名称，可本身定义web
                // a2 为动画时常 ，例如：1s   2s   可自行规定浏览器
                // a3 为css自带的动画效果，有以下几个：
                // 类名称+持续时间+（变化方式,延迟时间，重复次数（infinite循环），重复方式，开始结束的状态）
                animation: warn 1s ease-out 0s infinite;
              }

              // 在warn方法里,用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
              // 0% 是动画的开始，100% 是动画的完成，建议使用百分比，会更加详细：
              @keyframes warn {
                0% {
                  // transform: scale表示缩放，值表示倍数，可以指定X/Y轴
                  transform: scale(0.5);
                  opacity: 1;
                }

                30% {
                  opacity: 1;
                }

                100% {
                  transform: scale(1.4);
                  opacity: 0;
                }
              }
            }
          }


          .bottom-name {
            font-size: 28px;
            font-weight: 500;
            letter-spacing: 0px;
            line-height: 64px;
            color: rgba(51, 51, 51, 1);
            text-align: center;
          }
        }
      }
    }
  }

}

:deep(.el-carousel__button) {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
</style>