<script setup lang="ts">
// import Editor from '../components/Editor.vue'
import Editor from '../components/TinyECE.vue'
import HomeHead from '@/views/home/components/HomeHead.vue'
import HomeHeadSearch from '@/views/home/components/HomeHeadSearch.vue'
import UserPage from './UserPages.vue'
import { useDate } from '@/views/home/hooks/useDate'
import { getArticleDetail, review } from '@/api/daikin/base'
import {
  NModal,
  NCard,
  NForm,
  NButton,
  NFormItem,
  NInput,
  NRadio,
  NSelect,
  NSpace,
  NRadioGroup,
  useMessage,
  treeDark
} from 'naive-ui'
import { getImg } from '../images'
import { useUserStore } from '@/stores/modules/user'
import { noticeld } from '@/stores/modules/noticeId'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'

const stores = noticeld()
const store = useUserStore()

const state = ref<any>({})
async function getData() {
  const { id } = route.params
  if (!id) return
  const { data } = await getArticleDetail(id as string)
  state.value = data
  dataList.value = data.userList
  formValue.value = Object.assign(data, {
    type: data.type + '',
    cate: data.cate + ''
  })
  editorContent.value = data.content ? unescapeHTML(data.content) : ''
  cate.value = data.cate
  console.log(data.type)
}

const message = useMessage()
const { day, week } = useDate()
const { push } = useRouter()
const route = useRoute()
let cate = ref(1)
let formValue: any = ref({
  type: 1,
  status: 1,
  cate: '',
  title: '',
  tag: '',
  source: '',
  content: '',
  isTop: 'N',
  bannerImg: ''
})

let rules = {
  cate: {
    required: false,
    message: '请选择类型',
    trigger: 'blur'
  },
  title: {
    required: false,
    message: '请输入标题',
    trigger: 'blur'
  },
  tag: {
    required: true,
    message: '请输入标题',
    trigger: 'blur'
  },
  source: {
    required: true,
    message: '请输入标题',
    trigger: 'blur'
  },
  content: {
    required: false,
    message: '请输入内容',
    trigger: 'blur'
  }
}
// let options = [{
//     label: '紧急',
//     value: '紧急'
// },
// {
//     label: 'New',
//     value: 'New'
// },]
function change(i: any) {
  cate.value = i
  formValue.cate = cate.value
  // console.log( formValue.cate)
}
function unescapeHTML(html: string) {
  const doc = new DOMParser().parseFromString(html, 'text/html')
  return doc.documentElement.textContent
}
function escapeHTML(html: string): string {
  const tempElement = document.createElement('div')
  tempElement.textContent = html
  return tempElement.innerHTML
}
// 获取子组件传过来的值
const handleChild2 = (data: string) => {
  editorContent.value = data
}
const starts = ref(1)
const fileList = ref<[]>()
const editorContent = ref('')
async function sure() {
  const { id, title, source, type, isTop, content: conts } = formValue.value
  const cont = editorContent.value
  const content = cont ? escapeHTML(cont) : conts

  const noticeId = stores.article.noticeld
  const cates = cate.value
  const status = starts.value
  console.log(content)
  let userIdList: any[] = []
  // let filLists
  // if(isTop==='Y'&&!fileList.value){
  //     message.error("请选择图片")
  //     return
  // }
  // else if(isTop==='Y'&&fileList.value){
  //    filLists  =  fileList.value.map(item => item.response.fileName).join(',');

  // }

  if (!dataList.value) {
    message.success('请选择要提醒的对象')
    return
  }
  dataList.value.forEach((i: { userId: any }) => {
    console.log(dataList.value)
    userIdList.push(i.userId)
  })
  // console.log(formValue.value)
  if (userIdList.length < 0) return
  const { msg, code } = await review({
    id,
    status,
    isTop,
    title,
    source,
    cate: cates,
    noticeId,
    type,
    content,
    userIdList
  })
  if (code === 200) {
    showModalRef2.value = true
  } else {
    message.success(msg)
  }
}

const showModal = ref(false)
const showModalRef = ref(false)
const showModalRef2 = ref(false)
const bodyStyle = ref({
  // 'background-color': '#236EED'
})
function onNegativeClick() {
  message.success('Cancel')
  showModalRef.value = false
}
function onPositiveClick() {
  showModalRef.value = false
  sure()
}
function onPositiveClicks() {
  showModalRefs.value = false
  sure()
}
const dataList = ref()
// 获取子组件传过来的值
const handleChild = (data: any) => {
  const { showModal: show, multipleSelection } = data
  showModal.value = unref(show)
  dataList.value = unref(multipleSelection)
}

const handleClose = (tag: any) => {
  dataList.value.splice(dataList.value.indexOf(tag), 1)
  // console.log( dataList.value)
}
const CloseThis = (data: boolean) => {
  showModal.value = data
}
const ok = () => {
  showModalRef2.value = false
  push('/Home/Process')
}

const submitSave = (page: any) => {
  console.log(page)
  if (store.user.isReview === 1) {
    if (page === 1) {
      showModalRef.value = true
    } else {
      showModalRefs.value = true
    }
    starts.value = page
    //   console.log(page,showModalRef.value, showModalRefs.value)
  } else {
    message.warning('您还未获得审核权限')
  }
}
getData()
const showModals = ref(false)
const header = { 'token': store.user.token }
// console.log(store.user.token)

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile: any, uploadFiles: any) => {
  //   console.log(dialogImageUrl,dialogVisible)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile: { url: string }) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
  //   console.log(dialogImageUrl.value)
}
const setUserList = ref()
const thisClick = () => {
  showModal.value = true
  setUserList.value = dataList.value
  stores.article.reviewSource = formValue.value.reviewSource
  console.log(stores.article.reviewSource)
}
const showModalRefs = ref(false)
</script>
<template>
  <div>
    <HomeHead class="top">
      <template #content>
        <!-- <HomeHeadSearch /> -->
      </template>
    </HomeHead>
    <div class="h-full relative flex flex-col">
      <div class="font-600 flex items-end mt30px">
        <div class="text-36px">情报新增待审批</div>
        <div class="text-18px ml40px mr25px">{{ day }}</div>
        <div class="text-18px">{{ week }}</div>
      </div>
    </div>
  </div>

  <div class="q-wrapper flex-1 mt30px text-#142142 flex flex-col bg-#fff p30px">
    <n-form
      ref="formRef"
      :label-width="900"
      :model="formValue"
      :rules="rules"
      size="medium"
      require-mark-placement="left"
    >
      <n-form-item v-if="formValue.reviewSource === 2" label="情报属性" path="type">
        <n-radio-group v-model:value="formValue.type" name="radiogroup">
          <n-space>
            <!-- <n-radio v-for="song in songs" :key="song.value" :value="song.value">
                            {{ song.label }}
                        </n-radio> -->
            <n-radio value="2">社内</n-radio>
            <n-radio value="1">社外</n-radio>
          </n-space>
        </n-radio-group>
      </n-form-item>
      <n-form-item 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-item v-if="formValue.isTop==='Y'" label="上传图片" >
                <el-upload
                        v-model:file-list="fileList"
                        :headers="header"
                        action="/test-api/common/upload"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :limit="3"
                    >
                        <el-icon><Plus /></el-icon>
                    </el-upload>

                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
            </n-form-item> -->

      <n-form-item v-if="formValue.reviewSource === 2 && cate != 9" label="情报类型" path="cate">
        <div class="flex gap-20px cursor-pointer">
          <div
            v-if="formValue.type === '1'"
            :class="cate == 1 ? 'img yes' : 'img'"
            @click="change(1)"
          >
            <img src="../images/icon-1.svg" alt="" class="ml15px mt8px" />
            <div class="text-center text-14px text-#fff">外部环境</div>
          </div>
          <div
            v-if="formValue.type === '1'"
            :class="cate == 2 ? 'img yes' : 'img'"
            @click="change(2)"
          >
            <img src="../images/icon-2.svg" alt="" class="ml18px mt14px" />
            <div class="text-center text-14px text-#fff">竞争对手</div>
          </div>
          <div
            v-if="formValue.type === '1'"
            :class="cate == 3 ? 'img yes' : 'img'"
            @click="change(3)"
          >
            <img src="../images/icon-3.svg" alt="" class="ml19px mt8px" />
            <div class="text-center text-14px text-#fff">供方动向</div>
          </div>

          <div
            v-if="formValue.type === '2'"
            :class="cate == 4 ? 'img yes' : 'img'"
            @click="change(4)"
          >
            <img src="../images/icon-4.svg" alt="" class="ml17px mt10px" />
            <div class="text-center text-14px text-#fff">大金集团</div>
          </div>
          <div
            v-if="formValue.type === '2'"
            :class="cate == 5 ? 'img yes' : 'img'"
            @click="change(5)"
          >
            <img src="../images/icon-5.svg" alt="" class="ml17px mt9px" />
            <div class="text-center text-14px text-#fff">中国据点</div>
          </div>
          <div
            v-if="formValue.type === '2'"
            :class="cate == 6 ? 'img yes' : 'img'"
            @click="change(6)"
          >
            <img src="../images/icon-6.svg" alt="" class="ml15px mt8px" />
            <div class="text-center text-14px text-#fff">调达本部</div>
          </div>
        </div>
      </n-form-item>
      <n-form-item v-if="formValue.reviewSource === 3 && cate != 9" label="情报类型" path="cate">
        <div class="flex gap-20px cursor-pointer">
          <div
            v-if="formValue.type === '1'"
            :class="cate == 7 ? 'img yes' : 'img'"
            @click="change(7)"
          >
            <img src="../images/news2@2x.png" alt="" class="ml19px mt8px w46px" />
            <div class="text-center text-14px text-#fff">News</div>
          </div>
          <div
            v-if="formValue.type === '1'"
            :class="cate == 8 ? 'img yes' : 'img'"
            @click="change(8)"
          >
            <img src="../images/zytz@2x.png" alt="" class="ml10px mt8px w55px" />
            <div class="text-center text-14px text-#fff">重要通知</div>
          </div>
        </div>
      </n-form-item>
      <n-form-item v-if="formValue.reviewSource === 2" label="轮播图" path="title">
        <img
          v-if="formValue.bannerImg[0]"
          :src="formValue.bannerImg[0]"
          class="max-w600px max-h300px"
        />
      </n-form-item>
      <n-form-item label="情报标题" path="title">
        <n-input v-model:value="formValue.title" placeholder="" />
      </n-form-item>
      <!-- <n-form-item label="情报状态" path="tag" v-if="store.user.isPublish !==1">
                <n-select v-model:value="formValue.tag" :options="options" />
            </n-form-item> -->
      <n-form-item label="情报来源" path="source">
        <n-input v-model:value="formValue.source" placeholder="" />
      </n-form-item>
      <n-form-item label="情报内容" path="content">
        <Editor :content="state.content" @getChildData="handleChild2"></Editor>
      </n-form-item>

      <n-button @click="showModals = true"> 文本内容预览 </n-button>
      <br />
      <br />
      <br />
      <n-button @click="thisClick" v-if="cate != 9"> 情报公开范围 </n-button>
      <div class="mt15px h150px overflow-y-auto" v-if="cate != 9">
        <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>
      <div class="text-end float-right block h50px pt10px">
        <n-form-item>
          <n-button attr-type="button" style="padding: 0 20px" @click="submitSave(2)">
            拒绝
          </n-button>
          <n-button
            attr-type="button"
            @click="submitSave(1)"
            style="
              background-color: #3870e5;
              border-radius: 5px;
              color: #fff;
              margin-left: 10px;
              padding: 0 20px;
            "
          >
            发布
          </n-button>
        </n-form-item>
      </div>
    </n-form>
  </div>

  <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="handleChild"
        @CloseThis="CloseThis"
      ></UserPage>
      <!-- </n-card> -->
    </n-modal>
  </div>
  <div>
    <n-modal v-model:show="showModalRef">
      <n-card
        style="width: 500px"
        title="提示"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <div class="h200px bg#fff flex-col flex items-center justify-center">
          <span class="mb60px text-18px">确认发布本情报</span>
          <div class="leading-25px">
            <span
              class="inline-block w80px h25px text-#bfbfbf border border-solid text-center rounded-5px cursor-pointer"
              @click="showModalRef = false"
              >暂缓</span
            >
            <span
              class="inline-block w80px h25px text-#fff bg-#236EED ml5px text-center rounded-5px cursor-pointer"
              @click="onPositiveClick"
              >确认发布</span
            >
          </div>
        </div>
      </n-card>
    </n-modal>
  </div>
  <div>
    <n-modal v-model:show="showModalRefs">
      <n-card
        style="width: 500px"
        title="提示"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <div class="h200px bg#fff flex-col flex items-center justify-center">
          <span class="mb60px text-18px">确认驳回本情报</span>
          <div class="leading-25px">
            <span
              class="inline-block w80px h25px text-#bfbfbf border border-solid text-center rounded-5px cursor-pointer"
              @click="showModalRefs = false"
              >暂缓</span
            >
            <span
              class="inline-block w80px h25px text-#fff bg-#236EED ml5px text-center rounded-5px cursor-pointer"
              @click="onPositiveClicks"
              >确认驳回</span
            >
          </div>
        </div>
      </n-card>
    </n-modal>
  </div>
  <div>
    <n-modal :mask-closable="false" v-model:show="showModalRef2">
      <n-card
        style="width: 500px"
        title="提示"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <div class="h200px bg#fff flex-col flex items-center justify-center">
          <img class="w60px h60px" src="../images/quedd.png" alt="" />
          <span class="mt10px mb40px">{{ starts == 1 ? '已成功发布' : '已成功驳回' }}</span>
          <span
            class="w50px h30px text-#fff bg-#236EED p5px text-center rounded-5px cursor-pointer"
            @click="ok"
            >确认</span
          >
        </div>
      </n-card>
    </n-modal>
  </div>

  <div>
    <n-modal v-model:show="showModals">
      <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>
</template>
<style lang="less">
:deep.container {
  // column-count: 2;
  column-gap: 34px;
  margin: 30px;
  line-height: 2;
  margin-top: 32px;
  //   :deep(p>img){
  //     width: 100%;
  //   }
  //   max-width: 1062px;
  :deep(img) {
    // width: 100%;
    // max-width: 500px;
    border-radius: 6px;
    margin-bottom: 24px;
  }
  :deep(p) {
    text-indent: 2em;
  }
}
/* 设置滚动条宽度 */
::-webkit-scrollbar {
  width: 1px;
}

.top {
  position: absolute;
  right: 30px;
  top: -92px;
}

.add {
  border: 1px solid #ffffff;
  border-radius: 10px;
}

.defultStyle {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-color: #c2c2c2;
}

.top {
  position: absolute;
  right: 30px;
  top: -92px;
}

.add {
  border: 1px solid #ffffff;
  border-radius: 10px;
}

.img {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background-color: #c2c2c2;
}

.img.yes {
  background-color: #63bfb2;
}
.q-wrapper {
  border-radius: 18px;
  border: 1px solid #e7ebf5;
  box-shadow: inset 1px 2px 12px rgba(14, 86, 221, 0.32);
  overflow-y: auto;
  height: 830px;
}
</style>
