<template>
  <custom-dialog v-model="visible" title="我的消息" resize-key="can-message-drag">
    <div class="msg-wrap">
      <div class="left-tabs-box">
        <div class="left-tab-item" :class="{ active: modalType === 'view' }" @click="modalType = 'view'">
          <img v-if="modalType === 'view'" src="../../../assets/images/tab_xx_active.png" />
          <img v-else src="../../../assets/images/tab_xx.png" />
          <p>消息</p>
        </div>
        <div class="left-tab-item" :class="{ active: modalType === 'send' }" @click="modalType = 'send'">
          <img v-if="modalType === 'send'" src="../../../assets/images/tab_lxr_active.png" />
          <img v-else src="../../../assets/images/tab_lxr.png" />
          <p>联系人</p>
        </div>
      </div>
      <div class="right-main-box">
        <component
          :is="MessageWindowContent"
          :reply-user-id="replyUserId"
          :paper-path="props.paperPath"
          :secret-number="props.secretNumber"
          :reply-user-name="replyUserName"
          @close="onClose"
          @change-type="onChangeType"
          @reply="onReply"
          @refresh="refresh"
        >
          <message-head-list
            :mode="props.type"
            :cur-msg="currentMessage"
            :reply-user-id="replyUserId"
            @left-msg-click="leftMsgClick"
          ></message-head-list>
        </component>
      </div>
    </div>
  </custom-dialog>
</template>

<script setup lang="ts" name="MessageWindow">
/** 发送/回复消息 */
import { ref, computed, withDefaults, nextTick, watch } from 'vue'
import useVModel from '@/hooks/useVModel'
import BaseDialog from '@/components/element/BaseDialog.vue'
import MessageHistory from '@/components/shared/message/MessageList.vue'
import MessageSend from '@/components/shared/message/MessageSend.vue'
import MessageHeadList from './MessageHeadList.vue'
import bus from '@/utils/bus'
import CustomDialog from '@/components/common/customDialog.vue'

type ModalType = 'view' | 'send'
const replyUserName = ref<string | null>('')
const props = withDefaults(
  defineProps<{
    modelValue: boolean
    type: ModalType
    replyUserId?: number | null
    paperPath?: string | null
    secretNumber?: string | number | null
  }>(),
  { type: 'view', replyUserId: null, paperPath: null, secretNumber: null }
)
const currentMessage = ref<any>(null)
const visible = useVModel(props, 'modelValue')

const modalType = useVModel(props, 'type')

const replyUserId = useVModel(props, 'replyUserId')

const MessageWindowContent = computed(() => {
  return modalType.value === 'send' ? MessageSend : MessageHistory
})

const onClose = () => {
  visible.value = false
  replyUserId.value = null
  replyUserName.value = null
  currentMessage.value = null
}
const refresh = () => {
  onClose()
  modalType.value = 'view'
  nextTick(() => {
    visible.value = true
  })
}
watch(visible, () => {
  if (!visible.value) {
    replyUserId.value = null
    replyUserName.value = null
    currentMessage.value = null
    modalType.value = 'view'
  }
})
const onChangeType = (type: ModalType) => {
  modalType.value = type
}

/** 回复 */
const onReply = (userId: number, userName: string) => {
  replyUserId.value = userId
  replyUserName.value = userName
}

const leftMsgClick = (msg: any) => {
  currentMessage.value = msg
  if (modalType.value != 'view') {
    modalType.value = 'view'
    nextTick(() => {
      bus.emit('clickChangeMsg', msg)
    })
  }
}
</script>

<style lang="scss">
.msg-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  font-weight: bold;
  .el-dialog__header {
    border-radius: 0 6px 0 0 !important;
  }
  .right-main-box {
    margin-left: 60px;
    height: 100%;
  }
  .left-tabs-box {
    // position: absolute;
    // width: 60px;
    // height: 100%;
    // left: -60px;
    // top: 0;
    // background-color: #fff;
    // padding: 10px 5px;
    // border-top-left-radius: 6px;
    // border-bottom-left-radius: 6px;
    width: 60px;
    height: 100%;
    padding: 10px 5px;
    background-color: #fff;
    float: left;
    .left-tab-item {
      width: 50px;
      height: 50px;
      border-radius: 6px;
      text-align: center;
      cursor: pointer;
      margin-top: 10px;
      color: #666;
      font-size: 12px;
      padding-top: 8px;
      &:hover {
        background-color: #f3f3f3;
      }
      img {
        width: 16px;
        margin-bottom: 1px;
      }
      &.active {
        background-color: #f3f3f3;
        color: #0091ff;
      }
    }
  }
  .el-dialog__body {
    padding: 0 !important;
  }
}
</style>
