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

        <!-- 查询和其他操作 -->
        <div class="filter-container">
            <el-input v-model="listQuery.title" clearable class="filter-item" style="width: 200px;"
                placeholder="请输入专题标题" />
            <el-input v-model="listQuery.subtitle" clearable class="filter-item" style="width: 200px;"
                placeholder="请输入专题子标题" />
            <el-select v-model="listQuery.sort" class="filter-item" placeholder="请选择排序字段">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button class="filter-item" type="primary" icon="search" @click="handleFilter">查找</el-button>
            <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="download"
                @click="handleDownload">导出</el-button>
        </div>

        <div style="margin-bottom: 20px;">
            <el-button class="filter-item" type="primary" icon="edit" @click="handleCreate">添加</el-button>
            <el-button class="filter-item" type="danger" icon="delete" @click="handleBatchDelete">批量删除
            </el-button>
        </div>

        <!-- 查询结果 -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />

            <el-table-column align="center" label="专题标题" prop="title" />

            <el-table-column align="center" label="专题子标题" min-width="200" prop="subtitle" />

            <el-table-column align="center" property="picUrl" label="图片">
                <template #default="scope">
                    <el-image :src="scope.row.picUrl" :preview-src-list="srcList" style="width: 40px; height: 40px"
                        preview-teleported :initial-index="scope.$index" />
                </template>
            </el-table-column>

            <el-table-column align="center" label="专题详情" prop="content">
                <template #default="scope">
                    <el-button type="primary" link @click="showContent(scope.row.content)">查看</el-button>
                </template>
            </el-table-column>

            <el-table-column align="center" label="底价" prop="price" />

            <el-table-column align="center" label="阅读数量" prop="readCount" />

            <el-table-column align="center" label="操作" min-width="100" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button type="primary" link @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <litemall-page :page-data="listQuery" :total="total" @size-change="sizeChange"
            @current-change="currentChange" />

        <!-- 查看详情 -->
        <html-details :html-data="htmlData" />

        <topic-create ref="topicCreateRef" @init="getList"/>
        <topic-edit ref="topicEditRef" @init="getList"/>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { listTopic, deleteTopic, batchDeleteTopic } from '@/services/api/promotion/topic'
import { ElMessage, ElMessageBox } from 'element-plus';
import _ from 'lodash'
import LitemallPage from "@/components/pagination/litemallPage.vue";
import htmlDetails from '@/components/htmlDetails.vue'
import topicCreate from './topicCreate.vue'
import topicEdit from './topicEdit.vue'

let list = ref([] as any)
let total = ref(0)
let listLoading = ref(true)
let srcList = ref([] as any)
let topicCreateRef = ref()
let topicEditRef = ref()
let listQuery = ref({
    page: 1,
    limit: 10,
    title: undefined,
    subtitle: undefined,
    sort: 'add_time',
    order: 'desc'
})
let htmlData = ref({
    htmlVisible: false,
    title: '专题详情',
    details: ''
})
let options = ref([{
    value: 'id',
    label: '按序号排序'
}, {
    value: 'add_time',
    label: '按时间排序'
}, {
    value: 'price',
    label: '按价格排序'
}])
let multipleSelection = ref([])
let downloadLoading = ref(false)


let getList = () => {
    listLoading.value = true
    listTopic(listQuery.value)
        .then((res: any) => {
            let urls = [] as any
            res.data.list.map((item: any) => urls.push(item.picUrl))
            srcList.value = urls
            urls = []
            list.value = res.data.list
            total.value = res.data.total
            listLoading.value = false
        })
        .catch(() => {
            list.value = []
            total.value = 0
            listLoading.value = false
        })
}
getList()

let currentChange = (val: number) => {
    listQuery.value.page = val
    getList()
}

let sizeChange = (val: number) => {
    listQuery.value.limit = val
    getList()
}

let handleFilter = () => {
    listQuery.value.page = 1
    getList()
}
let handleCreate = () => {
    topicCreateRef.value.createDrawer = true
}
let handleUpdate = (row: any) => {
    topicEditRef.value.editDrawer = true
    topicEditRef.value.getTopic(row.id)
}
let handleDelete = (row: any) => {
    ElMessageBox.confirm(
        '确认删除?', '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            deleteTopic(row)
                .then(res => {
                    ElMessage({
                        type: 'success',
                        message: '删除专题成功'
                    })
                    getList()
                })
                .catch(res => {
                    ElMessage({
                        type: 'error',
                        message: res.data.errmsg
                    })
                })
        })
}
let handleSelectionChange = (val: any) => {
    multipleSelection.value = val
}
let showContent = (content: any) => {
    htmlData.value.htmlVisible = true
    htmlData.value.details = content
}
let handleBatchDelete = () => {
    if (multipleSelection.value.length === 0) {
        ElMessage({
            type: 'error',
            message: '请选择至少一条记录'
        })
        return
    }
    const ids: any = []
    _.forEach(multipleSelection.value, function (item: any) {
        ids.push(item.id)
    })
    batchDeleteTopic({ ids: ids })
        .then((res: any) => {
            ElMessage({
                type: 'success',
                message: '批量删除专题成功'
            })
            getList()
        })
        .catch(res => {
            ElMessage({
                type: 'error',
                message: res.data.errmsg
            })
        })
}
let handleDownload = () => {
    // downloadLoading.value = true
    // import('@/vendor/Export2Excel').then(excel => {
    //     const tHeader = [
    //         '专题ID',
    //         '专题标题',
    //         '专题子标题',
    //         '专题内容',
    //         '专题图片',
    //         '商品低价',
    //         '阅读量',
    //         '专题商品'
    //     ]
    //     const filterVal = [
    //         'id',
    //         'title',
    //         'subtitle',
    //         'content',
    //         'picUrl',
    //         'price',
    //         'readCount',
    //         'goods'
    //     ]
    //     excel.export_json_to_excel2(tHeader, list, filterVal, '专题信息')
    //     downloadLoading.value = false
    // })
}
</script>


<style>
.el-dialog {
    width: 800px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar {
    width: 145px;
    height: 145px;
    display: block;
}
</style>
