<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>
          <van-cell-group inset>
            <van-field v-model="user_info.kindergarten" name="幼儿园" label="幼儿园" placeholder="" disabled />
            <van-field v-model="user_info.name" 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="validForm" :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 { useUpload } from '@/composables/useUpload.js'

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 { lock_btn, fileList, upload_image, metaId, afterRead, beforeDelete } = useUpload(); // 上传图片模块

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

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

// 验证输入项
const validForm = () => {
  // if (!user_info.name) {
  //   Toast.fail('儿童姓名不能为空')
  //   return false;
  // }
  // if (!fileList.value.length) {
  //   Toast.fail('儿童头像不能为空')
  //   return false;
  // }
  saveInfo()
};

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

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

// 保存用户信息
const saveInfo = () => {
  axios.post('/srv/?a=add_performer', {
    kg_id: user_info.kg_id,
    perf_name: user_info.name,
    perf_avatar: '',
    meta_id: upload_image.meta_id ? upload_image.meta_id : metaId,
  })
  .then(res => {
    if (res.data.code === 1) {
      Toast.success({
        message: '保存成功',
        duration: 1000,
        onClose: () => {
          $router.go(-1)
        }
      });
    } 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>