<template>
    <div class="message-container">
        <!-- <div>用户：{{ messageMain.nickname }}</div>
        <div>头像：<el-image style="width: 40px; " :src="messageMain.avatar" /></div> -->

        <el-tabs v-if="!editData" v-model="ruleForm.type" class="demo-tabs" @tab-change="handleChange">

            <el-tab-pane v-for="item in materialTypes" :label="item.label" :key="item.value" :name="item.value">

            </el-tab-pane>
        </el-tabs>
        <label style="font-size: 20px; color: var(--el-color-primary)" v-if="editData" class="el-form-item__label">{{ materialTypes.find(el => el.value == editData.type)?.label }}</label>
        <div class="message-card">

            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
                <!-- 文本 -->
                <el-form-item v-if="ruleForm.type == 1" label="消息内容" prop="content.message" :rules="{
                    required: true,
                    message: '请输入消息内容',
                    trigger: 'blur',
                }">
                    <el-input ref="inputRef" type="textarea" row="3" v-model="ruleForm.content.message"
                        placeholder="请输入消息内容" />
                    <V3Emoji @click-emoji="onEmojiSelect" :recent="true"></V3Emoji>
                </el-form-item>
                <!-- 卡片 -->
                <el-form-item v-if="ruleForm.type == 9" label="选择用户名片" prop="content.card_user_id" :rules="{
                    required: true,
                    message: '请选择名片',
                    trigger: 'change',
                }">
                    <el-select-v2 v-model="ruleForm.content.card_user_id" popper-class="costom-select"
                        :options="cardList" placeholder="请选择名片" style="width: 500px" :props="v2props" filterable
                        @change="changeCard">
                        <template #default="{ item }">
                            <div class="costom-select-item">
                                <el-image :src="item.avatar"></el-image>
                                <span>{{ item.nickname }}</span>
                            </div>
                        </template>
                        <template #footer v-if="cardTotal > 100">
                            <el-pagination v-model:current-page="cardPage" :page-size="100" size="small" background
                                layout="prev, pager, next" :total="cardTotal" class="mt-4"
                                @current-change="currentChange" />
                        </template>
                    </el-select-v2>
                </el-form-item>

                <!-- 链接 -->
                <template v-if="ruleForm.type == 7">
                    <el-form-item label="标题" prop="content.title" :rules="{
                        required: true,
                        message: '请输入链接标题',
                        trigger: 'blur',
                    }">
                        <el-input type="text" v-model="ruleForm.content.title" placeholder="请输入链接标题" />
                    </el-form-item>
                    <el-form-item label="内容" prop="content.content" :rules="{
                        required: true,
                        message: '请输入链接内容',
                        trigger: 'blur',
                    }">
                        <el-input type="textarea" row="3" v-model="ruleForm.content.content" placeholder="请输入链接内容" />
                    </el-form-item>
                    <el-form-item label="图片" prop="content.img_url" :rules="{
                        required: true,
                        message: '请上传图片',
                        trigger: 'change',
                    }">
                        <Upload v-model="ruleForm.content.img_url" type="image" accept="image/*" :action="robotHost"
                            @change="changeFile" @success="uploadSuccess" @error="uploadError">
                        </Upload>
                    </el-form-item>
                    <el-form-item label="链接地址" prop="content.url" :rules="{
                        required: true,
                        message: '请输入链接地址',
                        trigger: 'blur',
                    }">
                        <el-input type="text" v-model="ruleForm.content.url" placeholder="请输入链接地址" />
                    </el-form-item>
                </template>
                <!-- 位置 -->
                <div v-show="ruleForm.type == 6">
                    <el-form-item label="所在地区" :prop="ruleForm.type == 6 ? 'content.address' : ''" :rules="{
                        required: true,
                        message: '请输入所在地区',
                        trigger: 'blur',
                    }">
                        <el-input id="tipinput" type="text" v-model="ruleForm.content.address" placeholder="请输入链接标题" />
                    </el-form-item>

                    <el-form-item label="详细地址" :prop="ruleForm.type == 6 ? 'content.detailed_address' : ''" :rules="{
                        required: true,
                        message: '请输入详细地址',
                        trigger: 'blur',
                    }">
                        <el-input type="text" v-model="ruleForm.content.detailed_address" placeholder="请输入链接内容" />
                    </el-form-item>
                    <div id="container" style="height: 360px;"></div>
                </div>
                <!-- 小程序 -->
                <template v-if="ruleForm.type == 5">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="app_id" prop="content.app_id" :rules="{
                                required: true,
                                message: '请输入app_id',
                                trigger: 'blur',
                            }">
                                <p class="tip">请在企业微信手机客户端将小程序发送给自己，即可获取。</p>
                                <el-select v-model="ruleForm.content.msg_id" @change="changeAppId" placeholder="请选择"
                                    style="width: calc(100% - 80px);margin-right: 12px;">
                                    <el-option v-for="item in appList" :key="item.msg_id" :label="item.title"
                                        :value="item.msg_id">
                                    </el-option>
                                </el-select>
                                <el-button type="primary" @click="getAppList">刷新</el-button>
                                <!-- <el-input type="text" v-model="ruleForm.content.app_id" placeholder="请输入app_id" /> -->
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="page_path" prop="content.page_path" :rules="{
                                required: true,
                                message: '请输入page_path',
                                trigger: 'blur',
                            }">
                                <el-input type="text" v-model="ruleForm.content.page_path" placeholder="请输入page_path" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="des" prop="content.des" :rules="{
                                required: true,
                                message: '请输入des',
                                trigger: 'blur',
                            }">
                                <el-input type="text" v-model="ruleForm.content.des" placeholder="请输入des" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="head_img_url" prop="content.head_img_url" :rules="{
                                required: true,
                                message: '请输入head_img_url',
                                trigger: 'blur',
                            }">
                                <div class="up_head_img" style="display: flex;width: 100%;">
                                    <el-input type="text" v-model="ruleForm.content.head_img_url"
                                        placeholder="请输入head_img_url" style="width: calc(100% - 122px);margin-right: 12px;" />
                                        
                                        <Upload style="padding-top: 0;" v-model="ruleForm.content.head_img_url" type="button" accept="" :action="robotHost"
                                @change="changeFile" @success="disabledBtn = false" @error="uploadError"></Upload>
                                        <!-- <el-button type="primary" @click="getHeadImgUrl">上传</el-button> -->
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="size" prop="content.size" :rules="{
                                required: true,
                                message: '请输入size',
                                trigger: 'blur',
                            }">
                                <el-input type="text" v-model="ruleForm.content.size" placeholder="请输入size" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="field_path" prop="content.field_path" :rules="{
                                required: true,
                                message: '请输入field_path',
                                trigger: 'blur',
                            }">
                                <div class="up_head_img" style="display: flex;width: 100%;">
                                    <el-input type="text" v-model="ruleForm.content.field_path"
                                        placeholder="请输入field_path" style="width: calc(100% - 122px);margin-right: 12px;" />
                                        
                                        <Upload style="padding-top: 0;" v-model="ruleForm.content.file_url" type="button" accept="" :action="robotHost"
                                @change="changeFile" @success="uploadSuccessMini" @error="uploadError"></Upload>
                                        <!-- <el-button type="primary" @click="getHeadImgUrl">上传</el-button> -->
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="thumb_aes_key" prop="content.thumb_aes_key" :rules="{
                                required: true,
                                message: '请输入thumb_aes_key',
                                trigger: 'blur',
                            }">
                                <el-input type="text" v-model="ruleForm.content.thumb_aes_key"
                                    placeholder="请输入thumb_aes_key" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="thumb_file_id" prop="content.thumb_file_id" :rules="{
                                required: true,
                                message: '请输入thumb_file_id',
                                trigger: 'blur',
                            }">
                                <el-input type="text" v-model="ruleForm.content.thumb_file_id"
                                    placeholder="请输入thumb_file_id" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="thumb_md5" prop="content.thumb_md5" :rules="{
                                required: true,
                                message: '请输入thumb_md5',
                                trigger: 'blur',
                            }">
                                <el-input type="text" v-model="ruleForm.content.thumb_md5" placeholder="请输入thumb_md5" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="title" prop="content.title" :rules="{
                                required: true,
                                message: '请输入title',
                                trigger: 'blur',
                            }">
                                <el-input type="text" v-model="ruleForm.content.title" placeholder="请输入title" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="wechat_id" prop="content.wechat_id" :rules="{
                                required: true,
                                message: '请输入wechat_id',
                                trigger: 'blur',
                            }">
                                <el-input type="text" v-model="ruleForm.content.wechat_id" placeholder="请输入wechat_id" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </template>
                <!-- 语音 -->
                <template v-if="ruleForm.type == 3">
                    <el-form-item label="aes_key" prop="content.aes_key" :rules="{
                        required: true,
                        message: '请输入aes_key',
                        trigger: 'blur',
                    }">
                        <p class="tip">请在企业微信手机客户端将语音发送给自己，即可获取。</p>
                        <el-select v-model="ruleForm.content.aes_key" @change="changeVoice" placeholder="请选择"
                            style="width: 60%;margin-right: 12px;">
                            <el-option v-for="item in voiceList" :key="item.aes_key" :label="item.aes_key"
                                :value="item.aes_key">
                            </el-option>
                        </el-select>
                        <el-button type="primary" @click="getVoiceList">刷新</el-button>
                        <!-- <el-input type="text" v-model="ruleForm.content.aes_key" placeholder="请输入aes_key" /> -->
                    </el-form-item>
                    <el-form-item label="md5" prop="content.md5" :rules="{
                        required: true,
                        message: '请输入md5',
                        trigger: 'blur',
                    }">
                        <el-input type="text" v-model="ruleForm.content.md5" placeholder="请输入md5" />
                    </el-form-item>
                    <el-form-item label="size" prop="content.size" :rules="{
                        required: true,
                        message: '请输入size',
                        trigger: 'blur',
                    }">
                        <el-input type="text" v-model="ruleForm.content.size" placeholder="请输入size" />
                    </el-form-item>
                    <el-form-item label="voice_id" prop="content.voice_id" :rules="{
                        required: true,
                        message: '请输入voice_id',
                        trigger: 'blur',
                    }">
                        <el-input type="text" v-model="ruleForm.content.voice_id" placeholder="请输入voice_id" />
                    </el-form-item>
                    <el-form-item label="voice_time" prop="content.voice_time" :rules="{
                        required: true,
                        message: '请输入voice_time',
                        trigger: 'blur',
                    }">
                        <el-input type="text" v-model="ruleForm.content.voice_time" placeholder="请输入voice_time" />
                    </el-form-item>
                </template>
                <!-- 视频 -->
                <template v-if="ruleForm.type == 4">
                    <el-form-item label="视频文件" prop="content.file_url" :rules="{
                        required: true,
                        message: '请上传视频文件',
                        trigger: 'change',
                    }">
                        <div>
                            <Upload v-model="ruleForm.content.file_url" type="button" accept="video/*"
                                :action="robotHost" @change="changeFile" @success="uploadSuccess" @error="uploadError">
                            </Upload>
                            <p style="margin-top: 10px;">{{ ruleForm.content.file_name }}</p>
                        </div>
                    </el-form-item>

                </template>
                <!-- GIF -->
                <el-form-item label="图片" prop="content.message" v-if="ruleForm.type == 2" :rules="{
                    required: true,
                    message: '请上传图片',
                    trigger: 'change',
                }">
                    <Upload v-model="ruleForm.content.message" type="image" accept="image/*" :action="robotHost"
                        @change="changeFile" @success="uploadSuccess" @error="uploadError">
                    </Upload>
                </el-form-item>
                <!-- GIF -->
                <el-form-item label="GIF图片" prop="content.img_url" v-if="ruleForm.type == 8" :rules="{
                    required: true,
                    message: '请上传GIF图片',
                    trigger: 'change',
                }">
                    <Upload v-model="ruleForm.content.img_url" type="image" accept="image/gif" :action="robotHost"
                        @change="changeFile" @success="uploadSuccess" @error="uploadError">
                    </Upload>
                </el-form-item>
                <!-- 文件 -->
                <template v-if="ruleForm.type == 10">
                    <el-form-item label="文件" prop="content.file_url" :rules="{
                        required: true,
                        message: '请上传文件',
                        trigger: 'change',
                    }">
                        <div>
                            <Upload v-model="ruleForm.content.file_url" type="button" accept="" :action="robotHost"
                                @change="changeFile" @success="uploadSuccess" @error="uploadError"></Upload>
                            <p style="margin-top: 10px;">{{ ruleForm.content.file_name }}</p>
                        </div>

                    </el-form-item>
                </template>
                <!-- @消息 -->
                <template v-if="ruleForm.type == 11 && !isHs && !isKeyWords">
                    <el-form-item label="需要@的成员" prop="content.at_list" :rules="{
                        required: true,
                        message: '请选择要@的成员',
                        trigger: 'change',
                    }">
                        <el-select-v2 v-model="ruleForm.content.at_list" popper-class="costom-select"
                            :options="memberlist" placeholder="请选择成员" style="width: 500px" :props="v2props" multiple
                            collapse-tags collapse-tags-tooltip filterable>
                            <template #default="{ item }">
                                <div class="costom-select-item">
                                    <el-image :src="item.avatar"></el-image>
                                    <span>{{ item.nickname }}</span>
                                </div>
                            </template>
                            <template #footer v-if="memberTotal > 100">
                                <el-pagination v-model:current-page="memberPage" :page-size="100" size="small"
                                    background layout="prev, pager, next" :total="memberTotal" class="mt-4"
                                    @current-change="currentChangeMember" />
                            </template>
                        </el-select-v2>

                    </el-form-item>
                    <el-form-item label="内容" prop="content.msg" :rules="{
                        required: true,
                        message: '请输入@内容',
                        trigger: 'blur',
                    }">
                        <el-input type="textarea" v-model="ruleForm.content.msg" placeholder="请输入内容" />
                        <V3Emoji @click-emoji="onEmojiSelect2" :recent="true"></V3Emoji>
                    </el-form-item>

                </template>

                <!-- 转人工 -->
                <!-- <template v-if="ruleForm.type == 11 && isKeyWords && isHs">

                    <el-form-item label="选择通知群">
                        <el-select-v2 v-model="ruleForm.content.group.group_id" popper-class="costom-select"
                            :options="groupArr" placeholder="请选择群" style="width: 500px" :props="v2props2" collapse-tags
                            collapse-tags-tooltip filterable>
                           

                        </el-select-v2>
                    </el-form-item>
                    <el-form-item label="选择通知管理员">
                        <el-select-v2 v-model="ruleForm.content.contact.contact_id" popper-class="costom-select"
                            :options="cardList" placeholder="请选择管理员" style="width: 500px" :props="v2props" collapse-tags
                            collapse-tags-tooltip filterable>
                            <template #default="{ item }">
                                <div class="costom-select-item">
                                    <el-image :src="item.avatar"></el-image>
                                    <span>{{ item.nickname }}</span>
                                </div>
                            </template>
                            <template #footer v-if="memberTotal > 100">
                                <el-pagination v-model:current-page="memberPage" :page-size="100" size="small"
                                    background layout="prev, pager, next" :total="memberTotal" class="mt-4"
                                    @current-change="currentChangeMember" />
                            </template>
                        </el-select-v2>
                    </el-form-item>
                    <el-form-item label="通知模板" prop="content.group.template" :rules="{
                        required: true,
                        message: '请输入通知模板',
                        trigger: 'blur',
                    }">
                        <el-input type="textarea" @input="inputTemplate" v-model="ruleForm.content.group.template"
                            placeholder="输入模板" />
                    </el-form-item>
                    <el-form-item label="自动回复内容">
                        <el-input type="textarea" v-model="ruleForm.content.auto_reply" placeholder="输入内容" />
                        <V3Emoji @click-emoji="onEmojiSelect3" :recent="true"></V3Emoji>
                    </el-form-item>
                </template> -->
                <el-form-item v-if="isHs" label="间隔时间（s）" prop="interval_seconds">
                    <el-input-number v-model="ruleForm.interval_seconds" :min="1" />
                </el-form-item>
            </el-form>

        </div>
        <div class="dialog-footer">
            <el-button type="primary" @click="openMaterial"
                v-if="ruleForm.type == 1 || ruleForm.type == 6 || ruleForm.type == 7">
                <el-icon style="margin-right: 4px;">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pallet"></use>
                    </svg></el-icon>
                从素材库选择
            </el-button>
            <el-button v-if="isHs" type="primary" :disabled="disabledBtn" @click="saveTemplate"
                :class="{ 'no-click': mhtLoading }">
                <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>
            <el-button v-if="!isHs" type="primary" :disabled="disabledBtn" @click="submitRobot"
                :class="{ 'no-click': mhtLoading }">
                <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-fasong"></use>
                    </svg></el-icon>
                发 送
            </el-button>
        </div>

        <el-dialog v-model="dialogVisible" title="选择素材" width="1200px" align-center destroy-on-close>
            <div class="dialog-box">


                <MaterialLibrary :msgType="ruleForm.type" :isSendMsg="true" v-model="ruleForm.content">
                </MaterialLibrary>

            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button v-if="isHs" type="primary" @click="dialogVisible = false"
                        :class="{ 'no-click': mhtLoading }">
                        <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>
                    <el-button v-if="!isHs" type="primary" @click="submitRobot" :class="{ 'no-click': mhtLoading }">
                        <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-fasong"></use>
                            </svg></el-icon>
                        发 送
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, onActivated, onUnmounted, computed } from 'vue'
import robotStore from '@/store/modules/robotStore'
import { sendMessages } from '@/api/message'
import { minis, voices } from '@/api/selfMiniVoice'
import { userList } from '@/api/user'
import { materialList } from '@/api/material'
import { groupMemberList, groupList } from '@/api/group'
import MaterialLibrary from '@/views/materialLibrary/index.vue'
import V3Emoji from "vue3-emoji";
import "vue3-emoji/dist/style.css";
const materialTypes = ref([{
    label: '文本',
    value: 1,
    url: 'send_text_message'
}, 
{
    label: '图片',
    value: 2,
    url: 'send_picture_message'
}, 
//{
//     label: '语音',
//     value: 3,
//     url: 'send_voice_message'
// }, {
//     label: '视频',
//     value: 4,
//     url: 'send_video_message'
// }, {
//     label: '小程序',
//     value: 5,
//     url: 'send_mini_program_message'
// }, {
//     label: '位置',
//     value: 6,
//     url: 'send_location_message'
// }, {
//     label: '链接',
//     value: 7,
//     url: 'send_link_message'
// }, {
//     label: 'GIF图片',
//     value: 8,
//     url: 'send_gif_message'
// }, {
//     label: '名片',
//     value: 9,
//     url: 'send_card_message'
// }, {
//     label: '文件',
//     value: 10,
//     url: 'send_file_message'
// }
])
let sendUrl = 'send_text_message'
const robotHost = computed(() => {
    return userRobotStore.robotInfo.server_ip
})
const v2props = ref({
    value: 'user_id',
    label: 'nickname'
})
const v2props2 = ref({
    value: 'room_id',
    label: 'room_name'
})
const props = defineProps({
    messageMain: {
        type: Object,
        default: {}
    },
    allUserIds: {
        type: String,
        default: ''
    },
    sendGroup: {
        type: String,
        default: ''
    },
    isHs: {
        type: Boolean,
        default: false
    },
    robotInfo: {
        type: Object,
        default: {}
    },
    isKeyWords: {
        type: Boolean,
        default: false

    },
    keyWordsType: {
        type: String,
        default: ''
    },
    room_id: {
        type: String,
        default: ''
    },
    editData: ''

})

const userRobotStore = robotStore()
const activeName = ref('text')

const ruleFormRef = ref()
const inputRef = ref()

const ruleForm = ref({
    type: 1,
    content: {}
})

const onEmojiSelect = (emoji) => {
    // if (inputRef.value) {
    //     inputRef.value.focus();
    //     const start = inputRef.value.selectionStart;
    //     const end = inputRef.value.selectionEnd;
    //     const text = inputRef.value.value;
    //     inputRef.value.value = `${text.slice(0, start)}${emoji}${text.slice(end)}`;
    //   }
    if (ruleForm.value.content.message) {
        ruleForm.value.content.message += emoji
    } else {
        ruleForm.value.content.message = emoji
    }
}
const onEmojiSelect2 = (emoji) => {
    if (ruleForm.value.content.msg) {
        ruleForm.value.content.msg += emoji
    } else {
        ruleForm.value.content.msg = emoji
    }

}
const onEmojiSelect3 = (emoji) => {
    if (ruleForm.value.content.auto_reply) {
        ruleForm.value.content.auto_reply += emoji
    } else {
        ruleForm.value.content.auto_reply = emoji
    }

}
const rules = ref({
    interval_seconds: [
        {
            required: true,
            message: '请输入间隔时间',
            trigger: 'change',
        },
    ]
})

const disabledBtn = ref(false)
const changeFile = () => {
    disabledBtn.value = true
}
const uploadSuccess = (e) => {
    // ruleForm.value.content.file_name = e.file
    // ruleForm.value.content.file_path = e.file_path
    // ruleForm.value.content.file_size = e.file_size
    ruleForm.value.content.message = import.meta.env.VITE_APP_BASE_API_img + e.preview_image_url
    disabledBtn.value = false
}
const uploadSuccessMini = (e) => {
    ruleForm.value.content.field_path = e.file_path
    disabledBtn.value = false
}
const uploadError = () => {
    disabledBtn.value = false
}
const changeCard = (e) => {
    cardList.value.forEach((el) => {
        if (e == el.user_id) {
            ruleForm.value.content.userInfo = el
            ruleForm.value.content.card_user_name = el.nickname
        }
    })

}


const emits = defineEmits(['hideMessage', 'update:modelValue'])
const handleClick = () => {

}
const mhtLoading = ref(false)
const submitRobot = async () => {
    await ruleFormRef.value.validate(async (valid, fields) => {
        if (valid) {
            try {
                mhtLoading.value = true
                const res = await sendMessages({
                    robot_id: userRobotStore.robotInfo.id,
                    to_user_id: props.allUserIds ? props.allUserIds : props.messageMain.user_id ? props.messageMain.user_id : props.messageMain.room_id,
                    sleep_max_second: props.allUserIds ? 5 : 0,
                    ...ruleForm.value.content

                }, sendUrl)
                mhtLoading.value = false
                ElNotification({
                    type: 'success',
                    message: '消息发送成功'
                })
                emits('hideMessage')
            } catch {
                mhtLoading.value = false
            }

        } else {
        }
    })



    // switch (activeName.value) {
    //     case 'text':
    //         textMessage()
    //         break;
    //     case 'card':
    //         cardMessage()
    //         break;
    //     case 'link':
    //         linkMessage()
    //         break;
    //     case 'location':
    //         locationMessage()
    //         break;
    //     default:
    //         break;
    // }
}

// 保存话术

const saveTemplate = async () => {
    await ruleFormRef.value.validate(async (valid, fields) => {
        if (valid) {
            dialogVisible.value = false
            if (ruleForm.value.type == 11) {
                if (ruleForm.value.content.group.group_id == '' && ruleForm.value.content.contact.contact_id == '') {
                    ElNotification({
                        type: 'warning',
                        message: '请选择通知的群聊或管理员'
                    })
                    return
                }
            }
            emits('hideMessage', ruleForm.value)
        }
    })
}


const cardList = ref([])

const cardTotal = ref(0)
const cardPage = ref(1)
const getTable = async () => {


    const res = await userList({
        robot_id: userRobotStore.robotInfo.id,
        page: cardPage.value,
        page_size: 100
    })
    cardTotal.value = res.total
    if (props.messageMain.user_id) {
        cardList.value = res.list.filter((el) => {
            return el.user_id != props.messageMain.user_id
        })
    } else {
        cardList.value = res.list
    }
    // copyCardList = res.list


}
const currentChange = (e) => {
    cardPage.value = e
    getTable()
}

const appList = ref([])
const voiceList = ref([])
const memberPage = ref(1)
const handleChange = async (e) => {
    ruleForm.value.content = {}
    materialTypes.value.forEach((el) => {
        if (e == el.value) {
            sendUrl = el.url
        }
    })
    if (e == 9) {
        cardPage.value = 1
        getTable()
    }
    if (props.isHs) {
        ruleForm.value.interval_seconds = ''
    } else {
        delete ruleForm.value.interval_seconds
    }
    if (e == 3) {
        const res = await voices(userRobotStore.robotInfo.id)
        voiceList.value = res.list
    }
    if (e == 5) {
        const res = await minis(userRobotStore.robotInfo.id)
        appList.value = res.list
    }
    if (e == 11) {
        // if (props.isHs && !props.isKeyWords) {
        //     memberPage.value == 1
           
        // }
        console.log(props.allUserIds,)
        if (props.sendGroup == 'sendGroup' ) {
            if (!props.allUserIds) {
                getMembers()
            }}
        if (props.isKeyWords) {
            getGroupList()
            cardPage.value = 1
            getTable()
            ruleForm.value.content = {
                auto_reply: '',
                group: {
                    group_id: '',
                    robot_id: userRobotStore.robotInfo.id,
                    template: props.keyWordsType == 'group' ? '咨询人：{{客户名称}}，在群组 {{群组名称}} 中提问：“{{问题}}”，需要人工介入。' : '咨询人：{{客户名称}}，与 {{企微账号}} 私聊中提问：“{{问题}}”，需要人工介入。'
                },
                contact: {
                    contact_id: '',
                    robot_id: userRobotStore.robotInfo.id,
                    template: props.keyWordsType == 'group' ? '咨询人：{{客户名称}}，在群组 {{群组名称}} 中提问：“{{问题}}”，需要人工介入。' : '咨询人：{{客户名称}}，与 {{企微账号}} 私聊中提问：“{{问题}}”，需要人工介入。'
                }
            }
        }

    }
}

const getVoiceList = async () => {
    try {
        const res = await voices(userRobotStore.robotInfo.id)
        voiceList.value = res.list
        ElNotification({
            type: 'success',
            message: '刷新成功'
        })
    } catch {
        ElNotification({
            type: 'error',
            message: '刷新失败'
        })
    }

}
const getAppList = async () => {
    try {
        const res = await minis(userRobotStore.robotInfo.id)
        appList.value = res.list
        ElNotification({
            type: 'success',
            message: '刷新成功'
        })
    } catch {
        ElNotification({
            type: 'error',
            message: '刷新失败'
        })
    }
}
const query = reactive({
    title: '',
    type: '',
    page: 1,
    page_size: 10
})


const memberlist = ref([])

const memberTotal = ref(0)
const getMembers = async () => {
    const res = await groupMemberList({
        robot_id: userRobotStore.robotInfo.id,
        nickname: '',
        page: memberPage.value,
        page_size: 100,
        room_id: props.messageMain.room_id
    })
    memberTotal.value = res.total
    memberlist.value = res.list
}
const currentChangeMember = (e) => {
    memberPage.value = e
    getMembers()
}

const dialogVisible = ref(false)
const openMaterial = () => {
    dialogVisible.value = true


}

const getTypeName = (type) => {
    let typeName = ''
    materialTypes.value.forEach((el) => {
        if (type == el.value) {
            typeName = el.label
        }
    })
    return typeName
}
const handleTableChange = (e) => {
    ruleForm.value.content = e.content
}

// 选择小程序

const changeAppId = (e) => {
    let data = appList.value.filter((el) => {
        return el.msg_id == e
    })[0]
    ruleForm.value.content = {
        msg_id: e,
        app_id: data.app_id,
        "title": data.title,
        "des": data.des,
        "head_img_url": data.head_img_url,
        "page_path": data.page_path,
        "wechat_id": data.wechat_id,
        "thumb_file_id": data.thumb_file_id,
        "thumb_md5": data.thumb_md5,
        "thumb_aes_key": data.thumb_aes_key,
        "size": data.size,
        "send_time": data.send_time,
        "field_path": data.field_path,
    }

}
const changeVoice = (e) => {
    ruleForm.value.content = e
    let data = voiceList.value.filter((el) => {
        return el.aes_key == e
    })[0]
    ruleForm.value.content = {
        "voice_id": data.voice_id,
        "md5": data.md5,
        "aes_key": data.aes_key,
        "size": data.size,
        "voice_time": data.voice_time,
        "send_time": data.send_time
    }
}

// 获取群组列表
const groupArr = ref([])
const getGroupList = async () => {
    const res = await groupList({
        robot_id: userRobotStore.robotInfo.id,
        page: 1,
        page_size: 100
    })
    groupArr.value = res.list.filter((el) => {
        return el.room_id != props.room_id
    })

}
const inputTemplate = (e) => {
    ruleForm.value.content.contact.template = e
}
// const changeType = (e) => {
//     if (e == 1) {
//         ruleForm.value.content.contact_id = ''
//         getGroupList()
//         ruleForm.value.content.template = '咨询人：{{客户名称}}，在群组 {{群组名称}} 中提问：“{{问题}}”，需要人工介入。'
//     } else if (e == 2) {
//         ruleForm.value.content.group_id = ''
//         cardPage.value = 1
//         getTable()
//         ruleForm.value.content.template = '咨询人：{{客户名称}}，与 {{企微账号}} 私聊中提问：“{{问题}}”，需要人工介入。'
//     }
// }



let map = null
let AutoComplete = null
var autoOptions = {
    input: "tipinput"
};
let marker = null
let geocoder = null
onMounted(() => {

    // if (props.sendGroup == 'sendGroup' ) {
    //     if (!props.allUserIds) {
    //         materialTypes.value.push({
    //             label: '@消息',
    //             value: 11,
    //             url: 'send_group_at_message'
    //         })
    //     }

    // } else {
    //     if (props.isKeyWords) {
    //         materialTypes.value.push({
    //             label: '转人工',
    //             value: 11
    //         })
    //     }
    // }

    if(props.editData){
        ruleForm.value = props.editData
        if(props.editData.type == 11){
            getGroupList()
            cardPage.value = 1
            getTable()
        }
    }

    
})
onUnmounted(() => {
    map && map.destroy();
});
</script>

<style lang="scss" scoped>
.message-container {
    .message-card {
        min-height: 342px;
        transition: all 0.5s;
    }

    .dialog-footer {
        text-align: right;
        padding-right: 0;
    }
}



.costom-select-item {

    font-size: 14px;

    .el-image {
        height: 30px;
        width: 30px;
        margin-right: 8px;
        border-radius: 4px;
        vertical-align: middle;
        transform: translateY(-1px);
    }
}

.tip {
    font-size: 12px;
    color: var(--el-color-danger);
    // margin-bottom: 10px;
    width: 100%;
}
.up_head_img{
    ::deep(.upload-button){
        padding-top: 0;
    }
}
</style>