""" @author: yy @desc：任务信息 @date: 2025-06-08 09:40:16 """
<template>
  <div>
    <h1 style="text-align: center">{{ data?.title }}</h1>
    <el-form class="mosty-from-wrap" label-suffix="：" ref="ruleFormRef" label-width="130px" :inline="true">
      <el-form-item label="任务内容">
        <div class="contents">
          <!-- <div v-html="data.content"></div> -->
          <vue-ueditor-wrap style="background-color: aliceblue;" v-model="localContent"
            :editor-id="'editor-' + props.index" :config="editorConfig"
            :editorDependencies="['ueditor.config.js', 'ueditor.all.js']" />
        </div>
      </el-form-item>
      <template v-if="data.files?.length">
        <MOSTY.Assort :title="'附件'" />
        <el-form-item label="附件" style="width: 600px">
          <div style="display: flex">
            <MOSTY.Upload isAutoWidth :disabled="true" :limit="500" :nopicer="true" :isImg="false" :ShowfileList="true"
              :placeholder="'请上传pdf,ofd, doc, docx,wps'" :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'wps']"
              v-model="data.files" :showinput="true" />
          </div>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import { ref, watch } from "vue"

const props = defineProps({
  // 详情接口数据
  data: {
    default: () => ({}),
    type: Object
  },
  // 组件索引
  index: {
    default: 0,
    type: Number
  }
})

const localContent = ref("")

// 监听props.data变化，更新本地内容
watch(() => props.data, (newData) => {
  localContent.value = newData?.content || ""

}, { immediate: true, deep: true })

const editorConfig = {
  serverUrl: "",
  UEDITOR_HOME_URL: "/UEditorPlus/",
  readonly: true
}
</script>
<style lang="scss" scoped>
// :deep(#editor-0 .edui-toolbar) {
//   background-color: #f0f0f0 !important;

//   .edui-button-body {
//     background-color: #f0f0f0 !important;
//   }

//   .edui-default {
//     background-color: #f0f0f0 !important;
//   }
// }
:deep([id^="editor-"]) {
  .edui-toolbar {
    background-color: #f0f0f0 !important;
    .edui-button-body {
      background-color: #f0f0f0 !important;
    }

    .edui-default {
      background-color: #f0f0f0 !important;

      .edui-toolbar {
        background-color: #f0f0f0 !important;

        .edui-combox {
          .edui-combox-body {
            background-color: #f0f0f0 !important;
          }
        }
      }
    }
  }
}
</style>
