<template>
    <div class="materialLibrary-container">
        <template v-if="msgType == 1 || !isSendMsg">
            <label class="tag-title">文本素材</label>
            <div class="material-cards">
                <el-card v-if="!isSendMsg && !isAddtask" class="card-item add" @click="openCreate(1)">
                    <el-icon>
                        <Plus></Plus>
                    </el-icon>
                </el-card>
                <el-card class="card-item" :class="{ active: select_id == item.id || item.active }" v-for="item in textList"
                    @click="selectCard(item)">
                    <h4>{{ item.title }}</h4>
                    <p>内容：{{ item.content.message }}</p>
                    <!-- <p>描述：{{ item.description }}</p> -->
                    <el-popover @click.stop placement="bottom" width="120px" trigger="hover" hide-after="0">
                        <template #reference>
                            <span v-if="!isSendMsg" class="edit-icon" @click.stop>
                                <el-icon>
                                    <MoreFilled />
                                </el-icon>
                            </span>
                        </template>
                        <template #default>
                            <ul class="popover-list" @click.stop>

                                <li class="edit-icon" @click.stop="handleEdit(item, 1)">
                                    <el-icon>
                                        <Edit></Edit>
                                    </el-icon> 编辑
                                </li>
                                <li class="delete-icon" @click.stop="deleteItem(item, index, 1)">
                                    <el-icon>
                                        <Delete />
                                    </el-icon> 删除
                                </li>
                            </ul>
                        </template>

                    </el-popover>
                </el-card>
            </div>
        </template>
        <!-- <template v-if="msgType == 2 || !isSendMsg">
            <label class="tag-title">图片素材</label>
            <div class="material-cards">
                <el-card v-if="!isSendMsg && !isAddtask" class="card-item images add" @click="openCreate(2)">
                    <el-icon>
                        <Plus></Plus>
                    </el-icon>
                </el-card>
                <el-card class="card-item images" v-for="item in imgList" :class="{ active: select_id == item.id || item.active }"
                    @click="selectCard(item)">
                    <h4>{{ item.title }}</h4>
                    <el-image class="" v-if="isSendMsg" :src="item.content.img_url" fit="cover"></el-image>
                        <el-image v-if="!isSendMsg" class="" :src="item.content.img_url" fit="cover"
                        :preview-src-list="[item.content.img_url]" preview-teleported></el-image>

                    <el-popover @click.stop placement="bottom" width="120px" trigger="hover" hide-after="0">
                        <template #reference>
                            <span v-if="!isSendMsg" class="edit-icon" @click.stop>
                                <el-icon>
                                    <MoreFilled />
                                </el-icon>
                            </span>
                        </template>
                        <template #default>
                            <ul class="popover-list" @click.stop>

                                <li class="edit-icon" @click.stop="handleEdit(item, 2)">
                                    <el-icon>
                                        <Edit></Edit>
                                    </el-icon> 编辑
                                </li>
                                <li class="delete-icon" @click.stop="deleteItem(item, index, 2)">
                                    <el-icon>
                                        <Delete />
                                    </el-icon> 删除
                                </li>
                            </ul>
                        </template>

                    </el-popover>
                </el-card>
            </div>
        </template> -->
        <!-- <template v-if="msgType == 8 || !isSendMsg">
            <label class="tag-title">GIF图片素材</label>
            <div class="material-cards">
                <el-card v-if="!isSendMsg && !isAddtask" class="card-item images add" @click="openCreate(8)">
                    <el-icon>
                        <Plus></Plus>
                    </el-icon>
                </el-card>
                <el-card class="card-item images" v-for="item in gifList" :class="{ active: select_id == item.id || item.active }"
                    @click="selectCard(item)">
                    <h4>{{ item.title }}</h4>
                    <el-image class="" v-if="isSendMsg" :src="item.content.img_url" fit="cover"></el-image>
                        <el-image v-if="!isSendMsg" class="" :src="item.content.img_url" fit="cover"
                        :preview-src-list="[item.content.img_url]" preview-teleported></el-image>
                    <el-popover @click.stop placement="bottom" width="120px" trigger="hover" hide-after="0">
                        <template #reference>
                            <span v-if="!isSendMsg" class="edit-icon" @click.stop>
                                <el-icon>
                                    <MoreFilled />
                                </el-icon>
                            </span>
                        </template>
                        <template #default>
                            <ul class="popover-list" @click.stop>

                                <li class="edit-icon" @click.stop="handleEdit(item, 8)">
                                    <el-icon>
                                        <Edit></Edit>
                                    </el-icon> 编辑
                                </li>
                                <li class="delete-icon" @click.stop="deleteItem(item, index, 8)">
                                    <el-icon>
                                        <Delete />
                                    </el-icon> 删除
                                </li>
                            </ul>
                        </template>

                    </el-popover>
                </el-card>
            </div>
        </template> -->
        <!-- <template v-if="msgType == 3 || !isSendMsg">
            <label class="tag-title">语音素材</label>
            <div class="material-cards">
                <el-card v-if="!isSendMsg && !isAddtask" class="card-item add" @click="openCreate(3)">
                    <el-icon>
                        <Plus></Plus>
                    </el-icon>
                </el-card>
                <el-card class="card-item" :class="{ active: select_id == item.id || item.active }" v-for="item in voiceList"
                    @click="selectCard(item)">
                    <h4>{{ item.title }}</h4>
                    <div class="audio" style="">
                        <el-icon style="color: #fff;font-size: 20px;">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-yuyin"></use>
                            </svg>
                        </el-icon>

                    </div>

                    <el-popover @click.stop placement="bottom" width="120px" trigger="hover" hide-after="0">
                        <template #reference>
                            <span v-if="!isSendMsg" class="edit-icon" @click.stop>
                                <el-icon>
                                    <MoreFilled />
                                </el-icon>
                            </span>
                        </template>
                        <template #default>
                            <ul class="popover-list" @click.stop>

                                <li class="edit-icon" @click.stop="handleEdit(item, 1)">
                                    <el-icon>
                                        <Edit></Edit>
                                    </el-icon> 编辑
                                </li>
                                <li class="delete-icon" @click.stop="deleteItem(item, index, 1)">
                                    <el-icon>
                                        <Delete />
                                    </el-icon> 删除
                                </li>
                            </ul>
                        </template>

                    </el-popover>
                </el-card>
            </div>
        </template> -->
        <!-- <template v-if="msgType == 4 || !isSendMsg">
            <label class="tag-title">视频素材</label>
            <div class="material-cards">
                <el-card v-if="!isSendMsg && !isAddtask" class="card-item images add" @click="openCreate(4)">
                    <el-icon>
                        <Plus></Plus>
                    </el-icon>
                </el-card>
                <el-card class="card-item images" v-for="item in videoList" :class="{ active: select_id == item.id || item.active }"
                    @click="selectCard(item)">
                    <h4>{{ item.title }}</h4>
                    <video class="" :src="item.content.file_url" controls></video>

                    <el-popover @click.stop placement="bottom" width="120px" trigger="hover" hide-after="0">
                        <template #reference>
                            <span v-if="!isSendMsg" class="edit-icon" @click.stop>
                                <el-icon>
                                    <MoreFilled />
                                </el-icon>
                            </span>
                        </template>
                        <template #default>
                            <ul class="popover-list" @click.stop>

                                <li class="edit-icon" @click.stop="handleEdit(item, 4)">
                                    <el-icon>
                                        <Edit></Edit>
                                    </el-icon> 编辑
                                </li>
                                <li class="delete-icon" @click.stop="deleteItem(item, index, 4)">
                                    <el-icon>
                                        <Delete />
                                    </el-icon> 删除
                                </li>
                            </ul>
                        </template>

                    </el-popover>
                </el-card>
            </div>
        </template> -->
        <!-- <template v-if="msgType == 10 || !isSendMsg">
            <label class="tag-title">文件素材</label>
            <div class="material-cards">
                <el-card v-if="!isSendMsg && !isAddtask" class="card-item add" @click="openCreate(10)">
                    <el-icon>
                        <Plus></Plus>
                    </el-icon>
                </el-card>
                <el-card class="card-item" v-for="item in fileList" :class="{ active: select_id == item.id || item.active }"
                    @click="selectCard(item)">
                    <h4>{{ item.title }}</h4>
                    <p>{{ item.content.file_name }}</p>
                    <p>{{ item.content.file_size }}</p>
                    <el-popover @click.stop placement="bottom" width="120px" trigger="hover" hide-after="0">
                        <template #reference>
                            <span v-if="!isSendMsg" class="edit-icon" @click.stop>
                                <el-icon>
                                    <MoreFilled />
                                </el-icon>
                            </span>
                        </template>
                        <template #default>
                            <ul class="popover-list" @click.stop>

                                <li class="edit-icon" @click.stop="handleEdit(item, 10)">
                                    <el-icon>
                                        <Edit></Edit>
                                    </el-icon> 编辑
                                </li>
                                <li class="delete-icon" @click.stop="deleteItem(item, index, 10)">
                                    <el-icon>
                                        <Delete />
                                    </el-icon> 删除
                                </li>
                            </ul>
                        </template>

                    </el-popover>
                </el-card>
            </div>
        </template> -->
        <!-- <template v-if="msgType == 9 || !isSendMsg">
            <label class="tag-title">名片素材</label>
            <div class="material-cards">
                <el-card v-if="!isSendMsg && !isAddtask" class="card-item avatar add" @click="openCreate(9)">
                    <el-icon>
                        <Plus></Plus>
                    </el-icon>
                </el-card>
                <el-card class="card-item avatar" v-for="item in userList" :class="{ active: select_id == item.id || item.active }"
                    @click="selectCard(item)">

                    <h4>
                        <el-image class="avatar" :src="item.content.userInfo?.avatar"></el-image>
                        <span class="name">{{ item.content.userInfo.nickname }}</span>
                       
                    </h4>
                    <p class="card-small">个人名片</p>
                    <el-popover @click.stop placement="bottom" width="120px" trigger="hover" hide-after="0">
                        <template #reference>
                            <span v-if="!isSendMsg" class="edit-icon" @click.stop>
                                <el-icon>
                                    <MoreFilled />
                                </el-icon>
                            </span>
                        </template>
                        <template #default>
                            <ul class="popover-list" @click.stop>

                                <li class="edit-icon" @click.stop="handleEdit(item, 9)">
                                    <el-icon>
                                        <Edit></Edit>
                                    </el-icon> 编辑
                                </li>
                                <li class="delete-icon" @click.stop="deleteItem(item, index, 9)">
                                    <el-icon>
                                        <Delete />
                                    </el-icon> 删除
                                </li>
                            </ul>
                        </template>

                    </el-popover>
                </el-card>
            </div>
        </template> -->
        <!-- <template v-if="msgType == 5 || !isSendMsg">
            <label class="tag-title">小程序素材</label>
            <div class="material-cards">
                <el-card v-if="!isSendMsg && !isAddtask" class="card-item avatar mini add" @click="openCreate(5)">
                    <el-icon>
                        <Plus></Plus>
                    </el-icon>
                </el-card>
                <el-card class="card-item avatar mini" v-for="item in miniList"
                    :class="{ active: select_id == item.id || item.active }" @click="selectCard(item)">

                    <p>
                        <el-image class="avatar" :src="item.content.head_img_url"></el-image>
                        <span class="name">{{ item.content.des }}</span>

                    </p>
                    <h4>{{ item.content.title }}</h4>
                    <p class="mini-icon">
                        <el-icon style="color: rgb(109, 109.1, 203.1);">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xiaochengxu1"></use>
                            </svg>
                        </el-icon>
                        小程序
                    </p>
                    <el-popover @click.stop placement="bottom" width="120px" trigger="hover" hide-after="0">
                        <template #reference>
                            <span v-if="!isSendMsg" class="edit-icon" @click.stop>
                                <el-icon>
                                    <MoreFilled />
                                </el-icon>
                            </span>
                        </template>
                        <template #default>
                            <ul class="popover-list" @click.stop>

                                <li class="edit-icon" @click.stop="handleEdit(item, 9)">
                                    <el-icon>
                                        <Edit></Edit>
                                    </el-icon> 编辑
                                </li>
                                <li class="delete-icon" @click.stop="deleteItem(item, index, 9)">
                                    <el-icon>
                                        <Delete />
                                    </el-icon> 删除
                                </li>
                            </ul>
                        </template>

                    </el-popover>
                </el-card>
            </div>
        </template> -->
        <template v-if="msgType == 7 || !isSendMsg">
            <label class="tag-title">链接素材</label>
            <div class="material-cards">
                <el-card v-if="!isSendMsg && !isAddtask" class="card-item link add" @click="openCreate(7)">
                    <el-icon>
                        <Plus></Plus>
                    </el-icon>
                </el-card>
                <el-card class="card-item link" v-for="item in linkList" :class="{ active: select_id == item.id || item.active }"
                    @click="selectCard(item)">
                    <h4 @click.stop="openLink(item.content.url, item)">{{ item.content.title }}</h4>
                    <div @click.stop="openLink(item.content.url, item)">
                        <p>{{ item.content.content }}</p>
                        <el-image class="" :src="item.content.img_url" fit="cover"></el-image>
                    </div>


                    <el-popover @click.stop placement="bottom" width="120px" trigger="hover" hide-after="0">
                        <template #reference>
                            <span v-if="!isSendMsg" class="edit-icon" @click.stop>
                                <el-icon>
                                    <MoreFilled />
                                </el-icon>
                            </span>
                        </template>
                        <template #default>
                            <ul class="popover-list" @click.stop>

                                <li class="edit-icon" @click.stop="handleEdit(item, 7)">
                                    <el-icon>
                                        <Edit></Edit>
                                    </el-icon> 编辑
                                </li>
                                <li class="delete-icon" @click.stop="deleteItem(item, index, 7)">
                                    <el-icon>
                                        <Delete />
                                    </el-icon> 删除
                                </li>
                            </ul>
                        </template>

                    </el-popover>
                </el-card>
            </div>
        </template>
        <template v-if="msgType == 6 || !isSendMsg">
            <label class="tag-title">位置素材</label>
            <div class="material-cards">
                <el-card v-if="!isSendMsg && !isAddtask" class="card-item images add" @click="openCreate(6)">
                    <el-icon>
                        <Plus></Plus>
                    </el-icon>
                </el-card>
                <el-card class="card-item images" v-for="item in addressList" :class="{ active: select_id == item.id || item.active }"
                    @click="selectCard(item)">
                    <h4 style="margin-bottom: 0;">{{ item.content.address }}</h4>
                    <p style="margin-bottom: 5px;line-height: 18px;">{{ item.content.detailed_address }}</p>
                    <el-image class="" :src="addess_png" fit="cover"></el-image>

                    <el-popover @click.stop placement="bottom" width="120px" trigger="hover" hide-after="0">
                        <template #reference>
                            <span v-if="!isSendMsg" class="edit-icon" @click.stop>
                                <el-icon>
                                    <MoreFilled />
                                </el-icon>
                            </span>
                        </template>
                        <template #default>
                            <ul class="popover-list" @click.stop>

                                <li class="edit-icon" @click.stop="handleEdit(item, 6)">
                                    <el-icon>
                                        <Edit></Edit>
                                    </el-icon> 编辑
                                </li>
                                <li class="delete-icon" @click.stop="deleteItem(item, index, 6)">
                                    <el-icon>
                                        <Delete />
                                    </el-icon> 删除
                                </li>
                            </ul>
                        </template>

                    </el-popover>
                </el-card>
            </div>
        </template>
        <!-- </el-card> -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="1000px" align-center destroy-on-close>
            <div class="dialog-box">
                <MaterialPublic ref="materialRef" @hideMaterial="hideMaterial" :editData="editData"
                    :type="materialType">
                </MaterialPublic>
            </div>

        </el-dialog>
        <MhtMessageBox title="提示" boxText="确认删除该素材吗？" :show="dialogDelete" @confirm="submitDelete"
            @close="dialogDelete = false" :mhtLoading="loading"></MhtMessageBox>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { materialList, addMaterial, updataMaterial, deletaMaterial } from '@/api/material'
import MaterialPublic from '@/components/MaterialPublic/index.vue'
import addess from '@/assets/images/addess.png'
const props = defineProps({
    isSendMsg: false,
    msgType: 1,
    isAddtask: false
})
const emits = defineEmits(['update:modelValue'])
const addess_png = addess
const materialRef = ref()
const dialogVisible = ref(false)
const materialType = ref('')
const materialTypes = [{
    label: '文本',
    value: 1
}, {
    label: '图片',
    value: 2
}, {
    label: '语音',
    value: 3
}, {
    label: '视频',
    value: 4
}, {
    label: '小程序',
    value: 5
}, {
    label: '位置',
    value: 6
}, {
    label: '链接',
    value: 7
}, {
    label: 'GIF图片',
    value: 8
}, {
    label: '名片',
    value: 9
}, {
    label: '文件',
    value: 10
}]
const editData = ref(null)

const query = reactive({
    title: '',
    type: 1,
    page: 1,
    page_size: 100
})
const total = ref(0)
let allSelects = []
const tableData = ref([])
const isEdit = ref(false)
const search = () => {
    query.page = 1
    getTable()
}
const handleSizeChange = (e) => {
    query.page = 1
    query.page_size = e
    getTable()
}
const handleCurrentChange = (e) => {
    query.page = e
    getTable()
}




const dialogTitle = ref('')
const openCreate = (type) => {
    materialType.value = type
    materialTypes.forEach((el) => {
        if (el.value == type) {
            dialogTitle.value = el.label
        }
    })
    dialogVisible.value = true
}

const openLink = (path, row) => {
    if(!props.isSendMsg){
        open(path)

    } else {
        selectCard(row)
    }
}


const textList = ref([])
const imgList = ref([])
const videoList = ref([])
const gifList = ref([])
const fileList = ref([])
const userList = ref([])
const linkList = ref([])
const addressList = ref([])
const miniList = ref([])
const voiceList = ref([])
const getTable = async (type) => {
    const res = await materialList({
        title: '',
        page: 1,
        page_size: 100,
        type: type
    })
    switch (type) {
        case 1:
            textList.value = res.list.map((el) => {
                el.content = JSON.parse(el.content)
                return el
            })
            break;
        case 2:
            imgList.value = res.list.map((el) => {
                el.content = JSON.parse(el.content)
                return el
            })
            break;
        case 3:
            voiceList.value = res.list.map((el) => {
                el.content = JSON.parse(el.content)
                return el
            })
            break;
        case 4:
            videoList.value = res.list.map((el) => {
                el.content = JSON.parse(el.content)
                return el
            })
            break;
        case 5:
            miniList.value = res.list.map((el) => {
                el.content = JSON.parse(el.content)
                return el
            })
            break;
        case 8:
            gifList.value = res.list.map((el) => {
                el.content = JSON.parse(el.content)
                return el
            })
        case 10:
            fileList.value = res.list.map((el) => {
                el.content = JSON.parse(el.content)
                return el
            })
            break;
        case 9:
            userList.value = res.list.map((el) => {
                el.content = JSON.parse(el.content)
                return el
            })
            break;
        case 6:
            addressList.value = res.list.map((el) => {
                el.content = JSON.parse(el.content)
                return el
            })
            break;
        case 7:
            linkList.value = res.list.map((el) => {
                el.content = JSON.parse(el.content)
                return el
            })
            break;
        default:
            break;
    }

    total.value = res.total
}
// 多选
const handleSelectionChange = (e) => {

    allSelects = e.map((el) => {
        return el.id
    })
}
const selectionDelete = () => {
    if (allSelects.length == 0) return
    ElMessageBox.confirm(
        '确认批量移除选中素材吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // await removeMember({
            //     member_list: allUser_ids,
            //     robot_id: userRobotStore.robotInfo.id,
            //     room_id: detailInfo.groupDetails.room_id
            // })
            query.page = 1
            getTable()
        })
        .catch(() => {

        })
}
const dialogDelete = ref(false)
let deleteData = {}
let deleteIndex = 0
const deleteItem = (row, index, type) => {
    materialType.value = type
    deleteIndex = index
    deleteData = row
    dialogDelete.value = true

}
const loading = ref(false)
const submitDelete = async () => {
    loading.value = true
    await deletaMaterial(deleteData.id)
    dialogDelete.value = false
    loading.value = false
    switch (Number(materialType.value)) {
        case 1:
            textList.value.splice(deleteIndex, 1)
            break;
        case 2:
            imgList.value.splice(deleteIndex, 1)
            break;
        case 3:
            voiceList.value.splice(deleteIndex, 1)
            break;
        case 4:
            videoList.value.splice(deleteIndex, 1)
            break;
        case 5:
            miniList.value.splice(deleteIndex, 1)
            break;
        case 8:
            gifList.value.splice(deleteIndex, 1)
        case 10:
            fileList.value.splice(deleteIndex, 1)
            break;
        case 9:
            userList.value.splice(deleteIndex, 1)
            break;
        case 6:
            addressList.value.splice(deleteIndex, 1)
            break;
        case 7:
            linkList.value.splice(deleteIndex, 1)
            break;
        default:
            break;
    }


}
const addData = () => {
    editData.value = null
    dialogVisible.value = true
}
const handleEdit = (row, type) => {
    materialType.value = type
    materialTypes.forEach((el) => {
        if (el.value == type) {
            dialogTitle.value = el.label
        }
    })
    editData.value = row
    dialogVisible.value = true
    nextTick(() => {
        materialRef.value.show(row)

    })
}
const hideMaterial = () => {
    dialogVisible.value = false
    getTable(materialType.value)
}
const getTypeName = (type) => {
    let typeName = ''
    materialTypes.forEach((el) => {
        if (type == el.value) {
            typeName = el.label
        }
    })
    return typeName
}

const select_id = ref('')
let taskList = []
const selectCard = (row) => {
    if (props.isSendMsg) {
        select_id.value = row.id

        if (props.msgType == 5) {
            let obj = {
                "app_id": row.content.app_id,
                "des": row.content.des,
                "head_img_url": row.content.head_img_url,
                "page_path": row.content.page_path,
                "size": row.content.size,
                "thumb_aes_key": row.content.thumb_aes_key,
                "thumb_file_id": row.content.thumb_file_id,
                "thumb_md5": row.content.thumb_md5,
                "title": row.content.title,
                "wechat_id": row.content.wechat_id
            }
            emits('update:modelValue', obj)
        } else if (props.msgType == 3) {
            let obj = {
                "aes_key": row.content.aes_key,
                "md5": row.content.md5,
                "size": row.content.size,
                "voice_id": row.content.voice_id,
                "voice_time": row.content.voice_time
            }
            emits('update:modelValue', obj)
        } else {
            emits('update:modelValue', row.content)

        }
    } else if (props.isAddtask) {
        // taskList = []
        if (!row.active) {
            row.active = true
            taskList.push({
                    "content": JSON.stringify(row.content),
                    "interval_seconds": 1,
                    "type": row.type
            })
            emits('update:modelValue', taskList)
        
    } else {
        // row.active = false
        // taskList = 
    }
}

}
onMounted(() => {
    getTable(1)
    getTable(2)
    getTable(3)
    getTable(4)
    getTable(5)
    getTable(6)
    getTable(7)
    getTable(8)
    getTable(9)
    getTable(10)

})
</script>
<style lang="scss" scoped>
.materialLibrary-container {
    padding: var(--el-main-padding);
    // .el-card {
    .tag-title {
        display: inline-block;
        font-size: 15px;
        font-weight: bold;
        line-height: 30px;
        padding-left: 20px;
        position: relative;

        &::before {
            position: absolute;
            content: '';
            width: 4px;
            height: 100%;
            top: 0;
            left: 0;
            background-color: var(--el-color-primary);
        }
    }

    .material-cards {
        padding: 20px 0 20px 40px;
        overflow: hidden;

        .active {
            background-color: var(--el-color-primary-light-7)
        }

        .card-item {
            height: 110px;
            width: 220px;
            float: left;
            margin-bottom: 20px;
            margin-right: 20px;
            cursor: pointer;
            transition: 0.3s;
            position: relative;

            h4 {
                line-height: 28px;
                font-size: 14px;
                margin-bottom: 5px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                position: relative;
                z-index: 0;
                font-weight: normal;
            }

            p {
                font-size: 13px;
                color: var(--el-text-color-secondary);
                line-height: 24px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                position: relative;
                z-index: 0;
            }

            &:hover {
                transform: translateY(-10px);
            }

            .name {
                margin-left: 5px;
                transform: translateY(2px);
                display: inline-block;
            }

            .sex-icon {
                transform: translateY(3px);
                margin-left: 4px;
            }
        }

        .images {
            height: 160px;

            // h4 {
            //     margin-top: 5px;
            // }

            .el-image {
                height: 86px;
                width: 100%;
                position: relative;
                z-index: 0;
            }

            video {
                height: 86px;
                width: 100%;
                position: relative;
                z-index: 0;
            }
        }

        .avatar {
            height: 110px;

            // h4 {
            //     line-height: 38px;
            // }

            .el-image {
                height: 40px;
                width: 40px;
                border-radius: 4px;
                vertical-align: middle;
            }

            .card-small {
                font-size: 12px;
                border-top: 1px solid var(--el-border-color);
                margin-top: 13px;
                line-height: 28px;
            }
        }

        .link {
            height: 110px;

           
            .el-image {
                height: 50px;
                width: 50px;
                float: right;
                transform: translateY(-5px);
            }

            div {
                p {
                    float: left;
                    width: calc(100% - 55px);
                    line-height: 1.5;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: normal;
                    /* 防止文本换行 */
                    display: -webkit-box;
                    -webkit-line-clamp: 2; //显示两行文本
                    -webkit-box-orient: vertical;
                }
            }
        }

        .mini {
            height: 130px;

            .mini-icon {
                padding-top: 2px;
                font-size: 12px;
                border-top: 1px solid var(--el-border-color);

                .el-icon {
                    font-size: 14px;
                    transform: translateY(2px);
                }
            }
        }



        .add {
            :deep(.el-card__body) {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 30px;
                color: var(--el-text-color-disabled)
            }

        }
    }

    // }
    .edit-icon {
        position: absolute;
        right: 5px;
        top: 0px;
        // display: none;
        height: 30px;
        width: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 8px;
        transition: all 0.1s;
        z-index: 1;

        i {
            position: relative;
            left: 2px;
            top: 3px;
            color: var(--el-color-primary);
            // color: #fff;
            // transition: all 0.1s;
            // transform: rotate(90deg);
        }


    }

    .audio {
        height: 26px;
        background-color: var(--el-color-primary-light-5);
        line-height: 26px;
        margin-bottom: 10px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        padding-left: 20px
    }


}

.popover-list {
    li {
        height: 32px;
        line-height: 32px;
        padding-left: 10px;
        // border-radius: 6px;
        cursor: pointer;

        // color: var(--el-color-primary);
        .el-icon {
            position: relative;
            top: 2px;
            margin-right: 4px;
        }

        &:hover {
            background-color: var(--el-color-primary-light-9);
        }
    }

    .rizhi-icon {
        color: var(--el-color-warning);
    }

    .edit-icon {
        color: var(--el-color-primary);
    }

    .delete-icon {
        color: var(--el-color-danger);
    }

}
</style>