<template>
    <div class="materialLibrary-container">
        <el-card class="search">
            <el-input v-model="query.title" placeholder="请输入标题/类型" style="width: 200px; margin-right: 12px;"></el-input>
            <el-select v-model="query.type" style="width: 120px; margin-right: 12px;" @change="search" clearable>
                <el-option v-for="item in materialTypes" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
            </el-select>
            <el-button type="primary" icon="Search" @click="search">查询</el-button>
            <el-button type="primary" icon="Plus" @click="addData" style="float: right">添加素材</el-button>
        </el-card>
        <el-card class="table-card">
            <div class="table-card-center">
                <div class="table-box">
                    <el-table :data="tableData" style="width: 100%" max-height="calc(100vh - 285px)" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="title" label="标题" />
                        <el-table-column prop="type" label="类型" min-width="80" >
                            <template #default="scoped">
                                {{ getTypeName(scoped.row.type) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="content" label="内容" min-width="80" align="center">
                            <template #default="scoped">
                                <div v-if="scoped.row.type == 1">{{ scoped.row.content.message }}</div>
                                <div v-if="scoped.row.type == 2">
                                    <el-image :src="scoped.row.content.img_url"
                                        :preview-src-list="[scoped.row.content.img_url]" preview-teleported="true" style="width: 40px;"></el-image>
                                </div>
                                <div v-if="scoped.row.type == 9">{{ scoped.row.content.card_user_name }}</div>
                                <div v-if="scoped.row.type == 7">{{ scoped.row.content.title }}</div>
                                <div v-if="scoped.row.type == 6">{{ scoped.row.content.address }} {{  scoped.row.content.detailed_address }}</div>
                                <div v-if="scoped.row.type == 8">
                                    <el-image :src="scoped.row.content.file_path"
                                        :preview-src-list="[scoped.row.content.file_path]" preview-teleported="true" style="width: 40px;"></el-image>
                                </div>
                                <div v-if="scoped.row.type == 4">
                                    {{ scoped.row.content.file_name }}
                                </div>
                                
                                <div v-if="scoped.row.type == 10">{{ scoped.row.content.file_name }}</div>
                                <div v-if="scoped.row.type == 3">语音</div>
                                <div v-if="scoped.row.type == 5">小程序</div>
                                
                            </template>
                        </el-table-column>
                        
                        <el-table-column prop="created_user" label="添加人" align="center"></el-table-column>
                        <el-table-column prop="created_at" label="添加时间" align="center"
                            min-width="160"></el-table-column>

                        <el-table-column prop="description" label="描述" />
                        <el-table-column prop="" label="操作" width="80" align="center">
                            <template #default="scoped">
                                <span class="operations" @click="toEdit(scoped.row)" v-if="scoped.row.type != 3 && scoped.row.type != 5">
                                    <el-icon>
                                        <Edit />
                                    </el-icon>
                                </span>
                                <span class="operations" @click="deleteItem(scoped.row)" style="margin-left: 8px;">
                                    <el-icon style="color: var(--el-color-danger);">
                                        <Delete />
                                    </el-icon> </span>

                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination-box">
                    <el-pagination v-model:current-page="query.page" v-model:page-size="query.page_size"
                        :page-sizes="[10, 20, 30, 40, 50]" :size="query.page_size" background
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </div>
        </el-card>
        <el-dialog v-model="dialogVisible" title="添加素材" width="1000px" align-center destroy-on-close>
            <div class="dialog-box" v-loading.fullscreen.lock="loading">
                <MaterialPublic ref="materialRef" @hideMaterial="hideMaterial" :editData="editData"></MaterialPublic>
            </div>

        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { materialList, addMaterial, updataMaterial, deletaMaterial } from '@/api/material'
import MaterialPublic from '@/components/MaterialPublic/index.vue'
const materialRef = ref()
const dialogVisible = ref()
const materialTypes = [{
    label: '文本',
    value: 1
}, {
    label: '图片',
    value: 2
}, {
    label: '语音',
    value: 3
}, {
    label: '视频',
    value: 4
}, {
    label: '小程序',
    value: 5
}, {
    label: '位置',
    value: 6
}, {
    label: '链接',
    value: 7
}, {
    label: 'GIF图片',
    value: 8
}, {
    label: '名片',
    value: 9
}, {
    label: '文件',
    value: 10
}]
const editData = ref(null)

const query = reactive({
    title: '',
    type: '',
    page: 1,
    page_size: 10
})
const total = ref(0)
let allSelects = []
const tableData = ref([])
const isEdit = ref(false)
const search = () => {
    query.page = 1
    getTable()
}
const handleSizeChange = (e) => {
    query.page = 1
    query.page_size = e
    getTable()
}
const handleCurrentChange = (e) => {
    query.page = e
    getTable()
}
const getTable = async () => {
    const res = await materialList(query)
    tableData.value = res.list.map((el) => {
        el.content = JSON.parse(el.content)
        return el
    })
    total.value = res.total
}
// 多选
const handleSelectionChange = (e) => {

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

        })
}
const deleteItem = (row) => {
    ElMessageBox.confirm(
        '确认移除该素材吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            await deletaMaterial(row.id)
            query.page = 1
            getTable()
        })
        .catch(() => {

        })
}
const addData = () => {
    editData.value = null
    dialogVisible.value = true
}
const toEdit = (row) => {
    editData.value = row
    dialogVisible.value = true
    nextTick(() => {
        materialRef.value.show(row)

    })
}
const hideMaterial = () => {
    dialogVisible.value = false
    query.page = 1
    getTable()
}
const getTypeName = (type) => {
    let typeName = ''
    materialTypes.forEach((el) => {
        if(type == el.value) {
            typeName = el.label
        }
    })
    return typeName
}
onMounted(() => {
    getTable()
})
</script>
<style lang="scss" scoped>
.materialLibrary-container {

    .el-card {
        background-color: var(--el-bg-color);
    }

    .table-card {
        margin-top: 20px;

        .table-card-center {
            height: calc(100vh - 232px);
        }

        .table-box {
            height: calc(100% - 60px);
        }
    }

    .pagination-box {
        overflow: hidden;
        margin-top: 25px;
        text-align: right;

        .el-pagination {
            float: right;
        }
    }

    .operations {
        font-size: 14px;
        // color: var(--el-color-primary);
        cursor: pointer;

        .el-icon {
            position: relative;
            top: 2px;
        }

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

    .costom-select-item {

        font-size: 14px;

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