<template>
    <div class="p-4">
        <div class="version-header">
            <!-- <div class="version-title">版本管理</div> -->
            <div class="search">
                <span class="label">版本名称：</span>
                <a-input v-model:value="searchValue" placeholder="输入关键字查询" allow-clear />
            </div>
            <div class="handle-btns">
                <a-button class="btn" @click="resetTable">重置</a-button>
                <a-button class="btn" type="primary" @click="searchTable">查询</a-button>
            </div>
        </div>

        <div class="version-body">
            <BasicTable @register="registerTable">
                <template #toolbar>
                    <Button type="primary" @click="handleAdd">
                        新增版本
                    </Button>
                    <Button type="primary" danger :disabled="hasSelected" @click="handleDelAll">
                        批量删除
                    </Button>
                </template>
                <template #action="{ record }">
                    <TableAction :actions="[
                        {
                            label: '查看',
                            tooltip: '查看',
                            onClick: handleLook.bind(null, record),
                        },
                        {
                            label: '编辑',
                            tooltip: '编辑',
                            onClick: handleEdit.bind(null, record),
                        },
                        {
                            label: '删除',
                            tooltip: '删除',
                            onClick: handleDel.bind(null, record.FID),
                        },
                    ]" />
                </template>
            </BasicTable>
        </div>

        <VersionManageModal @register="registerModal" @success="onSubmit"></VersionManageModal>
        <VersionResModal @register="registerResModal"></VersionResModal>
    </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch } from 'vue';
// 导入表格组件，表格事件
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { Button, notification } from 'ant-design-vue';
import { useModal } from '/@/components/Modal';
import VersionManageModal from './VersionManageModal.vue';
// import VersionModal from './VersionModal.vue';
import VersionResModal from './VersionResModal.vue';
import { getVersionList, delVersion } from '/@/api/sys/version';
import { message } from 'ant-design-vue';
import moment from 'moment'
import { session } from '/@/utils/Memory';
import uiTool from '/@/utils/uiTool';

export default defineComponent({
    name: 'version',
    components: { VersionManageModal, VersionResModal, BasicTable, TableAction, Button },
    setup() {
        const [registerModal, { openModal }] = useModal();
        const [registerResModal, { openModal: openResModal }] = useModal();
        const data = reactive({
            searchValue: "",//查询值
        });
        //获取所有标签
        const getVersionData = () => {
            return new Promise((resolve, reject) => {
                let params = {
                    keyStr: data.searchValue
                }
                getVersionList(params).then(res => {
                    if (res.resp_code === 0 && res.datas) {
                        resolve(res.datas.pageData)
                    }
                    else {
                        resolve([])
                        message.error(res.resp_msg)
                    }
                })
            })
        }
        //表格列
        const columns = [
            {
                title: '版本名称',
                align: 'center',
                dataIndex: 'VERSION_NAME',
                key: 'VERSION_NAME'
            },
            {
                title: '版本号',
                align: 'center',
                dataIndex: 'VERSION_NO',
                key: 'VERSION_NO'
            },
            {
                title: '备注',
                align: 'center',
                dataIndex: 'VERSION_DISP',
                key: 'VERSION_DISP'
            },
            {
                title: '创建时间',
                align: 'center',
                dataIndex: 'CREATE_DATE',
                key: 'CREATE_DATE'
            },
            {
                title: '创建人',
                align: 'center',
                dataIndex: 'CREATENAME',
                key: 'CREATENAME'
            },
            {
                title: '修改时间',
                align: 'center',
                dataIndex: 'MODIFY_DATE',
                key: 'MODIFY_DATE'
            }
        ];
        //表格查询功能
        const searchTable = () => {
            reload()
        }
        //重置
        const resetTable = () => {
            data.searchValue = ''
            reload()
        }
        //判断是否选中数据
        const hasSelected = computed(() => {
            const rowSelection = getRowSelection();
            return !rowSelection.selectedRowKeys?.length;
        });
        //新增
        const handleAdd = () => {
            openModal(true, {
                status: 'add',
                form: {}
            });
        }
        //查看
        const handleLook = (record) => {
            const { FID, VERSION_NAME, VERSION_NO, VERSION_DISP } = record;
            openResModal(true, {
                status: 'look',
                form: { FID, VERSION_NAME, VERSION_NO, VERSION_DISP }
            });
        }
        //修改
        const handleEdit = (record) => {
            const { FID, VERSION_NAME, VERSION_NO, VERSION_DISP } = record;
            openModal(true, {
                status: 'edit',
                form: { FID, VERSION_NAME, VERSION_NO, VERSION_DISP }
            });
        }
        //删除单个数据
        const handleDel = (id) => {
            uiTool.delModal('确定删除版本？', (() => {
                let param = {
                    fid: id
                }
                delVersion(param).then(res => {
                    if (res.resp_code === 0) {
                        // message.success('操作成功');
                        reload();
                        setSelectedRowKeys([])
                    }
                })
            }))
        }
        //删除所有选中的数据
        const handleDelAll = () => {
            uiTool.delModal('确定删除版本？', (() => {
                const rowKeys = getSelectRowKeys();
                let ids = rowKeys.toString()
                let param = {
                    fid: ids
                }
                delVersion(param).then(res => {
                    if (res.resp_code === 0) {
                        message.success('操作成功');
                        reload();
                        setSelectedRowKeys([])
                    }
                })
            }))
        };
        //弹窗确认
        const onSubmit = () => {
            reload();
        }
        const [
            registerTable,
            { reload, collapseAll, getRowSelection, getSelectRowKeys, setSelectedRowKeys },
        ] = useTable({
            title: '版本列表', //'菜单列表'
            api: getVersionData, //加载数据
            columns: columns,
            useSearchForm: false,     //开启搜索区域
            bordered: false,
            showTableSetting: true,  // 显示表格设置
            tableSetting: {
                redo: true,
                size: true,
                setting: false,
                fullScreen: false
            },
            showIndexColumn: true,
            pagination: {
                hideOnSinglePage: false
            },
            rowKey: (record) => record.FID,
            actionColumn: {
                width: 200,
                title: '操作',
                dataIndex: 'action',
                slots: { customRender: 'action' },
            },
            rowSelection: {
                type: 'checkbox',
            },
        });
        return {
            columns,
            hasSelected,
            ...toRefs(data),
            // func
            registerTable,
            registerModal,
            registerResModal,
            getVersionData,
            searchTable,
            resetTable,
            handleAdd,
            handleLook,
            handleEdit,
            handleDelAll,
            handleDel,
            onSubmit
        };
    },
});
</script>

<style lang="less" scoped>
.p-4 {
    height: 100%;

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

        .search {
            display: flex;
            align-items: center;

            .label {
                width: 120px;
            }
        }

        .handle-btns {
            display: flex;
            align-items: center;

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

    .version-body {
        padding: 0 20px;
        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;
            }

            .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>