<template>
  <div class="bg-white rounded-md pb-10 h-screen">
    <h3 class="text-blue-500 w-800px pl-40 py-10">{{ title }}</h3>
    <div style="height: calc(70% - 50px)" class="overflow-auto">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
      >
        <div class="flex">
          <el-form-item label="所属工作室" prop="tm_gzsmc">
            <el-input disabled v-model="ruleForm.tm_gzsmc" />
          </el-form-item>
          <el-form-item label="所属学科" prop="tjzx_name">
            <el-input disabled v-model="ruleForm.tjzx_name" />
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="责任成员" prop="zrcy">
            <el-select v-model="ruleForm.zrcy" multiple>
              <el-option
                v-for="z in memberList"
                :label="z.tmc_cyxm"
                :key="z.tmc_sfzh"
                :value="z.tmc_cyzh"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属年级" prop="tjzn_id">
            <el-select v-model="ruleForm.tjzn_id">
              <el-option
                v-for="z in gradeList"
                :label="z.tjzn_njmc"
                :key="z.tjzn_id"
                :value="z.tjzn_id"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="封面图" prop="tmk_img">
          <file-upload-progress
            class="w-520px"
            v-model:full="ruleForm.tmk_img"
            :limit="1"
            accept=".jpg,.jpeg,.webp,.png"
            :size-limit="500 * 1024"
            :time='nowTime'
          >
            <template #default>
              <div
                class="
                  flex_center
                  w-65px
                  h-65px
                  border border-dashed border-hex-E4E6E8
                  bg-hex-F9F9F9
                  text-hex-9D9AB9
                "
              >
                <i-akar-icons:plus class="text-xl" />
              </div>
            </template>
            <template #tip>
              <div class="mt-2 text-xs">
                只能上传jpg/png文件，且不超过500kb，建议尺寸600x337
              </div>
            </template>
          </file-upload-progress>
        </el-form-item>
        <el-form-item label="课程名" prop="tmk_kcm">
          <el-input v-model="ruleForm.tmk_kcm" />
        </el-form-item>
        <el-form-item label="上传视频" prop="tmk_video_file">
          <file-upload-progress
            v-model:full="ruleForm.tmk_video_file"
            :limit="1"
            class="w-520px"
            accept=".mp4"
            :size-limit="500 * 1024 * 1024"
            :time="nowTime"
          >
            <template #default>
              <el-button type="primary" size="large">点击上传</el-button>
            </template>
            <template #tip>
              <div class="mt-2 text-xs">
                支持格式：mp4（500M以内）
                <span class="text-orange-500">请上传源文件</span>
              </div>
            </template>
          </file-upload-progress>
        </el-form-item>
      </el-form>
    </div>

    <div class="text-center">
      <el-button @click="cancelForm">取消</el-button>
      <el-button
        type="primary"
        :disabled="isButton"
        @click="submitForm(ruleFormRef)"
        >确定</el-button
      >
    </div>
  </div>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
let isEdit = false;
let nowTime = new Date();
console.log(route.query.id, "id");
console.log(route.query.tmk_id, "tmk_id");
let tmk_id = route.query.tmk_id;
if (tmk_id === undefined) {
  isEdit = false;
} else {
  isEdit = true;
}
let title = $ref("");
title = isEdit ? '编辑' : '新增';
let ruleForm = $ref({
  tm_gzsmc: "",
  tjzx_name: "",
  tjzx_id: "",
  zrcy: '',
  tjzn_id: '',
  tjzn_name:'',
  tmk_img: "",
  tmk_kcm: "",
  tmk_video_file: "",
});
let memberList = $ref([]);
let gzsDetail = $ref({});
request({
  url: "/txwx/msgzs/detail",
  data: {
    tm_id: route.query.id,
  },
}).then((res) => {
  if (res.code == "1") {
    gzsDetail = res.data.one_info;
    ruleForm.tm_gzsmc = res.data.one_info.tm_gzsmc;
    ruleForm.tjzx_name = res.data.one_info.tjzx_name;
    ruleForm.tjzx_id = res.data.one_info.tjzx_id;
    let m = res.data.one_info.tm_cy;
    memberList = JSON.parse(m);
  }
});
let gradeList = $ref([]);
request({
  url: "/txwx/jcxxgl_zyflgl_nj/index",
  data: {
    limit: "9999",
    page: "1",
  },
}).then((res) => {
  if (res.code == "1") {
    gradeList = res.data.page_data;
  }
});
if (!isEdit) {
  Object.keys(ruleForm).forEach((key, item) => {
    ruleForm[key] = "";
  });
} else {
  request({
    url: "/txwx/msgzs_ktyj/detail",
    data: {
      tmk_id: tmk_id,
    },
  }).then((res) => {
    if (res.code == "1") {
      Object.keys(ruleForm).forEach((key, item) => {
        ruleForm[key] = res.data.one_info[key];
      });
      let zrcy = res.data.one_info.tmk_zrcy_all;
      let a = JSON.parse(zrcy);
      let zrcy_list = []
      a.forEach(item => {
        zrcy_list.push(item.tmc_cyzh);
      })
      ruleForm.zrcy = zrcy_list
    }
  });
}
const ruleFormRef = $ref();
const rules = $ref({
  tm_gzsmc: [
    {
      required: true,
      message: "请填写工作室名称",
      trigger: "submit",
    },
  ],
  tjzx_name: [{ required: true, message: "请选择学科", trigger: "submit" }],
  zrcy: [{ required: true, message: "请选择责任成员", trigger: "submit" }],
  tjzn_id: [{ required: true, message: "请选择年级", trigger: "submit" }],
  tmk_img: [{ required: true, message: "请上传封面", trigger: "submit" }],
  tmk_kcm: [{ required: true, message: "请填写课程名", trigger: "submit" }],
  tmk_video_file: [
    { required: true, message: "请上传视频", trigger: "submit" },
  ],
});
let isButton = $ref(false);
// 提交
function submitForm(formName) {
  if (!formName) return;
  formName.validate((valid) => {
    if (valid) {
      let a = [];
      memberList.forEach(item=>{
        let b = {};
        ruleForm.zrcy.forEach(key => {
          if (key == item.tmc_cyzh) {
            b = {
              tmc_cyxm: item.tmc_cyxm,
              tmc_cyzh: item.tmc_cyzh,
            }
            a.push(b);
          }
        })
      })
      gradeList.forEach(item => {
        if (item.tjzn_id == ruleForm.tjzn_id) {
          ruleForm.tjzn_name = item.tjzn_njmc
        }
      })
      console.log(ruleForm);
      let data = {
        txwx_msgzs_ktyj: {
          tm_id: route.query.id,
          tm_gzsmc: ruleForm.tm_gzsmc,
          tjzx_id: ruleForm.tjzx_id,
          tjzx_name: ruleForm.tjzx_name,
          tjzn_id: ruleForm.tjzn_id,
          tjzn_name: ruleForm.tjzn_name,
          tmk_img: ruleForm.tmk_img,
          tmk_kcm: ruleForm.tmk_kcm,
          tmk_video_file: ruleForm.tmk_video_file,
          tmk_zrcy_all: JSON.stringify(a)
        },
      };
      console.log(data);
      if (!isEdit) {
        isButton = true;
        request({
          url: "/txwx/msgzs_ktyj/add",
          data,
        }).then((res) => {
          if (res.code == "1") {
            ElMessage({
              type: "success",
              message: res.msg,
            });
            router.back();
            isButton = false;
          }
        });
      } else {
        Object.assign(data, {
          tmk_id: tmk_id,
        });
        isButton = true;
        request({
          url: "/txwx/msgzs_ktyj/edit",
          data,
        }).then((res) => {
          if (res.code == "1") {
            ElMessage({
              type: "success",
              message: res.msg,
            });
            router.back();
            isButton = false;
          }
        });
      }
    } else {
      isButton = false;
    }
  });
}
// 取消
function cancelForm() {
  router.go(-1);
}
</script>
  <style lang="scss" scoped>
.el-input,
.el-select {
  width: 200px;
}
.demo-ruleForm {
  width: 800px;
  margin: 10px auto;
}
</style>