<template>
  <view class="container">
    <view class="camera-container">
      <camera
        ref="camera"
        position="front"
        flash="off"
        @stop="onCameraStop"
        @error="onCameraError"
        :device-position="cameraPosition"
        style="width: 100%; height: 100%;"
      />
      <view class="camera-mask"></view>
      <view class="camera-guide"></view>
    </view>
    <view class="button-container">
      <view class="button" @click="toggleCamera">
        切换摄像头
      </view>
      <view class="button" @click="takePhoto">
        拍照
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cameraPosition: 'front',
    };
  },
  methods: {
    toggleCamera() {
      if (this.cameraPosition === 'front') {
        this.cameraPosition = 'back';
      } else {
        this.cameraPosition = 'front';
      }
    },
    takePhoto() {
      const camera = this.$refs.camera;
	  console.log(camera)
   //    camera.takePhoto({
   //      quality: 'high',
   //      success: (res) => {
   //      },
   //      fail: (err) => {
   //        console.error(err);
   //      },
   //    });
    },
    onCameraStop() {
      console.log('相机已停止');
    },
    onCameraError(error) {
      console.error('相机错误：', error.detail);
    },
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.camera-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.camera-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background-color: rgba(0, 0, 0, 0.5); */
  z-index: 2;
}

.camera-guide {
  width: 60vw;
  height: 60vw;
  border: 1px dashed #fff;
  border-radius: 50%;
  position: absolute;
  top: calc(50% - 30vw);
  left: calc(50% - 30vw);
  z-index: 3;
}

.button-container {
  position: absolute;
  bottom: 40px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4;
}

.button {
  margin: 0 20px;
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

</style>