<template>
  <div class="h_scene flex justify-center bg-white">
    <div class="md:w-bodySet flex flex-col items-center">
      <h4 class=" mt-16 mb-4 text-28px text-title-color mb-12">应用场景</h4>
      <div class="scene_box relative">
        <img src="@/assets/images/home/scene-bottom.png" class="scene_img_bottom" alt="场景">
        <div class="scene_img_box absolute text-center" ref="box">
          <img src="@/assets/images/home/scene.png" class="scene_img" alt="场景">
          <!-- <div v-for="(item, i) in lists" :key="i" class="dot absolute" :class="`dot${i+1}`">
            <p class="text-base absolute dot1_text text-article-color" :class="{'opacity-0': index === i, 'absolute': item.id === 1, 'dot1_text': item.id === 1}">{{ item.title }}</p>
            <div class="dot_block flex flex-col items-center justify-start" :class="{'opacity-0': index !== i}">
              <div class="circle flex items-center justify-center" @click="clickChange(i)">
                <div class="circle_dot"></div>
              </div>
              <h4 class="text-base text-white">{{ item.title }}</h4>
              <p class="text-xs text-white leading-loose pt-2">{{ item.text }}</p>
            </div>
          </div> -->
          <div class="dot dot1 absolute">
            <p class="text-base absolute dot1_text text-article-color" :class="{'opacity-0': index === 1}">溯源</p>
            <div class="dot_block flex flex-col items-center justify-start" :class="{'opacity-0': index !== 1}">
              <div class="circle flex items-center justify-center" @click="clickChange(1)">
                <div class="circle_dot"></div>
              </div>
              <h4 class="text-18px text-white">溯源</h4>
              <p class="text-xs text-white leading-loose pt-2">产品溯源、工程管理溯源等</p>
            </div>
          </div>
          <div class="dot dot2 absolute">
            <p class="text-base text-article-color" :class="{'opacity-0': index === 2}">供应链管理</p>
            <div class="dot_block flex flex-col items-center justify-start" :class="{'opacity-0': index !== 2}">
              <div class="circle flex items-center justify-center" @click="clickChange(2)">
                <div class="circle_dot"></div>
              </div>
              <h4 class="text-18px text-white mt-10">供应链管理</h4>
              <p class="text-xs text-white leading-loose pt-2">商品订单<br/>设计<br/>采购<br/>制造<br/>交货供应链全程用区块链管理</p>
            </div>
          </div>
          <div class="dot dot3 absolute">
            <p class="text-base text-article-color" :class="{'opacity-0': index === 3}">商品交易</p>
            <div class="dot_block flex flex-col items-center justify-start" :class="{'opacity-0': index !== 3}">
              <div class="circle flex items-center justify-center"  @click="clickChange(3)">
                <div class="circle_dot"></div>
              </div>
              <h4 class="text-18px text-white mt-10">商品交易</h4>
              <p class="text-xs text-white leading-loose pt-2">区块链交易所、股权、债权、期货、外汇、商品等</p>
            </div>
          </div>
          <div class="dot dot4 absolute">
            <p class="text-base text-article-color" :class="{'opacity-0': index === 4}">全球积分联盟</p>
            <div class="dot_block flex flex-col items-center justify-start" :class="{'opacity-0': index !== 4}">
              <div class="circle flex items-center justify-center" @click="clickChange(4)">
                <div class="circle_dot"></div>
              </div>
              <h4 class="text-18px text-white mt-10">全球积分联盟</h4>
              <p class="text-xs text-white leading-loose pt-2">用公链和许可链多层次区块链建立全球积分联盟</p>
            </div>
          </div>
          <div class="dot dot5 absolute">
            <p class="text-base text-article-color" :class="{'opacity-0': index === 5}">财务区块链</p>
            <div class="dot_block flex flex-col items-center justify-start" :class="{'opacity-0': index !== 5}">
              <div class="circle flex items-center justify-center"  @click="clickChange(5)">
                <div class="circle_dot"></div>
              </div>
              <h4 class="text-18px text-white">财务区块链</h4>
              <p class="text-xs text-white leading-loose pt-2">身份管理、工商登记、税务</p>
            </div>
          </div>
          <div class="dot dot6 absolute">
            <p class="text-base text-article-color"  :class="{'opacity-0': index === 6}">财务核算系统</p>
            <div class="dot_block flex flex-col items-center justify-start" :class="{'opacity-0': index !== 6}">
              <div class="circle flex items-center justify-center"  @click="clickChange(6)">
                <div class="circle_dot"></div>
              </div>
              <h4 class="text-18px text-white mt-10">财务核算系统</h4>
              <p class="text-xs text-white leading-loose pt-2">资产上链，负责上链，实时的财务核算</p>
            </div>
          </div>
          <div class="dot dot7 absolute">
            <p class="text-base text-article-color"  :class="{'opacity-0': index === 7}">行业区块链</p>
            <div class="dot_block flex flex-col items-center justify-start" :class="{'opacity-0': index !== 7}">
              <div class="circle flex items-center justify-center"  @click="clickChange(7)">
                <div class="circle_dot"></div>
              </div>
              <h4 class="text-18px text-white">行业区块链</h4>
              <p class="text-xs text-white leading-loose pt-2">医疗、农业、金融、健康和教育等</p>
            </div>
          </div>
          <div class="dot dot8 absolute">
            <p class="text-base text-article-color"  :class="{'opacity-0': index === 8}">安全指令系统</p>
            <div class="dot_block flex flex-col items-center justify-start" :class="{'opacity-0': index !== 8}">
              <div class="circle flex items-center justify-center"  @click="clickChange(8)">
                <div class="circle_dot"></div>
              </div>
              <h4 class="text-18px text-white mt-10">安全指令系统</h4>
              <p class="text-xs text-white leading-loose pt-2">工业机器人4.0区块链安全指令</p>
            </div>
          </div>
          <div class="dot dot9 absolute">
            <p class="text-base text-article-color">更多</p>
            <div class="dot_block flex flex-col items-center justify-start opacity-0">
              <div class="circle flex items-center justify-center"  @click="clickChange(8)">
                <div class="circle_dot"></div>
              </div>
              <h4 class="text-18px text-white mt-10">安全指令系统</h4>
              <p class="text-xs text-white leading-loose pt-2">工业机器人4.0区块链安全指令</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      lists: [
        { title: '溯源', text: '产品溯源、工程管理溯源等', id: 1 },
        { title: '供应链管理', text: `商品订单<br/>设计<br/>采购<br/>制造<br/>交货供应链全程用区块链管理`, id: 2 },
        { title: '商品交易', text: '区块链交易所、股权、债权、期货、外汇、商品等', id: 3 },
        { title: '全球积分联盟', text: '用公链和许可链多层次区块链建立全球积分联盟', id: 4 },
        { title: '政务区块链', text: '身份管理、工商登记、税务', id: 5 },
        { title: '财务核算系统', text: '资产上链，负责上链，实时的财务核算', id: 6 },
        { title: '行业区块链', text: '医疗、农业、金融、健康和教育等', id: 7 },
        { title: '安全指令系统', text: '工业机器人4.0区块链安全指令', id: 8 },
      ],
      index: 1,
      range: [0, 4]
    }
  },
  methods: {
    clickChange(i:number) {
      this.index = i
      if (i === 6) {
        this.$refs.box.style.transform = 'translateX(-240px)'
      } else if (i === 7) {
        this.$refs.box.style.transform = 'translateX(-410px)'
      } else if (i === 8) {
        this.$refs.box.style.transform = 'translateX(-730px)'
      } else {
        this.$refs.box.style.transform = 'translateX(0)'
      }
    }
  }
})
</script>

<style scoped>
  .h_scene {
    height: 730px;
    background-image: url('../assets/images/home/bg_scene.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position-x: 50%;
  }
  .scene_box {
    width: 1370px;
    height: 450px;
    overflow: hidden;
  }
  .scene_box::before {
    content: '';
    display: block;
    width: 140px;
    height: 450px;
    background-image: linear-gradient(to right, #fff, transparent);
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 100;
  }
  .scene_box::after {
    content: '';
    display: block;
    width: 140px;
    height: 450px;
    background-image: linear-gradient(to right, transparent, #fff);
    position: absolute;
    right: 0;
    top: 0;
    pointer-events: none;
    z-index: 100;
  }
  .scene_img_box, .scene_img {
    width: 2146px;
  }
  .scene_img_box {
    top: 26px;
    transition: 0.35s ease-in;
  }
  .scene_img {
    max-width: 10000px;
    top: -20px;
  }
  .scene_img_bottom {
    width: 1370px;
    max-width: 1370px;
    position: absolute;
    bottom: 6px;
    left: 0;
  }
  .dot_block {
    width: 168px;
    padding: 5px 24px;
    background-image: linear-gradient(to bottom, rgba(76, 123, 231, 0.9), rgba(37, 69, 203, 0.9));
    border-radius: 4px 4px 0 0;
    transition: 0.35s ease-in;
  }
  .circle {
    width: 30px;
    height: 30px;
    margin-top: 6px;
    margin-bottom: 10px;
    border: 2px solid #9EF0FF;
    border-radius: 50%;
    cursor: pointer;
  }
  .circle_dot {
    width: 10px;
    height: 10px;
    background: #9EF0FF;
    border-radius: 50%;
  }
  .dot {
    bottom: -80px;
  }
  .dot1_text {
    left: 50%;
    top: 52px;
    transform: translateX(-50%);
  }
  .dot1 {
    left: 112px;
  }
  .dot1 .dot_block {
    height: 145px;
  }
  .dot2 {
    left: 297px;
  }
  .dot2 .dot_block {
    height: 340px;
  }
  .dot3 {
    left: 500px;
  }
  .dot3 .dot_block {
    height: 219px;
  }
  .dot4 {
    left: 717px;
  }
  .dot4 .dot_block {
    height: 265px;
  }
  .dot5 {
    left: 939px;
  }
  .dot5 .dot_block {
    width: 210px;
    height: 119px;
  }
  .dot6 {
    left: 1195px;
  }
  .dot6 .dot_block {
    height: 336px;
  }
  .dot7 {
    left: 1420px;
  }
  .dot7 .dot_block {
    height: 152px;
  }
  .dot8 {
    left: 1589px;
  }
  .dot8 .dot_block {
    height: 251px;
  }
  .dot9 {
    left: 1930px;
  }
  .dot9 .dot_block {
    height: 421px;
  }
</style>