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

const props = defineProps({
  id: String,
  bid: String,
})

let form = $ref({
  kzk_img: '',
  kzk_master_teacher: '',
  kzk_master_user_name: '',
  kzk_slave_teacher: '',
  kzk_slave_user_name: '',
  kzk_title: '',

  kzk_starttime: '',
  kzk_endtime: '',

  kzk_no: '',
  kzk_video: '',
  kzk_public: '1',
  kzk_sort: '0',
  kzk_kcap: '',
  kz_kcwj: '',

  yys_id: '',

  kzk_time: undefined,
})

let loading = $ref(true)

if (props.bid) {
  request({
    url: '/kzkt/zbkc_kcdg/detail',
    data: {
      id: props.bid
    }
  }).then(res => {
    if (res.code === '1') {
      console.log('res :>> ', res);
      const info = res.data.one_info.original
      Object.keys(form).forEach(key => {
        form[key] = info[key]
      })
      form.kzk_time = [info.kzk_starttime, info.kzk_endtime]
      form['kz_kcwj'] = info['kzkt_kcwj']
      // form['yys_id'] = info['yys_id'] === '' ? [] : info['yys_id'].split(',')


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

const rules = {
  kzk_img: [
    { required: true, message: '请选择课程封面图', trigger: 'submit' },
  ],
  kzk_master_teacher: [
    { required: true, message: '请输入主讲老师', trigger: 'submit' },
  ],
  kzk_master_user_name: [
    { required: true, message: '请输入主讲账号', trigger: 'submit' },
  ],
  // kzk_slave_teacher: [
  //   { required: true, message: '请输入助教老师', trigger: 'submit' },
  // ],
  // kzk_slave_user_name: [
  //   { required: true, message: '请输入助教账号', trigger: 'submit' },
  // ],
  kzk_title: [
    { required: true, message: '请输入课时标题', trigger: 'submit' },
  ],
  kzk_no: [
    { required: true, message: '请输入课时编号', trigger: 'submit' },
  ],

  kzk_time: [
    { required: true, message: '请选择开始时间和结束时间', trigger: 'submit' },
  ],

  // kz_kcwj: [
  //   { required: true, message: '请上传大纲资源', trigger: 'submit' },
  // ],
  // kzk_video: [
  //   { required: true, message: '请上传直播视频', trigger: 'submit' },
  // ],
  kzk_public: [
    { required: true, message: '请选择是否公开直播', trigger: 'submit' },
  ],
  // kzk_sort: [
  //   { 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 = {
          kzk_img: form.kzk_img,
          kzk_master_teacher: form.kzk_master_teacher,
          kzk_master_user_name: form.kzk_master_user_name,
          kzk_slave_teacher: form.kzk_slave_teacher,
          kzk_slave_user_name: form.kzk_slave_user_name,
          kzk_title: form.kzk_title,
          kzk_no: form.kzk_no,
          kzk_video: form.kzk_video,
          kzk_public: form.kzk_public,
          kzk_sort: form.kzk_sort,
          kzk_kcap: form.kzk_kcap,
          kz_kcwj: form.kz_kcwj,

          yys_id:form.yys_id,

          kzk_starttime: form.kzk_time[0],
          kzk_endtime: form.kzk_time[1],
        }
        request({
          url: `/kzkt/zbkc_kcdg/${props.bid ? 'edit' : 'add'}`,
          data: {
            kz_id: props.id,
            kzk_id: props.bid,
            kzkt_zbkc_kcdg: 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 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="kzk_img">
          <file-upload v-model:part="form.kzk_img" :limit="1" list-type="picture-card" accept=".jpg,.png,.jpeg"
            :size-limit="200">
            <template #default>
              <i-ep:picture class="text-4xl" />
            </template>
            <template #tip>
              <div class="mt-2 text-xs">支持格式：jpg,png,jpeg（200kb以内） 建议尺寸600x320</div>
            </template>
          </file-upload>
        </el-form-item>

        <el-form-item label="主讲账号" prop="kzk_master_user_name">
          <el-input v-model="form.kzk_master_user_name" />
        </el-form-item>
        <el-form-item label="主讲老师" prop="kzk_master_teacher">
          <el-input v-model="form.kzk_master_teacher" />
        </el-form-item>
        <el-form-item label="助教账号" prop="kzk_slave_user_name">
          <el-input v-model="form.kzk_slave_user_name" />
        </el-form-item>
        <el-form-item label="助教老师" prop="kzk_slave_teacher">
          <el-input v-model="form.kzk_slave_teacher" />
        </el-form-item>
        <el-form-item label="课时编号" prop="kzk_no">
          <el-input v-model="form.kzk_no" />
        </el-form-item>
        <el-form-item label="课时标题" prop="kzk_title">
          <el-input v-model="form.kzk_title" />
        </el-form-item>
        <el-form-item label="关联的作业" prop="yys_id">
          <remote-multi-select v-model="form.yys_id" url="/yzy/zy_zbkc/index" :fields="['yzz_id','yzz_name']"  />
        </el-form-item>
        <el-form-item label="开始时间 - 结束时间" prop="kzk_time">
          <el-date-picker v-model="form.kzk_time" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>

        <el-form-item label="上传大纲资源" prop="kz_kcwj">
          <file-upload v-model:part="form.kz_kcwj" 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-ant-design:folder-open-outlined class="text-xl" />
              </div>
            </template>
            <template #tip>
              <div class="mt-2 text-xs">支持格式：doc,docx,xls,xlsx,ppt,pptx,pdf,mp4,mp3（500M以内）</div>
            </template>
          </file-upload>
        </el-form-item>

        <el-form-item label="上传直播视频" prop="kzk_video">
          <file-upload v-model:part="form.kzk_video" :limit="1" accept=".mp4" :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-ant-design:folder-open-outlined class="text-xl" />
              </div>
            </template>
          </file-upload>
        </el-form-item>

        <el-form-item label="公开直播" prop="kzk_public">
          <el-radio-group v-model="form.kzk_public">
            <el-radio label="1">是</el-radio>
            <el-radio label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="显示排序" prop="kzk_sort">
          <el-input v-model="form.kzk_sort" />
        </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>


<style lang="scss" scoped>

</style>
