<template>
  <div>
    <group>
      <cell>
        <p slot="title">车牌号码:{{ $route.query.carNum }}</p>
        <p slot class="carColor" :class="carBgFilter($route.query.carNumberColor)"></p>
      </cell>
    </group>

    <div style="padding: 15px;position: relative">
      <img :src="carPic" width="100%" height="180px">
      <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" @click.native="cerHandle">提交认证</x-button>
    </div>

  </div>
</template>

<script>

import { userCarsInfoEdit, uploadPic } from "@/api/myCars/myCars";
export default {
  name: "certification",
  data() {
    return {
      carPic: require("../../assets/images/myCars/carPic.png"),
      formData: new FormData(),
      fil: ""
    };
  },
  methods: {
    addImg(e) {
      // this.formData = new window.FormData();
      // 获取待上传的文件对象
      this.fil = e.target.files[0];
      console.log(this.fil);
      let file = e.target.files[0];
      // 声明一个读取文件对象
      let reader = new FileReader();
      // 开始读取文件内容
      reader.readAsDataURL(file);
      // 读取操作结束时触发
      reader.onloadend = (ev) => {
        // 赋值给vue对象属性
        this.carPic = ev.target.result;
      };
    },
    cerHandle() {
      if (this.fil) {
        console.log(this.fil);
        let params = new FormData();
        params.append("picFile", this.fil);
        params.append("fileType", 7);
        params.append("token", "7f61e743f9e24f86b1673e32c16e181e");
        uploadPic(params).then(data => {
          console.log(data);
          if (data.code == 0) {
            let res = data.data;
            this.rez(res);
          } else {
            this.$vux.toast.text(data.message, "top");
          }
        });
      } else {
        this.$vux.toast.text("请先上传图片再认证", "top");
      }
    },
    rez(res) {
      let arr = [];
      let carlist = {
        carNumber: this.$route.query.carNum,
        cerPicturePath: res,
        carNumberColor: this.$route.query.carNumberColor,
        id: this.$route.query.id
      };
      let jsondata = this.$utils.commonParams();
      arr.push(carlist);
      // 状态；1-已使用，0-未使用， 2-已使用+未使用
      jsondata.optType = "02";
      jsondata.carNumbers = JSON.stringify(arr);
      jsondata.sign = this.$utils.signObject(jsondata);
      userCarsInfoEdit(jsondata).then(data => {
        console.log(data);
        if (data.code == 0) {
          this.$router.push({
            path: "myCars"
          });
        } else {
          this.$vux.toast.text(data.message, "top");
        }
      });
    },
    carBgFilter: function(val) {
      console.log(val);
      // 车牌颜色:0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
      if (val == 0) {
        return "blueBg";
      }
      if (val == 1) {
        return "yellowBg";
      }
      if (val == 2) {
        return "whiteBg";
      }
      if (val == 3) {
        return "blackBg";
      }
      if (val == 4) {
        return "greenBg";
      }
    }
  }
};
</script>

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

  .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>
