<template>
  <HomeHead class="top"> </HomeHead>
  <div class="h-full relative flex flex-col">
    <div class="font-600 flex items-end mt30px">
      <div class="text-36px">
        {{ not.article.cate == 7 ? '外部新增-News' : '外部新增-重要通知' }}
      </div>
      <div class="text-18px ml40px mr25px">{{ day }}</div>
      <div class="text-18px">{{ week }}</div>
    </div>
    <div
      class="q-wrapper flex-1 rounded-5px overflow-y-auto mt30px text-#142142 flex flex-col bg-#fff p30px"
    >
      <n-form :label-width="800" size="medium" :model="formValue">
        <n-form-item label="标题" path="title">
          <n-input class="w90%" v-model:value="formValue.title" placeholder="" />
        </n-form-item>
        <n-form-item v-if="formValue.cate == 8" label="是否置顶" path="isTop">
          <n-radio-group v-model:value="formValue.isTop" name="radiogroup">
            <n-space>
              <!-- <n-radio v-for="song in songs" :key="song.value" :value="song.value">
                            {{ song.label }}
                        </n-radio> -->
              <n-radio value="Y">是</n-radio>
              <n-radio value="N">不是</n-radio>
            </n-space>
          </n-radio-group>
        </n-form-item>
      </n-form>
      <!-- <n-form-item v-if="formValue.cate == 9" label="选项">
        <n-radio-group v-model:value="formValue.treeSource" name="radiogroup">
          <n-space>
            <n-radio value="1">供应商留言</n-radio>
            <n-radio value="2">空调需求依赖</n-radio> -->
      <!-- <n-radio  value="3">回执单</n-radio> -->
      <!-- </n-space>
        </n-radio-group>
      </n-form-item> -->
      <n-form-item label="内容" path="title">
        <Editor @getChildData="handleChild" class="bg-#fff" />
      </n-form-item>
      <n-button @click="thisClick" v-if="formValue.cate == 8"> 情报公开范围 </n-button>
      <div class="mt15px h150px overflow-y-auto" v-if="formValue.cate == 8">
        <el-tag
          v-for="i in dataList"
          :key="i"
          class="mx-1 my5px"
          closable
          :disable-transitions="false"
          @close="handleClose(i)"
          type="info"
          size="large"
        >
          {{ i.nickName }}
        </el-tag>
      </div>
      <n-form-item>
        <n-button @click="showModal1 = true"> 文本内容预览</n-button>
      </n-form-item>
      <el-button type="primary" class="mt20px w-100px" @click="saveThis">提交</el-button>
    </div>
    <n-modal v-model:show="showModal1">
      <div class="flex w80% p30px bg-#fff my40px rounded-30px">
        <div class="overflow-y-auto h800px container" v-html="editorContent"></div>
      </div>
    </n-modal>
    <div>
      <n-modal v-model:show="showModal">
        <!-- <n-card style="width:1100px; height: 800px;" title="调达中心" :bordered="false" size="huge" role="dialog"
                aria-modal="true"> -->
        <UserPage
          :userDataList="setUserList"
          @clickChild="handleChild1"
          @CloseThis="CloseThis"
        ></UserPage>
        <!-- </n-card> -->
      </n-modal>
    </div>
  </div>
</template>
<script setup lang="ts">
import Editor from '@/views/home/intelligence/components/TinyECE.vue'
import UserPage from '../../home/intelligence/process/UserPages.vue'
import {
  NModal,
  NCard,
  NForm,
  NButton,
  NFormItem,
  NInput,
  NRadio,
  NSelect,
  NSpace,
  NRadioGroup,
  useMessage,
  treeDark
} from 'naive-ui'
import HomeHead from '@/views/home/components/HomeHead.vue'
import { noticeld } from '@/stores/modules/noticeId'
import { saveArticle, trendsAdd } from '@/api/daikin/base'
import { useDate } from '@/views/home/hooks/useDate'
const editorContent = ref()
const { push } = useRouter()
const message = useMessage()
const { day, week } = useDate()
const not = noticeld()
// const CloseThis = ()=>{
//   mask.value = false
// }
let formValue: any = ref({
  type: '1',
  cate: not.article.cate,
  title: '',
  tag: '',
  source: '',
  content: '',
  reviewSource: '3',
  isTop: 'N',
  treeSource: '3'
})
function escapeHTML(html: string): string {
  const tempElement = document.createElement('div')
  tempElement.textContent = html
  return tempElement.innerHTML
}
const handleClose = (tag: any) => {
  dataList.value.splice(dataList.value.indexOf(tag), 1)
}
// 添加留言
async function save() {
  let userIdList: any[] = []
  const cont = editorContent.value
  const content = escapeHTML(cont)
  const { title, reviewSource, tag, treeSource, source, type, isTop } = formValue.value
  const cate = not.article.cate
  // console.log(formValue.value, content,cate)
  if (dataList.value) {
    dataList.value.forEach((i: { userId: any }) => {
      console.log(dataList.value)
      userIdList.push(i.userId)
    })
  }

  // console.log(formValue.value)
  // if(userIdList.length<0) return
  if (not.article.cate === '9') {
    const { msg, code } = await trendsAdd({ title, content })
    if (code === 200) {
      message.success('新增成功')
    } else {
      message.success(msg)
    }
  } else {
    const { msg, code } = await saveArticle({
      title,
      tag: '',
      isTop,
      treeSource,
      reviewSource,
      source,
      cate,
      type,
      content,
      userIdList
    })
    if (code === 200) {
      message.success('新增成功')
    } else {
      message.success(msg)
    }
  }

  push({ name: 'external' })
}
// 编辑器数据
const handleChild = (data: string) => {
  editorContent.value = data
  // console.log(data)
}
// 添加
const saveThis = (e: { preventDefault: () => void }) => {
  e.preventDefault()
  save()
}
const stores = noticeld()
const showModal = ref(false)
const showModal1 = ref(false)
const setUserList = ref()
const dataList = ref()
const thisClick = () => {
  showModal.value = true

  setUserList.value = dataList.value
  stores.article.reviewSource = formValue.value.reviewSource
}
const CloseThis = (data: boolean) => {
  showModal.value = data
}
const handleChild1 = (data: any) => {
  const { showModal: show, multipleSelection } = data
  console.log(show)
  showModal.value = unref(show)
  dataList.value = unref(multipleSelection)
}
</script>

<style scoped lang="less">
::-webkit-scrollbar {
  width: 1px;
}
.back {
  position: absolute;
  top: 25px;
  left: 25px;
  color: #fff;
  // z-index: 500;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  justify-content: center;
}
.top {
  position: absolute;
  right: 30px;
  top: -92px;
}

::-webkit-scrollbar {
  width: 1px;
}

.q-wrapper {
  border-radius: 18px;
  border: 1px solid #e7ebf5;
  box-shadow: inset 1px 2px 12px rgba(14, 86, 221, 0.32);
  overflow: auto;
}
.page {
  width: 100%;
  // height: 100px;
  font-family: 'PingFang SC';
  user-select: none;

  background-image: url('@/assets/images/bg.jpg');
  background-color: #000;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;

  line-height: 1;
  .page-wrap {
    display: grid;
    grid-template-columns: 1fr 314px;
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 30px;
    grid-row-gap: 30px;

    .page-main {
      height: 830px;
      grid-area: 1 / 1 / 3 / 2;
    }
    .page-side {
      height: 100%;
      grid-area: 1 / 2 / 2 / 3;
      &:last-of-type {
        height: 300px;
        grid-area: 2 / 2 / 3 / 3;
      }
    }
  }
}
.main {
  background-image: url('@/assets/images/bg-rs-main.svg');
  background-position: 0 0;
  background-repeat: repeat-x;
  background-size: auto;
}

.box {
  --title-h: 58px;

  border: 0;
  .box-title {
    height: var(--title-h);
    color: #fff;
    background-color: #537deb;
    font-size: 18px;
    font-weight: 600;
    padding: 0 24px;
    cursor: pointer;
  }
  .box-content {
    height: 100%;
    max-height: calc(100% - var(--title-h));
  }
}
.line {
  border-bottom: 1px solid #eef3fb;
}
</style>
