<template>
  <div>
    <div class="header">
      <el-page-header @back="goBack">
        <template #content>
          <span class="text-large font-600 mr-3"> 发布帖子 </span>
        </template>
      </el-page-header>
    </div>

    <div class="content">
      <el-form ref="learningInformationFormRef" :model="form" :rules="formRules" label-width="80px">
        <el-form-item label="帖子标题" prop="informationTitle">
          <el-input v-model="form.informationTitle" placeholder="请输入帖子标题" />
        </el-form-item>
        <el-form-item label="帖子内容" prop="informationDetail">
          <editor v-model="form.informationDetail" placeholder="请输入帖子内容" :min-height="192" />
        </el-form-item>
        <el-form-item label="社区频道" prop="informationClassifyId">
          <el-select v-model="form.informationClassifyId" placeholder="请选择社区频道" clearable>
            <el-option v-for="dict in information_classify" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="帖子封面" prop="informationImage">
          <image-upload :limit="1" v-model="form.informationImage" />
        </el-form-item>

        <!-- <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio v-for="dict in is_publish" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <!-- <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="用户id" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入用户id" />
        </el-form-item> -->


        <div class="btn">
          <el-button :loading="buttonLoading" type="primary"
            @click="submitForm">发布</el-button>
          <el-button type="danger" @click="cancel">取消</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import FileOrImage from '@/components/FileOrImage/index.vue';
import { getLearningInformation, updateLearningInformation, addLearningInformation } from '@/api/study/information';
import { globalHeaders } from '@/utils/request';
import { LearningInformationVO, LearningInformationQuery, LearningInformationForm } from '@/api/study/information/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { source_classify, resource_status, source_type } = toRefs<any>(proxy?.useDict('source_classify', 'resource_status', 'source_type'));
const type = computed(() => proxy.$route.query.type);
const _id = computed(() => proxy.$route.query.id);
const buttonLoading = ref(false)
const router = useRouter();
const { is_publish,information_classify } = toRefs<any>(proxy?.useDict('is_publish','information_classify'));
const learningInformationFormRef = ref<ElFormInstance>();
const route = useRoute();
const upload = reactive<UploadOption>({
  headers: globalHeaders(),
  url: import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload'
});
const goBack = () => {
  router.back();
}
const resourceFormRef = ref<ElFormInstance>();
const initForm = {
  informationClassifyId: undefined,
  informationImage: undefined,
  informationTitle: undefined,
  informationDetail: undefined,
  status: undefined,
  remark: undefined,
  userId: undefined
}
const form = ref({ ...initForm });
//提交
const submitForm = async () => {

  console.log(`111`);
  ElMessageBox.confirm('确认提交以上信息吗', {
    title: '系统确认',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(() => {
    learningInformationFormRef.value?.validate(async (valid: boolean) => {
      console.log(`222`);

      if (valid) {
        console.log(`333`);
        buttonLoading.value = true;
        // if (type.value == 'add') {

          form.value.status = '2';

          const res = await addLearningInformation(form.value).finally(() => { buttonLoading.value = false })
          console.log(`resss`,res);

          if (res.code == 200) {
            proxy?.$modal.msgSuccess("提交成功");
            router.back();
          }

        // }
        // const res = await addExpertRecommend(form.value).finally(() => { buttonLoading.value = false });
        // if (res.code == 200) {
        //   proxy?.$modal.msgSuccess("提交成功");
        //   router.back();
        // }
        reset();

      }

    });
  }).catch(() => {

  })

}

/** 表单重置 */
const reset = () => {
  form.value = { ...initForm };
  learningInformationFormRef.value?.resetFields();
}
//取消
const cancel = () => {
  router.back();
  reset();
}

const getData = async () => {
  if (_id.value.toString() == '' || null) {
    return
  }
  const res = await getLearningInformation(_id.value.toString());
  console.log(`rresssss`, res);
  Object.assign(form.value, res.data);

}
/** 附件上传成功处理 */
const handleUpload = (response: any, file: UploadFile, uploadFiles: UploadFiles) => {

  // form.value.paperAccessory = response.data.url;

  ElMessageBox.alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '上传论文结果', {
    dangerouslyUseHTMLString: true
  });
};
onActivated(() => {
  reset();
  // if (type.value == 'add') {
  //   reset();
  //   return
  // }
  // getData();

})
onMounted(() => {
  // if (type.value == 'add') {
  //   reset();
  //   return
  // }
  // getData();
})

const formRules = ref({
  informationTitle: [{ required: true, message: '帖子标题不能为空', trigger: 'blur' }],
  informationDetail: [{ required: true, message: '帖子内容不能为空', trigger: 'blur' }],
  informationClassifyId: [{ required: true, message: '社区频道不能为空', trigger: 'blur' }],
  informationImage: [{ required: true, message: '帖子封面不能为空', trigger: 'blur' }],
})

</script>

<style lang="scss" scoped>
.header {
  margin: 1vh 0 0 2vw;

}

.el-form {
  margin-top: 2vh;
  margin-left: 2vw;
  width: 40%;
}

.btn {
  margin-top: 1vh;
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;

  .el-button {
    width: 30%;
  }
}
</style>
