<template>
    <!-- 面包屑 -->
    <el-breadcrumb>
        <el-breadcrumb-item>授权记录</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 搜索 -->
    <el-form inline :model="params">
        <el-form-item label="昵称">
            <el-input v-model='params.wechat_history_nickname' placeholder='请输入昵称'></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="tableRef.reload()" icon="ElIconSearch">
                搜索
            </el-button>
        </el-form-item>
    </el-form>

    <el-space style="margin-bottom: 10px;">
        <!-- 下拉操作 -->
        <el-dropdown v-if="selectionData.length">
            <el-button type="primary">
                批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="handleDelete(selectionData)">
                        批量删除
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </el-space>

    <!-- 数据表格 -->
    <DataTable ref="tableRef" style="width: 100%" :onSelectionChange="data => (selectionData = data)" :column="column"
        :params="params" :request="params => getHistoryList(params)">


        <template #wechat_history_avatar="scope">
            <el-image v-if="scope.row.wechat_history_avatar" :src="scope.row.wechat_history_avatar.split(',')[0]" lazy
                :preview-src-list="scope.row.wechat_history_avatar.split(',')" :preview-teleported="true"
                :hide-on-click-modal="true" fit="contain" class="el-avatar"></el-image>
            <template v-else>暂无图片</template>
        </template>

        
        <template #wechat_history_refer="scope">
            <a :href="scope.row.wechat_history_refer">{{ scope.row.wechat_history_refer }}</a>
        </template>


        <template #chaoz="scope">
            <el-space>
                <el-button type="primary" size="small" @click="handleDelete([scope.row])">
                    删除
                </el-button>
            </el-space>
        </template>

    </DataTable>
</template>
<script setup>
import { ArrowDown } from '@element-plus/icons-vue';
import { ref, reactive } from 'vue';
import { getHistoryList, deleteHistory } from '~/service/wechat';

const tableRef = ref();
const selectionData = ref([]);

// 查询参数
const params = reactive({
    wechat_history_nickname: "",
});

const column = [

    {
        fixed: true,
        type: 'selection'
    },
    {
        prop: "wechat_history_nickname",
        label: '昵称',
    },
    {
        prop: "wechat_history_avatar",
        label: '头像'
    },
    {
        prop: "wechat_history_ip",
        label: 'IP地址',
    },
    {
        prop: "wechat_history_openid",
        label: 'OpenID',
    },
    {
        prop: "wechat_history_refer",
        label: "访问地址"
    },
    {
        prop: "create_time",
        label: '访问时间',
    },
    {
        label: '操作',
        prop: 'chaoz',
        width: '250',
        fixed: 'right'
    }
];


// 删除数据
const handleDelete = data => {
    ElMessageBox.confirm(`您确定要删除该条记录吗？`).then(async () => {
        const res = await deleteHistory({
            wechat_history_id: data.map(v => v.wechat_history_id).join()
        });
        if (res) {
            tableRef.value.reload();
        }
    });
};

</script>