<template>
  <div class="home">
    <template v-if="img">
      <header>
        <div class="warp">
          <div @click="back">
            <icon name="left_arrow" class="back"></icon>
          </div>
          <p>图片压缩</p>
        </div>
      </header>
      <cropper-image ref="child" :img="img"></cropper-image>
    </template>
    <main v-else>
      <div class="logo-box">
        <!-- <img src="../assets/cherry.png" /> -->
        <custedLogo class="logo"></custedLogo>
      </div>
      <div class="title">护资照片压缩</div>
      <div class="tip-box">
        <div class="tip-line">
          <div class="tip-title">冲印尺寸</div>
          <div class="tip-content">25mm x 35mm</div>
        </div>
        <div class="tip-line">
          <div class="tip-title">像素尺寸</div>
          <div class="tip-content">295 x 413 px</div>
        </div>
        <div class="tip-line">
          <div class="tip-title">分辨率</div>
          <div class="tip-content">300 DPI</div>
        </div>
        <div class="tip-line">
          <div class="tip-title">背景色</div>
          <div class="tip-content">白色</div>
        </div>
        <div class="tip-line">
          <div class="tip-title">文件大小</div>
          <div class="tip-content">小于100kb</div>
        </div>
        <div class="tip-line">
          <div class="tip-title">其他</div>
          <div class="tip-content">
            无噪点，不模糊，服装突出，肩膀等高，中性表情，双眼水平，人像剧中，人脸姿态自然
          </div>
        </div>
      </div>
      <div class="btn-submit" @click="selectImg">选择图片</div>
      <input
        type="file"
        ref="uploads"
        style="position: absolute; clip: rect(0 0 0 0)"
        accept="image/png, image/jpeg, image/gif, image/jpg"
        @change="manageImg($event)"
      />
    </main>

    <footer>
      <a href="http://beian.miit.gov.cn/"> <p>吉ICP备18005655号</p> </a>
      <p>Copyright &copy; 2020 小单同学</p>
      <p>All Rights Reserved</p>
    </footer>
  </div>
</template>

<script>
import CropperImage from "@/components/CropperImage.vue";

export default {
  name: "Home",
  components: { CropperImage },
  data() {
    return {
      img: null,
    };
  },
  methods: {
    back() {
      this.img = null;
    },
    selectImg() {
      this.$refs.uploads.click();
    },
    // 上传图片
    manageImg: async function (e) {
      let file = e.target.files[0];
      if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
        this.$snakebar("图片类型要求：jpeg、jpg、png");
        return false;
      }
      //转化为blob
      let reader = new FileReader();
      reader.onload = (e) => {
        let data;
        if (typeof e.target.result === "object") {
          data = window.URL.createObjectURL(new Blob([e.target.result]));
        } else {
          data = e.target.result;
        }
        this.img = data;
      };
      //转化为base64
      reader.readAsDataURL(file);
    },
  },
};
</script>
<style scoped lang="scss" type="text/scss">
.home {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
  background-color: #fff;
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    .warp {
      background-color: #fff;
      width: 100%;
      max-width: 1024px;
      margin: 0 auto;
      height: 1.4rem;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
      border-bottom: 1px solid #f3f3f3;
      .back {
        float: left;
        margin: 0.35rem 0.3rem;
        height: 0.7rem;
        width: 0.7rem;
      }
      p {
        font-size: 0.45rem;
        color: #494e5e;
        line-height: 1.4rem;
        width: 7rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .logo-box {
    height: 3rem;
    margin-top: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    .logo {
      height: 5rem;
      width: 5rem;
    }
    img {
      display: block;
      height: 3rem;
      width: 3rem;
      margin: 0 auto;
    }
  }
  .title {
    text-align: center;
    color: #303133;
    font-size: 0.6rem;
  }
  .tip-box {
    padding: 0.5rem 1rem;
    box-sizing: border-box;
    margin-top: 1rem;
    .tip-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.45rem;
      margin-bottom: 0.2rem;
      .tip-title {
        flex: 1;
        color: #c0c4cc;
      }
      .tip-content {
        flex: 3;
        text-align: right;
        color: #606266;
      }
    }
  }
  .btn-submit {
    margin: 1.5rem 1rem;
    margin-top: 0.5rem;
    border-radius: 1rem;
    height: 1rem;
    font-size: 0.4rem;
    font-weight: 400;
    text-align: center;
    line-height: 1rem;
    color: #fff;
    background: linear-gradient(to right, #3aa5fc, #20d6fa);
  }
  footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: 0.3rem;
    p {
      text-align: center;
      font-size: 0.25rem;
      margin-bottom: 0.2rem;
      color: #989898;
    }
  }
}
</style>