<template>
  <div style="background: #fff;width: 100%;height: 100%">
    <h3 style="padding: 10px 10px;border-bottom: 5px solid #f5f5f5">
      车牌号码：
      <b style="color:#2282C5">{{$route.query.carNumber}}</b>
    </h3>

    <div style="padding: 10px 10px">

      <van-uploader style="width: 100%" :after-read="afterRead" v-model="fileList" :max-count="1" preview-size="350">

        <div class="uploadBg"></div>
        <!--<van-image  style="width: 100%;height: 200px;"-->
        <!--:src="require('../../../assets/images/myCars/fornt.png')" />-->
      </van-uploader>

      <!--<div class="uploadBg">-->
      <!---->
      <!--</div>-->


      <h4>
        照片须符合如下条件:
      </h4>
      <h6>
        1、行驶证正面
      </h6>
      <h6>
        2、信息清晰显示真实有效
      </h6>

      <van-button type="info" round block style="margin-top: 40px;" @click="toMyCarsPage">立即验证</van-button>
    </div>

  </div>

</template>

<script>
import axios from 'axios'
import { uploadPic, userCarsInfoEdit } from "@/api/myCars/myCars";
export default {
  name: "rzCarNumber",
  data() {
    return {
      fileList: [],
      path:'',
      picSrc:'',
    };
  },
  created() {
    console.log(this.$route.query);
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file);
      // console.log(file.content)
      // this.picSrc = file.content
      // this.path = file.content
      this.uploadPic(file)
    },
    toMyCarsPage() {
      console.log(this.fileList);
      console.log(this.fileList.length);
      // this.$router.push({
      //     name: "myCars"
      //   }
      // );

      if(this.fileList.length==0){
        this.$toast('请先上传图片')
      }else{
        let jsondata = {}
        let arr = [];
        let carlist = {
          carNumber: this.$route.query.carNumber,
          cerPicturePath: this.path,
          carNumberColor: this.$route.query.carNumberColor,
          id: this.$route.query.id
        };
        arr.push(carlist);
        // 状态；1-已使用，0-未使用， 2-已使用+未使用
        jsondata.optType = "02";
        jsondata.carNumbers = JSON.stringify(arr);
        jsondata.sign = this.$utils.signObject(jsondata);
        userCarsInfoEdit(jsondata).then(response => {
          console.log(response);
          if(response.code==0){
            this.$router.push({
                name: "myCars"
              }
            );
          }
        });
      }
    },
    uploadPic(file) {

      let data = new FormData();
      data.append('picFile', file.file);
      data.append('fileType', '11');
      data.append('token', this.$utils.userToken);
      let config = {
        headers: { //添加请求头
          "Content-Type": "multipart/form-data"
        }
      };
      // jsondata.sign = this.$utils.signObject(jsondata)
      //上传图片
      axios.post("https://pay.ccccitd.cc/pic/uploadPic",data, config).then(res => {
        console.log(res.data);
        console.log(res.data.data);
        this.path = res.data.data
        // console.log(this.path);
      })




      // params.sign = this.$utils.signObject(params);
      //uploafile为自定义上传路径，记得引入
      // var jsondata = {
      //   fileType: '11',
      //   picFile: file.content
      // }
      // jsondata.sign = this.$utils.signObject(jsondata);

      // let formData=new FormData();
      // formData.append('picFile',file);
      // formData.append('fileType','11');
      // formData.append("token", this.$utils.userToken)
      // console.log(this.$utils.userToken)

      // var jsondata = {
      //   fileType: '11',
      //   picFile: file[0]
      // }
      // uploadPic({
      //   filePath: file[0],
      //   name: "picFile",
      //
      //   formData: this.$utils.signObject(jsondata)
      // }).then((res) => {
      //
      //   //上传成功返回结果
      //   console.log(res);
      // });




      // let jsondata = {
      //   fileType: '11',
      //   picFile:file.file
      // };
      // // jsondata.sign = this.$utils.signObject(jsondata);
      // //通过formData上传文件
      // let formData = new FormData();
      // formData.append("file", file)
      // formData.append("fileType", '11')
      // uploadPic(jsondata).then(response => {
      //   console.log(jsondata)
      //   if(response.code=='0'){
      //
      //   }
      // });
    }
  }
};
</script>

<style scoped>
  .uploadBg {
    width: 100%;
    height: 200px;
    background: #eee url("../../../assets/images/myCars/fornt.png") no-repeat;
    background-size: 100% 100%;

  }

  >>> .van-uploader__input-wrapper{
    width: 100%;
  }
</style>
