<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="tjk_mc">
              <el-input v-model="ruleForm.tjk_mc" size="small" placeholder=""></el-input>
            </el-form-item>
          </div>
          <el-form-item label="课程图片:" prop="tjk_img">
            <file-upload-progress v-model:part="ruleForm.tjk_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.tjk_img" size="small" placeholder="可直在输入框填写图片地址" style="width: 520px;"></el-input>
          </el-form-item>
          <div class="grid grid-cols-2 gap-x-10">
            <el-form-item label="课程标签:" prop="tjk_tag">
              <el-input v-model="ruleForm.tjk_tag" size="small"></el-input>
            </el-form-item>
            <el-form-item label="课程关键字:" prop="tjk_kcgjz">
              <el-input v-model="ruleForm.tjk_kcgjz" size="small" placeholder="&符号分隔，示例：数学&趣味&2019"></el-input>
            </el-form-item>
          </div>
          <div class="grid grid-cols-2 gap-x-10">
            <el-form-item label="责任教师:" prop="tjk_zrjs_user_id">
              <remote-user-select class="w-full" size="small" v-model="ruleForm.tjk_zrjs_user_id" v-model:model-real-name="ruleForm.tjk_zrjsmc" :d="{user_role_id:'75'}"></remote-user-select>
            </el-form-item>
            <el-form-item label="教师机构名称:" prop="tjk_zrjg_id">
              <remote-select size="small" v-model="ruleForm.tjk_zrjg_id" v-model:model-name="ruleForm.tjk_zrjgmc" url="/school/main/index" :fields="['id', 'sm_name']"></remote-select>
            </el-form-item>
          </div>
          <el-form-item label="课程简介:">
            <TinymceVue :other_options="{ menubar: '' }" v-model="ruleForm.tjk_brief"></TinymceVue>
          </el-form-item>
          <div class="grid grid-cols-2 gap-x-10">
            <el-form-item label="年级:" prop="tjzn_id">
              <remote-select size="small" v-model="ruleForm.tjzn_id" v-model:model-name="ruleForm.tjzn_name" to="jcxxgl_zyflgl_nj" :fields="['tjzn_id', 'tjzn_njmc']"></remote-select>
            </el-form-item>
            <el-form-item label="学科分类:" prop="tjzx_id">
              <remote-select size="small" v-model="ruleForm.tjzx_id" v-model:model-name="ruleForm.tjzx_name" to="jcxxgl_zyflgl_xk" :fields="['tjzx_id', 'tjzx_xkmc']"></remote-select>
            </el-form-item>
          </div>
          <div class="grid grid-cols-2 gap-x-10">
            <el-form-item label="课程排序:" prop="tjk_sort">
              <el-input v-model="ruleForm.tjk_sort" size="small" type="number"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div class="mt-5 pb-8 text-center">
          <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 parentId = router.currentRoute.value.params.id;
if (parentId) {
  initDetailInfo();
}
const ruleForm = ref({
  tjk_mc: "",
  tjk_img: "",
  tjk_tag: "",
  tjk_kcgjz: "",
  tjk_zrjs_user_id: "",
  tjk_zrjsmc: "",
  tjk_zrjg_id: "",
  tjk_zrjgmc: "",
  tjk_brief: "",
  tjzn_id: "",
  tjzn_name: "",
  tjzx_id: "",
  tjzx_name: "",
  tjk_sort: ""
});
const ruleFormRef = ref(null);
const rules = reactive({
  // tjk_zrjs_user_id: [{ required: true, message: "请输入责任教师姓名和编号", trigger: "blur" }],
  // xzjs: [{ required: true, message: "请选择协作教师", trigger: "change" }],
  // kcfmt: [{ required: true, message: "请选择课程封面图", trigger: "submit" }],
  // kcm: [{ required: true, message: "请输入课程名", trigger: "blur" }],
  // tjk_kcgjz: [{ required: true, message: "请输入课程关键字", trigger: "blur" }],
  // tjzn_id: [{ 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_kc/detail", data: { tjk_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_kc: ruleForm.value
      }
      let res = {};
      if (!parentId) {
        res = await request({ url: "/txwx/jtjy_kc/add", data });
      } else {
        data.tjk_id = parentId;
        res = await request({ url: "/txwx/jtjy_kc/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;
  :deep() {
    .el-select {
      width: 100%;
    }
  }

  .el-button--primary.is-plain {
    background: unset;
    &:hover {
      color: var(--el-color-primary);
    }
  }
}
</style>