<template>
  <div class="box-border bg-white m-4 py-4 rounded-6px overflow-auto" style="height: calc(100% - 48px - 10px - 1rem);">
    <el-scrollbar class="px-4" view-class="h-full">
      <div class="title ml-4 mb-4">课程章节新增/编辑</div>
      <div class="jtjyEditContent">
        <el-form ref="ruleFormRef" :rules="rules" label-position="right" label-width="150px" :model="ruleForm">
          <div class="grid grid-cols-2 gap-x-10">
            <el-form-item label="章节名称:" prop="tjz_mc">
              <el-input v-model="ruleForm.tjz_mc" size="small" placeholder=""></el-input>
            </el-form-item>
          </div>
          <el-form-item label="章节图片:" prop="tjz_img">
            <file-upload-progress v-model:part="ruleForm.tjz_img" :limit="1" class="w-520px" accept=".jpg,.jpeg,.png" :size-limit="500 * 1024">
              <template #default>
                <el-button type="primary" size="large">点击上传</el-button>
              </template>
              <template #tip>
                <div class="mt-2 text-xs">
                  只能上传jpg/png/jpeg文件，且不超过500kb，建议尺寸600x337
                </div>
              </template>
            </file-upload-progress>
            <el-input v-model="ruleForm.tjz_img" size="small" placeholder="可直在输入框填写图片地址" style="width: 520px;"></el-input>
          </el-form-item>
          <el-form-item label="章节视频:" prop="tjz_video_file">
            <file-upload-progress v-model:part="ruleForm.tjz_video_file" :limit="1" class="w-520px" accept=".ppt,.pptx,.pdf,.mp4" :size-limit="500 * 1024 * 1024">
              <template #default>
                <el-button type="primary" size="large">点击上传</el-button>
              </template>
              <template #tip>
                <div class="mt-2 text-xs">
                  支持格式：ppt,pptx,pdf,mp4（500M以内）
                </div>
              </template>
            </file-upload-progress>
            <el-input v-model="ruleForm.tjz_video_file" size="small" placeholder="可直在输入框填写图片地址" style="width: 520px;"></el-input>
          </el-form-item>
        </el-form>
        <div class="mt-5 pb-8 text-center w-670px">
          <el-button type="primary" plain @click="handleCancel">取消</el-button>
          <el-button style="margin-left: 50px;" type="primary" @click="handleSubmit(ruleFormRef)">确定</el-button>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { Close, CircleClose, ArrowDownBold, Back, Right } from '@element-plus/icons-vue'
const router = useRouter();
const kcId = router.currentRoute.value.params.kcId;
const parentId = router.currentRoute.value.params.id;
if (parentId) {
  initDetailInfo();
}
const ruleForm = ref({
  tjk_id: kcId,
  tjz_mc: "",
  tjz_img: "",
  tjz_video_file: "",
});
const ruleFormRef = ref(null);
const rules = reactive({
  // zrjs: [{ required: true, message: "请输入责任教师姓名和编号", trigger: "blur" }],
  // xzjs: [{ required: true, message: "请选择协作教师", trigger: "change" }],
  // kcfmt: [{ required: true, message: "请选择课程封面图", trigger: "submit" }],
  // kcm: [{ required: true, message: "请输入课程名", trigger: "blur" }],
  // kcgjz: [{ required: true, message: "请输入课程关键字", trigger: "blur" }],
  // nj: [{ required: true, message: "请选择年级", trigger: "change" }],
  // xk: [{ required: true, message: "请选择学科", trigger: "change" }],
  // ssjg: [{ required: true, message: "请选择所属机构", trigger: "change" }],
  // kckfsj: [{ required: true, message: "请选择课程开放时间", trigger: "change", type: 'datetimerange' }],
  // kcqxsz: [{ required: true, message: "请选择课程权限设置", trigger: "change" }],
  // sftjmszx: [{ required: true, message: "请选择是否推荐名师在线", trigger: "change" }],
  // tjmszxsj: [{ required: true, message: "请选择推荐名师在线时间", trigger: "change", type: 'datetimerange' }],
})

async function initDetailInfo() {
  let res = await request({ url: "/txwx/jtjy_zj/detail", data: { tjz_id: parentId } });
  if (res.code == 1) {
    for (let key in ruleForm.value) {
      ruleForm.value[key] = res.data.one_info[key];
    }
  }
}


const handleCancel = () => {
  router.back();
}

const handleSubmit = async (formEl) => {
  if (!formEl) return;

  formEl.validate(async (valid, fields) => {
    if (valid) {
      let data = {
        txwx_jtjy_zj: ruleForm.value
      }
      let res = {};
      if (!parentId) {
        res = await request({ url: "/txwx/jtjy_zj/add", data });
      } else {
        data.tjz_id = parentId;
        res = await request({ url: "/txwx/jtjy_zj/edit", data });
      }
      if (res.code == 1) {
        ElMessage.success("保存成功！");
        handleCancel();
      }
    } else {
      console.log("error submit!", fields);
    }
  });
}
</script>

<style lang="scss" scoped>
@use "~/styles/scroll.scss";
.title {
  font-size: 16px;
  font-weight: 400;
  color: var(--el-color-primary);
  line-height: 22px;
}
.jtjyEditContent {
  width: 900px;
  margin: auto;
  .el-button--primary.is-plain {
    background: unset;
    &:hover {
      color: var(--el-color-primary);
    }
  }
}
</style>