<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="ttz_mc">
            <el-input v-model="ruleForm.ttz_mc" />
          </el-form-item>
        </div>
        <el-form-item label="章节图片：">
          <file-upload-progress
            v-model:part="ruleForm.ttz_img"
            :limit="1"
            accept=".jpg,.jpeg,.webp,.png"
            :size-limit="500 * 1024"
          >
            <el-button type="primary"> 点击上传 </el-button>
            <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="ttz_img" class="w-612px">
          <el-input
            placeholder="可直在输入框填写图片地址"
            size="small"
            v-model="ruleForm.ttz_img"
          />
        </el-form-item>
        <el-form-item label="章节视频：">
          <file-upload-progress
            v-model:part="ruleForm.ttz_video_file"
            :limit="10"
            accept=".mp4"
            :size-limit="1500 * 1024"
          >
            <el-button type="primary"> 点击上传 </el-button>
            <template #tip>
              <div class="mt-2 text-xs">支持格式：mp4(1.5G以内)</div>
            </template>
          </file-upload-progress>
        </el-form-item>
        <el-form-item label="" prop="ttz_video_file" class="w-612px">
          <el-input
            size="small"
            placeholder="可直在输入框填写视频地址"
            v-model="ruleForm.ttz_video_file"
          />
        </el-form-item>
      </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 { tskc_zj_add, tskc_zj_edit, tskc_zj_detail } from "./api";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
let ttz_id = route.params.zjId;
let parentId = route.params.id;
console.log(ttz_id, parentId, 111111111);
const ruleFormRef = ref(null);
let isEdit = ttz_id === undefined ? false : true;
console.log(isEdit, 3333);
let title = $ref("");
title = isEdit === false ? "新增" : "编辑";
let ruleForm = $ref({
  ttk_id: "",
  ttz_mc: "",
  ttz_img: "",
  ttz_video_file: "",
});
const loading = ref(false);
let detailData = $ref({});

function initData() {
  const data = {
    ttz_id: route.params.zjId,
  };
  tskc_zj_detail(data).then((res) => {
    if (res.code == "1") {
      detailData = res.data.one_info;
      ruleForm = {
        ttk_id: parentId,
        ttz_mc: detailData.ttz_mc,
        ttz_img: detailData.ttz_img,
        ttz_video_file: detailData.ttz_video_file,
      };
    }
  });
}
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_zj: obj,
        ttz_id: route.params.zjId,
      };
      console.log(data, 11111);
      if (data.ttz_id == "" || data.ttz_id == undefined) {
        tskc_zj_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 {
        data.ttz_id = route.params.zjId;
        tskc_zj_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>