<template>
    <div class="p-4">
        <div class="tagType-box">
            <div class="tag-header">
                <div class="tag-title">标签类型管理</div>
            </div>
            <div class="tag-body">
                <BasicTable @register="registerTableTagType">
                    <!-- <template #toolbar>
                        <Button type="primary" @click="openDialog(null)">
                            新增标签
                        </Button>
                        <Button type="primary" danger :disabled="hasSelected" @click="delAllData">
                            批量删除
                        </Button>
                    </template> -->
                    <!-- <template #action="{ record }">
                        <TableAction :actions="[
                            {
                                label: '',
                                tooltip: '编辑',
                                icon: 'ant-design:edit-outlined',
                                onClick: openDialog.bind(null, record),
                            },
                            {
                                label: '',
                                tooltip: '删除',
                                icon: 'ant-design:delete-outlined',
                                onClick: onDelete.bind(null, record.id),
                            },
                        ]" />
                    </template> -->
                    <template #action="{ record }">
                        <TableAction :actions="[
                            {
                                label: '查看',
                                tooltip: '查看',
                                onClick: searchTagsByType.bind(null, record.TYPE),
                            }
                        ]" />
                    </template>
                </BasicTable>
                <!-- <div class="body-header">
                    <div class="item-title">标签类型列表</div>
                    <div class="table-btns">
                        <a-button class="btn" type="primary" @click="openDialog('add', {})">新增</a-button>
                    </div>
                </div>
                <div class="body-content">
                    <a-table :columns="columns" :data-source="tableData" :bordered="true">
                        <template #operation="{ record }">
                            <a-tooltip title="编辑" color="yellow">
                                <a @click="openDialog('edit', record)">
                                    <EditOutlined />
                                </a>
                            </a-tooltip>
                        </template>
                    </a-table>
                </div> -->
            </div>
        </div>
        <div class="tag-box">
            <div class="tag-header">
                <div class="tag-title">标签管理</div>
                <div class="handle-btns">
                    <span class="label">查询类型：</span>
                    <a-select v-model:value="searchType" style="width: 120px">
                        <a-select-option value="name">标签名称</a-select-option>
                        <a-select-option value="code">标签编码</a-select-option>
                        <a-select-option value="type">标签类型</a-select-option>
                        <a-select-option value="time">创建时间</a-select-option>
                    </a-select>
                    <a-input v-model:value="searchValue" placeholder="输入关键字查询" allow-clear />
                    <a-button class="btn" type="primary" @click="searchTable">查询</a-button>
                </div>
            </div>
            <div class="tag-body">
                <BasicTable @register="registerTableTag">
                    <template #toolbar>
                        <Button type="primary" @click="openDialog(null)">
                            新增标签
                        </Button>
                        <Button type="primary" danger :disabled="hasSelected" @click="delAllData">
                            批量删除
                        </Button>
                    </template>
                    <template #action="{ record }">
                        <TableAction :actions="[
                            {
                                label: '',
                                tooltip: '编辑',
                                icon: 'ant-design:edit-outlined',
                                onClick: openDialog.bind(null, record),
                            },
                            {
                                label: '',
                                tooltip: '删除',
                                icon: 'ant-design:delete-outlined',
                                onClick: onDelete.bind(null, record.id),
                            },
                        ]" />
                    </template>
                </BasicTable>
            </div>
        </div>
        <TagDrawer v-if="ifShowDialog" @closeDialog="ifShowDialog = false" :formData="formData" :drawerTitle="drawerTitle"
            @onSubmit="onSubmit" ref="drawerRef">
        </TagDrawer>
    </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch, createVNode } from 'vue';
// 导入表格组件，表格事件
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { Button, notification } from 'ant-design-vue';

import TagDrawer from './TagDrawer.vue';
import { getAllTags, getAllTagsType, deleteTag } from '/@/api/sys/tag';
import { message, Modal } from 'ant-design-vue';
import { EditOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import moment from 'moment'
import { session } from '/@/utils/Memory';

export default defineComponent({
    name: 'tag',
    components: { TagDrawer, EditOutlined, DeleteOutlined, ExclamationCircleOutlined, BasicTable, TableAction, Button },
    setup() {
        const drawerRef = ref(null)
        const data = reactive({
            tableData: [],//表格数据
            selectedRowKeys: [],//选中的key
            searchType: "name",//查询类型
            searchValue: "",//查询值
            formData: {
                id: "",
                name: "",
                codeName: "",
                code: "",
                type: "",
                px: "",
            },
            drawerTitle: "新增标签",
            ifShowDialog: false
        });
        //获取所有标签
        const getTagsData = () => {
            return new Promise((resolve, reject) => {
                let param = {
                    1: session.getItem('tokenV2')
                }
                getAllTags(param).then(res => {
                    let resData = JSON.parse(res.result)
                    resData.forEach((item, index) => {
                        item.time = moment(item.createtime).format('YYYY-MM-DD HH:mm:ss'),
                            item.state = `状态${index + 1}`
                    })
                    resolve(resData)
                })
            })
        }
        //获取所有标签类型
        const getTagsTypeData = () => {
            return new Promise((resolve, reject) => {
                let param = {
                    1: session.getItem('tokenV2')
                }
                getAllTagsType(param).then(res => {
                    let resData = JSON.parse(res.result)
                    resolve(resData)
                })
            })
        }
        //排序与删选数据，用于表格
        const filteredInfo = ref({
            name: null,
            code: null,
            type: null,
            time: null
        });
        //表格列
        const columns = computed(() => {
            const filtered = filteredInfo.value || {};
            return [
                {
                    title: '标签名称',
                    dataIndex: 'name',
                    key: 'name',
                    filteredValue: filtered.name || null,
                    onFilter: (value, record) => record.name.includes(value)
                },
                {
                    title: '标签编码',
                    dataIndex: 'code',
                    key: 'code',
                    filteredValue: filtered.code || null,
                    onFilter: (value, record) => record.code.includes(value)
                },
                {
                    title: '标签类型',
                    dataIndex: 'type',
                    key: 'type',
                    filteredValue: filtered.type || null,
                    onFilter: (value, record) => record.type.includes(value)
                },
                // {
                //     title: '启用状态',
                //     dataIndex: 'state',
                //     key: 'state',
                //     filteredValue: filtered.state || null,
                //     onFilter: (value, record) => record.state.includes(value)
                // },
                {
                    title: '创建时间',
                    dataIndex: 'time',
                    key: 'time',
                    filteredValue: filtered.time || null,
                    onFilter: (value, record) => record.time.includes(value)
                }
            ];
        });
        //表格查询功能
        const searchTable = () => {
            filteredInfo.value[data.searchType] = [data.searchValue]
        }
        //判断是否选中数据
        const hasSelected = computed(() => {
            const rowSelection = getRowSelection();
            return !rowSelection.selectedRowKeys?.length;
        });
        //删除所有选中的数据
        const delAllData = () => {
            Modal.confirm({
                title: '删除提示',
                icon: createVNode(ExclamationCircleOutlined),
                content: '确定删除标签？',
                centered: true,
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk: (() => {
                    const rowKeys = getSelectRowKeys();
                    let param = {
                        1: session.getItem('tokenV2'),
                        2: JSON.stringify({}),
                        3: JSON.stringify(rowKeys)
                    }
                    deleteTag(param).then(res => {
                        message.success('操作成功');
                        reload();
                        setSelectedRowKeys([])
                    })
                })
            });
        };
        //新增或修改数据，打开弹窗
        const openDialog = (record) => {
            if (!record) {
                data.formData = {
                    id: "",
                    name: "",
                    codeName: "",
                    code: "",
                    type: "",
                    px: "",
                }
                data.drawerTitle = '新增标签'
                data.ifShowDialog = true
            } else {
                data.formData = {
                    id: record.id,
                    name: record.name,
                    code: record.code,
                    codeName: record.codeName,
                    type: record.type,
                    px: record.px,
                }
                data.drawerTitle = '修改标签'
                data.ifShowDialog = true
            }
        }
        //删除单个数据
        const onDelete = (id) => {
            Modal.confirm({
                title: '删除提示',
                icon: createVNode(ExclamationCircleOutlined),
                content: '确定删除标签？',
                centered: true,
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk: (() => {
                    let param = {
                        1: session.getItem('tokenV2'),
                        2: JSON.stringify({}),
                        3: JSON.stringify([id])
                    }
                    deleteTag(param).then(res => {
                        message.success('操作成功');
                        reload();
                    })
                })
            });
        }
        //弹窗确认
        const onSubmit = (e) => {
            data.ifShowDialog = false
            if (e) {
                reload();
            }
        }

        const searchTagsByType = (type) => {
            filteredInfo.value.type = [type]
        }

        //注册tag表格
        const [
            registerTableTag,
            { reload, collapseAll, getRowSelection, getSelectRowKeys, setSelectedRowKeys },
        ] = useTable({
            title: '标签列表', //'菜单列表'
            api: getTagsData, //加载数据
            columns: columns,
            useSearchForm: false,     //开启搜索区域
            bordered: true,
            showTableSetting: true,  // 显示表格设置
            tableSetting: {
                redo: true,
                size: true,
                setting: false,
                fullScreen: false
            },
            showIndexColumn: true,
            pagination: {
                // pageSize: 10,
                hideOnSinglePage: false
            },
            rowKey: (record) => record.id,
            actionColumn: {
                width: 100,
                title: '操作',
                dataIndex: 'action',
                slots: { customRender: 'action' },
            },
            rowSelection: {
                type: 'checkbox',
            },
        });

        const tagTypeColumns = [
            {
                title: 'COUNT',
                dataIndex: 'COUNT',
                key: 'COUNT'
            },
            {
                title: '类型名称',
                dataIndex: 'TYPE',
                key: 'TYPE'
            },
        ]
        //注册tagType表格
        const [
            registerTableTagType,
            { reload: reloadTagType },
        ] = useTable({
            title: '标签类型列表', //'菜单列表'
            api: getTagsTypeData, //加载数据
            columns: tagTypeColumns,
            useSearchForm: false,     //开启搜索区域
            bordered: true,
            showTableSetting: true,  // 显示表格设置
            tableSetting: {
                redo: true,
                size: true,
                setting: false,
                fullScreen: false
            },
            showIndexColumn: true,
            pagination: {
                // pageSize: 10,
                hideOnSinglePage: false
            },
            actionColumn: {
                width: 100,
                title: '操作',
                dataIndex: 'action',
                slots: { customRender: 'action' },
            }
        });

        return {
            drawerRef,
            filteredInfo,
            columns,
            hasSelected,
            ...toRefs(data),
            // func
            registerTableTag,
            registerTableTagType,
            getTagsData,
            searchTable,
            delAllData,
            onDelete,
            openDialog,
            onSubmit,
            searchTagsByType
        };
    },
});
</script>

<style lang="less" scoped>
.p-4 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

    .tag-box {
        width: 50%;
        // margin-right: 20px;
        height: 100%;

        .tag-header {
            padding: 10px;
            width: 100%;
            height: 70px;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .tag-title {
                font-size: 16px;
                font-weight: 500;
                margin-left: 20px;
                user-select: none;
            }

            .handle-btns {
                margin-right: 20px;
                display: flex;
                align-items: center;

                .label {
                    width: 150px;
                }

                .btn {
                    margin-left: 10px;
                }
            }
        }

        .tag-body {
            padding: 0 30px;
            margin-top: 20px;
            width: 100%;
            // height: 800px;
            height: calc(100% - 90px);

            background-color: #fff;


            .body-header {
                display: flex;
                height: 80px;
                width: 100%;
                // justify-content: space-between;
                align-items: center;

                .item-title {
                    height: 40px;
                    line-height: 40px;
                    font-size: 16px;
                    user-select: none;
                    margin-right: 20px;
                }

                .table-btns {
                    .btn {
                        margin-right: 10px;

                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }
            }

            .body-content {
                padding-bottom: 20px;
                min-height: 713px;
                max-height: 830px;
                overflow: auto;
                height: calc(100% - 80px);

                a {
                    margin-right: 10px;
                }
            }
        }
    }

    .tagType-box {
        width: calc(50% - 20px);
        margin-right: 20px;

        .tag-header {
            padding: 10px;
            width: 100%;
            height: 70px;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .tag-title {
                font-size: 16px;
                font-weight: 500;
                margin-left: 20px;
                user-select: none;
            }

            .handle-btns {
                margin-right: 20px;
                display: flex;
                align-items: center;

                .label {
                    width: 150px;
                }

                .btn {
                    margin-left: 10px;
                }
            }
        }

        .tag-body {
            padding: 0 30px;
            margin-top: 20px;
            width: 100%;
            // height: 800px;
            height: calc(100% - 90px);
            background-color: #fff;

            .body-header {
                display: flex;
                height: 80px;
                width: 100%;
                // justify-content: space-between;
                align-items: center;

                .item-title {
                    margin-right: 20px;
                    height: 40px;
                    line-height: 40px;
                    font-size: 16px;
                    user-select: none;
                }

                .table-btns {
                    .btn {
                        margin-right: 10px;

                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }
            }

            .body-content {
                padding-bottom: 20px;
                height: calc(100% - 80px);

                a {
                    margin-right: 10px;
                }
            }
        }
    }
}
</style>