2023-08-21 10:34:05 +08:00

110 lines
3.5 KiB
TypeScript

import { keys } from 'idb-keyval'
import '../css/list.css'
import { createSignal } from 'solid-js'
import { fetchData } from '../../../http/api'
type dataList = {
id: string
}
interface Props {
instanceData: Omit<dataList, 'messages'> & {
title?:string,
istop?:number
},
key: any,
setList: Function,
infoList: any,
popShow: Function,
setErrorFun:Function
}
export default ({ instanceData, key, setList, infoList, popShow,setErrorFun }: Props) => {
//设置数据
const instanceItem = instanceData
let instance = instanceItem || { id: '', name: '' }
const isTouchDevice = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
//置顶数据排序
const getToppingItem = (arr: any) => {
let toppingArr: { id: string, istop: boolean }[] = []
let copyArr: any[]=[]
arr.map((res: { istop: boolean; id: string }, i: number) => {
if (res.istop) {
copyArr.push(arr[i])
}else{
toppingArr.push(arr[i])
}
})
// console.log([...copyArr,...toppingArr])
return [...copyArr,...toppingArr]
}
//设置数据置顶
const setItemTop = (uniqid: string, item: any) => {
return new Promise((res, rej) => {
fetchData({ uniqid }, function (data) {
if (data.code === 200) {
item.istop = item.istop ? 0 : 1
} else {
setErrorFun(data.message)
}
res(null)
}, !item.istop?'/chat/top':'/chat/cancelTop', 'POST');
})
}
//置顶排序
const setDataTop = (e: MouseEvent, key: string) => {
let arr = JSON.parse(JSON.stringify(infoList))
let item = arr[key]
setItemTop(item.uniqid, item).then(res=>{
let toppindItem = getToppingItem(arr)
setList('data', (list: null[]) => [...toppindItem])
})
e.stopPropagation()
}
return (
<div
class={[
'group fi h-10 my-0.5 px-2 gap-2 hv-base rounded-md'
].join(' ')}
>
<div class="fcc w-8 h-8 rounded-full text-xl shrink-0">
<div class="text-base i-carbon-chat" />
</div>
<div class="flex-1 truncate text-sm">{instance.title as any}</div>
<div class={[isTouchDevice ? '' : 'hidden group-hover:block'].join('')}>
<div
class="inline-flex p-2 items-center gap-1 rounded-md hv-base"
onClick={() => popShow('open', null, null, instance.title)}
>
<div class='add-new-icon'></div>
</div>
</div>
<div class={[isTouchDevice || instance.istop === 1 ? '' : 'hidden group-hover:block'].join('')}>
<div
class="inline-flex p-2 items-center gap-1 rounded-md hv-base"
onClick={e => setDataTop(e, key())}
>
<div class={[instance.istop === 1 ?'list-top-icon-b':'list-top-icon'].join('')}></div>
</div>
</div>
<div class={isTouchDevice ? '' : 'hidden group-hover:block'}>
<div
class="inline-flex p-2 items-center gap-1 rounded-md hv-base"
onClick={e => popShow('delete', e, key())}
>
<div class="i-carbon-close" />
</div>
</div>
</div>
)
}