<template>
    <div class="default-main">
        <TableHeader select ref="TableHeaderRef" showCustomColumn>
            <template #operation>
                <el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
            </template>
        </TableHeader>
        <Table ref="tableRef" />
        <formTab ref="formTabRef" v-if="show" @Cancels=";(show = false), tableStore.index()" />
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { activateTheme, deleteTheme } from '@/api/system/subject/index'
import formTab from './form/index.vue'
import { ElMessage } from 'element-plus'
import { useConfig } from '@/stores/config'
import { getTheme } from '@/api/systerm'
const configStore = useConfig()
defineOptions({
    name: 'user-boot/function/functionTree'
})

const formTabRef = ref()
const TableHeaderRef = ref()
const show = ref(false)
const tableStore: any = new TableStore({
    url: '/system-boot/theme/getAllThemes',
    method: 'GET',
    column: [
        {
            field: 'index',
            title: '序号',
            width: '80',
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        { field: 'name', title: '主题名称' },
        { field: 'remark', title: '描述' },
        { field: 'logoUrl', title: '主题图标', render: 'image' },

        {
            title: '操作', fixed: 'right',
            width: '180',
            render: 'buttons',
            buttons: [
                {
                    name: 'edit',
                    title: '激活 ',
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    disabled: row => {
                        return row.active == 1
                    },
                    click: row => {
                        activateTheme({ id: row.id }).then(res => {
                            ElMessage({
                                message: '激活成功!',
                                type: 'success'
                            })
                            tableStore.index()
                        })
                    }
                },
                {
                    name: 'edit',
                    title: '修改 ',
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: row => {
                        show.value = true
                        setTimeout(() => {
                            formTabRef.value.open({
                                text: '修改主题',
                                row: row
                            })
                        }, 10)
                    }
                },
                {
                    name: 'edit',
                    title: '删除',
                    type: 'danger',
                    icon: 'el-icon-Delete',
                    render: 'confirmButton',
                    popconfirm: {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        confirmButtonType: 'danger',
                        title: '确定删除吗？'
                    },
                    click: row => {
                        deleteTheme({ id: row.id }).then(res => {
                            ElMessage({
                                message: '删除成功!',
                                type: 'success'
                            })
                            tableStore.index()
                        })
                    }
                }
            ]
        }
    ],

    loadCallback: () => {
        getTheme().then(res => {
            let list: any = [
                'elementUiPrimary',
                'tableHeaderBackground',
                'tableHeaderColor',
                'tableCurrent',
                'menuBackground',
                'menuColor',
                'menuTopBarBackground',
                'menuActiveBackground',
                'menuActiveColor',
                'headerBarTabColor',
                'headerBarBackground'
            ]

            window.localStorage.setItem('getTheme', JSON.stringify(res.data))
            for (let i = 0; i < list.length; i++) {
                configStore.setLayout(list[i], JSON.parse(res.data[list[i]]))
            }
            configStore.setLayout('elementUiPrimary', JSON.parse(res.data['elementUiPrimary']))
        })
    }
})

provide('tableStore', tableStore)
// 新增主题
const add = () => {
    show.value = true
    setTimeout(() => {
        formTabRef.value.open({
            text: '新增主题'
        })
    }, 10)
}
onMounted(() => {
    tableStore.index()
})
</script>
