<template>
  <div class="bigBox" ref="bigBox">
    <MOSTY.FromPage :title="props.title" @closeDialog="handleClose">
      <template #content>
        <MOSTY.Assort :title="'督办任务信息'" />
        <el-form class="mosty-from-wrap" label-suffix="：" ref="ruleFormRef" label-width="130px" :model="formData"
          :inline="true" :rules="rules">
          <el-row style="width: 100%">
            <el-col :span="24">
              <el-form-item label="任务标题">
                <el-input v-model="formData.title" maxlength="100" placeholder="请输入任务标题" :disabled="true" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width: 100%">
            <el-col :span="24">
              <el-form-item label="任务内容">
                <div class="contents">
                  <!-- <div v-html="formData.content" class="custom-style"></div> -->
                  <vue-ueditor-wrap v-model="formData.content" editor-id="editor" :config="editorConfig"
                    :editorDependencies="['ueditor.config.js', 'ueditor.all.js']" />
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- <MOSTY.Assort :title="'附件'" />
          <el-form-item label="附件" style="width: 600px" prop="files">
            <div style="display: flex">
              <MOSTY.Upload isAutoWidth :disabled="true" :limit="5" :nopicer="true" :isImg="false" :ShowfileList="true" v-model="formData.files" :showinput="true"> </MOSTY.Upload>
            </div>
          </el-form-item> -->

          <el-row style="width: 100%" v-if="['01', '02', '1', '2'].includes(formData.feedBackType)"
            v-for="(item, index) in formData.dataDetails" :key="index">
            <el-col :span="24">
              <el-form-item :prop="'dataDetails.' + index + '.fieldKey'" :label="item.fieldKey" class="vertical-item"
                :rules="[
                  {
                    required: true,
                    message: '请输入',
                    trigger: 'blur'
                  }
                ]">
                <div style="display: flex; align-items: center; width: 100%">
                  <el-input v-model="item.fieldValue" v-if="['02', '2'].includes(formData.feedBackType)" />
                  <el-input-number v-model="item.fieldValue" v-if="['01', '1'].includes(formData.feedBackType)" />
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="['03', '3'].includes(formData.feedBackType)" style="width: 100%">
            <el-col :span="24">
              <el-form-item label="反馈附件" style="width: 600px" prop="feedBackFiles">
                <div style="display: flex">
                  <MOSTY.Upload isAutoWidth :disabled="false"
                    :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :limit="500" :nopicer="true"
                    :isImg="false" :ShowfileList="true" v-model="formData.feedBackFiles" :showinput="true">

                  </MOSTY.Upload>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #footer>
        <el-button type="primary" @click="submit(ruleFormRef, 'fb')" v-loading="saveloading"
          v-if="props.type !== 'view'">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>反馈</span>
        </el-button>
        <el-button @click="handleClose">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </template>
    </MOSTY.FromPage>
  </div>
</template>

<script setup>
import { watch, ref, getCurrentInstance, onMounted, nextTick, reactive, computed } from "vue"
import * as MOSTY from "@/components/MyComponents/index"
import { ElMessage } from "element-plus"
import { getApi, postApi } from "@/api/tobAcco_api.js"

const { proxy } = getCurrentInstance()

const props = defineProps({
  /** type
   * add edit feedback反馈（view）  issue分发,可编辑
   */
  type: {
    default: "",
    type: String
  },
  title: {
    default: "",
    type: String
  },
  id: {
    default: "",
    type: String
  }
})
const emit = defineEmits(["close"])

const saveloading = ref(false)

const rules = {
  feedBackFiles: [{ required: true, message: "上传附件", trigger: "change" }]
}
const formData = ref({
  type: "01",
  receivingRange: "01",
  feedBackType: "01"
})
const editorConfig = {
  serverUrl: "",
  UEDITOR_HOME_URL: "/UEditorPlus/",
  readonly: true
}

const ruleFormRef = ref()
const bigBox = ref()

// 查询详情
const queryDetail = () => {
  getApi({ id: props.id }, "/mosty-jcgl/taskController/selectOne").then(res => {
    formData.value = Object.assign(formData.value, res)
    formData.value.dataDetails = ((res?.dataValue && JSON.parse(res?.dataValue)) || []).map(t => {
      t.fieldValue = 0
      return t
    })
  })
}

onMounted(() => {
  if (props.id) {
    queryDetail()
  }
})

// 关闭弹框
const handleClose = () => {
  if (props.type !== "view") {
    proxy.$modal
      .confirm("离开会丢失页面中修改的内容，确认离开吗？")
      .then(() => {
        emit("close")
      })
      .catch(() => {
        // catch error
      })
  } else {
    emit("close")
  }
}
// 保存
const submit = async (ruleFormRef, _type) => {
  saveloading.value = true
  console.log("------------->", formData.value)
  if (!ruleFormRef) return
  await ruleFormRef.validate(valid => {
    if (valid) {
      const params = { taskId: formData.value.id }
      if (["03", "3"].includes(formData.value.feedBackType)) {
        params.dataDetails = (formData.value.feedBackFiles || []).map(k => ({ fieldKey: k, fieldValue: k }))
      } else {
        params.dataDetails = formData.value.dataDetails
      }
      postApi(params, "/mosty-jcgl/taskController/saveFeedBack")
        .then(() => {
          ElMessage.success("反馈成功")
          emit("close", true)
        })
        .finally(() => {
          saveloading.value = false
        })
    } else {
      saveloading.value = false
    }
  })
}
</script>

<style lang="scss" scoped>
.custom-style {
  color: #000;
  p {
    margin: 0 !important;
  }
}

.vertical-item {
  display: flex;
  flex-direction: column;

  /* 关键：垂直排列 */
  /* 调整标签样式 */
  :deep(.el-form-item__label) {
    float: none;
    /* 清除浮动 */
    display: block;
    text-align: left;
    padding: 0 0 8px 0;
    /* 增加标签和输入框间距 */
    width: 100% !important;
  }

  /* 调整内容区域宽度 */
  :deep(.el-form-item__content) {
    margin-left: 0 !important;
    /* 清除左侧margin */
    width: 100%;
    /* 撑满宽度 */
  }
}

.table-lable {
  margin: 10px;
  color: var(--el-color-primary);
}

::v-deep ::-webkit-scrollbar {
  display: none !important;
}

::v-deep .el-pagination {
  justify-content: center !important;
}

::v-deep .el-image {
  margin: 0;
  padding: 1px;
}

.erweim {
  text-align: center;
  margin-right: 10px;

  > img {
    width: 148px;
    height: 148px;
    display: block;
    border: 1px solid var(--el-color-primary);
  }
}

.contents {
  width: 100%;
  margin: 10px auto;
}

::v-deep .el-form {
  // width: 1525px;
  margin: auto;
  padding: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: start;
  // padding: 10px 56px !important;
}

::v-deep .el-form-item__content {
  margin-left: 10px !important;
}

.el-form-item {
  display: flex;
  margin-right: 20px;
}

.bigBox {
  display: block !important;
  padding-right: 14px;
  box-sizing: border-box;
}

::v-deep .el-table .cell {
  padding: 0 0 !important;
}

::v-deep .el-table--border .el-table__cell .cell {
  padding-left: 0px !important;

  > input {
    width: 100%;
    height: 33px;
  }
}

.headBox {
  display: flex;
  justify-content: end;
  width: 100%;
  margin-bottom: 10px;
}

::v-deep .el-upload-list {
  width: 50%;
}

::v-deep .edui-default .edui-editor {
  width: 100% !important;
}

::v-deep .edui-default .edui-editor-iframeholder {
  width: 100% !important;
}

:deep(#editor .edui-toolbar) {
  background-color: #f0f0f0 !important;
  .edui-button-body {
    background-color: #f0f0f0 !important;
  }
  .edui-default {
    background-color: #f0f0f0 !important;
  }
}
</style>
