<template>
    <div class="user-container">

        <el-row :gutter="20" style="height: 100%;">
            <el-col :span="24">
                <el-card class="">
                    <el-scrollbar>
                        <template v-if="activeIndex == 0">
                            <label class="title">基本信息</label>
                            <div class="box">
                                <div class="form-content">
                                    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
                                        <el-form-item label="标题" prop="title">
                                            <el-input v-model="ruleForm.title" placeholder="请输入标题"></el-input>
                                        </el-form-item>
                                        <el-form-item label="SOP类型" prop="sop_type">
                                            <el-radio-group v-model="ruleForm.sop_type" @change="changeSopType">
                                                <el-radio :value="1" size="large">基础SOP</el-radio>
                                                <el-radio :value="2" size="large">客户SOP</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item label="选择机器人" prop="robot_id">
                                            <el-select-v2 v-model="ruleForm.robot_id" popper-class="costom-select"
                                                :options="robotArr" placeholder="请选择机器人" :props="v2props" filterable
                                                @change="changeRobot" :disabled="taskInfo.id">
                                                <template #default="{ item }">
                                                    <div class="costom-select-item">
                                                        <el-image :src="item.head_url"></el-image>
                                                        <span>{{ item.name }}</span>
                                                    </div>
                                                </template>
                                                <template #footer v-if="robotTotal > 100">
                                                    <el-pagination v-model:current-page="robotQuery.page"
                                                        :page-size="robotQuery.page_size" size="small" background
                                                        layout="prev, pager, next" :total="robotTotal" class="mt-4"
                                                        @current-change="currentChange" />
                                                </template>
                                            </el-select-v2>
                                        </el-form-item>

                                        <el-form-item label="任务类型" prop="type">
                                            <el-select v-model="ruleForm.type" placeholder="请输入类型">
                                                <el-option label="定时任务" :value="1"></el-option>
                                                <el-option label="手动任务" :value="2"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <template v-if="ruleForm.type == 1">
                                            <el-form-item label="定时类型" prop="spec_content.type" :rules="{
                                                required: true,
                                                message: '请选择定时类型',
                                                trigger: 'change',
                                            }">
                                                <el-radio-group v-model="ruleForm.spec_content.type">
                                                    <el-radio :value="1" size="large">单次发送</el-radio>
                                                    <el-radio :value="2" size="large">每天</el-radio>
                                                    <el-radio :value="3" size="large">每周</el-radio>
                                                    <el-radio :value="4" size="large">每月</el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                            <el-form-item v-if="ruleForm.spec_content.type == 1" label="发送时间"
                                                prop="spec_content.time" :rules="{
                                                    required: true,
                                                    message: '请选择发送时间',
                                                    trigger: 'change',
                                                }">
                                                <el-date-picker v-model="ruleForm.spec_content.time" type="datetime"
                                                    placeholder="请选择发送时间" format="YYYY-MM-DD HH:mm"
                                                    value-format="YYYY-MM-DD HH:mm" :disabled-date="disabledDate"
                                                    :show-now="false" />
                                            </el-form-item>
                                            <el-form-item v-if="ruleForm.spec_content.type == 3" label="每周发送时间"
                                                prop="spec_content.week" :rules="{
                                                    required: true,
                                                    message: '请选择每周发送时间',
                                                    trigger: 'change',
                                                }">
                                                <el-checkbox-group v-model="ruleForm.spec_content.week">
                                                    <el-checkbox :value="1" size="large">周一</el-checkbox>
                                                    <el-checkbox :value="2" size="large">周二</el-checkbox>
                                                    <el-checkbox :value="3" size="large">周三</el-checkbox>
                                                    <el-checkbox :value="4" size="large">周四</el-checkbox>
                                                    <el-checkbox :value="5" size="large">周五</el-checkbox>
                                                    <el-checkbox :value="6" size="large">周六</el-checkbox>
                                                    <el-checkbox :value="7" size="large">周日</el-checkbox>
                                                </el-checkbox-group>
                                            </el-form-item>
                                            <el-form-item v-if="ruleForm.spec_content.type == 4" label="每月发送时间"
                                                prop="spec_content.day" :rules="{
                                                    required: true,
                                                    message: '请选择每月发送时间',
                                                    trigger: 'change',
                                                }">
                                                <el-select v-model="ruleForm.spec_content.day" multiple
                                                    placeholder="请选择类型">
                                                    <el-option v-for="item in mouthDatys" :label="item"
                                                        :value="item"></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item v-if="ruleForm.spec_content.type > 1" label="发送时间"
                                                prop="spec_content.time" :rules="{
                                                    required: true,
                                                    message: '请选择发送时间',
                                                    trigger: 'change',
                                                }">
                                                <el-time-picker v-model="ruleForm.spec_content.time"
                                                    placeholder="请选择发送时间" format="HH:mm" value-format="HH:mm" />
                                            </el-form-item>
                                            <el-form-item v-if="ruleForm.spec_content.type > 1" label="循环是否截止"
                                                prop="spec_content.is_due" :rules="{
                                                    required: true,
                                                    message: '请选择循环是否截止',
                                                    trigger: 'change',
                                                }">
                                                <el-radio-group v-model="ruleForm.spec_content.is_due">
                                                    <el-radio :value="1" size="large">截止</el-radio>
                                                    <el-radio :value="2" size="large">不截止</el-radio>

                                                </el-radio-group>
                                            </el-form-item>
                                            <el-form-item
                                                v-if="ruleForm.spec_content.type > 1 && ruleForm.spec_content.is_due == 1"
                                                label="循环截止时间" prop="spec_content.expiration_time" :rules="{
                                                    required: true,
                                                    message: '请选择循环截止时间',
                                                    trigger: 'change',
                                                }">
                                                <el-date-picker v-model="ruleForm.spec_content.expiration_time"
                                                    type="datetime" placeholder="请选择发送时间" format="YYYY-MM-DD HH:mm"
                                                    value-format="YYYY-MM-DD HH:mm" :disabled-date="disabledDate"
                                                    :show-now="false" />
                                            </el-form-item>
                                        </template>
                                        <el-form-item label="描述" prop="description">
                                            <el-input type="textarea" v-model="ruleForm.description"
                                                placeholder="请输入描述"></el-input>
                                        </el-form-item>

                                    </el-form>
                                </div>

                            </div>
                        </template>
                        <template v-if="activeIndex == 1 && ruleForm.sop_type == 1">
                            <label class="title">群组或好友</label>
                            <div class="box">
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <span> 选择群组 </span>
                                        <div style="display: flex;margin-top: 10px;">
                                            <el-input style="flex: auto;" v-model="groupSearch" placeholder="群名称关键字"
                                                clearable @clear="groupSearchhFun">
                                            </el-input>
                                            <el-button style="width: 80px;" type="primary"
                                                @click="groupSearchhFun">搜索</el-button>
                                        </div>
                                        <ul v-infinite-scroll="groupLoad" class="infinite-list get-infinite"
                                            style="overflow: auto" :infinite-scroll-immediate="false"
                                            infinite-scroll-distance="5">
                                            <li v-for="item in taskgroupListEd" :key="item.room_id"
                                                class="infinite-list-item" @click="handleCheck(item, 'group')"
                                                style="cursor: pointer;">
                                                <el-checkbox v-model="item.active" size="large"
                                                    @change="(e) => { changeCheck(e, item, 'group') }" @click.stop>
                                                    <span>{{ item.room_name }}</span>
                                                </el-checkbox>
                                            </li>
                                            <li v-if="totalSelloGroup > taskgroupListEd.length" class="load-more">加载中...
                                            </li>
                                        </ul>
                                    </el-col>
                                    <el-col :span="12">
                                        <span> 选择好友 </span>
                                        <div style="display: flex;margin-top: 10px;">
                                            <el-input style="flex: auto;" v-model="friendSearch" placeholder="好友昵称关键字"
                                                clearable @clear="friendSearchFun">
                                            </el-input>
                                            <el-button style="width: 80px;" type="primary"
                                                @click="friendSearchFun">搜索</el-button>
                                        </div>

                                        <!-- <el-button type="primary" @click="friendSearchFun">搜索</el-button> -->
                                        <ul v-infinite-scroll="friendLoad" class="infinite-list get-infinite "
                                            style="overflow: auto" :infinite-scroll-immediate="false"
                                            infinite-scroll-distance="5">
                                            <li v-for="item in taskfriendListEd" :key="item.user_id"
                                                class="infinite-list-item" @click="handleCheck(item, 'friend')"
                                                style="cursor: pointer;">
                                                <el-checkbox v-model="item.active" size="large"
                                                    @change="(e) => { changeCheck(e, item, 'friend') }" @click.stop>
                                                    <el-image :src="item.avatar"></el-image>
                                                    <span>{{ item.nickname }}</span>
                                                </el-checkbox>
                                            </li>
                                            <li v-if="getFriendTotal > taskfriendListEd.length" class="load-more">加载中...
                                            </li>
                                        </ul>
                                    </el-col>
                                </el-row>

                            </div>
                        </template>
                        <template v-if="activeIndex == 1 && ruleForm.sop_type == 2">
                            <label class="title">好友规则</label>
                            <el-form ref="gzFormRef" :model="gzForm" :rules="gzRules">
                                <el-form-item label="规则类型" prop="rule_type">

                                    <el-radio-group v-model="gzForm.rule_type">
                                        <el-radio :value="1" size="large">新增的用户生效</el-radio>
                                        <!-- <el-radio :value="2" size="large">手术完毕的用户生效</el-radio> -->
                                        <el-radio :value="3" size="large">标签用户生效</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item v-if="gzForm.rule_type == 3" label="标签类型" prop="tag_type">

                                    <el-radio-group v-model="gzForm.tag_type">
                                        <el-radio :value="1" size="large">标签下所有用户生效</el-radio>
                                        <el-radio :value="2" size="large">基于打标签时间生效</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item v-if="gzForm.rule_type == 1 || gzForm.rule_type == 2 || gzForm.tag_type == 2" label="选择时间类型"
                                    prop="time_type">
                                    <el-radio-group v-model="gzForm.time_type" placeholder="请选择">
                                        <el-radio :value="0" size="large">当天</el-radio>
                                        <el-radio :value="1" size="large">过去的第1天</el-radio>
                                        <el-radio :value="2" size="large">过去的第2天</el-radio>
                                        <el-radio :value="3" size="large">过去的第3天</el-radio>
                                        <el-radio :value="4" size="large">过去的第4天</el-radio>
                                        <el-radio :value="5" size="large">过去的第5天</el-radio>
                                        <el-radio :value="6" size="large">过去的第6天</el-radio>
                                        <el-radio :value="7" size="large">过去的第7天</el-radio>
                                        <el-radio :value="9" size="large">过去的第N天</el-radio>
                                        <el-radio :value="8" size="large">自定义时间</el-radio>
                                    </el-radio-group>

                                </el-form-item>
                                <el-form-item v-if="gzForm.time_type == 9" label="输入天数（大于7的整数）" prop="day">
                                    <el-input-number v-model="gzForm.day" :min="8" :step-strictly="true"
                                        placeholder=""></el-input-number> &nbsp;天
                                </el-form-item>
                                <el-form-item v-if="gzForm.time_type == 8" label="选择时间" prop="date_picker">
                                    <div style="width: 400px">
                                        <el-date-picker v-model="gzForm.date_picker" type="datetimerange"
                                            range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                            format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm"
                                            @change="handleDateChange" />
                                    </div>
                                </el-form-item>
                                <el-form-item v-if="gzForm.rule_type == 3" label="选择标签" prop="tag_id">
                                    <template #label>
                                        <span>选择标签</span>
                                        <el-button class="plus-tag" type="primary" @click="openTags" icon="Plus"
                                            size="small">添加标签</el-button>
                                    </template>
                                    <div>
                                        <div class="tags-box">
                                            <el-tag type="primary" v-for="(item, index) in tags">
                                                <span style="position: relative;top: -2px;">{{ item.name }} </span>
                                                <el-icon class="icon-close" @click="removeTag(index)">
                                                    <Close />
                                                </el-icon>
                                            </el-tag>
                                        </div>
                                    </div>
                                </el-form-item>
                            </el-form>
                        </template>
                        <template v-if="activeIndex == 2">
                            <!-- <UserMessage @hideMessage="hideMessage"></UserMessage> -->
                            <label class="title">话术</label>
                            <el-button class="add-materia" type="primary" icon="Plus" @click="addhuasu">添加话术</el-button>
                            <div class="box">
                                <div class="materia-box">
                                    <div class="user-list">
                                        <el-scrollbar v-if="ruleForm.sop_type == 1">
                                            <span style="color: var(--el-color-primary);"> 群聊 </span>
                                            <ul class="infinite-list" style="overflow: auto; margin-bottom: 15px;">
                                                <li v-for="item in groupListEd" :key="item.room_id"
                                                    class="infinite-list-item">
                                                    <span>{{ item.room_name }}</span>
                                                </li>
                                            </ul>
                                            <span style="color: var(--el-color-primary);"> 好友 </span>
                                            <ul class="infinite-list" style="overflow: auto">
                                                <li v-for="item in friendList" :key="item.user_id"
                                                    class="infinite-list-item">
                                                    <!-- <el-image :src="item."></el-image> -->
                                                    <span>{{ item.nickname }}</span>

                                                </li>
                                            </ul>
                                        </el-scrollbar>
                                        <div v-if="ruleForm.sop_type == 2" style="">
                                            <label v-if="gzForm.rule_type == 1"
                                                style="display: block;margin-bottom: 15px;color: var(--el-color-primary);">新增的用户生效</label>
                                            <label v-if="gzForm.rule_type == 2"
                                                style="display: block;margin-bottom: 15px;color: var(--el-color-primary);">手术完毕的用户生效</label>
                                            <label v-if="gzForm.rule_type == 3"
                                                style="display: block;margin-bottom: 15px;color: var(--el-color-primary);">
                                                <span v-if="gzForm.tag_type == 1">标签下所有用户生效</span>
                                                <span v-if="gzForm.tag_type == 2">基于打标签时间生效</span>
                                            </label>

                                            <div v-if="gzForm.tag_type != 1" style="font-size: 14px;">
                                                <span v-if="gzForm.time_type == 0">当天</span>
                                                <span v-if="gzForm.time_type > 0 && gzForm.time_type < 8">过去的第{{
                                                    gzForm.time_type }}天</span>
                                                <span v-if="gzForm.time_type == 8">{{ gzForm.start_time }} 至 {{
                                                    gzForm.end_time }}</span>
                                                <span v-if="gzForm.time_type == 9">过去的第{{ gzForm.day }}天</span>
                                                &nbsp;&nbsp;
                                                <span v-if="gzForm.time_type != 0 && gzForm.time_type != 8 && gzForm.time_type != 9"> {{ getPastDate(gzForm.time_type) }} </span>
                                                <span v-if="gzForm.time_type == 9"> {{ getPastDate(gzForm.day) }} </span>
                                            </div>
                                            <div v-if="gzForm.rule_type == 3" class="tags-box">
                                                <el-tag type="primary" v-for="(item, index) in tags">
                                                    <span>{{ item.name }} </span>
                                                </el-tag>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="meaasge">
                                        <Scripts :disabled="false" v-model="materiaList" :materiaList="materiaList"
                                            :robotInfo="activeRobotDelites" @editMateria="editMateria"></Scripts>

                                    </div>

                                </div>
                            </div>

                        </template>
                    </el-scrollbar>

                    <div class="footer-btn">
                        <el-button v-if="activeIndex > 0" type="primary" @click="activeIndex--">上一步</el-button>
                        <el-button v-if="activeIndex != 2" type="primary" @click="next">下一步</el-button>
                        <el-button v-if="activeIndex == 2" type="primary" @click="saveMaterial(3)"
                            :class="{ 'no-click': mhtLoading }">
                            <el-icon v-if="mhtLoading && saveType == 3" class="mht-loading" style="margin-right: 4px;">
                                <Loading />
                            </el-icon>
                            存为草稿
                        </el-button>
                        <el-button v-if="activeIndex == 2" type="primary" @click="saveMaterial(2)"
                            :class="{ 'no-click': mhtLoading }">
                            <el-icon v-if="mhtLoading && saveType == 2" class="mht-loading" style="margin-right: 4px;">
                                <Loading />
                            </el-icon>
                            启用
                        </el-button>
                    </div>


                </el-card>


            </el-col>

        </el-row>
        <el-dialog v-model="dialogVisible" title="配置话术" width="1000px" align-center destroy-on-close>
            <div class="dialog-box" v-loading.fullscreen.lock="loading">

                <UserMessage :isHs="true" @hideMessage="hideMessage" :editData="editData"></UserMessage>

            </div>

        </el-dialog>

        <el-dialog v-model="dialogTag" title="添加标签" width="1000px" align-center destroy-on-close>
            <div class="dialog-box">

                <TagClass :initialSelectedTags="tags" :robot_id="ruleForm.robot_id" @change="selectedTags"></TagClass>

            </div>
            <template #footer>
                <el-button type="primary" @click="saveTag">确 定</el-button>
            </template>
        </el-dialog>

    </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick, watch, computed, onActivated } from 'vue'
import { upTask, addTask, deleteTask, taskGroups, taskFriends, taskLogs, taskMaterials, execTask, taskMaterialsAdd, taskGroupsAdd, taskFriendAdd } from '@/api/task'
import { robotList } from '@/api/robot'
import { groupList } from '@/api/group'
import { userList, syncUser, deleteUser } from '@/api/user'
import { tagSelected } from '@/api/tags'
import detailStore from '@/store/modules/detailStore'
import robotStore from '@/store/modules/robotStore'
import { useRouter } from 'vue-router';
// import MaterialLibrary from '@/views/materialLibrary/index.vue'
import UserMessage from '@/components/UserMessage/index.vue'
import addess from '@/assets/images/addess.png'
import robotDefiut from '@/assets/images/robot_1.png'
import TagClass from '@/components/TagClass/index.vue'
const router = useRouter()
const userRobotStore = robotStore()
const detailInfo = detailStore()
const isEditRemark = ref(false)
const taskInfo = computed(() => {
    return detailInfo.taskDetails
})
const dialogVisible = ref(false)
const dialogVisibleGruop = ref(false)
const materiaValues = ref([])
const addess_png = addess
const v2props = ref({
    value: 'id',
    label: 'name'
})

const activeIndex = ref(0)
// 基本信息
const ruleFormRef = ref()
const ruleForm = ref({
    spec_content: {
        type: ''
    },
})
const rules = ref({
    sop_type: [
        {
            required: true,
            message: '请选择SOP类型',
            trigger: 'change',
        }
    ],
    robot_id: [
        {
            required: true,
            message: '请选择机器人',
            trigger: 'blur',
        }
    ],
    title: [
        {
            required: true,
            message: '请输入标题',
            trigger: 'blur',
        }
    ],
    type: [
        {
            required: true,
            message: '请选择类型',
            trigger: 'blur',
        }
    ],

})
const groupListEd = ref([])

const gzFormRef = ref()
// const rule_type = true
const gzForm = ref({
    rule_type: '',
    time_type: '',
    date_picker: []
})
const gzRules = ref({
    rule_type: [
        {
            required: true,
            message: '请选择',
            trigger: 'change',
        }
    ],
    time_type: [
        {
            required: true,
            message: '请选择时间类型',
            trigger: 'change',
        }
    ],
    date_picker: [
        {
            required: true,
            message: '请选择开始时间和结束时间',
            trigger: 'change',
        }
    ],
    day: [
        {
            required: true,
            message: '请输入天数',
            trigger: 'blur',
        }
    ],
    tag_id: [
        {
            required: true,
            message: '请添加标签',
            trigger: 'change',
        }
    ],
    tag_type: [
        {
            required: true,
            message: '请选择标签类型',
            trigger: 'change',
        }
    ],
})
const handleDateChange = (e) => {
    if (e.length == 2) {
        gzForm.value.start_time = e[0]
        gzForm.value.end_time = e[1]
    } else {
        gzForm.value.start_time = ''
        gzForm.value.end_time = ''
    }
}

const friendList = ref([])
const next = () => {
    if (activeIndex.value == 0) {

        submitTask()
    } else if (activeIndex.value == 1) {
        if (ruleForm.value.sop_type == 1) {
            saveGroupFriend()

        } else {

            saveGz()
        }
    }
}
// 新增
const isEdit = ref(false)
const mhtLoading = ref(false)
let task_id = ''
const submitTask = async () => {
    await ruleFormRef.value.validate(async (valid, fields) => {
        if (valid) {
            activeIndex.value = 1
        }
    })
}
const saveGz = async () => {
    await gzFormRef.value.validate(async (valid, fields) => {
        if (valid) {

            activeIndex.value = 2

        }
    })
}
const taskgroupListEd = ref([])
const taskfriendListEd = ref([])
const saveGroupFriend = async () => {
    // const group_list = taskgroupListEd.value.filter((el) => {
    //     return el.active
    // })
    // const friend_list = taskfriendListEd.value.filter((el) => {
    //     return el.active
    // })

    // groupListEd.value = group_list
    // friendList.value = friend_list

    if (groupListEd.value.length == 0 && friendList.value.length == 0) {
        ElNotification({
            type: 'warning',
            message: '群组或者好友至少配置一种'
        })
        return
    }
    activeIndex.value = 2


}

const materiaList = ref([])

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

    }
}


// 删除话术
const removeMateria = (index) => {
    console.log(materiaList.value, index)
    materiaList.value.splice(index, 1)
}
const addhuasu = () => {
    dialogVisible.value = true
    editData.value = null
}
const saveType = ref(0)
const saveMaterial = async (type) => {
    if (materiaList.value.length == 0) {
        ElNotification({
            type: 'warning',
            message: '请至少添加一条话术'
        })
        return
    }
    mhtLoading.value = true
    saveType.value = type
    try {
        let task_id = ''
        let obj = JSON.parse(JSON.stringify(ruleForm.value))

        if (obj.spec_content.type == 1) {
            obj.spec_content.year = Number(obj.spec_content.time.split('-')[0])
            obj.spec_content.month = Number(obj.spec_content.time.split('-')[1])
            obj.spec_content.day = obj.spec_content.time.split('-')[2].split(' ')[0]
            obj.spec_content.hour = Number(obj.spec_content.time.split(' ')[1].split(':')[0])
            obj.spec_content.minute = Number(obj.spec_content.time.split(' ')[1].split(':')[1])
            delete obj.spec_content.week
            delete obj.spec_content.is_due
            delete obj.spec_content.expiration_time
        } else if (obj.spec_content.type == 2) {
            obj.spec_content.hour = Number(obj.spec_content.time.split(':')[0])
            obj.spec_content.minute = Number(obj.spec_content.time.split(':')[1])
            delete obj.spec_content.day
            delete obj.spec_content.week
            delete obj.spec_content.month
            delete obj.spec_content.year
        } else if (obj.spec_content.type == 3) {
            obj.spec_content.week = obj.spec_content.week.join(',')
            obj.spec_content.hour = Number(obj.spec_content.time.split(':')[0])
            obj.spec_content.minute = Number(obj.spec_content.time.split(':')[1])
            delete obj.spec_content.day
            delete obj.spec_content.month
            delete obj.spec_content.year
        } else if (obj.spec_content.type == 4) {
            obj.spec_content.day = obj.spec_content.day.join(',')
            obj.spec_content.hour = Number(obj.spec_content.time.split(':')[0])
            obj.spec_content.minute = Number(obj.spec_content.time.split(':')[1])
            delete obj.spec_content.week
            delete obj.spec_content.month
            delete obj.spec_content.year
        }
        // if (obj.sop_type == 2) {
        //     obj.robot_id = obj.robot_id.join(',')
        // } else {
        //     obj.robot_id = String(obj.robot_id)
        // }
        delete obj.spec_content.time
        obj.spec_content = JSON.stringify(obj.spec_content)



        if (!taskInfo.value.id) {

            const res = await addTask(obj)
            task_id = res.id
        } else {
            task_id = taskInfo.value.id
        }
        if (obj.sop_type == 1) {


            if (groupListEd.value.length > 0) {
                await taskGroupsAdd({
                    "group_list": groupListEd.value.map((el) => {
                        return {
                            group_id: el.room_id,
                            group_name: el.room_name
                        }
                    })
                }, task_id)
            }

            if (friendList.value.length > 0) {
                await taskFriendAdd({
                    "friend_list": friendList.value.map((el) => {
                        return {
                            friend_id: el.user_id,
                            friend_name: el.nickname
                        }
                    }),
                    type: 1,
                    friend_rule: ''
                }, task_id)
            }
        } else {
            const gzData = JSON.parse(JSON.stringify(gzForm.value))
            if (gzData.date_picker) {
                delete gzData.date_picker
            }
            if (gzData.time_type != 9) {
                delete gzData.day
            }
            if (gzData.time_type != 8) {
                delete gzData.start_time
                delete gzData.end_time
            }
            // gzData.tag_id = tags.value.map((el) => {
            //     return el.id
            // })
            if(gzData.tag_type == 1){
                delete gzData.time_type
            }
            await taskFriendAdd({
                "friend_list": [],
                type: 2,
                friend_rule: JSON.stringify(gzData)
            }, task_id)
        }


        await taskMaterialsAdd({
            'material_list': materiaList.value.map((el) => {
                return {
                    content: JSON.stringify(el.content),
                    type: el.type,
                    interval_seconds: el.interval_seconds
                }
            })

        }, task_id)
        await upTask({ ...obj, status: type }, task_id)
        mhtLoading.value = false
        router.back()
        ElNotification({
            type: 'success',
            message: '操作成功'
        })
    } catch {
        mhtLoading.value = false
    }







}


// 执行任务

const execNew = async () => {
    await execTask(taskInfo.value.id)
}

const changeStatus = async (e) => {
    await upTask({
        "status": e,
        "title": taskInfo.value.title,
        "type": taskInfo.value.type
    }, taskInfo.value.id)
}
// 日志















const checkGroups = ref([])
const groupDialog = ref(false)
const addGroup = () => {
    groupDialog.value = true
    getTaskGroups()
}



let actGroupPage = 1
let actGroupList = []
let actGroupTotal = 0
const getActiveGroups = async () => {
    const resGroup = await taskGroups({
        task_id: taskInfo.value.id,
        page: actGroupPage,
        page_size: 100
    })
    actGroupTotal = resGroup.total
    const list = resGroup.list.map((el) => {
        return {
            room_id: el.group_id,
            room_name: el.group_name,
            id: el.id,
            active: true
        }
    })
    console.log(list)
    groupListEd.value = [...groupListEd.value, ...list]
    if (actGroupTotal > groupListEd.value.length) {
        actGroupPage++
        getActiveGroups()
    } else {
        if (ruleForm.value.sop_type == 1) {
            getTaskGroups()
        }
    }
}
const totalSelloGroup = ref(0)
let selloGroupPage = 1
const groupSearch = ref('')
const getTaskGroups = async () => {
    const res = await groupList({
        robot_id: ruleForm.value.robot_id,
        nickname: groupSearch.value,
        page: selloGroupPage,
        page_size: 100
    })
    totalSelloGroup.value = res.total

    if (groupListEd.value.length > 0) {
        let arr = res.list
        arr.forEach((el) => {
            groupListEd.value?.forEach((row) => {
                if (el.room_id == row.room_id) {
                    el.active = true
                }
            })
        })
        taskgroupListEd.value = [...taskgroupListEd.value, ...arr]
    } else {
        taskgroupListEd.value = [...taskgroupListEd.value, ...res.list]
    }

}

const groupSearchhFun = () => {
    selloGroupPage = 1
    taskgroupListEd.value = []
    getTaskGroups()
}
const groupLoad = () => {
    console.log('到底了')
    if (totalSelloGroup.value > taskgroupListEd.value.length) {
        selloGroupPage++
        getTaskGroups()
    }
}




const saveGroup = async () => {
    if (checkGroups.value.length == 0) return
    mhtLoading.value = true
    let group_list = []
    taskgroupListEd.value.forEach((el) => {
        checkGroups.value.forEach((row) => {
            if (el.room_id == row) {
                group_list.push({
                    "group_id": el.room_id,
                    "group_name": el.room_name
                })
            }
        })
    })
    try {
        await taskGroupsAdd({
            "group_list": group_list
        }, taskInfo.value.id)
        mhtLoading.value = false
        groupDialog.value = false
        groupQuery.page = 1
        groupListEd.value = []
        getGroup()
        ElNotification({
            type: 'success',
            message: '操作成功'
        })
    } catch {
        mhtLoading.value = false
    }

}



let actFriendPage = 1
let actFriendList = []
let actFriendTotal = 0
const getActiveFriends = async () => {
    const resFriend = await taskFriends({
        task_id: taskInfo.value.id,
        page: actFriendPage,
        page_size: 100
    })
    actFriendTotal = resFriend.total
    const list = resFriend.list.map((el) => {
        return {
            user_id: el.friend_id,
            nickname: el.friend_name,
            id: el.id,
            active: true
        }
    })
    friendList.value = [...friendList.value, ...list]
    if (actFriendTotal > friendList.value.length) {
        actFriendPage++
        getActiveFriends()
    } else {
        if (ruleForm.value.sop_type == 1) {
            getFriends()
        }
    }
}


const friendDialog = ref(false)
const checkfriends = ref([])
let getFriendPage = 1
const getFriendTotal = ref(0)

const friendSearch = ref('')
const getFriends = async () => {

    const res = await userList({
        robot_id: ruleForm.value.robot_id,
        nickname: friendSearch.value,
        page: getFriendPage,
        page_size: 100
    })
    getFriendTotal.value = res.total

    if (friendList.value.length > 0) {

        // if (taskInfo.value.sop_type == 1) {
        let arr = res.list
        arr.forEach((el) => {
            friendList.value?.forEach((row) => {
                if (el.user_id == row.user_id) {
                    el.active = true
                }
            })
        })
        taskfriendListEd.value = [...taskfriendListEd.value, ...arr]
        // } else {
        //     taskfriendListEd.value = [...taskfriendListEd.value, ...res.list]
        //     const gzFormt = JSON.parse(actFriendList[0].friend_rule)
        //     gzForm.value = gzFormt

        //     if (gzForm.value.time_type == 8) {
        //         gzForm.value.date_picker = [gzFormt.start_time, gzFormt.end_time]
        //     }
        // }

    } else {
        taskfriendListEd.value = [...taskfriendListEd.value, ...res.list]
    }

}
const friendSearchFun = () => {
    getFriendPage = 1
    taskfriendListEd.value = []
    getFriends()
}
const friendLoad = () => {
    console.log('到底了')
    if (getFriendTotal.value > taskfriendListEd.value.length) {
        getFriendPage++
        getFriends()
    }

}

// groupListEd.value = group_list
//     friendList.value = friend_list
const handleCheck = (row, type) => {
    if (row.active) {
        row.active = false
        if (type == 'group') {
            const index = groupListEd.value.findIndex(item => item.room_id == row.room_id)
            if (index !== -1) {
                groupListEd.value.splice(index, 1)
            }
        } else {
            const index = friendList.value.findIndex(item => item.user_id == row.user_id)
            if (index !== -1) {
                friendList.value.splice(index, 1)
            }
        }

    } else {
        row.active = true
        if (type == 'group') {
            const exists = groupListEd.value.some(item => item.room_id == row.room_id)
            if (!exists) {
                groupListEd.value.push(row)
            }
        } else {
            const exists = friendList.value.some(item => item.user_id == row.user_id)
            if (!exists) {
                friendList.value.push(row)
            }
        }
    }
}
const changeCheck = (e, row, type) => {
    console.log(e)
    if (!e) {
        if (type == 'group') {
            const index = groupListEd.value.findIndex(item => item.room_id == row.room_id)
            if (index !== -1) {
                groupListEd.value.splice(index, 1)
            }
        } else {
            const index = friendList.value.findIndex(item => item.user_id == row.user_id)
            if (index !== -1) {
                friendList.value.splice(index, 1)
            }
        }

    } else {
        if (type == 'group') {
            const exists = groupListEd.value.some(item => item.room_id == row.room_id)
            if (!exists) {
                groupListEd.value.push(row)
            }
        } else {
            const exists = friendList.value.some(item => item.user_id == row.user_id)
            if (!exists) {
                friendList.value.push(row)
            }
        }
    }
}

const saveFriend = async () => {
    if (checkfriends.value.length == 0) return
    mhtLoading.value = true
    let friend_list = []
    taskfriendListEd.value.forEach((el) => {
        checkfriends.value.forEach((row) => {
            if (el.user_id == row) {
                friend_list.push({
                    "friend_id": el.user_id,
                    "friend_name": el.nickname
                })
            }
        })
    })
    try {
        await taskFriendAdd({
            "friend_list": friend_list
        }, taskInfo.value.id)
        mhtLoading.value = false
        friendDialog.value = false
        friendQuery.page = 1
        friendList.value = []
        getFriend()
        ElNotification({
            type: 'success',
            message: '操作成功'
        })
    } catch {
        mhtLoading.value = false
    }

}


const openLink = (path) => {
    open(path)
}

const handeleDelete = async () => {

    ElMessageBox.confirm(
        '确认删除该话术吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            await deleteTask(taskInfo.value.id)
            router.back()
        })
        .catch(() => {

        })
}


const materiaTotal = ref(0)
const getMaterias = async () => {
    const res = await taskMaterials({
        task_id: taskInfo.value.id,
        page: 1,
        page_size: 100
    })
    materiaList.value = res.list.map(el => {
        el.content = JSON.parse(el.content)
        return el
    })
}


// 处理定时任务
const mouthDatys = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31])
const disabledDate = (e) => {
    return e.getTime() < Date.now() - 8.64e7
}



// 机器人
const robotQuery = reactive({
    page: 1,
    page_size: 100
})
const robotTotal = ref(0)
const robotArr = ref([])
const getTable = async () => {
    const res = await robotList(robotQuery)
    robotArr.value = res.list.map(el => {
        el.id = String(el.id)
        return el
    })
    robotTotal.value = res.total
    if (taskInfo.value.id) {
        let obj = JSON.parse(JSON.stringify(detailInfo.taskDetails))
        robotArr.value.forEach((item) => {
            if (item.id == obj.robot_id) {
                activeRobotDelites.value = item
                userRobotStore.robotInfo = item
            }
        })
    }
}
const activeRobotDelites = ref({})
const changeRobot = (e) => {

    if (ruleForm.value.sop_type == 1) {
        selloGroupPage = 1
        getFriendPage = 1
        taskgroupListEd.value = []
        getTaskGroups()
        taskfriendListEd.value = []
        getFriends()


    }
    robotArr.value.forEach((item) => {
        if (item.id == e) {
            activeRobotDelites.value = item
            userRobotStore.robotInfo = item
        }
    })
    materiaList.value = []
}
const currentChange = (e) => {
    robotQuery.page = e
    getTable()
}


const changeSopType = () => {
    // if (ruleForm.value.sop_type == 1) {
    //     ruleForm.value.robot_id = ''

    // } else {
    //     ruleForm.value.robot_id = []
    // }
}

const editMateria = (item) => {
    dialogVisible.value = true
    editData.value = item
}


// 


const dialogTag = ref(false)
const tags = ref([])
const openTags = (e) => {
    dialogTag.value = true

}

// let selectedList = []
const selectedTags = (e) => {
    // tags.value.push(e)
    // selectedList = e
    // console.log(e)
    tags.value = e
    gzForm.value.tag_id = tags.value.map(el => String(el.id)).join(',')
}

const saveTag = () => {
    // selectedList.forEach(item => {
    //     const existingItem = tags.value.find(tag => tag.id === item.id);
    //     if (!existingItem) {
    //         tags.value.push(item);
    //     }
    // });

    dialogTag.value = false
}

const removeTag = (index) => {
    tags.value.splice(index, 1)
}


// 获取过去第N天的具体日期
const getPastDate = (n) => {
    const date = new Date()
    date.setDate(date.getDate() - n)
    return date.toISOString().split('T')[0]
}

watch(taskInfo, (val) => {




})
onActivated(() => {

})
onMounted(async () => {
    getTable()


    if (taskInfo.value.id) {
        let obj = JSON.parse(JSON.stringify(detailInfo.taskDetails))
        if (obj.sop_type == 2) {
            // obj.robot_id = obj.robot_id.split(',')
            const resFriend = await taskFriends({
                task_id: taskInfo.value.id,
                page: 1,
                page_size: 100
            })
            if (resFriend.list.length) {
                const gzFormt = JSON.parse(resFriend.list[0].friend_rule)
                gzForm.value = gzFormt

                if (gzForm.value.time_type == 8) {
                    gzForm.value.date_picker = [gzFormt.start_time, gzFormt.end_time]
                }
                if (gzForm.value.rule_type == 3) {
                    // tagSelected({
                    //     robot_id: obj.robot_id,
                    //     page: 1,
                    //     page_size: 100
                    // }, gzForm.value.tag_id).then(list => {
                    //     tags.value = list
                    // })
                    tags.value = []
                    let tasIdArr = gzForm.value.tag_id.split(',')
                    let tasNameArr = resFriend.list[0].tag_name?.split(',')
                    tasIdArr.forEach((el, index) => {
                        let obj = {
                            id: el,
                            name: tasNameArr[index]
                        }
                        tags.value.push(obj)
                    })
                }
            }

        } else {
            // obj.robot_id = String(obj.robot_id)

            getActiveGroups()
            getActiveFriends()
        }
        if (obj.type == 1) {
            obj.spec_content = JSON.parse(obj.spec_content)

            if (obj.spec_content.type == 1) {
                if (obj.spec_content.month < 10) {
                    obj.spec_content.month = '0' + obj.spec_content.month
                }
                // if (obj.spec_content.day < 10) {
                //     obj.spec_content.day = '0' + obj.spec_content.day
                // }
                if (obj.spec_content.hour < 10) {
                    obj.spec_content.hour = '0' + obj.spec_content.hour
                }
                if (obj.spec_content.minute < 10) {
                    obj.spec_content.minute = '0' + obj.spec_content.minute
                }
                obj.spec_content.time = obj.spec_content.year + '-' + obj.spec_content.month + '-' + obj.spec_content.day + ' ' + obj.spec_content.hour + ':' + obj.spec_content.minute

            } else if (obj.spec_content.type == 2) {
                if (obj.spec_content.hour < 10) {
                    obj.spec_content.hour = '0' + obj.spec_content.hour
                }
                if (obj.spec_content.minute < 10) {
                    obj.spec_content.minute = '0' + obj.spec_content.minute
                }
                obj.spec_content.time = obj.spec_content.hour + ':' + obj.spec_content.minute
            } else if (obj.spec_content.type == 3) {
                obj.spec_content.week = obj.spec_content.week.split(',').map((el) => {
                    return Number(el)
                })
                if (obj.spec_content.hour < 10) {
                    obj.spec_content.hour = '0' + obj.spec_content.hour
                }
                if (obj.spec_content.minute < 10) {
                    obj.spec_content.minute = '0' + obj.spec_content.minute
                }
                obj.spec_content.time = obj.spec_content.hour + ':' + obj.spec_content.minute
            } else if (obj.spec_content.type == 4) {
                obj.spec_content.day = obj.spec_content.day.split(',')
                if (obj.spec_content.hour < 10) {
                    obj.spec_content.hour = '0' + obj.spec_content.hour
                }
                if (obj.spec_content.minute < 10) {
                    obj.spec_content.minute = '0' + obj.spec_content.minute
                }
                obj.spec_content.time = obj.spec_content.hour + ':' + obj.spec_content.minute
            }
            ruleForm.value = obj
        } else {
            obj.spec_content = JSON.parse(obj.spec_content)
            ruleForm.value = obj
        }

        getMaterias()


    } else {
        // getTaskGroups()
        // getFriends()
    }
})
</script>
<style lang="scss" scoped>
.user-container {
    padding: var(--el-main-padding);
    height: 100%;

    .el-col {
        height: 100%;

        .el-card {
            height: 100%;
            position: relative;

            .title {
                display: block;
                font-size: 16px;
                margin-bottom: 20px;
                font-weight: bold;
                line-height: 24px;
                // margin-top: 20px;
            }

            .box {
                height: calc(100% - 100px);
                // padding: 10px 0px;
                position: relative;
                overflow-x: hidden;

                .el-row {
                    height: 100%;
                }

                .el-col {
                    height: 100%;
                }

                .form-content {
                    width: 600px;
                }

                .materia-box {
                    margin-top: 10px;
                    // margin-left: 20px;
                    height: calc(100vh - 250px);
                    border: 1px solid var(--el-border-color);
                    // padding: 25px;
                    display: flex;
                    position: relative;
                    background-color: var(--el-color-primary-light-9);

                    .meaasge {
                        height: calc(100vh - 252px);
                        padding: 25px;
                        flex: 2;
                        position: relative;

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

                    .user-list {
                        padding: 25px;
                        flex: 1;
                        background-color: #fff;

                        .infinite-list-item {
                            height: 32px;
                            line-height: 32px;
                            margin: 0;
                            background-color: #fff;
                        }
                    }
                }

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

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

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

            }

            .add-materia {
                position: absolute;
                right: 0px;
                top: 5px;
                z-index: 1;
            }

            .footer-btn {
                position: absolute;
                right: 20px;
                bottom: 20px;
            }
        }
    }

    .infinite-list {
        width: 100%;
        height: 100%;
        list-style: none;
        padding-top: 10px;
    }

    .infinite-list .infinite-list-item {

        height: 40px;
        line-height: 40px;
        background: var(--el-color-primary-light-9);
        margin: 5px 0;
        width: 100%;
        padding: 0 10px;
        font-size: 14px;

        .el-image {
            width: 30px;
            height: 30px;
            border-radius: 4px;
            vertical-align: middle;
            margin-right: 10px;
        }

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

        .join-time {
            float: right;
        }
    }

    .infinite-list .infinite-list-item+.list-item {
        margin-top: 10px;
    }


    .check-col {
        position: relative;

        &::after {
            position: absolute;
            content: '';
            width: 2px;
            height: 100%;
            background-color: var(--el-border-color);
            top: 0;
            right: 0px;
        }
    }

    .get-infinite {
        height: calc(100vh - 290px);
        margin-top: 5px;
        padding-top: 0;
    }

    .load-more {
        text-align: center;
        height: 30px;
        line-height: 30px;
        color: var(--el-text-color-secondary);
        font-size: 14px;
    }

    .tags-box {
        margin-top: 10px;

        .el-tag {
            margin-right: 10px;
        }
    }

    .plus-tag {
        margin-left: 10px;
        position: relative;
        top: 5px;
    }

    .icon-close {
        color: var(--el-color-danger);
        cursor: pointer;
        margin-left: 5px;
    }
}
</style>