<template>
  <div class="history-component h-full">
    <el-menu
      :default-active="currentChatId"
      :collapse="isPcCollapse"
      collapse-transition
      popper-class="chat-pc-popper"
      class="h-full"
    >
      <div style="padding: 16px 18px 0 18px">
        <div class="flex align-center mb-16">
          <div class="flex mr-8">
            <el-avatar
              v-if="isAppIcon(applicationDetail?.icon)"
              shape="square"
              :size="32"
              style="background: none"
            >
              <img :src="applicationDetail?.icon" alt="" />
            </el-avatar>
            <LogoIcon v-else height="32px" />
          </div>
          <h4 v-show="!isPcCollapse">{{ applicationDetail?.name }}</h4>
        </div>
        <el-button
          type="primary"
          plain
          v-show="!isPcCollapse"
          class="add-button primary medium w-full"
          @click="newChat"
        >
          <AppIcon iconName="app-create-chat"></AppIcon>
          <span class="ml-4">{{ $t('chat.createChat') }}</span>
        </el-button>
        <div v-show="!isPcCollapse" class="flex-between p-8 pb-0 color-secondary mt-8">
          <span>{{ $t('chat.history') }}</span>
          <el-tooltip effect="dark" :content="$t('chat.clearChat')" placement="right">
            <!-- // TODO: 清空 -->
            <el-button text>
              <el-icon>
                <Delete />
              </el-icon>
            </el-button>
          </el-tooltip>
        </div>
      </div>
      <div v-show="!isPcCollapse" class="left-height">
        <el-scrollbar>
          <div class="p-16 pt-0">
            <common-list
              :data="chatLogData"
              class="mt-8"
              v-loading="leftLoading"
              :defaultActive="currentChatId"
              @click="handleClickList"
              @mouseenter="mouseenter"
              @mouseleave="mouseId = ''"
            >
              <template #default="{ row }">
                <div class="flex-between">
                  <span :title="row.abstract" class="ellipsis" style="max-width: 180px">
                    {{ row.abstract }}
                  </span>
                  <div @click.stop v-show="mouseId === row.id && row.id !== 'new'">
                    <el-dropdown trigger="click" :teleported="false">
                      <el-button text>
                        <el-icon><MoreFilled /></el-icon>
                      </el-button>

                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item @click.stop="editLogTitle(row)">
                            <el-icon><EditPen /></el-icon>
                            {{ $t('common.edit') }}
                          </el-dropdown-item>
                          <el-dropdown-item @click.stop="deleteChatLog(row)">
                            <el-icon><Delete /></el-icon>
                            {{ $t('common.delete') }}
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </div>
              </template>

              <template #empty>
                <div class="text-center">
                  <el-text type="info">{{ $t('chat.noHistory') }}</el-text>
                </div>
              </template>
            </common-list>
          </div>
          <div v-if="chatLogData?.length" class="text-center lighter color-secondary">
            <span>{{ $t('chat.only20history') }}</span>
          </div>
        </el-scrollbar>
      </div>
      <el-menu-item index="1" v-show="isPcCollapse" @click="newChat">
        <AppIcon iconName="app-create-chat"></AppIcon>
        <template #title>{{ $t('chat.createChat') }}</template>
      </el-menu-item>

      <el-sub-menu v-show="isPcCollapse" index="2">
        <template #title>
          <AppIcon iconName="app-history-outlined" />
        </template>
        <el-menu-item-group v-loading="leftLoading">
          <template #title>
            <div class="flex-between w-full">
              <span>{{ $t('chat.history') }}</span>
              <el-tooltip effect="dark" :content="$t('chat.clearChat')" placement="right">
                <!-- // TODO: 清空 -->
                <el-button text>
                  <el-icon>
                    <Delete />
                  </el-icon>
                </el-button>
              </el-tooltip>
            </div>
          </template>
          <el-menu-item
            v-for="row in chatLogData"
            :index="row.id"
            :key="row.id"
            @click="handleClickList(row)"
            @mouseenter="mouseenter(row)"
            @mouseleave="mouseId = ''"
          >
            <div class="flex-between w-full lighter">
              <span :title="row.abstract" class="ellipsis">
                {{ row.abstract }}
              </span>
              <div @click.stop class="flex" v-show="mouseId === row.id && row.id !== 'new'">
                <el-dropdown trigger="click" :teleported="false">
                  <el-icon class="mt-4 lighter">
                    <MoreFilled />
                  </el-icon>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click.stop="editLogTitle(row)">
                        <el-icon>
                          <EditPen />
                        </el-icon>
                        {{ $t('common.edit') }}
                      </el-dropdown-item>
                      <el-dropdown-item @click.stop="deleteChatLog(row)">
                        <el-icon>
                          <Delete />
                        </el-icon>
                        {{ $t('common.delete') }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </el-menu-item>
        </el-menu-item-group>
        <div v-if="!chatLogData?.length" class="text-center">
          <el-text type="info">{{ $t('chat.noHistory') }}</el-text>
        </div>
      </el-sub-menu>
    </el-menu>
    <slot></slot>
    <EditTitleDialog ref="EditTitleDialogRef" @refresh="refreshFieldTitle" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { isAppIcon } from '@/utils/common'
import EditTitleDialog from './EditTitleDialog.vue'
import useStore from '@/stores'
const { common, chatUser } = useStore()
const props = defineProps<{
  applicationDetail: any
  chatLogData: any[]
  leftLoading: boolean
  currentChatId: string
  isPcCollapse?: boolean
}>()
const emit = defineEmits(['newChat', 'clickLog', 'deleteLog', 'refreshFieldTitle'])

const EditTitleDialogRef = ref()

const mouseId = ref('')

function mouseenter(row: any) {
  mouseId.value = row.id
}
const newChat = () => {
  emit('newChat')
}

const handleClickList = (item: any) => {
  emit('clickLog', item)
}

const deleteChatLog = (row: any) => {
  emit('deleteLog', row)
}

function editLogTitle(row: any) {
  EditTitleDialogRef.value.open(row, props.applicationDetail.id)
}

function refreshFieldTitle(chatId: string, abstract: string) {
  emit('refreshFieldTitle', chatId, abstract)
}
</script>
<style lang="scss" scoped>
.history-component {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--el-menu-border-color);
  background:
    linear-gradient(187.61deg, rgba(235, 241, 255, 0.5) 39.6%, rgba(231, 249, 255, 0.5) 94.3%),
    #eef1f4;
  :deep(.el-menu) {
    background: none;
    border: none;
    &:not(.el-menu--collapse) {
      width: 280px;
    }
    &.el-menu--collapse {
      .el-sub-menu.is-active .el-sub-menu__title {
        color: var(--el-text-color-primary) !important;
      }
    }
  }

  .left-height {
    height: calc(100vh - 210px);
  }

  :deep(.common-list li.active) {
    background-color: #ffffff;
    font-weight: 500;
    color: var(--el-text-color-primary);
    &:hover {
      background-color: #ffffff;
    }
  }

  .add-button {
    border: 1px solid var(--el-color-primary-light-6);
    background-color: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
  }
}
</style>
<style lang="scss">
.chat-pc-popper {
  background:
    linear-gradient(187.61deg, rgba(235, 241, 255, 0.5) 39.6%, rgba(231, 249, 255, 0.5) 94.3%),
    #eef1f4 !important;
  .el-menu {
    background: transparent;
  }
  .el-menu-item-group__title {
    padding: 8px 8px 8px 16px;
    font-weight: 500;
    color: var(--app-text-color-secondary);
  }
  .el-menu-item {
    border-radius: 6px;
    height: 40px;
    margin: 0 8px;
    padding-left: 8px;
    padding-right: 8px;
    &:hover {
      background-color: rgba(31, 35, 41, 0.1);
    }
    &.is-active {
      background-color: #ffffff;
      color: var(--el-text-color-primary);
      // & > div {
      //   font-weight: 500;
      // }
    }
  }
}
</style>
