<template>
    <div class="p-4">
        <div class="tagType-box">
            <div class="tag-header">
                <div class="tag-title">标签类型管理</div>
            </div>
            <div class="tag-body">
                <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" @change="tableChange">
                        <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">
                <div class="body-header">
                    <div class="item-title">标签列表</div>
                    <div class="table-btns">
                        <!-- <a-button class="btn" type="primary" @click="getTagsData" title="刷新">
                            <RedoOutlined />
                        </a-button> -->
                        <a-button class="btn" type="primary" @click="openDialog('add', {})">新增</a-button>
                        <!-- <a-popconfirm :title="delAllBtnTitle" @confirm="delAllData">
                            <a-button class="btn" :disabled="!hasSelected">批量删除</a-button>
                        </a-popconfirm> -->
                    </div>
                </div>
                <div class="body-content">
                    <a-table :columns="columns" :data-source="tableData" :bordered="true" @change="tableChange">
                        <template #operation="{ record }">
                            <a-tooltip title="编辑" color="yellow">
                                <a @click="openDialog('edit', record)">
                                    <EditOutlined />
                                </a>
                            </a-tooltip>
                            <a-tooltip title="删除" color="red">
                                <a @click="onDelete(record.id)">
                                    <DeleteOutlined />
                                </a>
                            </a-tooltip>
                        </template>
                    </a-table>
                </div>
            </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 TagDrawer from './TagDrawer.vue';
import { getAllTags, deleteTag } from '/@/api/sys/tag';
import { message, Modal } from 'ant-design-vue';
import { EditOutlined, DeleteOutlined, RedoOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import moment from 'moment'
import { session } from '/@/utils/Memory';

export default defineComponent({
    name: 'tag',
    components: { TagDrawer, EditOutlined, DeleteOutlined, RedoOutlined, ExclamationCircleOutlined },
    setup() {
        const drawerRef = ref(null)
        onMounted(() => {
            getTagsData();
        });
        const data = reactive({
            tableData: [],//表格数据
            selectedRowKeys: [],//选中的key
            searchType: "name",//查询类型
            searchValue: "",//查询值
            formData: {
                id: "",
                name: "",
                codeName: "",
                code: "",
                type: "",
                px: "",
            },
            drawerTitle: "新增标签",
            ifShowDialog: false
        });
        //获取所有标签
        const getTagsData = () => {
            data.tableData = []
            data.selectedRowKeys = []
            let param = {
                1: session.getItem('tokenV2')
            }
            getAllTags(param).then(res => {
                let resData = JSON.parse(res.result)
                resData.forEach((item, index) => {
                    data.tableData.push({
                        key: item.id,
                        state: `状态${index + 1}`,
                        time: moment(item.createtime).format('YYYY-MM-DD HH:mm:ss'),
                        ...item
                    })
                })
            })
        }
        //排序与删选数据，用于表格
        const filteredInfo = ref({
            name: null,
            code: null,
            type: null,
            time: null
        });
        const sortedInfo = ref();
        //表格列
        const columns = computed(() => {
            const filtered = filteredInfo.value || {};
            const sorted = sortedInfo.value || {};
            return [
                {
                    title: '标签名称',
                    dataIndex: 'name',
                    key: 'name',
                    filteredValue: filtered.name || null,
                    onFilter: (value, record) => record.name.includes(value),
                    sorter: (a, b) => a.name.length - b.name.length,
                    sortOrder: sorted.columnKey === 'name' && sorted.order,
                    // width: "500px"
                },
                {
                    title: '标签编码',
                    dataIndex: 'code',
                    key: 'code',
                    filteredValue: filtered.code || null,
                    onFilter: (value, record) => record.code.includes(value),
                    sorter: (a, b) => a.code.length - b.code.length,
                    sortOrder: sorted.columnKey === 'code' && sorted.order,
                    // width: "400px"
                },
                {
                    title: '标签类型',
                    dataIndex: 'type',
                    key: 'type',
                    filteredValue: filtered.type || null,
                    onFilter: (value, record) => record.type.includes(value),
                    sorter: (a, b) => a.type.length - b.type.length,
                    sortOrder: sorted.columnKey === 'type' && sorted.order,
                    // width: "230px"
                },
                {
                    title: '启用状态',
                    dataIndex: 'state',
                    key: 'state',
                    filteredValue: filtered.state || null,
                    onFilter: (value, record) => record.state.includes(value),
                    // width: "100px"
                },
                {
                    title: '创建时间',
                    dataIndex: 'time',
                    key: 'time',
                    filteredValue: filtered.time || null,
                    onFilter: (value, record) => record.time.includes(value),
                    sorter: (a, b) => a.time.length - b.time.length,
                    sortOrder: sorted.columnKey === 'time' && sorted.order,
                    // width: "230px"
                },
                {
                    title: '操作',
                    dataIndex: 'operation',
                    slots: {
                        customRender: 'operation',
                    }
                },
            ];
        });
        //表格发生分页等改变事件
        const tableChange = (pagination, filters, sorter) => {
            filteredInfo.value = filters;
            sortedInfo.value = sorter;
        };
        //表格查询功能
        const searchTable = () => {
            filteredInfo.value[data.searchType] = [data.searchValue]
        }
        //判断是否选中数据
        const hasSelected = computed(() => data.selectedRowKeys.length > 0);
        //删除提示
        const delAllBtnTitle = computed(() => `确定删除${data.selectedRowKeys.length}个标签？`)
        //删除所有选中的数据
        const delAllData = () => {
            let param = {
                1: session.getItem('tokenV2'),
                2: JSON.stringify({}),
                3: JSON.stringify(data.selectedRowKeys)
            }
            deleteTag(param).then(res => {
                message.success('操作成功');
                getTagsData();
                data.selectedRowKeys = [];
            })
        };
        //表格行选中事件
        const onSelectChange = selectedRowKeys => {
            data.selectedRowKeys = selectedRowKeys;
        };
        //新增或修改数据，打开弹窗
        const openDialog = (flag, record) => {
            if (flag === 'add') {
                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('操作成功');
                        getTagsData();
                    })
                })
            });
        }
        //弹窗确认
        const onSubmit = (e) => {
            data.ifShowDialog = false
            if (e) {
                getTagsData();
            }
        }
        return {
            drawerRef,
            filteredInfo,
            sortedInfo,
            columns,
            hasSelected,
            delAllBtnTitle,
            ...toRefs(data),
            // func
            getTagsData,
            tableChange,
            searchTable,
            delAllData,
            onDelete,
            onSelectChange,
            openDialog,
            onSubmit
        };
    },
});
</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>