<template>
  <div class="container-sty">
    <div class="takePicture-sty">
      <div class="pictureItem-sty" @click="takePhoto('合照')">
        <img v-if="imageUrlZm != ''" class="photoa" :src="imageUrlZm" />
        <div v-else class="img-sty">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-a-02_paizhao"></use>
          </svg>
        </div>
        <p>申请人与业务人员合影</p>
      </div>
      <div class="pictureItem-sty"  @click="takePhoto('现场照片')">
        <img v-if="imageUrlFm != ''" class="photoa" :src="imageUrlFm" />
        <div v-else class="img-sty">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-a-02_paizhao"></use>
          </svg>
        </div>
        <p>申请人与公司合影</p>
      </div>
    </div>
    <div class="btn-area">
      <button @click="stopCheck">上一步</button>
      <button @click="checkTakePhoto">确认</button>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import {Image as VanImage, RadioGroup, Radio} from 'vant';
import {NativeUI} from "@/public/ts/NativeUI";
import {MediaFile} from "@/model/entity/MediaFile";
import IF from "@/public/factory/InterFaceFactory";
import systemApi from "@/constants/api/ms-system/system.api";
import Public from "@/public/ts/Public";
Vue.use(Radio);
Vue.use(RadioGroup);

@Component({
  name: 'ImageMaterial',
  components: { VanImage }
})
export default class ImageMaterial extends Vue {
  @Prop(Number) tabActive: Number | any;
  imageUrlZm =  '';
  imageUrlFm = '';
  imageInfo: any = {};
  onSitePhoto: any;
  groupPhoto: any;
  isTakePhoto = 0;

  mounted(){
    this.imageInfo = this.$store.getters.getImageFileObj;
    console.log(this.imageInfo);
  }
  stopCheck(){
    if (this.tabActive != 0){
      this.$emit("activeChange", this.tabActive-1);
    }
  }
  /**
  *@Description 检查是否完成拍照
  *@Author XWH
  *@Date 2022/2/23 17:29
  */
  checkTakePhoto() {
    if(this.isTakePhoto == 2){
      let groupPhotoInfo = {
          file: this.groupPhoto,
          fileName: '合照',
          mulId: 'groupFile'
        },
        onSitePhotoInfo = {
          file: this.onSitePhoto,
          fileName: '现场照片',
          mulId: 'sceneFile'
        };
      this.imageInfo.push(groupPhotoInfo);
      this.imageInfo.push(onSitePhotoInfo);
      this.uploadImg();
    }else{
      NativeUI.toast("请先采集身份证照片");
      // this.$emit("activeChange", this.tabActive+1);
    }
  }
  /**
  *@Description 上传图片
  *@Author XWH
  *@Date 2022/2/23 17:29
  */
  uploadImg(){
    let param = [],
      files = [];
    for(let data of this.imageInfo){
      console.log(data);
      const obj = {
        fileType: "1",
        fileSort: "1",
        mulId: data.mulId,
        mulName: data.fileName,
        fileName: data.fileName,
        busId: "132",
        busType: "2",
        path: "",
        folderId: "",
        folderName: "",
        createTime: "",
        updateTime: "",
        fileSize: "",
        md5: "",
        extension: "",
        fileId: ""
      };
      param.push(obj);
      files.push(data.file);
    }
    NativeUI.showWaiting('上传中...');
    return IF.transferFile(systemApi.FaceSignUploadImg, {fileParams: JSON.stringify(param),files: files}).then((res: any) => {
      NativeUI.closeWaiting();
      console.log(res);
      NativeUI.toast('上传成功');
    });
    this.$emit("activeChange", this.tabActive+1);
  }
  takePhoto(fileName: string){
    const data = new MediaFile();
    data.objId = "1111";
    data.userId = "000000";
    data.address = "定位信息";
    data.userName = "拍摄人";
    const _this = this;
    this.$native.capturePhoto(data).then((res: any) => {
      if(res.length > 0 && res[0].filePath){
        let file = Public.imgUrlToFile(res[0].filePath, fileName);
        if(fileName == '合照'){
          _this.imageUrlZm = res[0].filePath;
          _this.groupPhoto = file;
          this.isTakePhoto += 1;
        } else{
          _this.onSitePhoto = file;
          this.isTakePhoto += 1;
          _this.imageUrlFm = res[0].filePath;
        }
      }else {
        NativeUI.toast("拍照失败，请重试。")
      }
    })
  }
}
</script>
<style scoped lang="scss">
.container-sty{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.img-sty{
  width: 300px;
  height: 220px;
  border: 1px solid #BEBEBE;
  margin: 20px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.takePicture-sty{
  display: flex;
  justify-content: center;
}
.btn-area{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.btn-area > button {
  width: 180px;
  height: 50px;
  border: 1px solid #BEBEBE;
  font-size: 19px;
  border-radius: 30px;
  outline: none;
}
.btn-area > button:nth-child(1){
  color: #BEBEBE;
  background-color: white;
  margin-right: 20px;
}
.btn-area > button:nth-child(2){
  color: white;
  background-color: #FF8651;
}
.pictureItem-sty{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.photoa {
  width: 300px;
  height: 220px;
  margin: 20px 20px;
}
.icon{
  width: 100px;
  height: 100px;
}
</style>
