<template>
  <view class="index">
    <nut-button type="primary" @click="handleClick">拍照或选择图片</nut-button>
  </view>
</template>


<script>
import { reactive, toRefs, ref, onMounted } from "vue";
import { Dongdong } from "@nutui/icons-vue-taro";
import Taro from "@tarojs/taro";
import * as paddlejs from '@paddlejs/paddlejs-core';
import '@paddlejs/paddlejs-backend-webgl';


const plugin = requirePlugin("paddlejs-plugin");
plugin.register(paddlejs, wx);
let pdjs;


export default {
  name: "Index",
  components: {
    Dongdong,
  },
  setup() {
    const state = reactive({
      tmpImage: "",
    });


    const handleClick = () => {
      wx.chooseMedia({
        count: 1,
        mediaType: ["image"],
        sourceType: ["album", "camera"],
        success: (value) => {
          let { errMsg, tempFiles } = value;
          if (errMsg != "chooseMedia:ok") {
            Taro.showToast({
              title: "选择图片失败",
              icon: "error",
              duration: 3000,
            });
            return;
          }
          let [firstImage] = tempFiles;
          state.tmpImage = firstImage.tempFilePath;


          console.log(state, `success`);
        },
        fail: (err) => {
          Taro.showToast({
            title: "操作失败",
            icon: "error",
            duration: 3000,
          });
        },
        complete: (done) => {
          console.log(done);
        },
      });
    };


    onMounted(() => {
      pdjs = new paddlejs.Runner({
        modelPath: "https://paddlejs.cdn.bcebos.com/models/mobilenetV2_nchw",
        feedShape: {
          fw: 224,
          fh: 224,
        },
        fill: "#fff",
        targetSize: {
          height: 224,
          width: 224,
        },
        mean: [0.485, 0.456, 0.406],
        std: [0.229, 0.224, 0.225],
      });
      pdjs.init().then(() => {
        // 初始化完成
        console.log("init model")
      });
    });
    return {
      ...toRefs(state),
      handleClick,
    };
  },
};
</script>


<style lang="scss">
.index {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
</style>