<template>
    <el-scrollbar>
        <div class="materia-element keyword" v-if="keyWordsText">
            <el-image class="tobot-image" :src="mihoutai"></el-image>
            <div class="materia-info">
                <div class="text">
                    {{ keyWordsText }}
                </div>
            </div>
        </div>
        <draggable v-model="list" @update="endDraggable" :disabled="disabled">
            <template #item="{ element, index }">
                <div class="materia-element">
                    <el-image class="tobot-image" :src="robotInfo.head_url"></el-image>
                    <div class="materia-info">
                        <span class="robot-name">{{ robotInfo.name }}
                            <el-icon class="edit" @click="editMateria(index, element)" v-if="!disabled">
                                <Edit />
                            </el-icon>
                            <el-icon class="remove" @click="removeMateria(index)" v-if="!disabled">
                                <Delete />
                            </el-icon></span>

                        <div class="text" v-if="element.type == 1">
                            <pre>{{ element.content.message }}</pre>
                        </div>

                        <div class="image" v-if="element.type == 2">
                            <el-image :src="element.content.message" fit="cover"
                                :preview-src-list="[element.content.message]" preview-teleported>
                                <template #placeholder>
                                    <div class="image-slot">Loading<span class="dot">...</span></div>
                                </template>
                            </el-image>
                        </div>
                        <div class="gif" v-if="element.type == 8">
                            <el-image :src="element.content.img_url" fit="cover"
                                :preview-src-list="[element.content.img_url]" preview-teleported>
                                <template #placeholder>
                                    <div class="image-slot">Loading<span class="dot">...</span></div>
                                </template>
                            </el-image>
                        </div>
                        <div class="text audio" v-if="element.type == 3">
                            <el-icon>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-yuyin"></use>
                                </svg>
                            </el-icon>

                            {{ element.content.voice_time }} ''
                        </div>
                        <div class="video" v-if="element.type == 4">
                            <video :src="element.content.file_url" controls></video>
                        </div>
                        <div class="text mini" v-if="element.type == 9">
                            <div class="card-user">
                                <el-image class="avatar" :src="element.content.userInfo?.avatar"></el-image>
                                <span class="name">{{ element.content.userInfo.nickname
                                }}</span>
                            </div>
                            <p>个人名片</p>

                        </div>
                        <div class="text mini chengxu" v-if="element.type == 5">
                            <div class="card-user">
                                <el-image class="avatar" :src="element.content.head_img_url"></el-image>
                                <span class="name">{{ element.content.des }}</span>
                            </div>
                            <span class="cg-text">{{ element.content.title }}</span>
                            <p><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>

                        </div>
                        <div class="text address" v-if="element.type == 6">
                            <h4 style="margin-bottom: 0;">{{ element.content.address }}
                            </h4>
                            <p style="margin-bottom: 5px;line-height: 18px;">{{
                                element.content.detailed_address }}</p>
                            <el-image class="" :src="addess_img" fit="cover"></el-image>
                        </div>
                        <div class="text link" v-if="element.type == 7">
                            <h4 @click.stop="openLink(element.content.url)">
                                {{ element.content.title }}
                            </h4>
                            <div @click.stop="openLink(element.content.url)">
                                <p>{{ element.content.content }}</p>
                                <el-image class="" :src="element.content.img_url" fit="cover"></el-image>
                            </div>
                        </div>

                        <div class="text file" v-if="element.type == 10">
                            <div class="file-box">
                                <label>{{ element.content.file_name }}</label>
                                <span>{{ element.content.file_size }}</span>
                            </div>
                            <el-icon>
                                <Document />
                            </el-icon>
                            <!-- <el-image class="" :src="'element.content.img_url'"
                        fit="cover"></el-image> -->
                        </div>
                        <div class="text" v-if="element.type == 11">
                            <pre><span v-if="element.content.group.group_id">通知群：<TagGroup :tag_id="element.content.group.group_id"
                :robotInfo="robotInfo"></TagGroup></span>
        <span v-if="element.content.contact.contact_id">通知管理员：<Tag :tag_id="element.content.contact.contact_id"
                :robotInfo="robotInfo"></Tag></span>
        通知模版: {{ element.content.group.template }}
        <span v-if="element.content.auto_reply">自动回复内容：{{ element.content.auto_reply }}</span>
    </pre>
                        </div>
                        <p class="interval-seconds">发送间隔时间：{{ element.interval_seconds }}s
                        </p>
                    </div>
                </div>
            </template>
        </draggable>
    </el-scrollbar>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { contactDetail } from '@/api/user'
import { groupDetail } from '@/api/group'
import draggable from 'vuedraggable'
import mihoutai from '@/assets/images/mihoutai.png'
import addess_img from '@/assets/images/addess.png'
const emits = defineEmits(["update:modelValue", "editMateria"])
const props = defineProps({
    materiaList: {
        type: Array,
        default: []
    },
    robotInfo: {
        type: Object,
        default: {}
    },
    disabled: {
        type: Boolean,
        default: false
    },
    keyWords: {
        type: String,
        default: ''
    }
})
const keyWordsText = ref(props.keyWords)
const list = ref(props.materiaList)
watch(() => props.materiaList, (val) => {
    list.value = val
})
watch(() => props.keyWords, (val) => {
    keyWordsText.value = val
})


// 拖拽结束
const endDraggable = () => {
    emits("update:modelValue", list.value)
}

// 删除话术
const removeMateria = (index) => {
    list.value.splice(index, 1)
    emits("update:modelValue", list.value)
}

// 编辑单条话术
const editMateria = (index, item) => {
    emits("editMateria", item)
}

const getContactDetail = async (id) => {
    const res = await contactDetail({
        user_id: id,
        robot_id: props.robotInfo.id
    })
    return res.nickname

}
const getGroupDetail = async (id) => {
    const res = await groupDetail({
        group_id: id,
        robot_id: props.robotInfo.id
    })
    return res.room_name

}
onMounted(() => {
    // list.value = props.materiaList
    console.log(props.keyWords)
})
</script>

<style lang="scss" scoped>
.materia-element {
    overflow: hidden;
    margin-bottom: 20px;

    .tobot-image {
        float: left;
        width: 36px;
        height: 36px;
        margin-right: 15px;
        border-radius: 4px;
    }

    .materia-info {
        width: 300px;
        float: left;



        .robot-name {
            display: block;
            font-size: 12px;
            color: var(--el-text-color-secondary);
            margin-bottom: 6px;

            .edit {
                color: var(--el-color-primary);
                margin-left: 6px;
                transform: translateY(3px);
                cursor: pointer;
                font-size: 16px;
            }

            .remove {
                color: var(--el-color-danger);
                margin-left: 6px;
                transform: translateY(3px);
                cursor: pointer;
                font-size: 16px;
            }
        }

        .text {
            display: inline-block;
            line-height: 22px;
            background-color: #fff;
            border-radius: 8px;
            padding: 6px 12px;
            font-size: 14px;
            position: relative;

            pre {
                white-space: break-spaces;
            }

            &::before {
                position: absolute;
                width: 0;
                height: 0;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                border-right: 10px solid #fff;
                content: '';
                top: 10px;
                left: -8px;
            }
        }

        .image {
            height: auto;

            .el-image {
                width: 120px;
                height: auto;
                border-radius: 6px;
            }
        }

        .gif {
            .el-image {
                width: 120px;
                height: auto;
            }
        }

        .audio {
            width: 100px;

            .el-icon {
                font-size: 20px;
                transform: translateY(5px);
            }
        }

        .video {
            video {
                width: 180px;
                height: auto;
            }
        }

        .mini {
            height: 95px;
            width: 220px;
            background-color: #fff;
            padding: 0;

            .card-user {
                overflow: hidden;
                padding: 10px;
            }

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

            .name {
                font-size: 15px;
                margin-left: 5px;
                transform: translateY(7px);
                display: inline-block;
                float: left;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            p {
                height: 20px;
                line-height: 22px;
                border-top: 1px solid var(--el-border-color);
                font-size: 12px;
                color: var(--el-text-color-secondary);
                padding-left: 10px;
            }
        }

        .chengxu {
            height: 103px;

            .el-image {
                height: 30px;
                width: 30px;
                margin-right: 5px;
            }

            .name {
                transform: translateY(0px);
                color: var(--el-text-color-secondary);
                font-size: 12px;
                line-height: 30px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .cg-text {
                display: block;
                padding-left: 10px;
                padding-right: 10px;
                line-height: 20px;
                margin-bottom: 6px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            p {
                line-height: 25px;
            }
        }

        .address {
            padding: 0;
            // overflow: hidden;
            width: 220px;

            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;
                padding: 0 10px;
                margin-top: 5px;
            }

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

            }

            .el-image {
                height: 86px;
                width: 100%;
                position: relative;
                z-index: 0;
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;
                top: 5px;
            }
        }

        .link {
            width: 220px;
            height: 100px;

            .el-image {
                height: 46px;
                width: 46px;
                float: right;
                // transform: translateY(-17px);
                margin-right: 0;
            }

            div {
                // margin-top: 13px;
                height: 50px;

                h4 {
                    font-size: 14px;
                    line-height: 22px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                p {
                    color: var(--el-text-color-secondary);
                    height: 48px;
                    font-size: 12px;
                    float: left;
                    width: calc(100% - 55px);
                    line-height: normal;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: normal;
                    /* 防止文本换行 */
                    display: -webkit-box;
                    -webkit-line-clamp: 3; //显示两行文本
                    -webkit-box-orient: vertical;
                }
            }
        }

        .file {
            width: 220px;
            height: 75px;

            .file-box {
                float: left;
                width: calc(100% - 50px);

            }

            .el-image {
                width: 46px;
                height: 46px;
                float: right;
                margin-right: 0;
                transform: translateY(10px);
            }

            .el-icon {
                float: right;
                font-size: 40px;
                color: var(--el-color-primary);
                transform: translateY(12px);
            }

            label {
                display: block;
                line-height: 30px;
                transform: translateY(2px);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 6px;
            }

            span {
                display: inline-block;
                font-size: 12px;
                color: var(--el-text-color-secondary);
                line-height: normal;
                transform: translateY(-8px);
            }
        }

        .interval-seconds {
            font-size: 12px;
            color: var(--el-text-color-secondary);
            margin-top: 10px;
        }
    }
}

.keyword {
    .tobot-image {
        float: right;
        margin-right: 0;
        margin-left: 15px;
    }

    .materia-info {
        text-align: right;
        float: right;

        .text {


            &::before {
                position: absolute;
                width: 0;
                height: 0;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                border-left: 10px solid #fff;
                border-right: 0;
                content: '';
                top: 10px;
                right: -8px;
                left: auto;
            }
        }
    }

}

.image-slot {
    height: 100%;
    background-color: #F0F2F5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--el-text-color-secondary);
}
</style>