<script setup>
import { ElMessage } from 'element-plus';

const props = defineProps({
  id: String
})

let form = $ref({
  yys_file: '',
  grade_id: '',
  grade_name: '',
  subject_id: '',
  subject_name: '',
})

let loading = $ref(true)

if (props.id) {
  request({
    url: '/yzy/zy_ssys/detail',
    data: {
      yys_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]
      })
      loading = false
    }
  })
} else {
  loading = false
}

const rules = {
  yys_file: [
    { required: true, message: '请上传源文件', trigger: 'submit' },
  ],
  grade_id: [
    { required: true, message: '请选择年级', trigger: 'submit' },
  ],
  subject_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 = {
        //   yys_file: form.yys_file,
        //   kz_master_teacher: form.kz_master_teacher,
        //   kz_master_user_name: form.kz_master_user_name,
        //   kz_title: form.kz_title,
        //   kz_kcjj: form.kz_kcjj,
        //   kz_kss: form.kz_kss,
        //   grade_id: form.grade_id,
        //   subject_id: form.subject_id,
        // }
        request({
          url: `/yzy/zy_ssys/edit`,
          data: {
            yys_id: props.id,
            yzy_zy_ssys: form
          }
        }).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 items-center shadow bg-white rounded-md mt-4 p-4">
    <div class="text-lg text-hex-050026 w-full font-semibold">上传作业</div>

    <div class="w-480px text-hex-949494" v-loading="loading">
      <el-form :model="form" label-position="top" ref="formRef" :rules="rules" v-if="!loading">
        <el-form-item label="源文件" prop="yys_file">
          <file-upload v-model:part="form.yys_file" :limit="1" accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.mp4,.mp3" :size-limit="500*1024">
            <template #default>
              <div
                class="flex_center w-65px h-65px border border-dashed border-hex-E4E6E8 bg-hex-F9F9F9 text-hex-9D9AB9">
                <i-akar-icons:plus class="text-xl" />
              </div>
            </template>
            <template #tip>
              <div class="mt-2">支持格式：doc,docx,xls,xlsx,ppt,pptx,pdf,mp4,mp3（500M以内）</div>
            </template>
          </file-upload>
        </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"></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"></remote-select>
          </el-form-item>
        </div>

        <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>


<style lang="scss" scoped>

</style>
