<template>
	<view class="f-straight wrapper">
    <uni-forms ref="form" :modelValue="formData" :rules="rules" validateTrigger="bind" label-width="90px">
      <uni-forms-item label="学校名称" name="schoolName" required>
				<uni-combox :candidates="schoolData" placeholder="学校名称" v-model="formData.schoolName" @input="handleSearchSchool"></uni-combox>
			</uni-forms-item>
      <uni-forms-item label="所学专业" name="major" required>
				<uni-combox :candidates="majorData" placeholder="所学专业" v-model="formData.major" @input="handleSearchMajor"></uni-combox>
			</uni-forms-item>
      <uni-forms-item label="学历" name="educationType" required>
        <uni-data-select v-model="formData.educationType" :localdata="searchData.eduType"></uni-data-select>
			</uni-forms-item>
      <uni-forms-item label="学制类型" name="educationSystemType" required>
        <uni-data-select v-model="formData.educationSystemType" :localdata="searchData.eduSystemType"></uni-data-select>
			</uni-forms-item>
      <uni-forms-item label="开始时间" name="startTime" required>
				<picker mode="date" :value="formData.startTime" fields="month" :end="endDate" @change="e => formData.startTime = e.detail.value">
					<view class="uni-input ss-m-t-20">{{ formData.startTime }}</view>
				</picker>
			</uni-forms-item>
      <uni-forms-item label="结束时间" name="endTime" required>
				<picker mode="date" :value="formData.endTime" fields="month" @change="e => formData.endTime = e.detail.value">
					<view class="uni-input ss-m-t-20">{{ formData.endTime }}</view>
				</picker>
			</uni-forms-item>
      <uni-forms-item label="在校经历" name="content">
				<uni-easyinput type="textarea" v-model="formData.content" autoHeight  placeholder="请输入内容"></uni-easyinput>
			</uni-forms-item>
    </uni-forms>
	</view>
</template>

<script setup>
import { cloneDeep } from 'lodash-es'
import { ref, watch, unref } from 'vue'
import { dictObj } from '@/utils/position.js'
import { convertYearMonthToTimestamp, timesTampChange } from '@/utils/date.js'
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  data: {
    type: Object,
    default: () => ({})
  }
})

let formData = ref({
  startTime: '2014-01',
  endTime: '2018-01'
})
const majorData = ref([])
const schoolData = ref([])
const form = ref()
const date = new Date()
const endDate = date.getFullYear() + '-' + (date.getMonth() + 1) // 不可选时间
const searchData = ref({
  school: [],
  major: [],
  eduType: dictObj.edu.map(e => ({ text: e.label, value: e.value})),
  eduSystemType: dictObj.eduSystemType.map(e => ({ text: e.label, value: e.value}))
})

const getInfo = (data) => {
  data.startTime = data.startTime ? timesTampChange(data.startTime, 'Y-M') : '2014-01'
  data.endTime = data.endTime ? timesTampChange(data.endTime, 'Y-M') : '2018-01'
  formData.value = cloneDeep(data) || {
    startTime: '2014-01',
    endTime: '2018-01'
  }
}

watch(
  () => props.data,
  (newVal) => {
    if (newVal && Object.keys(newVal)) {
      getInfo(newVal)
    }
  },
  { immediate: true },
)

const rules = {
	schoolName:{
		rules: [{required: true, errorMessage: '请输入学校名称' }]
	},
	major:{
		rules: [{required: true, errorMessage: '请输入所学专业' }]
	},
	educationType:{
		rules: [{required: true, errorMessage: '请选择学历' }]
	},
	educationSystemType:{
		rules: [{required: true, errorMessage: '请选择学制类型' }]
	},
	startTime:{
		rules: [{required: true, errorMessage: '请选择开始时间' }]
	},
	endTime:{
		rules: [{required: true, errorMessage: '请选择结束时间' }]
	}
}


// 学校搜索
const handleSearchSchool = (e) => {
  if (!e) return schoolData.value = []
  schoolSearchByName({ name: e }).then(res => {
    searchData.value.school = res.data
    schoolData.value = res.data && res.data?.length ? res.data.map(e => e.value) : []
  })
}

// 专业搜索
const handleSearchMajor = (e) => {
  if (!e) return majorData.value = []
  schoolMajorByName({ name: e }).then(res => {
    searchData.value.major = res.data
    majorData.value = res.data && res.data?.length ? res.data.map(e => e.nameCn) : []
  })
}

const submit = async () => {
  const valid = await unref(form).validate()
  if (!valid) return { id: props.id, data: null}
  //
  const startTime = convertYearMonthToTimestamp(formData.value.startTime)
  const endTime = convertYearMonthToTimestamp(formData.value.endTime)
  return { id: props.id, data: { ...formData.value, startTime, endTime }}
}

defineExpose({
  id: props.id,
  submit
})


</script>

<style lang="less" scoped>

.wrapper{
	padding: 15px;
  // padding-top: 30px;
}
.upload-img{
  position: relative;
  width: 200rpx;
  height: 200rpx;
  border: 1px solid #f1f1f1;
  margin: 10rpx;
}
.upload-file{
  width: 200rpx;
  height: 200rpx;
  border: 1px solid #f1f1f1;
  margin: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
}
</style>