<script setup>
import { ElMessage } from 'element-plus';
import { user } from '~/store/user';
const props = defineProps({
  id: String
})

let form = $ref({
  ym_name: undefined,
  ym_sm_name: undefined,
  grade_id: undefined,
  subject_id: undefined,
  grade_name: undefined,
  subject_name: undefined,
  ym_cm_name: undefined,
  ym_student_num: undefined,
  ym_part_teacher: undefined,
  ym_timetable_json: [],
  ym_teacher_id: undefined,
  ym_teacher_name: undefined,
  ym_brief: undefined,
  ym_img: undefined,

})

let loading = $ref(true)

if (props.id) {
  request({
    url: '/yk/main/detail',
    data: {
      ym_id: props.id
    }
  }).then(res => {
    if (res.code === '1') {
      console.log('res :>> ', res);
      Object.keys(form).forEach(key => {
        form[key] = res.data.one_info[key]
      })
      form.ym_student_num = res.data.one_info.ym_student_num * 1
      form.ym_timetable_json = res.data.one_info.ym_timetable_json?.split(',')

      loading = false
    }
  })
} else {
  loading = false
}

const rules = {
  ym_name: [
    { required: true, message: '请输入课程名称', trigger: 'submit' },
  ],
  ym_sm_name: [
    { required: true, message: '请输入学校名称', trigger: 'submit' },
  ],
  ym_timetable_json: [
    { required: true, message: '请选择约课日期', trigger: 'submit' },
  ],
  grade_id: [
    { required: true, message: '请选择年级', trigger: 'submit' },
  ],
  subject_id: [
    { required: true, message: '请选择学科', trigger: 'submit' },
  ],
  ym_cm_name: [
    { required: true, message: '请输入班级名称', trigger: 'submit' },
  ],
  ym_student_num: [
    { required: true, message: '请输入学生数', trigger: 'submit' },
  ],
  ym_teacher_id: [
    { required: true, message: '请选择约课老师', trigger: 'submit' },
  ],
}

let isRead = $ref(false)
let formRef = $ref()
function handleSubmit() {
  console.log('form :>> ', form);
  if (isRead) {
    formRef.validate().then((res) => {
      console.log('res :>> ', res);
      if (res === true) {
        const submitData = {
          ym_name: form.ym_name,
          ym_img: form.ym_img,
          ym_brief: form.ym_brief,
          ym_sm_name: form.ym_sm_name,
          grade_id: form.grade_id,
          subject_id: form.subject_id,
          grade_name: form.grade_name,
          subject_name: form.subject_name,
          ym_cm_name: form.ym_cm_name,
          ym_student_num: form.ym_student_num,
          ym_part_teacher: form.ym_part_teacher,
          ym_teacher_id: form.ym_teacher_id,
          ym_teacher_name: form.ym_teacher_name,
          ym_timetable_json: form.ym_timetable_json.join(),
        }
        request({
          url: `/yk/main/${props.id ? 'edit' : 'add'}`,
          data: {
            ym_id: props.id,
            yk_main: submitData
          }
        }).then(res => {
          if (res.code === '1') {
            ElMessage.success('创建课程成功')
            handleBack()
          }
        })
      }
    })
  } else {
    ElMessage.warning('请先勾选协议')
  }
}

const router = useRouter()
function handleBack() {
  router.back()
}
</script>

<template>
  <!-- <div class="w-full shadow bg-white rounded-md flex items-center px-36 py-4">
    <div class="text-lg text-hex-050026">网络直播</div>
    <el-divider direction="vertical" />
    <div class="text-sm">
      <span class="text-hex-949494">我的课程</span>
      <span class="text-hex-949494"> - 我创建的</span>
      <span class="text-hex-949494"> - 网络直播</span>
      <span> - 创建</span>
    </div>
  </div> -->

  <div class="w-full flex flex-col shadow bg-white rounded-md mt-4 p-4 items-center">
    <div class="text-lg text-hex-050026 w-full font-semibold">约课</div>

    <div class="w-480px text-hex-949494" v-loading="loading">
      <div class="text-hex-00A3FF text-sm mb-4">
        <div class="flex justify-between mb-2">
          <div>
            <span>姓名：</span>
            <span>{{user.user_realname}}</span>
          </div>
          <div>
            <span>职工编号：</span>
            <span>{{user.user_email}}</span>
          </div>
        </div>
        <div class="flex justify-between">
          <div>
            <span>身份证：</span>
            <span>{{user.user_cardno}}</span>
          </div>
          <div>
            <span>电话号码：</span>
            <span>{{user.user_phone}}</span>
          </div>
        </div>
      </div>
      <el-form :model="form" label-position="top" ref="formRef" :rules="rules" v-if="!loading">

        <el-form-item label="学校" prop="ym_sm_name">
          <el-input v-model="form.ym_sm_name" />
        </el-form-item>

        <div class="flex justify-between">
          <el-form-item label="年级" prop="grade_id">
            <remote-select v-model="form.grade_id" v-model:model-name="form.grade_name" to="grade" @change="form.ym_teacher_id=undefined"></remote-select>
          </el-form-item>
          <el-form-item label="学科" prop="subject_id">
            <remote-select v-model="form.subject_id" v-model:model-name="form.subject_name" to="subject" @change="form.ym_teacher_id=undefined">
            </remote-select>
          </el-form-item>
        </div>

        <el-form-item label="课程名称" prop="ym_name">
          <el-input v-model="form.ym_name" />
        </el-form-item>
        <el-form-item label="课程封面图" prop="ym_img">
          <file-upload v-model:part="form.ym_img" :limit="1" list-type="picture-card" accept=".jpg,.png,.jpeg"
            :size-limit="200">
            <template #default>
              <i-akar-icons:plus class="text-4xl" />
            </template>
            <template #tip>
              <div class="mt-2">支持格式：jpg,png,jpeg（200kb以内） 建议尺寸600x320</div>
            </template>
          </file-upload>
        </el-form-item>
        <el-form-item label="课程简介" prop="ym_brief">
          <el-input v-model="form.ym_brief" type="textarea" :rows="4" />
        </el-form-item>

        <el-form-item label="班级" prop="ym_cm_name">
          <el-input v-model="form.ym_cm_name" />
        </el-form-item>
        <el-form-item label="学生数" prop="ym_student_num">
          <el-input-number v-model="form.ym_student_num" />
        </el-form-item>
        <el-form-item label="兼职老师" prop="ym_part_teacher">
          <el-input v-model="form.ym_part_teacher" />
        </el-form-item>

        <el-form-item label="开始时间 - 结束时间" prop="ym_timetable_json">
          <el-date-picker v-model="form.ym_timetable_json" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>

        <el-form-item label="约课老师" prop="ym_teacher_id">
          <!-- v-show="!(form.subject_id&&form.grade_id)" -->
          <div>请先选择好年级，学科</div>

          <!-- :d="{um_subject:form.subject_id,um_grade:form.grade_id,um_status:2}" -->
          <remote-select v-show="form.subject_id&&form.grade_id" v-model="form.ym_teacher_id" v-model:model-name="form.ym_teacher_name" url="/user/mssq/index"
            :d="{um_subject:form.subject_id,um_grade:form.grade_id,um_status:2}" :fields="['um_id','um_name']">
          </remote-select>


        </el-form-item>

        <el-checkbox v-model="isRead" label="已阅读并同意《约课协议》" size="large" />

        <div class="flex justify-around items-center text-sm mt-8">
          <div class="w-166px h-50px flex_center rounded bg-hex-00A3FF text-white cursor-pointer" @click="handleSubmit">
            提交</div>
          <div class="w-166px h-50px flex_center rounded bg-hex-F4F4F4 text-hex-41387F cursor-pointer"
            @click="handleBack">关闭</div>
        </div>
      </el-form>
    </div>
  </div>
</template>


