<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.kg_name" name="幼儿园" label="幼儿园" placeholder="" disabled /> -->
          <van-field v-model="user_info.kg_name" is-link readonly label="幼儿园" placeholder="请选择幼儿园"
            @click="selectSchool" />
          <van-popup v-model:show="showPicker" round position="bottom">
            <van-picker v-model="selectedValues" :columns="schoolList" @cancel="showPicker = false"
              @confirm="onConfirm" />
          </van-popup>
          <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 } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import { showSuccessToast, showFailToast, showToast } from 'vant';
import _ from 'lodash'
import { styleColor } from '@/constant.js';

const { lock_btn, fileList, upload_image, afterRead, beforeDelete } = useUpload(); // 上传图片模块

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

// 自定义修改组件样式
const themeVars = {
  buttonPrimaryBackground: styleColor.baseColor,
  buttonPrimaryBorderColor: styleColor.baseColor,
  buttonPrimaryColor: styleColor.baseFontColor,
};

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

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

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

// 生成幼儿园信息
let schoolList = reactive([]);
let showPicker = ref(false);
const selectSchool = () => {
  axios.get('/srv/?a=kg_list')
  .then(res => {
    if (res.data.code === 1) {
      _.each(res.data.data, item => {
        schoolList.push({
          text: item.name,
          value: item.id,
        })
      })
      showPicker.value = true;
    } else {
      console.warn(res);
      if (!res.data.show) return false;
      showToast({
        icon: 'close',
        message: res.data.msg
      });
    }
  })
  .catch(err => {
    console.error(err);
  })
}

const selectedValues = ref([+$route.query.kg_id]);

const onConfirm = ({ selectedOptions }) => {
  showPicker.value = false;
  user_info.kg_id = selectedOptions[0].value;
  user_info.kg_name = selectedOptions[0].text;
};

// 保存用户信息
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) {
        showSuccessToast({
          message: '保存成功',
          duration: 1000,
          onClose: () => {
            if ($route.query.back_url) {
              $router.push($route.query.back_url)
            } else {
              $router.go(-1)
            }
          }
        });
      } else {
        console.warn(res);
        if (!res.data.show) return false;
        showToast({
          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: @base-color;
    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>