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

const props = defineProps({
  id: String,
});
let show = $ref(false);
const kz_img = ref("");
let form = $ref({
  kz_img: "",
  kz_teacher_user_realname: "",
  kz_teacher_user_name: "",
  kz_name: "",
  kz_brief: "",
  kz_start_time: "",
  kz_end_time: "",
  kz_shzt: "",
  kz_time: undefined,
  jd_url:'',
  kz_video:'',
  //   shenhe_user: "",
  //   shenhe_status: "",
  //   kz_kcap: "",
});

let loading = $ref(true);
if (props.id) {
  show = true;
  request({
    url: "/kzkt/ztzb/detail",
    data: {
      kz_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.kz_start_time = res.data.one_info.kz_start_time;
      form.kz_end_time = res.data.one_info.kz_end_time;
      form.kz_shzt = res.data.one_info.kz_shzt_option_k;
      loading = false;
    }
  });
} else {
  show = false;
  loading = false;
}

const rules = {
  kz_img: [{ required: true, message: "请选择课程封面图", trigger: "submit" }],
  kz_teacher_user_realname: [
    { required: true, message: "请输入主讲老师", trigger: "submit" },
  ],
  kz_teacher_user_name: [
    { required: true, message: "请输入主讲账号", trigger: "submit" },
  ],
  kz_name: [{ required: true, message: "请输入课程名称", trigger: "submit" }],
  // kz_brief: [{ required: true, message: "请输入课程简介", trigger: "submit" }],
  //   kz_kss: [{ required: true, message: "请输入课时数", trigger: "submit" }],
  kz_start_time: [
    { required: true, message: '请选择开始时间', trigger: 'submit', type: 'date' },
  ],
  kz_end_time: [
    { required: true, message: '请选择结束时间', trigger: 'submit', type: 'date' },
  ],
  // kz_time: [
  //   { required: true, message: "请选择开始时间和结束时间", trigger: "submit" },
  // ],
  kz_video:[{required: true, message: "请上传视频", trigger: "submit"}]
  //   grade_id: [{ required: true, message: "请选择年级", trigger: "submit" }],
  //   subject_id: [{ required: true, message: "请选择学科", trigger: "submit" }],
  //   kz_recommend: [
  // { required: true, message: "请选择是否手机端推荐课程", trigger: "submit" },
  //   ],
  //   kz_best: [{ required: true, message: "请选择是否精品", trigger: "submit" }],
  //   is_shenhe: [
  //     { required: true, message: "请选择是否需要审核", trigger: "submit" },
  //   ],
  //   shenhe_user: [
  //     { required: true, message: "请选择审核对象", trigger: "submit" },
  //   ],
  //   shenhe_status: [
  //     { required: true, message: "请选择审核状态", trigger: "submit" },
  //   ],
};

const handleCompile = (fileList) => {
  let data = fileList[fileList.length - 1];
  form.kz_img = data.response.data.url;
}

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) {
        if(new Date(form.kz_end_time).getTime() <= new Date(form.kz_start_time).getTime()) {
          ElMessage.warning("结束时间必须大于开始时间！");
          return;
        }
        let submitData = {
          kz_img: form.kz_img,
          kz_teacher_user_realname: form.kz_teacher_user_realname,
          kz_teacher_user_name: form.kz_teacher_user_name,
          kz_name: form.kz_name,
          kz_brief: form.kz_brief,
          //   kz_kss: form.kz_kss,
          //   grade_id: form.grade_id,
          //   subject_id: form.subject_id,
          kz_start_time: form.kz_start_time,
          kz_end_time: form.kz_end_time,
          //   kz_recommend: form.kz_recommend,
          //   kz_best: form.kz_best,
          //   kz_kcap: form.kz_kcap,
          kz_video:form.kz_video
          //   shenhe_user: form.shenhe_user,
          //   shenhe_status: form.shenhe_status
        };
        if(!props.id){
          Object.assign(submitData,{kz_shzt: '2'})
        }else{
          Object.assign(submitData,{kz_shzt: form.kz_shzt})
        }
        request({
          url: `/kzkt/ztzb/${props.id ? "edit" : "add"}`,
          data: {
            kz_id: props.id,
            kzkt_ztzb: submitData,
          },
        }).then((res) => {
          if (res.code === "1") {
            if (props.id) {
              ElMessage.success("编辑课程成功");
            } else {
              ElMessage.success("创建课程成功");
            }
            handleBack();
          }
        });
      }
    });
  } else {
    ElMessage.warning("请先勾选协议");
  }
}

const router = useRouter();
function handleBack() {
  router.push({'name':'personal_create_ztzb'});
}
</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 v-if="show"> - 编辑</span>
      <span v-else> - 创建</span>
    </div>
  </div>

  <div
    class="
      w-full
      flex flex-col
      items-center
      shadow
      bg-white
      rounded-md
      mt-4
      p-4
    "
  >
    <div v-if="show" class="text-lg text-hex-050026 w-full font-semibold">编辑</div>
    <div v-else 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="课程封面图" class="kcfmt" prop="kz_img">
          <!-- <file-upload-progress
            v-model:part="form.kz_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-progress> -->
          <file-upload-progress v-model:part="kz_img" list-type="picture-card" accept=".jpg,.png,.jpeg" :size-limit="5*1024" @compile="handleCompile">
            <template #default>
              <el-icon size="38" color="#9d9ab9" v-if="form.kz_img==''">
                <Picture />
              </el-icon>
              <img v-else :src="getFullUrl(form.kz_img)" alt="" style="width: 100%;height: 100%;" />
            </template>
            <template #tip>
              <div style="color: #949494;font-size: 12px;margin-left: 20px;display: inline-block;vertical-align: top;line-height: 20px;">支持格式：jpg,png,jpeg（5M以内） 建议尺寸600x320</div>
            </template>
          </file-upload-progress>
        </el-form-item>

        <el-form-item label="直播用户名" prop="kz_teacher_user_name">
          <el-input v-model="form.kz_teacher_user_name" />
        </el-form-item>
        <el-form-item label="主讲人(单位)" prop="kz_teacher_user_realname">
          <el-input v-model="form.kz_teacher_user_realname" />
        </el-form-item>
        <el-form-item label="课程名称" prop="kz_name">
          <el-input v-model="form.kz_name" />
        </el-form-item>
        <el-form-item label="课程简介" prop="kz_brief">
          <el-input v-model="form.kz_brief" type="textarea" :rows="4" />
        </el-form-item>
        <!-- <el-form-item label="课时数" prop="kz_kss">
          <el-input v-model.number="form.kz_kss" />
        </el-form-item> -->
        <!-- <div class="flex justify-between">
          <el-form-item label="年级" prop="grade_id">
            <remote-select v-model="form.grade_id" to="grade"></remote-select>
          </el-form-item>
          <el-form-item label="学科" prop="subject_id">
            <remote-select v-model="form.subject_id" to="subject"></remote-select>
          </el-form-item>
        </div> -->
         <div class="flex justify-between">
           <el-form-item label="开始时间" prop="kz_starttime">
             <el-date-picker v-model="form.kz_start_time" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
           </el-form-item>
           <el-form-item label="结束时间" prop="kz_endtime">
             <el-date-picker v-model="form.kz_end_time" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
           </el-form-item>
         </div>
<!--        <el-form-item label="开始时间 - 结束时间" prop="kz_time">-->
<!--          <el-date-picker-->
<!--            v-model="form.kz_time"-->
<!--            type="datetimerange"-->
<!--            value-format="YYYY-MM-DD HH:mm:ss"-->
<!--          />-->
<!--        </el-form-item>-->
        <el-form-item v-show="show" label="推流地址" prop="jd_url">
          <el-input v-model="form.jd_url" disabled type="text" :rows="4" />
        </el-form-item>
        <el-form-item label="上传直播视频">
          <file-upload-progress
            v-model:part="form.kz_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-progress>
        </el-form-item>
        <!-- <div class="flex justify-between">
          <el-form-item label="是否手机端推荐课程" prop="kz_recommend">
            <el-radio-group v-model="form.kz_recommend">
              <el-radio label="1">推荐</el-radio>
              <el-radio label="0">不推荐</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否精品" prop="kz_best">
            <el-radio-group v-model="form.kz_best">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div> -->
        <!-- 
        <el-form-item label="是否需要审核" prop="kz_shzt">
          <el-radio-group v-model="form.kz_shzt">
            <el-radio label="1">需要审核</el-radio>
            <el-radio label="0">不需要审核</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <!-- <el-form-item label="审核状态" prop="shenhe_status">
          <el-select v-model="form.shenhe_status" class="w-full">
            <el-option label="不需要审核" value="0"></el-option>
            <el-option label="待审核" value="1"></el-option>
            <el-option label="审核通过" value="2"></el-option>
            <el-option label="审核不通过" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核对象" prop="shenhe_user">
          <el-input v-model="form.shenhe_user" />
        </el-form-item> -->

        <!-- <el-form-item label="课程安排" prop="kz_kcap">
          <file-upload-progress v-model:part="form.kz_kcap" :limit="1" accept=".doc,.docx,.xls,.xlsx">
            <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-progress>
        </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>
:deep() {
  .kcfmt {
    .el-upload--picture-card {
      width: 180px;
      height: 96px;
    }

    .el-upload-list.el-upload--picture-card,
    .el-upload-list__item {
      display: none;
    }
  }
}
</style>
