<template>
  <div class="flexCard">
      <el-card class="richTextPreview" shadow="never">
        <div class="titleText">移动端预览</div>
        <p v-html="previewRichText"></p>
      </el-card>
      <!-- 表单 ref 和 prop绑定  用于重置表单 -->
      <el-card class="form-FormContainer" shadow="never">
      <el-form ref="resetFormData" :model="form"  size="large">
        <el-form-item label="课程展示图片" label-width="auto">
          <ImgSingleUpload @update:goodImgArr="form.goodImg = $event"/>
        </el-form-item>
        <el-form-item label="体验课名称" prop="name" style="width:  250px" >
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="产品价格" prop="price">
          <el-input-number v-model="form.price" min="0" :precision="2" :step="0.5" />
          <p>元</p>
        </el-form-item>
        <el-form-item label="课程简介" prop="intro">
          <el-input v-model="form.intro" type="textarea" style="width: 250px;" />
        </el-form-item>
        <el-form-item label="商品标签" prop="label">
          <el-input v-model="form.label" type="textarea" placeholder="使用英文;分隔符分开" style="width: 250px;" />
        </el-form-item>
        <el-form-item label="课程详情">
          <richTextUtil @richTextContent="getRichTextInfo"></richTextUtil>
        </el-form-item>
        <div class="totalButton">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="resetForm">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
      </el-card>
    <div class="diyConponent">
    <el-card class="form-RichTextContainer" shadow="never">
      <calendarUtil @calendar-info="getDateInfo"></calendarUtil>
    </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, inject, toRaw } from 'vue';
import { ElMessage } from 'element-plus';
import myAxios from "@/api/myAxios";
import calendarUtil from '@/layout/components/calendarUtil.vue';
import richTextUtil from '@/layout/components/richTextUtil.vue';
import ImgSingleUpload from '@/utils/imgUpload/ImgSingleUpload.vue'

const resetFormData = ref()
const form = ref({
  name: '',
  price: '',  //商品价格
  intro: '',//产品简介
  label: '',//商品标签
  goodImg: '',  //商品图片url
  richText: '',
  appointmentDateAddRequestList: []  //预约时间段，是否可预约，人数范围
})
//导入组件刷新
const reload: any = inject("reload")
const previewRichText = ref('')  //预览富文本

onMounted(() => {
  // console.log(myDate.getHours());   //打印当前小时数
})

//提交表单
const onSubmit = async () => {
  console.log('上传前--->',form.value)
  const values = Object.values(form.value);
  // 使用some()方法来检查是否有任何值为空
  console.log(form.value.appointmentDateAddRequestList)
  if (values.some(value => value === null || value === undefined || value === '' || value === 'PHA+PGJyPjwvcD4=')  || form.value.appointmentDateAddRequestList.length == 0 ) {
    ElMessage({
      type: 'warning',
      message: '请检查表单数据是否完整填写'
    })
    return;  //空返回结束函数
  }
  console.log(form.value);
  const res = await myAxios.post('/goods/add/service', {
    name: form.value.name,
    price: form.value.price,
    goodImg: form.value.goodImg,
    intro: form.value.intro,
    richText: form.value.richText,
    label: form.value.label,
    appointmentDateAddRequestList: toRaw(form.value.appointmentDateAddRequestList)
  })
  console.log(res.data);
  if (res.data.code === 1) {
    ElMessage({
      type: 'success',
      message: "提交成功"
    })
    reload() //上传完后重置表单
  } else {
    ElMessage.error("服务错误")
    return;
  }
}

//清除表单
const resetForm = () => {
  resetFormData.value.resetFields()
}

const getRichTextInfo =(info:any)=>{
  // console.log('info-->',info);
  form.value.richText = info
  form.value.richText = encode64(info)
  previewRichText.value = info
}

//字符串转为base64编码
function encode64(text: string): string {
  return btoa(String.fromCharCode(...new TextEncoder().encode(text)))
}

const getDateInfo =(info: any)=> {
  console.log('info-->',info);
  form.value.appointmentDateAddRequestList = info
}
</script>

<style scoped>

.form-FormContainer {
  width: 540px;
  height: 800px;
  overflow: auto;
  min-width: 540px;
  /* margin: 0 auto; */
}

.form-RichTextContainer {
  width: 460px;
  min-width: 460px;
  height: 800px;
  overflow: auto;
}

.diyConponent /deep/ .el-card__body {
  padding: 20px 0 10px 0 !important;
}


.flexCard {
  display: flex;
  height: 100%;
  min-width: 1000px;
}

.richTextPreview {
  height: 80vh;
  overflow-y: auto;
  word-break: break-all;
  width: 400px;
  margin-right: 10px;
  min-width: 400px;
}

.totalButton {
  display: flex;
  justify-content: space-evenly;
  /*  盒子里面水平分隔开 */
}
.titleText {
  text-align: center;
  margin: 0 auto;
}
</style>