<template>
  <div class="add-user-page">
    <p class="title">请录入儿童的信息</p>
    <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 class="upload-text">
            <van-col span="7"><span class="upload-text-1">儿童头像</span></van-col>
            <van-col span="17"><span class="upload-text-2">请上传一张清晰的儿童照片</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>
</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 { 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',
};

// 编辑状态
if ($route.query.type === 'EDIT') {
  fileList.value.push({
    url: $route.query.avatar,
    isImage: true
  })
}

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

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

// 保存用户信息
const saveInfo = () => {
  let url = $route.query.type === 'ADD' ? 'add_performer' : 'modify_performer';
  axios.post(`/srv/?a=${url}`, {
    perf_id: $route.query.type !== 'ADD' ? user_info.perf_id : '',
    kg_id: user_info.kg_id,
    perf_name: user_info.name,
    perf_avatar: upload_image.src ? upload_image.src : $route.query.avatar
  })
    .then(res => {
      if (res.data.code === 1) {
        Toast.success({
          message: '保存成功',
          duration: 1000,
          onClose: () => {
            $router.go(-1)
          }
        });
      } else {
        console.warn(res);
        if (!res.data.show) return false;
        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;
  .title {
    color: #713610; 
    font-size: 1.25rem; 
    padding: 1rem; 
    text-align: center; 
    font-weight: bold;
  }
  .upload-text {
    padding: 2vh 0;
    .upload-text-1 {
      font-size: 14px; 
      color: #323233; 
      margin-left: 2vh;
    }
    .upload-text-2 {
      font-size: 12px; 
      color: #B0B0B0;
    }
  }
}
</style>