<template>
  <div class="home">
    <div class="logo">
      <img src="@/assets/logo.png" alt="">
      <div class="name">蔡司视界镜架试戴体验</div>
    </div>
    <div class="home-cover" :class="{ active: active }" :style="`--width: ${width}`">
      <!-- <div class="name">蔡司视界镜架试戴体验</div> -->
      <div class="d-flex flex-column justify-center align-center full" v-if="!active" @click="handleAlert">
        <v-icon size="64" color="#141e8c">mdi-camera</v-icon>
        点击开始体验
      </div>
      <slot name="center" :target="handleTarget" :active="active"></slot>
    </div>
    <modal name="example" :maxWidth="600" height="auto" width="80%" :adaptive="true">
      <div class="model">
        <div class="model-title">温馨提示</div>
        <div class="model-content">即将授权卡尔蔡司光学（广州）有限公司获取脸部生物特征数据，用于脸型检测服务</div>
        <div class="model-content">
          本人已阅读并充分理解
          <span class="model-content-link" @click="$modal.show('service')">《用户服务协议》</span>
          条款。本人自愿授权提供个人信息给蔡司用于上述目的，同意蔡司公司及其境内外关联公司为前述目的收集、使用、处理、存储本人的个人信息。
        </div>
        <div class="model-btn">
          <button class="btn _primary" @click="handleAgree">同意</button>
        </div>
      </div>
    </modal>
    <modal name="service" height="auto" :maxWidth="600" width="80%" :adaptive="true">
      <div class="model" style="max-height: 90vh; overflow-y: auto;">
        <div class="model-content">亲爱的朋友：</div>
        <div class="model-content">卡尔蔡司光学（广州）有限公司（“蔡司”）尊重所有用户的个人隐私权。我们将遵守中华人民共和国有关个人信息保护的法律法规规定及其不时更新（如有）（包括但不限于《中华人民共和国网络安全法》），合法的收集、使用、处理、存储您的个人信息。</div>
        <div class="model-content">所有收集到的有关您的个人信息将用于蔡司的系统体验功能（“目的”），个人信息包括但不限于拍摄、储存您的人脸信息的情况等。您的个人信息仅限于蔡司及其境内外关联公司为上述目的而使用。未经您的允许，以上数据使用方均不会透露给其它任何第三方。但为了公司系统研发的需要，我们将适当地使用您的个人信息来实现我们的目的。您的意愿将得到尊重，您可以随时通知我们您不希望我们继续使用这些信息</div>
        <div class="model-content">您的个人信息将储存在一个受保护的安全环境中，防止未经授权的访问及获取。如果我们认为这些信息有助于我们实现前述目的，在尊重您意愿的前提下，我们将在我们认为必要的时间范围内保存您的个人信息</div>
        <div class="model-content">如您的个人信息因内部管理需求，须转移蔡司于境外的关联公司，我们将对传输及转移采取严格的保密措施。</div>
        <div class="model-content">您有权查看我们所保留的有关您的个人信息并且进行必要的更正，您还有权要求我们停止使用这些信息。我们将切实努力尊重您的个人意愿。但是，特定的法规，尤其与安全问题或者财务有关的法规（例如，在涉及金融服务时），可能会限制更改您已提供的信息</div>
        <div class="model-btn">
          <button class="btn" @click="$modal.hide('service')">关闭</button>
        </div>
      </div>
    </modal>
  </div>
</template>

<script>
export default {
  name: 'm-cover',
  props: {
    width: {
      type: String,
      default: '80%'
    }
  },
  data () {
    return {
      active: false
    }
  },
  methods: {
    handleAgree () {
      this.active = true
      this.$modal.hide('example')
    },
    handleTarget (bool) {
      this.active = bool
    },
    handleAlert () {
      if (this.active) {
        return
      }
      this.$modal.show('example')
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  @delay: 0.5s;
  width: 100%;
  height: 100%;
  position: relative;
  background: #000;
  .logo {
    position: absolute;
    left: 30px;
    top: 30px;
    z-index: 9;
    display: flex;
    align-items: center;
    img {
      width: 80px;
      height: auto;
    }
    .name {
      color: #141e8c;
      font-size: 32px;
      font-weight: bolder;
      margin-left: 30px;
      text-shadow: 1px 1px 0 white;
    }
    @media screen and (max-width: 600px) {
      img {
        width: 40px;
      }
      .name {
        font-size: 24px;
      }
    }

  }
  // &.active {
  //   &::before {
  //     left: 100%;
  //   }
  //   &::after {
  //     left: -100%;
  //   }
  // }
  &::before {
    content: '';
    position: absolute;
    transition: @delay;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #141e8c;
    clip-path: polygon(70% 0, 100% 0, 100% 100%, 30% 100%);
  }
  &::after {
    content: '';
    position: absolute;
    transition: @delay;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFF;
    clip-path: polygon(0 0, 70% 0, 30% 100%, 0 100%);
  }
  &-cover {
    @width: 200px;
    cursor: pointer;
    position: absolute;
    overflow: hidden;
    box-shadow: 0px 0px 19px 8px rgba(0, 0, 0, 0.2);
    z-index: 9;
    border-radius: @width;
    width: @width;
    height: @width;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #FFF;
    background-blend-mode: multiply;
    transition: .5s ease-in-out;
    .full {
      width: 100%;
      height: 100%;
    }
    &.active {
      cursor: default;
      width: var(--width);
      height: 80%;
      border-radius: 10px;
    }
    @media screen and (max-width: 600px) {
      &.active {
        cursor: default;
        width: 100%;
        height: 100%;
        border-radius: 0;
      }
    }
  }
}
.chooseMethod {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  // background: #aaa;
  &-item {
    -webkit-tap-highlight-color: transparent;
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background: rgba(20, 30, 140, 1);
    // background: #141e8c;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
    cursor: pointer;
    color: #FFF;
    .fa {
      font-size: 40px;
      color: #FFF;
      margin-bottom: 12px;
    }
  }
}
.model{
  padding: 20px;
  &-title {
    font-size: 24px;
    font-weight: bolder;
    margin-bottom: 12px;
  }
  &-content {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
    &-link {
      color: #141e8c;
      cursor: pointer;
    }
  }
  &-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    .btn {
      -webkit-tap-highlight-color: transparent;
      width: 100px;
      height: 40px;
      border-radius: 20px;
      background: #eee;
      color: #666;
      border: none;
      outline: none;
      cursor: pointer;
    }
    ._primary {
      background: #141e8c;
      color: #fff;
    }
    .default {
      background: #eee;
      color: #666;
    }
  }
}
@media screen and (max-width: 600px) {
  .chooseMethod {
    flex-direction: column;
    justify-content: space-evenly;
  }
}
</style>
