<template>
    <BasicModal :maskClosable="false" :width="1600" @register="registerModal" v-bind="$attrs" :title="title" centered
        :showOkBtn="false" :showCancelBtn="false" wrapClassName="basic-modal-custom" :footer="null">
        <div class="custom-content">
            <div class="left-box">
                <div class="res-list-btn" v-for="(item, index) in resBtns" :key="index"
                    :class="{ 'clicked': currentType === item.value }" @click="handleChangeRes(item)">
                    {{ item.label }}({{ item.number }})
                </div>
            </div>
            <div class="right-box">
                <div class="right-header">
                    <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="right-body">
                    <BasicTable @register="registerTable">
                        <template #action="{ record }">
                            <TableAction :actions="[
                                {
                                    label: '浏览',
                                    tooltip: '浏览',
                                    onClick: handleFetchRes.bind(null, record),
                                },
                                {
                                    label: '查看',
                                    tooltip: '查看',
                                    onClick: handleLookRes.bind(null, record),
                                },
                                {
                                    label: '历史版本',
                                    tooltip: '历史版本',
                                    onClick: handleSearchHistory.bind(null, record),
                                },
                            ]" />
                        </template>
                    </BasicTable>
                </div>
            </div>
        </div>
    </BasicModal>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch, computed } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
// 导入表格组件，表格事件
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { Button, message } from 'ant-design-vue';
import { getResByVersion } from '/@/api/sys/version';
import { session } from '/@/utils/Memory';
import moment from 'moment';

export default defineComponent({
    name: 'VersionResModal',
    components: { BasicModal, BasicTable, TableAction, Button },
    setup(_, { emit }) {
        const title = ref('');
        const resBtns = ref([
            {
                label: '地图资源',
                value: 'MR',
                number: 0
            },
            {
                label: '场景资源',
                value: 'DR',
                number: 0
            },
            {
                label: '文件资源',
                value: 'ER',
                number: 0
            },
            {
                label: '组件服务',
                value: 'SR',
                number: 0
            },
            {
                label: '接口服务',
                value: 'interface',
                number: 0
            }
        ]);
        const currentType = ref('MR')
        const currentFid = ref('')
        const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
            const { FID, VERSION_NAME, VERSION_NO, VERSION_DISP } = data.form;
            currentFid.value = FID;
            title.value = `【${VERSION_NAME} V${VERSION_NO}】资源绑定查看`;
        });
        const getVersionResData = ()=>{
            return new Promise(resolve => {
                let params = {
                    fid: currentFid.value,
                    serviceType: currentType.value
                }
                getResByVersion(params).then(res=>{
                    resolve([])
                })
            })
        }
        //表格列
        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: 'insertTime',
                key: 'insertTime'
            },
            {
                title: '修改时间',
                align: 'center',
                dataIndex: 'updateTime',
                key: 'updateTime'
            }
        ];
        const [
            registerTable,
            { reload, collapseAll, getRowSelection, getSelectRowKeys, setSelectedRowKeys },
        ] = useTable({
            title: '版本列表', //'菜单列表'
            api: getVersionResData, //加载数据
            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',
            },
        });
        const handleChangeRes = (item) => {
            currentType.value = item.value;
            reload();
        }
        return {
            title,
            resBtns,
            currentType,
            registerModal,
            registerTable,
            handleChangeRes
        };
    },
});
</script>
<style lang="less">
.basic-modal-custom {

    .ant-modal-content {
        background-color: #eff0f5;

        .scroll-container .scrollbar__wrap {
            margin-bottom: 0 !important;
        }

        .custom-content {
            display: flex;
            justify-content: space-between;
            // height: 100%;

            .left-box {
                padding: 20px;
                width: 240px;
                height: 80vh;
                background-color: #ffffff;
                border-radius: 6px;

                .res-list-btn {
                    height: 35px;
                    margin-bottom: 16px;
                    background-color: #eff0f5;
                    line-height: 35px;
                    text-align: center;
                    color: #333333;
                    cursor: pointer;
                    user-select: none;
                }

                .clicked {
                    background-color: #0671dd;
                    color: #FFFFFF;
                }
            }

            .right-box {
                margin-left: 10px;
                width: calc(100% - 250px);
                height: 80vh;

                .right-header {
                    margin-bottom: 10px;
                    height: 74px;
                    padding: 0 20px;
                    display: flex;
                    align-items: center;
                    background-color: #ffffff;
                    border-radius: 6px;
                    justify-content: space-between;

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

                        .label {
                            width: 120px;
                        }
                    }

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

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

                .right-body {
                    padding: 0 20px;
                    height: calc(100% - 84px);
                    background-color: #ffffff;
                    border-radius: 6px;
                }
            }
        }
    }
}
</style>