<template>
	<view class="content" v-if="showBody">
		<view class="bg">
			<image src="../static/vlog/icon/camera.png"></image>
		</view>
		<camera class="camera" device-position="front" flash="off" @error="error"></camera>
		<!-- <camera class="camera" device-position="front" flash="off" @error="error" @initdone="initdone"></camera> -->
		<view class="surface" v-show="show">
			<view>请正对镜头</view>
			<text>{{text}}</text>
		</view>
		<image class="photo" v-show="src" :src="src"></image>
		<view class="hint">
		</view>
		<view class="hint1">
			<view class="item">
				<view class="">
					<image src="../static/vlog/icon/icon_lightisenough.png"></image>
				</view>
				<view>光线充足</view>
			</view>
			<view class="item">
				<view class="">

					<image src="../static/vlog/icon/icon_isthelens.png"></image>
				</view>
				<view>正对镜头</view>
			</view>
			<view class="item">
				<view class="">
					<image src="../static/vlog/icon/icon_openface.png"></image>
				</view>
				<view>不遮挡面部</view>
			</view>
		</view>
		<!-- <u-button type="success" size="medium" @click="takePhoto">开始识别</u-button> -->
	</view>
	<view v-else style="padding: 100rpx;text-align: center;font-size: 36rpx;">
		升级中...
	</view>
</template>

<script>
export default {
  data() {
    return {
      src: '', //照片
      text: 3, //倒计时
      show: false, //摄像头倒计时文本
      base64: '', //照片base64
      showBody:false
    }
  },
  // onLoad() { //代替 vue 里面的 created
  //   this.initdone()
  // },
  onReady() { //代替 vue 里面的 mounted
    this.loadIcon()
  },
  methods: {
    //---加载图标
    loadIcon(){
		  let data={
		    merchantType:0,//商户类型，其他
		  }
		  this.$request('scenic/merchantExtendProject/loadList',data).then((res)=>{
		    if(res.code=='00'){
				  let iconList=res.data||[]
          let list=[]
          iconList.forEach(item=>{
            if(item.projectStatus==0){
              list.push(item)
            }
          })
          if(list.length>6){
            this.showBody=true
            this.initdone()
          }
		    }
		  })
    },
    query() { //人脸查询
      uni.showLoading({
        title: '人脸识别中'
      })
      let data = {
        caseId: 'a124Jj6IYiSzCjVV', //景区id
        userId: uni.getStorageSync('openid'), //用户id
        faceImgData: this.base64, //人脸图片base64编码
        optimalFramesNum: 3, //最优帧数量(默认填3就行)
        enableImgBeauty: true //默认填true
      }
      this.$request('distribution/vlog/createVlog',data).then(res => {//创建任务
        var that=this
        if (res.code === '00') {
          uni.showModal({
						    title: '提示',
						    content: '视频合成中,请在1~2分钟后在我的VLOG视频集中查看',
            showCancel:false,
            success() {
              uni.navigateTo({
                url:'../vlogIndex/vlogIndex'
              })
            }
          })
        }else{
          uni.showModal({
						    title: '提示',
						    content: '请先在打卡点录制素材',
            showCancel:false,
            success() {
              uni.navigateTo({
                url:'../vlogIndex/vlogIndex'
              })
            }
          })
        }
      })
    },
    takePhoto() { //扫脸
      this.buttonShow = false
      this.src = ''
      this.text = 3
      this.show = true
      var test = setInterval(() => {
        this.text = this.text - 1
        if (this.text === -1) {
          clearTimeout(test)
          this.show = false
          const ctx = uni.createCameraContext()
          ctx.takePhoto({
            quality: 'high',
            success: (res) => {
              this.src = res.tempImagePath
              uni.getFileSystemManager().readFile({ //图片转base64
                filePath: res.tempImagePath, //选择图片返回的相对路径
                encoding: 'base64', //编码格式
                success: res => { //成功的回调
                  this.base64 = 'data:image/jpeg;base64,' + res.data
                  this.query()
                }
              })
            }
          })
        }
      }, 1000)
    },
    initdone(){//相机初始化完成自动开始拍照
      this.takePhoto()
    },
    error(e) { //相机报错
      uni.showModal({
				    title: '提示',
				    content: e.detail,
        showCancel:false
      })
    },
  }
}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 20rpx;
		background-color: #ffffff;
		height: 100%;
		width: 100%;
		text-align: center;
		.bg{
			width: 650rpx;
			height: 650rpx;
			position: absolute;
			top: 80rpx;
			left: 50%;
			transform: translate(-50%);
			z-index: 5;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.camera {
			width: 550rpx;
			height: 550rpx;
			border-radius: 50%;
			position: absolute;
			top: 140rpx;
			left: 50%;
			transform: translate(-50%);
		}

		.surface {
			width: 500rpx;
			height: 500rpx;
			border-radius: 50%;
			position: absolute;
			top: 150rpx;
			left: 50%;
			transform: translate(-50%);
			text-align: center;
			font-size: 40rpx;
			color: #fff;
			z-index: 3;
			view {
				margin: 100rpx 0;
			}
			text {
				font-size: 70rpx;
			}
		}
		.photo {
			width: 550rpx;
			height: 550rpx;
			border-radius: 50%;
			position: absolute;
			top: 140rpx;
			left: 50%;
			transform: translate(-50%);
		}
		.hint {
			color: red;
			padding-top: 680rpx;
		}
		.hint1 {
			height: 300rpx;
			display: flex;
			justify-content: space-between;
			padding-top: 50rpx;
			padding-left: 80rpx;
			padding-right: 80rpx;

			.item {
				width: 30%;
				text-align: center;
			}

			image {
				height: 60rpx;
				width: 60rpx;
			}
		}
	}
</style>