<template>
  <div>
    <group>
      <cell>
        <p slot="title">车牌号码:蒙123213</p>
        <p slot class="carColor"></p>
      </cell>
    </group>

    <div style="padding: 15px;position: relative">
      <div class="carPic"></div>
      <div class="camera"></div>
      <input type="file" class="upload" @change="addImg" ref="inputer"
             accept="image/png,image/jpeg,image/gif,image/jpg"/>

    </div>

    <div class="tipWrap">
      <span>照片须符合如下条件:</span>
      <p>
        1、行驶证正面。
      </p>
      <p>
        2、信息清晰显示真实有效。
      </p>
    </div>

    <div style="padding: 20px 15px">
      <x-button type="primary">提交认证</x-button>
    </div>

  </div>
</template>

<script>
export default {
  name: "certification",
  data() {
    return {
      formData: new FormData(),
      // fil: ""
    };
  },
  methods: {
    addImg(event) {
      let inputDOM = this.$refs.inputer;
      // 通过DOM取文件数据
      let fil = inputDOM.files;
      console.log(inputDOM.files);
      console.log(this.getObjectURL(fil))
      // let oldLen = this.imgLen;
      // for (let i = 0; i < this.fil.length; i++) {
      //   let size = Math.floor(this.fil[i].size / 1024);
      //   if (size > 5 * 1024 * 1024) {
      //     alert("请选择5M以内的图片！");
      //     return false;
      //   }
      // }
    },
    getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    },
  },
};
</script>

<style scoped lang="scss">
  > > > .weui-cells {
    margin-top: 0;
  }

  .carColor {
    width: 28px;
    height: 17px;
    display: inline-block;
    background: url("../../assets/images/myCars/black.png");
    background-size: 100% 100%;
    vertical-align: middle;
  }

  .carPic {
    width: 100%;
    height: 160px;
    background: url("../../assets/images/myCars/carPic.png");
    background-size: 100% 100%;
  }

  .camera {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: url("../../assets/images/myCars/camera.png");
    background-size: 100% 100%;
  }

  .upload {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
  }

  .tipWrap {
    padding: 15px;
    p {
      text-indent: 15px;
    }
  }
</style>
