<template>
  <el-dialog v-model="dialogVisible" center width="1000px" :destroy-on-close="true" :title="title" @close="close"
    :close-on-click-modal="false">
    <div class="cntBox">
      <FormMessage :formList="formData" v-model="listQuery" ref="elform" :rules="rules" />
    </div>
    <template #footer>
      <el-button type="primary" :loading="loding" @click="downloadWithStyles">发布</el-button>
      <el-button type="primary" @click="close">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import "@wangeditor/editor/dist/css/style.css";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { tbGsxtXxltSave, tbGsxtXxltUpdate } from "@/api/tbGsxtXxltHf.js";
import { ref, shallowRef, onBeforeUnmount, defineEmits, defineProps, watch, reactive, computed } from "vue";
import { getItem } from "@/utils/storage";
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: "报告模板"
  },
  heightNumber: {
    type: Number,
    default: 448
  },
  ItemData: {
    type: Object,
    default: () => ({})
  }
});

const emits = defineEmits(["update:modelValue", "changeFn", "SaveReport"]);

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emits('update:modelValue', value)
});

watch(() => props.modelValue, (newVal) => {
  if (newVal && props.ItemData.id) {
    listQuery.value = { ...props.ItemData}
  } else if (newVal) {
    listQuery.value = { }
  }
}, { deep: true })
const listQuery = ref({tp:[]})
const elform = ref()
const formData = ref([
  { label: "帖子标题", prop: "title", type: "input", width: '100%' },
  { label: "帖子内容", prop: "content", type: "textarea", width: '100%' },
  {
    label: "是否公开", prop: "fbfw", type: "select", width: '100%', options: [
      { label: '公开', value: '02' },
      { label: '不公开', value: '01' }
    ]
  },
  { label: "图片", prop: "tp", type: "upload", width: '100%', limit: 10 },
])

const rules = reactive({
  title: [
    { required: true, message: "请输入帖子标题", trigger: "blur" }
  ],
  content: [
    { required: true, message: "请输入帖子内容", trigger: "blur" }
  ],
  fbfw: [
    { required: true, message: "请选择是否公开", trigger: "blur" }
  ],
})
const loding=ref(false)
const downloadWithStyles = () => {
  const ltmasg= getItem('ltmasg')
  elform.value.submit((valid) => {
    loding.value=true
    if (valid) {
      const formData = {
        fbrtx: ltmasg.tx,
        fbrxm: ltmasg.xm,
        fbrxm:  ltmasg.sfzh,
        ...listQuery.value,
        tp: listQuery.value.tp ? listQuery.value.tp.join(',') : ''
      }
      if (props.ItemData.id) {
        tbGsxtXxltUpdate(formData).then((res) => {
          emits("SaveReport");
          close();
        }).finally(()=>{
          loding.value=false
        })
      } else {
        tbGsxtXxltSave(formData).then((res) => {
          emits("SaveReport");
          close();
        }).finally(()=>{
          loding.value=false
        });
      }
    }
  });
}
const close = () => {
  // 重置表单数据
  listQuery.value.tp = null
  listQuery.value = {}
  dialogVisible.value = false;
};
</script>

<style lang="scss" scoped>
.cntBox {
  height: 60vh;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: auto;
  border: 1px dashed #e9e9e9;
}

::v-deep .el-form-item__label {
  width: 80px !important;
}
</style>
