<template>
  <el-dialog v-model="dialogVisible" title="通知公告反馈" width="1200px">
    <div v-if="TCType === 'see'" class="feecback-tc-container1">
      <template v-if="['01', '02', '1', '2'].includes(formData.feedBackType)">
        <div style="width: 100%;" v-for="(item, index) in formData.dataDetails" :key="index">
          <div class="feecback-content">
            <div class="box">
              <div class="time">{{ formData?.time || '-' }}</div>
            </div>
            <div class="box1" v-if="['02', '2'].includes(formData.feedBackType)">
              <div class="fieldlabel">{{ item?.fieldKey || '-' }}</div>
              <div class="fieldValue">{{ item?.fieldValue || '-' }}</div>
            </div>
            <div class="box1" v-if="['01', '1'].includes(formData.feedBackType)">
              <div class="fieldlabel">{{ item?.fieldKey || '-' }}</div>
              <div class="fieldValue">{{ item?.fieldValue || '-' }}</div>
            </div>
          </div>
        </div>
      </template>
      <el-form class="feecback-tc-form" :model="formData" label-width="160px" label-suffix=":"
        :disabled="TCType == 'see'">
        <template v-if="['03', '3'].includes(formData.feedBackType)">
          <el-form-item v-if="['03', '3'].includes(formData.feedBackType)" label="反馈附件"
            style="width: 600px;display: flex;align-items: center;" prop="feedbackFiles">
            <div style="display: flex;align-items: center;">
              <MOSTY.Uploadhj v-if="TCType === 'see'" :showbut="false" class="uploadlist" :widthNumber="width"
                :disabled="type == 'view'" :limit="5" :nopicer="true" :isImg="false" :ShowfileList="true"
                placeholder="请上传word或pdf文件" v-model="formData.feedbackFiles" :showinput='true'
                :gsgfList="['pdf', 'ofd', 'doc', 'docx']">
              </MOSTY.Uploadhj>
            </div>
          </el-form-item>
        </template>
      </el-form>
    </div>
    <div v-else class="feecback-tc-container">
      <div v-if="TCType != 'see'">
        <div class="feedback-title">
          <span>{{ tzggLxObj[detailObj.type] }}标题：</span>
          {{ detailObj.title }}
        </div>
        <div class="contents">
          <div>内容：</div>
          <div v-html="detailObj.content" class="custom-style"></div>
        </div>
        <div class="contents">
          <div>附件：</div>
          <div class="custom-style">
            <MOSTY.Upload isAutoWidth :disabled="true" :limit="5" :nopicer="true" :isImg="false" :ShowfileList="true"
              :placeholder="'请上传pdf,ofd, doc, docx,wps'" :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'wps']"
              v-model="detailObj.file" :showinput='true'>
            </MOSTY.Upload>
          </div>
        </div>
      </div>
      <el-form class="feecback-tc-form" ref="formRef" :model="formData" label-width="160px" label-suffix=":"
        :disabled="TCType == 'see'" :rules="rules">
        <template v-if="['01', '02', '1', '2'].includes(formData.feedBackType)">
          <div style="width: 100%;" v-for="(item, index) in formData.dataDetails" :key="index">
            <!-- <div v-if="TCType === 'see'" class="feecback-content">
              <div class="box">
                <div class="time">{{ formData?.time || '-' }}</div>
              </div>
              <div class="box1" v-if="['02', '2'].includes(formData.feedBackType)">
                <div class="fieldlabel">{{ item?.fieldKey || '-' }}</div>
                <div class="fieldValue">{{ item?.fieldValue || '-' }}</div>
              </div>
              <div class="box1" v-if="['01', '1'].includes(formData.feedBackType)">
                <div class="fieldlabel">{{ item?.fieldKey || '-' }}</div>
                <div class="fieldValue">{{ item?.fieldValue || '-' }}</div>
              </div>
            </div> -->
            <el-form-item v-if="TCType != 'see'" :prop="'dataDetails.' + index + '.fieldKey'" :label="item.fieldKey"
              class="vertical-item" :rules="dataDetailsRule">
              <div style="display: flex; align-items: center; width: 100%">
                <el-input style="width:1100px;margin-left: 1em;" v-model="item.fieldValue"
                  v-if="['02', '2'].includes(formData.feedBackType)" />
                <el-input-number style="width:1100px;margin-left: 1em;" v-model="item.fieldValue"
                  v-if="['01', '1'].includes(formData.feedBackType)" />
              </div>
            </el-form-item>
          </div>
        </template>
        <template v-if="['03', '3'].includes(formData.feedBackType)">
          <el-form-item v-if="['03', '3'].includes(formData.feedBackType)" label="反馈附件"
            style="width: 600px;display: flex;align-items: center;" prop="feedbackFiles">
            <div style="display: flex;align-items: center;">
              <MOSTY.Upload sAutoWidth stringify :disabled="false" :limit="500" :nopicer="true" :isImg="false"
                :placeholder="'请上传pdf,ofd, doc, docx,wps'" :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'wps']"
                :ShowfileList="true" v-model="formData.feedbackFiles" :showinput="true">
              </MOSTY.Upload>
            </div>
          </el-form-item>
        </template>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button v-if="TCType != 'see' && detailObj.isFeedback" type="primary" @click="handleSave" :loading="saveLoading">保存</el-button>
        <el-button @click="close">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index"
import { ElMessage } from 'element-plus'
const dialogVisible = ref(false)
const formData = ref({
  noticeId: '',
  /** 反馈内容 fieldKey，fieldValue */
  dataDetails: [],
  /** 附件 */
  feedbackFiles: '',
})
const rules = {
  feedbackFiles: [{
    required: true,
    message: "请上传附件",
    trigger: "blur"
  }],


}
const formRef = ref(null)
const detailObj = ref({})
const TCType = ref('')
const saveLoading = ref(false)
const dataDetailsRule = ref([
  { required: true, message: '请输入', trigger: 'blur' }
])
const emit = defineEmits(['close', 'ok'])
const tzggLxObj = ref({
  '01': '通知',
  '02': '公告',
})
const handleSave = () => {
  // const feedBackType = +formData.value.feedBackType
  formRef.value.validate((valid) => {
    if (valid) {
      const dataDetails = formData.value.dataDetails.map(item => {
        return {
          fieldKey: item.fieldKey,
          fieldValue: item.fieldValue,
        }
      })
      const params = {
        noticeId: detailObj.value.id,
        dataDetails: dataDetails,
        feedbackFiles: formData.value.feedbackFiles,
      }
      saveLoading.value = true
      postApi(params, '/mosty-jcgl/noticeController/saveFeedBack')
        .then((res) => {
          ElMessage.success('反馈成功')
          dialogVisible.value = false
          emit('close', formData.value)
        }).finally(() => {
          saveLoading.value = false
        })
    }else{
      return false
    }
  })

  // const dataDetails = formData.value.dataDetails.map(item => {
  //   return {
  //     fieldKey: item.fieldKey,
  //     fieldValue: item.fieldValue,
  //   }
  // })
  // const params = {
  //   noticeId: detailObj.value.id,
  //   dataDetails: dataDetails,
  //   feedbackFiles: formData.value.feedbackFiles,
  // }
  // saveLoading.value = true
  // postApi(params, '/mosty-jcgl/noticeController/saveFeedBack')
  //   .then((res) => {
  //     ElMessage.success('反馈成功')
  //     dialogVisible.value = false
  //     emit('close', formData.value)
  //   }).finally(() => {
  //     saveLoading.value = false
  //   })
}
const close = () => {
  dialogVisible.value = false
  emit('close', formData.value)
}
/** 获取要反馈的表单 */
const getFeedbackForm = (id) => {
  getApi({ id: id }, "/mosty-jcgl/noticeController/selectOne").then((res) => {

    detailObj.value = res || {}
    let dataValue = []
    try {
      dataValue = JSON.parse(res.dataValue) || []
    } catch (error) {
    }
    formData.value.dataDetails = dataValue
    formData.value.feedBackType = res.feedbackType
  })
}
/** 获取要反馈的内容 */
const getFeedbackDetail = (id, userId) => {
  getApi({ noticeId: id, userId: userId }, "/mosty-jcgl/noticeController/selectFeedBack").then((res) => {
    detailObj.value = res || {}
    formData.value.dataDetails = Array.isArray(res.dataDetails) ? res.dataDetails : []
    formData.value.feedBackType = res.feedBackType
    formData.value.feedbackFiles = res.feedbackFiles
    formData.value.time = res.time
  })
}

/**  打开编辑时间弹窗 */
const open = (obj = {}) => {
  const { type, id, userId } = obj
  formData.value = { noticeId: id }
  TCType.value = type

  // 渲染内容
  if (type === 'see') {
    getFeedbackDetail(id, userId)
    // 去反馈
  } else {
    getFeedbackForm(id)
  }
  dialogVisible.value = true
}

// 暴露方法供父组件调用
defineExpose({ open })
</script>

<style lang="scss" scoped>
.feecback-tc-container1 {
  height: calc(84vh - 120px);
  padding: 20px;
  overflow: auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #efefef;

}

.feecback-tc-container {
  height: calc(84vh - 120px);
  padding: 20px;
  overflow: auto;
  border: 1px solid #ccc;
  border-radius: 5px;

  .feedback-title {
    padding-bottom: 20px;
    text-align: center;
    font-size: 20px;
    font-weight: bolder;
    border-bottom: 1px solid #ccc;
  }

  .feecback-tc-form {
    display: block;
    padding-bottom: 20px;
  }
}


.vertical-item {
  display: block;
}

::v-deep .uploadlist {
  display: flex;
  align-items: center;

  .el-upload,
  .el-upload--text {
    width: 0px !important;
  }

  .upload-demo {
    width: 300px !important;
    display: flex;
  }

  .el-upload-list {
    width: 100% !important;
  }
}

.feecback-content {
  display: flex;
  gap: 20px;

  padding: 10px;
  margin-bottom: 20px;
  background-color: #ffffff;

  .box {
    // margin-bottom: 20px;

    // width: 150px;
    .time {
      color: rgb(42, 130, 228);
      margin-top: 3px;
    }
  }

  .box1 {
    flex: 1;

    .fieldlabel {
      color: #000000;
      font-size: 16px;
      margin-bottom: 10px;

    }

    .fieldValue {
      color: #666666;
      font-size: 14px;

    }
  }
}
</style>
