<template>
  <div class="bg-white rounded-md h-screen">
    <h3 class="text-blue-500 p-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" status-icon size="small">
        <el-form-item label="活动化封面图片">
          <file-upload-progress v-model:full="ruleForm.tmjh_img" :limit="1" accept=".jpg,.jpeg,.webp,.png"
            :size-limit="500 * 1024">
            <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="活动化封面图片地址">
          <el-input v-model="ruleForm.tmjh_img" />
        </el-form-item>
        <div class="flex w-680px">
          <el-form-item label="活动名称" prop="tmjh_name">
            <el-input v-model="ruleForm.tmjh_name" />
          </el-form-item>
          <el-form-item label="创建者" prop="tmjh_cjr_user_id">
            <remote-user-select class="w-200px h-40px py-5px" size="small" v-model="ruleForm.tmjh_cjr_user_id"
              v-model:model-real-name="ruleForm.tmjh_cjr" :d="{ user_role_id: '75' }"></remote-user-select>
            <!-- <el-input v-model="ruleForm.tmjh_cjr" /> -->
          </el-form-item>
        </div>
        <el-form-item label="活动起始时间" prop="time" class="w-680px">
          <el-date-picker v-model="ruleForm.time" type="datetimerange" range-separator="To" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD hh:mm:ss" />
        </el-form-item>
        <el-form-item label="参与者">
          <el-input v-model="ruleForm.tmjh_cyz" />
          <span class="text-xs text-gray-500">(人名英文空格间隔)</span>
        </el-form-item>
        <el-form-item label="活动描述">
          <TinymceVue :id="'hdms'" class="w-540px h-200px overflow-auto" v-model="ruleForm.tmjh_hdms"></TinymceVue>
        </el-form-item>
        <el-form-item label="活动安排">
          <TinymceVue :id="'hdap'" class="w-540px h-200px overflow-auto" v-model="ruleForm.tmjh_hdap"></TinymceVue>
        </el-form-item>
        <el-form-item label="引领者简介" class="w-680px">
          <file-upload-progress v-model:full="ruleForm.tmjh_ylzjj">
            <template #tip>
              <div class="text-xs text-gray-400">
                只能上传ppt/pdf/jpg/png/jpeg等文件，且不超过500kb
                <span class="text-orange-500">请上传源文件</span>
              </div>
            </template>
          </file-upload-progress>
        </el-form-item>
        <el-form-item label="教案课件" class="w-680px">
          <file-upload-progress v-model:full="ruleForm.tmjh_jakj">
            <template #tip>
              <div class="text-xs text-gray-400">
                只能上传ppt/pdf/jpg/png/jpeg等文件，且不超过500kb
                <span class="text-orange-500">请上传源文件</span>
              </div>
            </template>
          </file-upload-progress>
        </el-form-item>
        <el-form-item label="活动报道" class="w-680px">
          <file-upload-progress v-model:full="ruleForm.tmjh_hdbd">
            <template #tip>
              <div class="text-xs text-gray-400">
                只能上传ppt/pdf/jpg/png/jpeg等文件，且不超过500kb
                <span class="text-orange-500">请上传源文件</span>
              </div>
            </template>
          </file-upload-progress>
        </el-form-item>
        <el-form-item label="活动流程其他说明">
          <TinymceVue :id="'hdlc'" class="w-540px h-200px overflow-auto" v-model="ruleForm.tmjh_hdlcqtsm"></TinymceVue>
        </el-form-item>
        <el-form-item label="所属名师工作室" prop="tm_id">
          <el-select v-model="ruleForm.tm_id">
            <el-option v-for="g in gzsList" :key="g.tm_id" :label="g.tm_gzsmc" :value="g.tm_id"></el-option>
          </el-select>
        </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";
import { omit } from "lodash";
import _ from "lodash";
const route = useRoute();
const router = useRouter();
let id = route.params.id;
console.log(route);
let isEdit = id === undefined ? false : true;
let title = $ref("");
title = isEdit === false ? "新增" : "编辑";
console.log(title);

let gzsList = $ref([]);
request({
  url: "/txwx/msgzs/index",
  data: {
    limit: "9999",
    page: "1",
  },
}).then((res) => {
  if (res.code == "1") {
    gzsList = res.data.page_data;
  }
});

let ruleForm = $ref({
  tm_id: "",
  tmjh_cjr: "",
  tmjh_img: "",
  tmjh_name: "",
  time: "",
  tmjh_cyz: "",
  tmjh_hdms: "",
  tmjh_hdap: "",
  tmjh_ylzjj: "",
  tmjh_jakj: "",
  tmjh_hdbd: "",
  tmjh_hdlcqtsm: "",
  tmjh_cjr_user_id:'',
});
const ruleFormRef = $ref();
const rules = $ref({
  tm_id: [{ required: true, message: "请选择所属工作室", trigger: "submit" }],
  tmjh_name: [{ required: true, message: "请填写活动名称", trigger: "submit" }],
  tmjh_cjr_user_id: [{ required: true, message: "请填写创建者", trigger: "submit" }],
  time: [{ required: true, message: "请选择时间", trigger: "submit" }],
});
let isButton = $ref(false);

if (!isEdit) {
  Object.keys(ruleForm).forEach((key, item) => {
    ruleForm[key] = "";
  });
} else {
  let data = {
    tmjh_id: id,
  }
  request({
    url: '/txwx/msgzs_jyhd/detail',
    data,
  }).then(res => {
    if (res.code == '1') {
      Object.keys(ruleForm).forEach((key, item) => {
        ruleForm[key] = res.data.one_info[key];
      });
      ruleForm.time = [res.data.one_info.tmjh_start_datetime, res.data.one_info.tmjh_end_datetime]
      console.log(ruleForm,'111');
    }
  })
}

// 提交
function submitForm(formName) {
  if (!formName) return;
  formName.validate((valid) => {
    if (valid) {
      let tm_gzsmc;
      gzsList.forEach((item) => {
        if (item.tm_id === ruleForm.tm_id) {
          tm_gzsmc = item.tm_gzsmc;
        }
      });
      let data = {
        txwx_msgzs_jyhd: {
          ..._.omit(ruleForm, ["time"]),
          tm_gzsmc,
          tmjh_start_datetime: ruleForm.time[0],
          tmjh_end_datetime: ruleForm.time[1],
        },
      };
      console.log(data);
      if (!isEdit) {
        isButton = true;
        request({
          url: "/txwx/msgzs_jyhd/add",
          data,
        }).then((res) => {
          if (res.code == "1") {
            ElMessage({
              type: "success",
              message: res.msg,
            });
            router.back();
            isButton = false;
          }
        });
      } else {
        Object.assign(data, {
          tmjh_id: id,
        });
        isButton = true;
        request({
          url: "/txwx/msgzs_jyhd/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: 700px;
  margin: 10px auto;
}
</style>