<template>
    <div>
        <!-- <label>配置关键字素材</label> -->
        <div class="form-content">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
                <el-form-item label="关键字" prop="keyword">
                    <el-input v-model="ruleForm.keyword" placeholder="请输入关键字"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <el-button type="primary" icon="Plus" @click="addhuasu">添加素材</el-button>
        <div class="meaasge">
            <Scripts :disabled="false" :keyWords="ruleForm.keyword" v-model="materiaList" :materiaList="materiaList" :robotInfo="userRobotStore.robotInfo" @editMateria="editMateria"></Scripts>
            <!-- <el-scrollbar>
                <ul>
                    <li class="materia-item keyword" v-if="ruleForm.keyword">
                        <el-image class="tobot-image" :src="mihoutai"></el-image>
                        <div class="materia-info">
                            <div class="text">
                                {{ ruleForm.keyword }}
                            </div>
                        </div>
                    </li>
                    <li class="materia-item" v-for="(item, index) in materiaList" :key="item.id">
                        <template v-if="item.type != 11">
                            <el-image class="tobot-image" :src="userRobotStore.robotInfo.head_url"></el-image>
                            <div class="materia-info">
                                <span class="robot-name">{{ userRobotStore.robotInfo.name }}
                                    <el-icon class="remove" @click="removeMateria(index)">
                                        <Delete />
                                    </el-icon></span>

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

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

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

                                </div>
                                <div class="text mini chengxu" v-if="item.type == 5">
                                    <div class="card-user">
                                        <el-image class="avatar" :src="item.content.head_img_url"></el-image>
                                        <span class="name">{{ item.content.des }}</span>
                                    </div>
                                    <span class="cg-text">{{ item.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="item.type == 6">
                                    <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>
                                </div>
                                <div class="text link" v-if="item.type == 7">
                                    <h4 @click.stop="openLink(item.content.url)">
                                        {{ item.content.title }}
                                    </h4>
                                    <div @click.stop="openLink(item.content.url)">
                                        <p>{{ item.content.content }}</p>
                                        <el-image class="" :src="item.content.img_url" fit="cover"></el-image>
                                    </div>
                                </div>

                                <div class="text file" v-if="item.type == 10">
                                    <div class="file-box">
                                        <label>{{ item.content.file_name }}</label>
                                        <span>{{ item.content.file_size }}</span>
                                    </div>
                                    <el-icon>
                                        <Document />
                                    </el-icon>
                                   
                                </div>
                               
                                <p class="interval-seconds">发送间隔时间：{{ item.interval_seconds }}s</p>
                            </div>
                        </template>
                    </li>
                </ul>
            </el-scrollbar> -->
        </div>

        <div class="btn-box">
            <el-button type="primary" :class="{ 'no-click': mhtLoading }" @click="save">
                <el-icon v-if="mhtLoading" class="mht-loading" style="margin-right: 4px;">
                    <Loading />
                </el-icon>
                <el-icon v-else style="margin-right: 4px;">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baocun"></use>
                    </svg></el-icon>
                保 存
            </el-button>
        </div>
        <el-dialog v-model="dialogVisible" title="配置素材" width="1000px" align-center destroy-on-close>
            <div class="dialog-box">

                <UserMessage :isHs="true" @hideMessage="hideMessage" :isKeyWords="true" keyWordsType="group" :room_id="groupInfo.room_id" :editData="editData">
                </UserMessage>

            </div>

        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { keywords, addKeywords, addKeywordsMaterial, keywordsMaterials, upKeyword, deleteKeyword } from '@/api/keyword'
import robotStore from '@/store/modules/robotStore'
import mihoutai from '@/assets/images/mihoutai.png'
const userRobotStore = robotStore()
const ruleFormRef = ref()
const ruleForm = ref({})
const rules = ref({
    keyword: [
        {
            required: true,
            message: '请输入关键字',
            trigger: 'blur',
        }
    ],

})
const props = defineProps({
    groupInfo: {},
    keywordInfo: {}
})
// let keyword_id = ''
const materiaList = ref([])
const getMaterias = async () => {
    const res = await keywordsMaterials({
        keyword_id: props.keywordInfo?.id,
        page: 1,
        page_size: 100
    })
    materiaList.value = res.list.map((el) => {
        el.content = JSON.parse(el.content)
        return el
    })
}

const dialogVisible = ref(false)
const addhuasu = () => {
    dialogVisible.value = true
    editData.value = null
}
const hideMessage = (e) => {
    dialogVisible.value = false
    if(editData.value == null){
        materiaList.value.push(e)

    }
}
const emits = defineEmits(['hideKey'])

const mhtLoading = ref(false)
const save = async () => {
    await ruleFormRef.value.validate(async (valid, fields) => {
        if (valid) {
            if (materiaList.value.length == 0) {
                ElNotification({
                    type: 'warning',
                    message: '请至少添加一条素材'
                })
                return
            }
            let key_id = ''
            mhtLoading.value = true
            try {


                if (props.keywordInfo?.id) {
                    key_id = props.keywordInfo?.id
                    await upKeyword({
                        "keyword": ruleForm.value.keyword,

                    }, key_id)
                } else {
                    const resKeys = await addKeywords({
                        "keyword": ruleForm.value.keyword,
                        "app_id": props.groupInfo.app_id,
                    })
                    key_id = resKeys.id
                }

                const resMaterial = await addKeywordsMaterial({
                    "material_list": materiaList.value.map((el) => {

                        return {
                            content: JSON.stringify(el.content),
                            type: el.type,
                            interval_seconds: el.interval_seconds
                        }
                    })
                }, key_id)
                mhtLoading.value = false
                emits('hideKey')
            } catch {
                mhtLoading.value = false
            }
        }
    })
}
const removeMateria = (index) => {
    materiaList.value.splice(index, 1)
}

const editData = ref(null)
const editMateria = (item) => {
    dialogVisible.value = true
    editData.value = item
}
onMounted(() => {
    if (props.keywordInfo?.id) {
        ruleForm.value.keyword = props.keywordInfo.keyword
        getMaterias()
    }
})

</script>

<style lang="scss" scoped>
.meaasge {
    height: 400px;
    border: 1px solid var(--el-border-color);
    background-color: var(--el-color-primary-light-9);
    padding: 25px;
    margin-top: 20px;
}

.materia-item {
    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;

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

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

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

            &::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;
            }

            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;
            }
        }

        .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;
            }
        }
    }

}

.btn-box {
    margin-top: 20px;
    text-align: right;
}
</style>