<script lang="ts" setup>
import { reactive, computed, watch } from 'vue'
import { NDrawer, NCard, NTag } from 'naive-ui'
import { useUserStore, useDialogueStore, useUploadsStore } from '@/store'
import PanelHeader from './panel/PanelHeader.vue'
import PanelContent from './panel/PanelContent.vue'
import PanelFooter from './panel/PanelFooter.vue'
import GroupPanel from '@/components/group/GroupPanel.vue'
import GroupNotice from '@/components/group/GroupNotice.vue'
import UploadsModal from '@/components/base/UploadsModal.vue'
import customModal from '@/components/common/customModal.vue'
import historyRecord from '@/components/search/searchByCondition.vue'

const userStore = useUserStore()
const dialogueStore = useDialogueStore()
const uploadsStore = useUploadsStore()

const members = computed(() => dialogueStore.members)
const isShowEditor = computed(() => dialogueStore.isShowEditor)

// 当前对话参数
const talkParams = reactive({
  uid: computed(() => userStore.uid),
  index_name: computed(() => dialogueStore.index_name),
  type: computed(() => dialogueStore.talk.talk_type),
  receiver_id: computed(() => dialogueStore.talk.receiver_id),
  username: computed(() => dialogueStore.talk.username),
  online: computed(() => dialogueStore.online),
  keyboard: computed(() => dialogueStore.keyboard),
  num: computed(() => dialogueStore.members.length)
})

const state = reactive({
  // 是否显示群面板
  isShowGroupAside: false,
  isShowGroupNotice: false,
  isShowSearchRecordByConditionModal: false, //是否显示按条件搜索记录弹窗
  customSearchRecordByConditionModalStyle: {
    width: '997px',
    height: '740px',
    backgroundColor: '#F9F9FD'
  }, //按条件搜索记录弹窗样式
  searchRecordByConditionText: '', //按条件搜索记录文本
  conditionTag: '', //当前条件标签
  conditionType: '' //当前条件类型
})

const events = {
  notice: () => {
    state.isShowGroupNotice = !state.isShowGroupNotice
  },
  group: () => {
    state.isShowGroupAside = !state.isShowGroupAside
  }
}

watch(
  () => talkParams,
  (newValue, oldValue) => {
    console.log(newValue)
  },
  { deep: true, immediate: true }
)

// Header 工具栏事件
const onPanelHeaderEvent = (eventType: string) => {
  events[eventType] && events[eventType]()
}
//点击切换搜索条件/分类
const changeConditionTag = (tag) => {
  console.log(tag)
  state.conditionType = tag
  if (tag === 'file') {
    state.conditionTag = '文件'
  } else if (tag === 'imgAndVideo') {
    state.conditionTag = '图片与视频'
  } else if (tag === 'date') {
    state.conditionTag = '日期'
  } else if (tag === 'member') {
    state.conditionTag = '群成员'
  } else {
    state.conditionTag = ''
  }
}
</script>

<template>
  <section id="drawer-container" class="el-container is-vertical">
    <!-- 头部区域 -->
    <header class="el-header bdr-b">
      <PanelHeader
        :type="talkParams.type"
        :username="talkParams.username"
        :online="talkParams.online"
        :keyboard="talkParams.keyboard"
        :num="talkParams.num"
        @evnet="onPanelHeaderEvent"
      />
    </header>

    <!-- 聊天区域 -->
    <main class="el-main">
      <PanelContent
        :uid="talkParams.uid"
        :talk_type="talkParams.type"
        :receiver_id="talkParams.receiver_id"
        :index_name="talkParams.index_name"
      />
    </main>

    <!-- 编辑器区域 -->
    <footer
      v-show="isShowEditor"
      class="el-footer"
      :style="{ height: 200 + 'px' }"
      v-dropsize="{ min: 200, max: 600, direction: 'top', key: 'editor' }"
    >
      <PanelFooter
        :uid="talkParams.uid"
        :index_name="talkParams.index_name"
        :talk_type="talkParams.type"
        :receiver_id="talkParams.receiver_id"
        :online="talkParams.online"
        :members="members"
      />
    </footer>
  </section>

  <n-drawer
    v-model:show="uploadsStore.isShow"
    :width="400"
    placement="right"
    :trap-focus="false"
    :block-scroll="false"
    show-mask="transparent"
    to="#drawer-container"
  >
    <UploadsModal />
  </n-drawer>

  <n-drawer
    v-model:show="state.isShowGroupNotice"
    :width="400"
    placement="right"
    :trap-focus="false"
    :block-scroll="false"
    show-mask="transparent"
    to="#drawer-container"
  >
    <GroupNotice :group-id="talkParams.receiver_id" @close="state.isShowGroupNotice = false" />
  </n-drawer>

  <n-drawer
    v-model:show="state.isShowGroupAside"
    :width="453"
    placement="right"
    :trap-focus="false"
    :block-scroll="false"
    :show-mask="true || 'transparent'"
    to="#drawer-container"
  >
    <GroupPanel
      :gid="talkParams.receiver_id"
      @close="state.isShowGroupAside = false"
      :talkType="talkParams.type"
      @handleSearchRecordByConditionModalShow="state.isShowSearchRecordByConditionModal = true"
    />
  </n-drawer>

  <customModal
    v-model:show="state.isShowSearchRecordByConditionModal"
    :title="`${talkParams.type === 1 ? '与' : ''}&quot;${talkParams.username}&quot;的聊天记录`"
    :style="state.customSearchRecordByConditionModalStyle"
    :customCloseBtn="true"
    :closable="false"
  >
    <template #content>
      <div class="search-record-modal-searchArea">
        <n-card style="padding: 0 12px;">
          <div class="search-record-input">
            <span class="search-record-input-title">搜索</span>
            <n-input
              type="text"
              v-model:value="state.searchRecordByConditionText"
              placeholder="请输入"
              clearable
            >
              <template #clear-icon>
                <img src="@/assets/image/icon/close-btn-grey-line.png" alt="close" />
              </template>
              <template #prefix>
                <n-tag closable v-if="state.conditionTag" @close="changeConditionTag('')">
                  {{ state.conditionTag }}
                </n-tag>
              </template>
            </n-input>
          </div>
          <div class="search-area-condition">
            <span @click="changeConditionTag('file')">文件</span>
            <span @click="changeConditionTag('imgAndVideo')">图片与视频</span>
            <n-popover trigger="click" placement="bottom-start" style="height: 312px; padding: 0;">
              <template #trigger>
                <span id="date-condition" @click="changeConditionTag('date')">日期</span>
              </template>
              <historyRecord conditionType="dateTimePicker" v-if="state.conditionType === 'date'" />
            </n-popover>
            <n-popover
              trigger="click"
              placement="bottom-start"
              style="height: 505px; padding: 0;"
              v-if="talkParams.type === 2"
            >
              <template #trigger>
                <span @click="changeConditionTag('member')">群成员</span>
              </template>
              <div>
                <text>这里是memberList</text>
              </div>
            </n-popover>
          </div>
        </n-card>
      </div>
      <div class="search-record-modal-content">
        <n-card>
          <div
            class="search-record-card"
            v-if="state.searchRecordByConditionText || state.conditionType"
          >
            <historyRecord :conditionType="state.conditionType" />
          </div>
          <div
            class="search-record-empty"
            v-if="!state.searchRecordByConditionText && !state.conditionType"
          >
            <img src="@/assets/image/chatList/search-empty.png" alt="" />
            <span>无内容</span>
          </div>
        </n-card>
      </div>
    </template>
  </customModal>
</template>

<style lang="less" scoped>
.drawer-target {
  overflow: hidden;
}
.search-record-modal-searchArea {
  box-sizing: border-box;
  width: 100%;
  padding: 0 12px;
  :deep(.n-card) {
    border: 0;
    box-shadow: 0 3px 6px 1px rgba(188, 188, 188, 0.18);
  }
  :deep(.n-card__content) {
    padding: 27px 12px 0;
  }
  .search-record-input {
    display: flex;
    align-items: center;
    justify-content: center;
    .search-record-input-title {
      width: 78px;
    }
  }
  .search-area-condition {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 22px 0 11px;
    span {
      font-size: 14px;
      color: #46299d;
      font-weight: 400;
      line-height: 20px;
      margin: 0 62px 0 0;
      cursor: pointer;
    }
  }
}
.search-record-modal-content {
  box-sizing: border-box;
  width: 100%;
  padding: 0 12px;
  margin: 18px 0 0;
  :deep(.n-card__content) {
    padding: 0;
  }
  :deep(.n-card) {
    border: 0;
    box-shadow: 0 3px 6px 1px rgba(188, 188, 188, 0.18);
  }
  .search-record-card {
  }
  .search-record-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 455px;
    box-sizing: border-box;
    img {
      width: 160px;
      height: 104px;
    }
    span {
      font-size: 14px;
      color: #999;
      font-weight: 400;
      margin: 13px 0 0;
    }
  }
}
</style>
