<template>
    <BasicModal :maskClosable="false" :width="1430" @register="registerModal" v-bind="$attrs" :title="title" centered
        :showOkBtn="false" :showCancelBtn="false" wrapClassName="version-res-modal" :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>
    <HistoryResListModal @register="registerHistoryModal"></HistoryResListModal>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch, computed } from 'vue';
import { BasicModal, useModalInner, useModal } 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';
import HistoryResListModal from './HistoryResListModal.vue';

export default defineComponent({
    name: 'VersionResModal',
    components: { BasicModal, BasicTable, TableAction, Button, HistoryResListModal },
    setup(_, { emit }) {
        const title = ref('');
        const resBtns = ref([
            {
                label: '地图资源',
                value: 'MR',
                number: 0
            },
            {
                label: '场景资源',
                value: 'ER',
                number: 0
            },
            {
                label: '文件资源',
                value: 'DR',
                number: 0
            },
            {
                label: '组件服务',
                value: 'SR',
                number: 0
            },
            {
                label: '接口服务',
                value: 'interface',
                number: 0
            }
        ]);
        const currentType = ref('MR')
        const currentFid = ref('')
        const searchValue = 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}】资源绑定查看`;
            reload()
            getNumber()
        });
        const [registerHistoryModal, { openModal }] = useModal();
        const typeObj = {
            MR: "地图资源",
            ER: "场景资源",
            DR: "文件资源",
            SR: "组件服务",
            interface: "接口服务"
        }
        const getNumber = () => {
            let params = {
                keyStr: '',
                fid: currentFid.value,
            }
            getResByVersion(params).then(res => {
                if (res.resp_code === 0 && res.datas) {
                    let resData = res.datas;
                    resBtns.value.forEach(btn=>{
                        btn.number = resData[btn.value].total
                    })
                }
            })
        }
        const getVersionResData = () => {
            return new Promise(resolve => {
                let params = {
                    keyStr: searchValue.value,
                    fid: currentFid.value,
                    serviceType: currentType.value
                }
                getResByVersion(params).then(res => {
                    if (res.resp_code === 0 && res.datas) {
                        let resData = res.datas[currentType.value];
                        resData.pageData.forEach(item => {
                            item.type = typeObj[item.RESOURCE_TYPE]
                        })
                        resolve(resData.pageData)
                    }
                    else {
                        resolve([])
                        message.error(res.resp_msg)
                    }
                })
            })
        }
        //表格列
        const columns = [
            {
                title: '资源类型',
                align: 'center',
                dataIndex: 'type',
                key: 'type'
            },
            {
                title: '资源名称',
                align: 'center',
                dataIndex: 'SERVICENAME',
                key: 'SERVICENAME'
            },
            {
                title: '版本',
                align: 'center',
                dataIndex: 'VERSION_NAME',
                key: 'VERSION_NAME'
            },
            {
                title: '版本号',
                align: 'center',
                dataIndex: 'VERSION',
                key: 'VERSION'
            },
            {
                title: '操作时间',
                align: 'center',
                dataIndex: 'MODIFY_DATE',
                key: 'MODIFY_DATE'
            },
            {
                title: '操作人',
                align: 'center',
                dataIndex: 'USER_NAME',
                key: 'USER_NAME'
            }
        ];
        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.SERVICEID,
            actionColumn: {
                width: 200,
                title: '操作',
                dataIndex: 'action',
                slots: { customRender: 'action' },
            },
            // rowSelection: {
            //     type: 'checkbox',
            // },
        });
        //表格查询功能
        const searchTable = () => {
            reload()
        }
        //重置
        const resetTable = () => {
            searchValue.value = '';
            reload();
        }
        // 切换资源类型
        const handleChangeRes = (item) => {
            currentType.value = item.value;
            reload();
        }
        // 浏览
        const handleFetchRes = () => {

        }
        // 查看
        const handleLookRes = () => {

        }
        // 历史版本
        const handleSearchHistory = (record) => {
            openModal(true, {
                serviceId: record.SERVICEID,
                serviceName: record.SERVICENAME,
                type: record.type
            })
        }
        return {
            title,
            resBtns,
            currentType,
            searchValue,
            registerModal,
            registerTable,
            registerHistoryModal,
            handleChangeRes,
            resetTable,
            searchTable,

            handleFetchRes,
            handleLookRes,
            handleSearchHistory
        };
    },
});
</script>
<style lang="less">
.version-res-modal {
    .ant-modal-content {
        background-color: #eff0f5 !important;

        .scroll-container .scrollbar__wrap {
            margin-bottom: 0 !important;
        }
    }
}
</style>
<style lang="less" scoped>
.custom-content {
    display: flex;
    justify-content: space-between;

    .left-box {
        padding: 20px;
        width: 240px;
        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);

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