<template>
  <div class="add-user-page">
    <p style="color: #713610; font-size: 1.25rem; padding: 1rem; text-align: center; font-weight: bold;">请录入儿童的信息</p>
    <div style="">
      <van-config-provider :theme-vars="themeVars">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field v-model="user_info.kindergarten" name="幼儿园" label="幼儿园" placeholder="" disabled />
            <van-field v-model="user_info.job" name="儿童姓名" label="儿童姓名" placeholder="请输入儿童姓名" />
            <van-row style="padding: 2vh 0;">
              <van-col span="7"><span style="font-size: 14px; color: #323233; margin-left: 2vh;">儿童头像</span></van-col>
              <van-col span="17"><span style="font-size: 12px; color: #B0B0B0;">请上传一张清晰的儿童照片</span></van-col>
            </van-row>
            <van-row style="padding-bottom: 2vh;">
              <van-col span="16" offset="8">
                <van-uploader v-model="fileList" :after-read="afterRead" :before-delete="beforeDelete" :max-count="1" />
              </van-col>
            </van-row>
          </van-cell-group>
          <div style="margin: 2vh;">
            <van-button v-if="lock_btn" loading type="primary" loading-text="上传中..." style="width: 100%;" round></van-button>
            <van-button v-else @click="saveInfo" :disabled="lock_btn" type="primary" native-type="submit" style="width: 100%;" round>保存</van-button>
          </div>
        </van-form>
      </van-config-provider>
    </div>
  </div>
</template>

<script setup>
import { v4 as uuidv4 } from 'uuid';
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import $ from 'jquery'
import { Toast } from 'vant';

const $route = useRoute();
const $router = useRouter();

const themeVars = {
  buttonPrimaryBackground: '#F9D95C',
  buttonPrimaryBorderColor: '#F9D95C',
  buttonPrimaryColor: '#713610',
};

const onSubmit = (values) => {
  // console.log('submit', values);
};

// 图片模块
let lock_btn = ref(false); // 保存按钮锁
let fileList = ref([]);
let upload_image = reactive({ meta_id: '' });
const afterRead = (res) => {
  lock_btn.value = true; // 上传开始, 不能保存
  let affix = uuidv4();
  // let affix = uuid();
  // 此时可以自行将文件上传至服务器
  let dataURL = res.content;
  let base64url = dataURL.slice(dataURL.indexOf(',') + 1);  // 截取前缀的base64   data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......
  //TODO: 获取七牛token
  axios.post('/srv/?f=shzl_comment&a=upload', {
    filename: `${affix}_${res.file.name}`,
    file: base64url
  })
  .then(res => {
    if (res.statusText === 'OK') {
      let config = {
        headers: {
          'Content-Type': 'application/octet-stream',
          'Authorization': 'UpToken ' + res.data.token,    // UpToken后必须有一个 ' '(空格)
        }
      }
      // 上传七牛服务器
      axios.post('http://upload.qiniup.com/putb64/-1/key/' + res.data.key, base64url, config)
        .then(res => {
          if (res.data.filekey) {
            let info = res.data;
            // TODO: 保存图片返回ID
            axios.post('/srv/?f=shzl_comment&a=upload&t=save_file', {
              format: info.image_info.format,
              hash: info.hash,
              height: info.image_info.height,
              width: info.image_info.width,
              filekey: info.filekey,
            })
            .then(res => {
              upload_image.meta_id = res.data.data.meta_id;
              lock_btn.value = false; // 头像上传完成, 打开锁
            })
            .catch(err => {
              console.error(err); 
            })
          } else {
            console.warn(res);
            Toast({
              icon: 'close',
              message: res.data.msg
            });
          }
        })
        .catch(err => {
          console.error(err);
          Toast({
            icon: 'close',
            message: res.data.msg
          });
        })
    } else {
      console.warn(res);
    }
  })
  .catch(err => {
    console.error(err); 
  })
};
const beforeDelete = () => { // 删除图片回调
  user_info.meta_id = '';
  upload_image.meta_id = '';
  return true;
}

let user_info = reactive({
  kg_id: $route.query.kg_id,
  kindergarten: $route.query.kg_name,
  name: '',
  meta_id: ''
});

onMounted(() => {
  //
  $('.content-section').height($(document).height() - $('.title-section').height());
})

// 保存用户信息
const saveInfo = () => {
  // TODO: 以前接口保存的是一个ID，看后端怎么处理, perf_avatar看样子是一个图片地址
  axios.post('/srv/?f=shzl_comment&a=user&t=edit', {
    kg_id: user_info.kg_id,
    perf_name: user_info.name,
    // perf_avatar: upload_image.meta_id ? upload_image.meta_id : user_info.meta_id,
    meta_id: upload_image.meta_id ? upload_image.meta_id : user_info.meta_id,
  })
  .then(res => {
    if (res.data.code === 1) {
      Toast.success({
        message: '保存成功',
        duration: 1000,
        onClose: () => {
          goBack();
        }
      });
    } else {
      console.warn(res);
      Toast({
        icon: 'close',
        message: res.data.msg
      });
    }
  })
  .catch(err => {
    console.error(err); 
  })
}
</script>

<script>
import mixin from 'common/mixin';

export default {
  mixins: [mixin.init],
  data () {
    return {

    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.add-user-page {
  padding: 1rem;
}
</style>