<template>
  <div class="flex flex-row max-h-screen">
    <div class="h-screen px-0.5 bg-white shadow-sm border-r flex flex-col items-center justify-center">
      <div class="h-12 w-3 flex items-center border rounded-tr-md rounded-br-md cursor-pointer" @click="show = !show">
        <SvgIcon
          name="caret-left"
          class="w-4 h-4 text-black transition-transform shrink-0 -ml-0.5"
          :class="[show ? 'rotate-180' : 'rotate-0']" />
      </div>
    </div>
    <div class="w-72" v-show="show">
      <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
        <el-tab-pane label="快捷回复" name="replyPreset">
          <template #default>
            <div class="px-3 py-2">
              <div class="relative mt-2 rounded-md shadow-sm">
                <input
                  type="text"
                  name="account-number"
                  id="account-number"
                  v-model="searchText"
                  class="block w-full outline-0 rounded-md border-0 py-1.5 pl-3 pr-14 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                  placeholder="搜索" />
                <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                  <SvgIcon name="delete" class="h-5 w-5 text-gray-400 hover:cursor-pointer" aria-hidden="true" v-if="searchText" @click="clearSearch"/>
                  <SvgIcon name="search" class="h-5 w-5 text-gray-400" aria-hidden="true" />
                </div>
              </div>
            </div>
            <div class="px-4 py-2 max-h-[calc(100vh-120px)]  overflow-y-scroll">
              <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item  :name="item.groupName" v-for="item in filteredList">
                    <template #title>
                        <span class="text-[#409eff] font-medium">{{ item.groupName }}</span>
                    </template>
                  <el-table :data="item.replieList" style="width: 100%">
                    <el-table-column prop="content">
                        <template #default="{row}">
                            <span class="text-[#409eff] cursor-pointer" @click="setContent(row.content)">{{ row.content }}</span>
                        </template>
                    </el-table-column>
                  </el-table>
                </el-collapse-item>
              </el-collapse>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane label="待接入列表" name="waitingList"></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref,computed } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import {pageQuickReply} from '@/api/reply'

const emits = defineEmits(['setContent'])

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const show = ref(true)
const activeName = ref('replyPreset')

const activeNames = ref([])
const handleChange = (val: string[]) => {
  console.log(val)
}
const groupList = ref([])

const fetchData = async () => {
  const params = {
    pageNo: 1,
    pageSize: 20,
  }
   const res = await pageQuickReply(params)
   groupList.value = res.list
   groupList.value.forEach((group:any) => {
    activeNames.value.push(group.groupName)
   })
}
const searchText = ref('')
const filteredList = computed(() => {
  if (searchText.value) {
    return groupList.value.map(item => {
      return {
        ...item,
        replieList: item.replieList.filter(replit => {
          return replit.content.includes(searchText.value)
        })
      }
    }).filter(item => item.replieList.length > 0)
  } else {
    return groupList.value
  }
})

const clearSearch = () => {
  searchText.value = ''
}

const setContent = (content:string) => {
  // 调用addmsg方法
  emits('setContent', content)
}

onMounted(async () => {
  await fetchData()
})
</script>
