<template>
  <div class="content">
    <div style="width:100%;height:100vh;overflow:auto" ref="page">
      <div class="swiper-container">
        <img src="../assets/02logo.png" class="logo" alt>

        <div class="zixun" @click="goConnect">免费咨询</div>
        <div class="swiper-wrapper">
          <div class="swiper-slide bg swiper-item1" :style="{backgroundImage:'url('+require('../assets/01banner.png')+')'}">
            <div class="left">
              <div class="title">
                线下地点
                <br>AR赋能平台
              </div>

              <p>
                无论身处何地，用户都可以使用《一米世界》，
                <br>通过手机摄像头实时的探索和查看周围商场、商铺、景点、博物馆、
                <br>商品、交通设施的各种信息。
              </p>

              <p>
                无论室内还是室外，用户都可以使用《一米世界》进行导航，
                <br>其目的地可以是一个地方，一个位置，甚至可以是一件东西。
              </p>

              <div class="about" @click="goAbout">关于我们</div>
            </div>

            <div class="center">
              <div class="title">
                快速部署
                <br>无需增加额外成本
              </div>

              <div class="day bg" :style="{backgroundImage:'url('+require('../assets/03.png')+')'}">
                <div class="name">3</div>
                <div class="unit">工作日</div>
              </div>

              <div class="bottom">更具内容，3-15个工作日</div>
            </div>

            <div class="right">
              <div class="title">快速更新 灵活配置</div>
              <img src="../assets/04.png" alt>
            </div>
          </div>
          <div class="swiper-slide bg" :style="{backgroundImage:'url('+require('../assets/02banner.jpg')+')'}"></div>
          <div class="swiper-slide bg" :style="{backgroundImage:'url('+require('../assets/03banner.jpg')+')'}"></div>
        </div>

        <div class="swiper-pagination"></div>
      </div>

      <div class="main">
        <div class="mainTitle" style="margin:1.1rem 0 0">应用场景</div>

        <div class="sceneList" style="margin-top:0.4rem">
          <div class="sceneItem" @click="chooseVideo('旅游景区')">
            <img src="../assets/07.png" alt>
            <div class="name">旅游景区</div>
          </div>
          <div class="sceneItem" @click="chooseVideo('线下商业体')">
            <img src="../assets/08.png" alt>
            <div class="name">线下商业体</div>
          </div>
          <div class="sceneItem" @click="chooseVideo('酒店')">
            <img src="../assets/09.png" alt>
            <div class="name">酒店</div>
          </div>
        </div>

        <div class="sceneList" @click="chooseVideo('学校')">
          <div class="sceneItem">
            <img src="../assets/10.png" alt>
            <div class="name">学校</div>
          </div>
          <div class="sceneItem" @click="chooseVideo('地产')">
            <img src="../assets/11.png" alt>
            <div class="name">地产</div>
          </div>
          <div class="sceneItem" @click="chooseVideo('交通')">
            <img src="../assets/12.png" alt>
            <div class="name">交通</div>
          </div>
        </div>

        <div class="solute">
          <div class="left">
            <div class="title">
              快速定位
              <br>精确导航
            </div>
            <p>
              游客可以快速查找定位景点、展品、车位，从而提升旅游
              <br>效率，减少寻找和行走的时间。
            </p>
            <div class="btn" @click="downLoad('快速定位精准导航解决方案.pdf')">解决方案</div>
          </div>

          <div class="right">
            <div class="rightContent">
              <div class="top bg" :style="{backgroundImage:'url('+require('../assets/14.png')+')'}">1m</div>

              <p>无论您身在何处，用户都可以使用“一米世界”通过手机摄像头，实时浏览和查看购物中心、商店、景点、博物馆、商品和交通设施的各种信息。</p>
            </div>

            <div class="rightColor bg" :style="{backgroundImage:'url('+require('../assets/solute1.jpg')+')'}"></div>
          </div>
        </div>

        <div class="solute solute2">
          <div class="right">
            <div class="rightContent bg" :style="{backgroundImage:'url('+require('../assets/16.png')+')'}">
              <div>持续更新内容</div>
            </div>

            <div class="rightColor bg" :style="{backgroundImage:'url('+require('../assets/solute2.jpg')+')'}"></div>
          </div>

          <div class="left">
            <div class="title">
              智能讲解
              <br>主题再现
            </div>
            <p>
              根据游客所在的位置，触发智能讲解员，讲解的内容不仅仅是
              <br>语音，还包括文字、图片、视频、三维角色、甚至整个场景的
              <br>还原。
            </p>
            <div class="btn" @click="downLoad('智能讲解主题再现解决方案.pdf')">解决方案</div>
          </div>
        </div>

        <div class="solute solute3">
          <div class="left">
            <div class="title">
              随时随地
              <br>虚拟娱乐
            </div>
            <p>
              游客将不断获得趣味的互动和惊喜的体验，从而让枯燥的
              <br>排队等待变得有趣，并可从中获益。
            </p>
            <div class="btn" @click="downLoad('随时随地虚拟娱乐解决方案.pdf')">解决方案</div>
          </div>
          <div class="right">
            <!-- <div class="rightContent">
            <div class="top bg" style="font-size:1rem" :style="{backgroundImage:'url('+require('../assets/14.png')+')'}">∞</div>

            <p>无论您身在何处，用户都可以使用“一米世界”通过手机摄像头，实时浏览和查看购物中心、商店、景点、博物馆、商品和交通设施的各种信息。</p>
            </div>-->
            <div class="rightColor bg" :style="{backgroundImage:'url('+require('../assets/solute3.jpg')+')'}"></div>
          </div>
        </div>

        <div class="solute solute2">
          <div class="right">
            <!-- <div class="rightContent bg" :style="{backgroundImage:'url('+require('../assets/16.png')+')'}">
            <div>其他内容</div>
            </div>-->
            <div class="rightColor bg" :style="{backgroundImage:'url('+require('../assets/solute4.jpg')+')'}"></div>
          </div>

          <div class="left">
            <div class="title">
              无限内容
              <br>百变时空
            </div>
            <p>
              哪怕是同一个景点
              <br>语音，还包括文字、图片、视频、三维角色、甚至整个场景的
              <br>还原。
            </p>
            <div class="btn" @click="downLoad('无限内容百变时空解决方案.pdf')">解决方案</div>
          </div>
        </div>

        <div class="solute solute3">
          <div class="left">
            <div class="title">
              精准信息
              <br>快速决策
            </div>
            <p>
              根据游客所在的位置，全面推送周围的商铺、商品、折扣
              <br>、活动信息，促进游客消费转化。
            </p>
            <div class="btn" @click="downLoad('精准信息快速决策解决方案.pdf')">解决方案</div>
          </div>
          <div class="right">
            <!-- <div class="rightContent">
            <div class="top bg" :style="{backgroundImage:'url('+require('../assets/14.png')+')'}">1m</div>

            <p>无论您身在何处，用户都可以使用“一米世界”通过手机摄像头，实时浏览和查看购物中心、商店、景点、博物馆、商品和交通设施的各种信息。</p>
            </div>-->

            <div class="rightColor bg" :style="{backgroundImage:'url('+require('../assets/solute5.png')+')'}"></div>
          </div>
        </div>

        <div class="company bg" :style="{backgroundImage:'url('+require('../assets/18.png')+')'}">
          <div class="left">
            <div class="title">
              即将落地或
              <br>已经落地的项目
            </div>
            <div class="subTitle">最终解释权属于我公司。</div>
          </div>

          <!-- <img v-for="item in imgList" :src="item.img" :style="item.style" alt> -->
          <img class="rightImg" src="../assets/29.png" alt>
        </div>

        <div class="introduce" ref="introduce">
          <div class="title">公司介绍</div>
          <div class="subTitle">南京一米世界软件科技有限公司业务包括增强现实、人工智能、区块链、大数据等技术及解决方案的研发，开发并提供大量基于互联网的产品与服务。公司秉承“用科技让世界更有趣”的企业使命，用最新的科技为旅游、零售、公共交通、医疗等传统行业赋能。</div>
        </div>

        <div class="connect bg" ref="connect" :style="{backgroundImage:'url('+require('../assets/28.png')+')'}">
          <div class="left">
            <div class="title">联系我们</div>
            <div class="btn">7*24小时竭诚为您服务</div>
          </div>
          <div class="hideLeft"></div>

          <div class="center">
            <div class="title">联系方式</div>

            <div class="item">电话：025-58762849</div>
            <div class="item">手机：13357817864</div>
            <div class="item">邮箱：2582936849@qq.com</div>
            <div class="item">
              <span>地址：江苏省南京市河西大街198号</span>
              <br>
              <span style="margin-left:0.54rem;">同进大厦三单元</span>
            </div>
          </div>

          <div class="right">
            <el-form ref="form" size="mini" :model="form" label-position="left" label-width="0.8rem" style="max-width:4.66rem;margin-left:0.72rem;">
              <div class="title">留言板</div>
              <el-form-item label="手机">
                <el-input v-model="form.phone" style="width:2.2rem"></el-input>
              </el-form-item>
              <el-form-item label="地址">
                <el-cascader :options="options" v-model="form.location" style="width:2.2rem"></el-cascader>
              </el-form-item>
              <el-form-item label="留言">
                <el-input type="textarea" v-model="form.desc" resize="none"></el-input>
              </el-form-item>
              <el-form-item label="验证码">
                <div class="yanzhen">
                  <el-input v-model="form.code" style="width:1.3rem"></el-input>
                  <img :src="$baseUrl+'/auth/image?'+autoData" style="height:0.31rem" alt>
                  <span @click="getAuto">换一张</span>
                </div>
              </el-form-item>
              <el-form-item label-width="0">
                <el-button type="primary" @click="onSubmit" style="width:4.66rem">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <div class="pageBottom">Copyright © 南京一米世界软件科技有限公司 备案号：苏ICP备18010231号</div>
      </div>
    </div>

    <div class="box" v-if="showVideo" @click="showVideo=false">
      <div class="video animated fadeInDownBig" @click.stop>
        <video ref="vedioPage1" controls width="100%" height="100%">
          <source :src="'http://oss.izouma.com/yimishijie/'+video+'.mp4'" type="video/mp4">
        </video>
      </div>
    </div>
  </div>
</template>

<script>

import Swiper from 'swiper'
import { citys } from '../city.js'
export default {
  name: 'home',
  mounted() {
    setTimeout(() => {
      var mySwiper = new Swiper('.swiper-container', {
        autoplay: true,
        pagination: {
          el: '.swiper-pagination',//自动隐藏
          clickable: true,
        }
      })
      this.getImgs(19);
    }, 1000)

    if(localStorage['sendYimi']){
      this.send=true;
    }
  },
  data() {
    return {
      imgList: [],
      form: {},
      autoData: '',
      // options:[]
      video: '',
      showVideo: false,
      send: false
    }
  },
  computed: {
    options() {
      var list = [];
      citys.forEach(item => {
        var jsonp = {
          value: item.provinceName,
          label: item.provinceName,
          children: []
        }
        item.citys.forEach(todo => {
          jsonp.children.push({
            value: todo.citysName,
            label: todo.citysName,
          })
        })
        list.push(jsonp)
      });
      return list;
    }
  },
  methods: {
    getImgs(i) {
      if (i > 27) {
        return;
      }

      var img = new Image();
      img.onload = () => {
        var jsonp = {
          style: {
            width: img.width / 100 + 'rem',
            height: img.height / 100 + 'rem',
            top: '0.73rem',
            left: '8.03rem'
          },
          img: img.src
        }

        if (i == 20) {
          jsonp.style.left = '11.48rem';
          jsonp.style.top = '0.08rem';
        }

        if (i == 21) {
          jsonp.style.left = '14.34rem';
          jsonp.style.top = '0.6rem';
        }

        if (i == 22) {
          jsonp.style.left = '10.425rem';
          jsonp.style.top = '2.7rem';
        }
        if (i == 23) {
          jsonp.style.left = '13.19rem';
          jsonp.style.top = '3.23rem';
        }
        if (i == 24) {
          jsonp.style.left = '7.99rem';
          jsonp.style.top = '4.63rem';
        }
        if (i == 25) {
          jsonp.style.left = '11.52rem';
          jsonp.style.top = '5.53rem';
        }
        if (i == 26) {
          jsonp.style.left = '16.2rem';
          jsonp.style.top = '5.08rem';
        }
        if (i == 27) {
          jsonp.style.left = '13.61rem';
          jsonp.style.top = '7.06rem';
        }

        this.imgList.push(jsonp);


        this.getImgs(i + 1);
      }
      img.src = require('../assets/' + i + '.png');
    },
    onSubmit() {
      if (!this.form.phone || !this.form.location || !this.form.desc || !this.form.code) {
        this.$message.warning('信息填写不全，不能提交哦！');
        return;
      }

      if (!this.checkPhone(this.form.phone)) {
        this.$message.warning('手机号格式错误！');
        return;
      }

      this.checkCode(this.form.code).then(() => {
        this.$http.get({
          url: '/mail/send',
          data: {
            mobile: this.form.phone,
            address: this.form.location.join('/'),
            message: this.form.desc,
            mail: '2582936849@qq.com'
          }
        }).then(res => {
          if (res.success) {
            this.$message.success('发送成功');
            this.form = {};
            localStorage.setItem('sendYimi', '已发送')
            this.send = true;

          }
          else {
            this.$message.warning(res.error);
          }
        });
      }).catch(() => {
        this.$message.warning('验证码错误');
      })
    },
    checkPhone(phone) {
      var result = false
      if ((/^1[3|4|5|8|7|6|9][0-9]\d{8}$/.test(phone))) {
        result = true
      }
      return result
    },
    getAuto() {
      this.autoData = Date.parse(new Date())
    },
    chooseVideo(src) {
      // if (!this.send) {
      //   this.$confirm('想要查看视频，请先留言哦！', '提示', {
      //     confirmButtonText: '去留言',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //     this.goConnect()
      //   }).catch(() => {

      //   });
      //   return;
      // }
      this.showVideo = true
      this.video = src
    },
    goAbout() {
      this.$refs.page.scrollTop = this.$refs.introduce.offsetTop
    },
    goConnect() {
      this.$refs.page.scrollTop = this.$refs.connect.offsetTop
    },
    downLoad(fileName) {
      if (!this.send) {
        this.$confirm('想要查看解决方案，请先留言哦！', '提示', {
          confirmButtonText: '去留言',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.goConnect()
        }).catch(() => {

        });
        return;
      }
      window.open('http://oss.izouma.com/yimishijie/' + fileName)
    },
    checkCode(value) {
      return new Promise((resolve, reject) => {
        this.$http.get({
          url: '/auth/verify',
          data: {
            code: value,
          }
        }).then(res => {
          if (res.success) {
            resolve()
          } else {
            reject()
          }
        });
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.content {
  background-color: #f6f6f6;
}
.logo {
  width: 0.88rem;
  position: absolute;
  left: 2rem;
  top: 0.7rem;
  z-index: 200;
}
.zixun {
  width: 1.98rem;
  height: 0.62rem;
  font-size: 16px;
  color: #fff;
  line-height: 0.62rem;
  text-align: center;
  border-radius: 0.62rem;
  position: absolute;
  right: 2.05rem;
  top: 0.7rem;
  z-index: 200;
  background-color: #3f3aae;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;

  &:active {
    background-color: #342c93;
  }
}
.swiper-container {
  height: 11.22rem;
}

.swiper-item1 {
  position: relative;

  .left {
    position: absolute;
    left: 10%;
    top: 3.57rem;
    .title {
      font-size: 0.68rem;
      font-weight: bold;
      color: #fff;
    }

    p {
      font-size: 0.2rem;
      margin-top: 0.43rem;
      color: rgba(255, 255, 255, 0.8);
    }

    .about {
      height: 0.91rem;
      width: 3.15rem;
      text-align: center;
      color: #333;
      font-size: 0.24rem;
      font-weight: bold;
      text-align: center;
      line-height: 0.91rem;
      background-color: #fff;
      border-radius: 0.91rem;
      margin-top: 0.47rem;
      cursor: pointer;

      &:active {
        background-color: rgba(255, 255, 255, 0.8);
      }
    }
  }

  .center {
    height: 4.48rem;
    width: 3.42rem;
    border-radius: 0.5rem;
    background-color: #fff;
    position: absolute;
    right: 34.6%;
    top: 4.57rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .title {
      font-size: 0.28rem;
      color: #666;
      text-align: center;
      font-weight: bold;
    }

    .day {
      width: 2.22rem;
      height: 2.22rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0.38rem 0 0.22rem;
      .name {
        font-size: 0.28rem;
        color: #666;
        font-weight: bold;
      }
      .unit {
        font-size: 0.28rem;
        color: #666;
      }
    }

    .bottom {
      font-size: 0.2rem;
      color: #ced2ee;
    }
  }

  .right {
    width: 3.66rem;
    height: 4.15rem;
    border-radius: 0.5rem;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 12.3%;
    top: 5.21rem;
    .title {
      font-size: 0.28rem;
      color: #666;
      font-weight: bold;
      margin-top: 0.4rem;
    }

    img {
      width: 2.86rem;
      height: 2.87rem;
    }
  }
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;

  .mainTitle {
    font-size: 0.475rem;
    font-weight: bold;
    color: #565c6f;
  }

  .sceneList {
    // margin-top: 1.55rem;
    display: flex;
    justify-content: space-between;
    width: 13.52rem;

    .sceneItem {
      position: relative;
      cursor: pointer;

      img {
        width: 3.86rem;
        height: 3.85rem;
        display: block;
      }

      .name {
        font-size: 0.28rem;
        color: #565c6f;
        font-weight: bold;
        position: absolute;
        top: 3rem;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  .solute {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.81rem;
    width: 100%;
    .left {
      margin: 0 auto;
      .title {
        font-size: 0.477rem;
        font-weight: bold;
        color: #666666;
      }

      p {
        font-size: 0.2rem;
        color: #99a0a6;
        margin-top: 0.4rem;
      }

      .btn {
        width: 2.2rem;
        height: 0.64rem;
        border-radius: 0.64rem;
        text-align: center;
        line-height: 0.64rem;
        cursor: pointer;
        color: #585d6e;
        border: 0.02rem solid #585d6e;
        font-size: 0.2rem;
        margin-top: 0.5rem;

        &:active {
          background-color: rgba(0, 0, 0, 0.1);
        }
      }
    }

    .right {
      width: 9.49rem;
      height: 6.92rem;
      padding: 0 0 0.75rem 1.33rem;
      position: relative;
      margin-left: 1.35rem;
      .rightColor {
        width: 9.49rem;
        height: 6.92rem;
        background: -webkit-gradient(
          linear,
          left top,
          right bottom,
          from(#f4c741),
          to(#f9de8c)
        );
      }
      .rightContent {
        box-shadow: 0 2px 20px 0px rgba(0, 0, 0, 0.3);
        position: absolute;
        left: 0;
        bottom: 0;
        height: 4.43rem;
        width: 3.38rem;
        border-radius: 0.2rem;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .top {
          width: 2.18rem;
          height: 2.18rem;
          line-height: 2.18rem;
          color: #575d70;
          font-size: 0.4rem;
          text-align: center;
          font-weight: bold;
        }

        p {
          color: #a2a6ad;
          font-size: 0.18rem;
          margin: 0.4rem 0.15rem 0;
          text-indent: 0.36rem;
          line-height: 0.28rem;
        }
      }
    }

    &.solute2 {
      .right {
        width: 7.35rem;
        height: 8.8rem;
        padding: 0 1.04rem 0.72rem 0;

        margin-left: 0;
      }
      .rightColor {
        width: 7.35rem;
        height: 8.8rem;
      }

      .rightContent {
        left: 3.43rem;
        width: 4.96rem;
        height: 5.02rem;
        display: block;
        background-color: transparent;

        div {
          font-size: 0.36rem;
          color: #fff;
          font-weight: bold;
          margin: 0.45rem 0 0 0.38rem;
        }
      }
    }

    &.solute3 {
      .right {
        padding: 0;
        width: 9.48rem;
        height: 6.94rem;
        margin-left: 2.67rem;
      }
    }
  }

  .company {
    width: 100%;
    height: 10.21rem;
    position: relative;
    margin-top: 2.84rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    .left {
      // min-width: 4rem;
    }
    .title {
      font-size: 0.48rem;
      color: #fff;
      margin: 3.8rem 0 0 1.95rem;
      font-weight: bold;
    }

    .subTitle {
      margin: 0.48rem 0 0 1.95rem;
      font-size: 0.2rem;
      color: rgba(255, 255, 255, 0.8);
    }

    // img {
    //   position: absolute;
    // }

    .rightImg {
      width: 11.56rem;
      margin-left: 12%;
    }
  }
  .introduce {
    .title {
      color: #575c6f;
      font-size: 0.475rem;
      font-weight: bold;
      margin-top: 1.1rem;
      text-align: center;
    }

    .subTitle {
      width: 12.08rem;
      font-size: 0.24rem;
      margin-top: 0.8rem;
      color: #4a40cf;
      margin-top: 0.8rem;
      line-height: 0.46rem;
      letter-spacing: 0.05rem;
    }
  }

  .connect {
    height: 7.93rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    background-position: left center;
    width: 100%;
    background-size: contain;
    position: relative;
    .left {
      // margin-left: 2.01rem;
      position: absolute;
      left: 2.01rem;
      top: 50%;
      transform: translateY(-50%);
      .title {
        font-size: 0.61rem;
        color: #fff;
        font-weight: bold;
        text-align: center;
      }
      .btn {
        width: 3.14rem;
        height: 0.94rem;
        border-radius: 0.94rem;
        text-align: center;
        color: #fff;
        line-height: 0.94rem;
        font-size: 0.26rem;
        margin-top: 0.75rem;
        border: 0.02rem solid #fff;
      }
    }

    .hideLeft{
margin-left: 2.01rem;
  width: 3.14rem;
   height: 0.94rem;
    }

    .center {
      width: 3.6rem;
      height: 4.16rem;
      overflow: hidden;
      border-radius: 0.1rem;
      background-color: #fdfdfd;
      margin-left: 2.84rem;
      .title {
        font-size: 0.28rem;
        font-weight: bold;
        margin-top: 0.4rem;
        text-align: center;
        color: #4940d0;
      }

      .item {
        font-size: 0.18rem;
        font-weight: lighter;
        margin-top: 0.35rem;
        margin-left: 0.53rem;
        color: #4940d0;
      }
    }

    .right {
      width: 7rem;
      height: 4.16rem;
      overflow: hidden;
      border-radius: 0.1rem;
      background-color: #fdfdfd;
      margin-left: 0.21rem;
      margin-right: 0.3rem;
      .title {
        font-size: 0.28rem;
        font-weight: bold;
        margin-top: 0.4rem;
        color: #4940d0;
        text-align: center;
        margin-bottom: 0.32rem;
      }

      .yanzhen {
        display: flex;
        align-items: center;

        img {
          margin-left: 0.05rem;
        }

        span {
          cursor: pointer;
          text-decoration: underline;
          color: #524ed1;
          margin-left: 0.1rem;
        }
      }
    }
  }

  .pageBottom {
    line-height: 1.24rem;
    font-size: 0.22rem;
    font-weight: lighter;
    color: #a4a4a4;
    text-align: center;
  }
}

.box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.8);
  .video {
    width: 15rem;
  }
}
</style>
