<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 qs from 'Qs'
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);
};

// const uuid = () => {
//   let s = [];
//   let hexDigits = '0123456789abcdef';
//   for (var i = 0; i < 36; i++) {
//     s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
//   }
//   s[14] = '4';  // bits 12-15 of the time_hi_and_version field to 0010
//   s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
//   s[8] = s[13] = s[18] = s[23] = '-';

//   var uuid = s.join('');
//   return uuid;
// }

// 图片模块
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.......
  // 获取七牛token
  axios.post('/srv/?f=shzl_comment&a=upload',
  qs.stringify({
    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;
            axios.post('/srv/?f=shzl_comment&a=upload&t=save_file',
            qs.stringify({
              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({
  kindergarten: '杨浦民办科技幼稚园',
  name: '',
  meta_id: ''
});

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

// 保存用户信息
const saveInfo = () => {
  axios.post('/srv/?f=shzl_comment&a=user&t=edit',
  qs.stringify({
    kindergarten: user_info.kindergarten,
    name: user_info.name,
    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>