<template>
  <div class="ssysAudit" v-loading="loading">
    <div class="formContent">
      <el-form disabled :model="formline" ref="formline1" label-width="150px" :rules="rules" size="large" class="demo-ruleForm">
        <el-form-item label="课程封面图" prop="ks_name">
          <img :src="getFullUrl(formline.ks_img)" alt="" style="width: 145px;height: 77px;" />
        </el-form-item>
        <el-form-item label="课程名称" prop="ks_name">
          <el-input readonly v-model="formline.ks_name" />
        </el-form-item>
        <el-form-item label="课程简介" prop="ks_brief">
          <el-input readonly v-model="formline.ks_brief" type="textarea" rows="5" />
        </el-form-item>
        <el-form-item label="作者" prop="ks_zjjsxm">
          <el-input readonly v-model="formline.ks_zjjsxm" />
        </el-form-item>
        <div class="flex">
          <el-form-item class="flex_1" label="开始时间" prop="ks_start_datetime">
            <el-date-picker readonly v-model="formline.ks_start_datetime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
          <el-form-item class="flex_1" label="结束时间" prop="ks_end_datetime">
            <el-date-picker readonly v-model="formline.ks_end_datetime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item class="flex_1" label="年级" prop="grade_name">
            <el-input readonly v-model="formline.grade_name" />
          </el-form-item>
          <el-form-item class="flex_1" label="学科" prop="subject_name">
            <el-input readonly v-model="formline.subject_name" />
          </el-form-item>
        </div>
        <el-form-item label="附件" prop="ks_kj">
          <a :href="formline.ks_kj" target="_blank" rel="noopener noreferrer" style="color: #00A3FF;display: flex;">
            <el-icon size="36px" color="#00A3FF">
              <Folder />
            </el-icon>
            查看
          </a>
        </el-form-item>
        <el-form-item label="关联的作业" prop="yys_id_value">
          <el-input readonly v-model="formline.yys_id_value" />
        </el-form-item>
        <el-form-item label="结对老师/组" prop="jsname">
          <el-input readonly v-model="formline.jsname" />
        </el-form-item>
        <el-form-item label="结对班级" prop="jdbjname">
          <el-input readonly v-model="formline.jdbjname" />
        </el-form-item>
        <el-form-item label="是否手机端推荐课程">
          <el-radio-group disabled v-model="formline.ks_sfsjdtjkc">
            <el-radio label="1" size="large">是</el-radio>
            <el-radio label="2" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否需要审核">
          <el-radio-group disabled v-model="formline.ks_sfxysh">
            <el-radio label="1" size="large">是</el-radio>
            <el-radio label="2" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否精品">
          <el-radio-group disabled v-model="formline.ks_sfjp">
            <el-radio label="1" size="large">是</el-radio>
            <el-radio label="2" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="btnDiv flex justify-center items-center text-sm mt-10">
        <el-button size="default" type="primary" plain @click="emit('update', 2)">取消</el-button>
        <el-button size="default" type="primary" @click="handleAudit('1')">通过</el-button>
        <el-button size="default" type="primary" @click="handleAudit('3')" plain>不通过</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { ssyskcDetail, ssyskcEdit } from "./api"
import { Folder } from "@element-plus/icons-vue";
import { getFullUrl } from "~/utils/helper";

const loading = ref(false);

const rules = ref({
  ks_name: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
  ks_kss: [{ required: true, message: '请输入课时数', trigger: 'blur' }],
  ks_brief: [{ required: true, message: '请输入简介', trigger: 'blur' }],
  ks_zjjsxm: [{ required: true }],
  ks_start_datetime: [{ required: true, message: '请选择时间', trigger: 'change', type: 'date' }],
  ks_end_datetime: [{ required: true, message: '请选择结束时间', trigger: 'change', type: 'date' }],
  grade_name: [{ required: true }],
  subject_name: [{ required: true }],
  yys_id_value: [{ required: true }],
  jsname: [{ required: true }],
  jdbjname: [{ required: true }]
})

const emit = defineEmits(["update"]);
const props = defineProps({
  current: {
    type: String,
    default: "",
  },
  workData: {
    type: Array,
    default: [],
  },
  classData: {
    type: Array,
    default: [],
  }
});

watch(
  () => props.current,
  (newVal, oldVal) => {
    if (newVal != "") {
      initDetailInfo(newVal);
    }
  },
  { immediate: true }
);

const formline = ref({});
const linkWork = ref([]);
const activeClass = ref([]);
async function initDetailInfo(ks_id) {
  let data = await ssyskcDetail({ ks_id });
  formline.value = data.one_info;

  formline.value.yys_id_value = "";
  if (formline.value.yys_id != "") {
    let arr = formline.value.yys_id.split(",");
    let yysData = [];
    props.workData.map((item) => {
      arr.map((value) => {
        if (item.yys_id == value) {
          yysData.push(item.yys_name);
        }
      })
    })
    formline.value.yys_id_value = yysData.join("，");
  }

  if (formline.value.ks_jdjs_json != "") {
    let jsData = JSON.parse(formline.value.ks_jdjs_json);
    let jsValue = [];
    jsData.map((item) => {
      jsValue.push(item.user_realname);
    })
    formline.value.jsname = jsValue.join("，");
  } else {
    formline.value.jsname = "";
  }

  if (formline.value.ks_jdbj_json != "") {
    let jdbjData = JSON.parse(formline.value.ks_jdbj_json);
    let jdbjValue = [];
    jdbjData.map((item) => {
      jdbjValue.push(item.class_name);
    })
    formline.value.jdbjname = jdbjValue.join("，");
  } else {
    formline.value.jdbjname = "";
  }
}

const handleAudit = async (type) => {
  formline.value.ks_shzt = type;
  let form = {
    ks_img: "",
    ks_kj: "",
    ks_name: "1",
    ks_kss: "1",
    ks_brief: "1",
    ks_start_datetime: "",
    ks_end_datetime: "",
    grade_id: "",
    grade_name: "",
    subject_id: "",
    subject_name: "",
    yys_id: "",
    ks_jdjs_json: "",
    ks_jdbj_json: "",
    ks_sfsjdtjkc: "",
    ks_sfjp: "",
    ks_sfxysh: "",
    ks_shzt: "",
  }
  for (let key in form) {
    form[key] = formline.value[key];
  }
  let obj = {
    ks_id: props.current,
    kzkt_ssyskc: form
  }
  let data = await ssyskcEdit(obj);
  if (data) {
    ElMessage.success("审核成功！");
    emit("update", 1)
  }
}
</script>

<style lang="scss" scoped>
.ssysAudit::v-deep {
  .flex {
    display: flex;
    .flex_1 {
      flex: 1;
    }
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__wrapper {
    width: 100%;
    .el-input__wrapper {
      width: 100%;
    }
  }
}
</style>