<template>
  <div class="bg-white rounded-md h-screen" v-loading="loading">
    <h3 class="text-hex-00A3FF px-15 py-6">{{ title }}</h3>
    <div style="height: calc(70% - 50px)" class="overflow-auto">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="140px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <div class="flex">
          <el-form-item label="课程名称：" prop="ttk_mc">
            <el-input size="small" v-model="ruleForm.ttk_mc" />
          </el-form-item>
        </div>
        <el-form-item label="课程图片:" prop="ttk_img">
          <file-upload-progress
            v-model:part="ruleForm.ttk_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.ttk_img"
            size="small"
            placeholder="可直在输入框填写图片地址"
            style="width: 520px"
          ></el-input>
        </el-form-item>
        <div class="flex">
          <el-form-item label="课程标签：" prop="ttk_tag">
            <el-input size="small" v-model="ruleForm.ttk_tag" />
          </el-form-item>
          <el-form-item label="课程关键字：" prop="ttk_kcgjz">
            <el-input size="small" v-model="ruleForm.ttk_kcgjz" />
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="责任教师:" prop="ttk_zrjs_user_id">
            <remote-user-select
              class="w-full"
              size="small"
              v-model="ruleForm.ttk_zrjs_user_id"
              v-model:model-real-name="ruleForm.ttk_zrjsmc"
              :d="{ user_role_id: '75' }"
            ></remote-user-select>
          </el-form-item>
          <el-form-item label="教师机构名称:" prop="ttk_zrjg_id">
            <remote-select
              size="small"
              v-model="ruleForm.ttk_zrjg_id"
              v-model:model-name="ruleForm.ttk_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.ttk_brief"
          ></TinymceVue>
        </el-form-item>
        <div class="flex">
          <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="flex">
          <el-form-item label="课程排序:" prop="ttk_sort">
            <el-input
              v-model="ruleForm.ttk_sort"
              size="small"
              type="number"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="text-center">
      <el-button @click="handleFormCancel">取消</el-button>
      <el-button
        type="primary"
        :disabled="isButton"
        @click="handleSubmit(ruleFormRef)"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { tskc_detail, tskc_add, tskc_edit } from "./api";
const route = useRoute();
const ruleFormRef = ref(null);
const router = useRouter();
let id = route.params.id;

let isEdit = id === undefined ? false : true;
let title = $ref("");
title = isEdit === false ? "新增" : "编辑";
let ruleForm = $ref({
  ttk_mc: "",
  ttk_img: "",
  ttk_tag: "",
  ttk_kcgjz: "",
  ttk_zrjsmc: "",
  ttk_zrjs_user_id: "",
  ttk_zrjgmc: "",
  ttk_zrjg_id: "",
  ttk_brief: "",
  tjzn_id: "",
  tjzn_name: "",
  tjzx_id: "",
  tjzx_name: "",
  ttk_sort: "",
});
const loading = ref(false);
let detailData = $ref({});

function initData() {
  const data = {
    ttk_id: route.params.id,
  };
  tskc_detail(data).then((res) => {
    if (res.code == "1") {
      detailData = res.data.one_info;
      ruleForm = {
        ttk_mc: detailData.ttk_mc,
        ttk_img: detailData.ttk_img,
        ttk_tag: detailData.ttk_tag,
        ttk_kcgjz: detailData.ttk_kcgjz,
        ttk_zrjsmc: detailData.ttk_zrjsmc,
        ttk_zrjs_user_id: detailData.ttk_zrjs_user_id,
        ttk_zrjgmc: detailData.ttk_zrjgmc,
        ttk_zrjg_id: detailData.ttk_zrjg_id,
        ttk_brief: detailData.ttk_brief,
        tjzn_id: detailData.tjzn_id,
        tjzn_name: detailData.tjzn_name,
        tjzx_id: detailData.tjzx_id,
        tjzx_name: detailData.tjzx_name,
        ttk_sort: detailData.ttk_sort,
      };
    }
  });
}
initData();
let rules = $ref({
  gzs_name: [{ required: true, message: "请输入名称", trigger: "submit" }],
  resource_id: [{ required: true, message: "请选择资源类型", trigger: "blur" }],
});
const handleSubmit = async (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
      let obj = {};
      Object.keys(ruleForm).find((item) => {
        obj[item] = ruleForm[item];
      });

      const data = {
        txwx_tskc_kc: obj,
        ttk_id: route.params.id,
      };
      if (data.ttk_id == "" || data.ttk_id == undefined) {
        tskc_add(data).then((res) => {
          loading.value = false;
          if (res.code == 1) {
            ElMessage({
              message: "添加成功",
              type: "success",
            });
            router.go(-1);
          } else {
            ElMessage({
              message: res.msg,
              type: "error",
            });
          }
        });
      } else {
        console.log(route.params.id, 999);
        data.ttk_id = route.params.id;
        tskc_edit(data).then((res) => {
          loading.value = false;
          if (res.code == 1) {
            ElMessage({
              message: "编辑成功",
              type: "success",
            });
            router.go(-1);
          } else {
            ElMessage({
              message: res.msg,
              type: "error",
            });
          }
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
function handleFormCancel() {
  router.go(-1);
}
</script>

<style lang="scss" scoped>
.demo-ruleForm {
  width: 860px;
  margin: 10px auto;
}
:deep() .el-form-item__content {
  width: 290px;
}
:deep() .el-select {
  width: 290px;
}
</style>