<template>
    <div class="p-4">
        <div class="content">
            <div class="left-box">
                <div class="res-list-btn" v-for="(item, index) in resBtns" :key="index"
                    :class="{ 'clicked': currentResType === item.value }" @click="handleChangeRes(item)">
                    {{ item.label }}
                </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 />
                        <span class="label" style="margin-left: 30px;">版本管理：</span>
                        <a-radio-group v-model:value="searchType" style="display: flex;">
                            <a-radio :value="0">未管理</a-radio>
                            <a-radio :value="1">已管理</a-radio>
                        </a-radio-group>
                    </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 #toolbar>
                            <Button type="primary" :disabled="hasSelected" @click="handleManageAll" v-if="searchType === 0">
                                批量版本管理
                            </Button>
                            <Button type="primary" danger :disabled="hasSelected" @click="handleDelAll" v-else>
                                批量取消版本
                            </Button>
                        </template>
                        <template #action="{ record }">
                            <TableAction :actions="[
                                {
                                    label: '浏览',
                                    tooltip: '浏览',
                                    onClick: handleFetchRes.bind(null, record),
                                },
                                {
                                    label: '查看',
                                    tooltip: '查看',
                                    onClick: handleLookRes.bind(null, record),
                                },
                                {
                                    label: '版本管理',
                                    tooltip: '版本管理',
                                    ifShow: !isgl,
                                    onClick: handleManage.bind(null, record),
                                },
                                {
                                    label: '取消版本',
                                    tooltip: '取消版本',
                                    ifShow: isgl,
                                    onClick: handleDel.bind(null, record),
                                },
                            ]" />
                        </template>
                    </BasicTable>
                </div>
            </div>
        </div>
        <ResVersionManageModal @register="registerModal" @success="onSubmit"></ResVersionManageModal>
        <ResVersionManageAllModalVue @register="registerModalAll" @success="onSubmit"></ResVersionManageAllModalVue>
    </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 ResVersionManageModal from './ResVersionManageModal.vue';
import ResVersionManageAllModalVue from './ResVersionManageAllModal.vue';
import { getResVersionList, removeResVersion } 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: 'resVersion',
    components: { ResVersionManageModal, ResVersionManageAllModalVue, BasicTable, TableAction, Button },
    setup() {
        const [registerModal, { openModal }] = useModal();
        const [registerModalAll, { openModal: openModalAll }] = useModal();
        const data = reactive({
            searchValue: "",//关键字
            searchType: 0,//是否已关联
        });
        const resBtns = ref([
            {
                label: '地图资源',
                value: 'MR'
            },
            {
                label: '场景资源',
                value: 'ER'
            },
            {
                label: '文件资源',
                value: 'DR'
            },
            {
                label: '组件服务',
                value: 'SR'
            },
            {
                label: '接口服务',
                value: 'interface'
            }
        ]);
        const typeObj = {
            MR: "地图资源",
            ER: "场景资源",
            DR: "文件资源",
            SR: "组件服务",
            interface: "接口服务"
        }
        const currentResType = ref("MR");
        const isgl = ref(false);
        //获取所有标签
        const getResData = () => {
            return new Promise((resolve, reject) => {
                let params = {
                    isgl: data.searchType,
                    keyStr: data.searchValue,
                    serviceType: currentResType.value
                }
                getResVersionList(params).then(res => {
                    if (res.resp_code === 0 && res.datas) {
                        let resData = res.datas.pageData;
                        resData.forEach(item => {
                            item.type = typeObj[item.RESOURCE_TYPE]
                        })
                        resolve(resData)
                    }
                    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 searchTable = () => {
            setSelectedRowKeys([])
            reload()
            setPagination({current:1})
            isgl.value = Boolean(data.searchType)
        }
        //重置
        const resetTable = () => {
            data.searchValue = ''
            reload()
        }
        //判断是否选中数据
        const hasSelected = computed(() => {
            const rowSelection = getRowSelection();
            return !rowSelection.selectedRowKeys?.length;
        });
        const handleChangeRes = (item) => {
            currentResType.value = item.value;
            setSelectedRowKeys([])
            reload()
        }
        // 批量管理资源的版本
        const handleManageAll = () => {
            let ids = getSelectRowKeys();
            openModalAll(true, {
                ids: ids,
                type: currentResType.value
            });
        }
        // 批量取消选中资源的版本
        const handleDelAll = () => {
            uiTool.delModal('确定取消选中资源的版本？', (() => {
                const rowKeys = getSelectRowKeys();
                let params = {
                    serviceid: rowKeys.toString()
                }
                // rowKeys.forEach(resId => {
                //     params.version.push({
                //         resource_ID: resId
                //     })
                // })
                // 循环配置参数
                removeResVersion(params).then(saveRes => {
                    console.log(saveRes)
                    reload()
                })
            }))
        };
        // 取消资源的版本
        const handleDel = (record) => {
            uiTool.delModal('确定取消该资源的版本？', (() => {
                let params = {
                    serviceid:record.SERVICEID
                    // version: [{
                    //     resource_ID: record.SERVICEID
                    // }]
                }
                // 循环配置参数
                removeResVersion(params).then(saveRes => {
                    console.log(saveRes)
                    reload()
                })
            }))
        }
        // 浏览资源
        const handleFetchRes = (record) => {

        }
        // 查看资源
        const handleLookRes = (record) => {
            // const { FID, VERSION_NAME, VERSION_NO, VERSION_DISP } = record;
            // openResModal(true, {
            //     status: 'look',
            //     form: { FID, VERSION_NAME, VERSION_NO, VERSION_DISP }
            // });
        }
        //管理资源的版本
        const handleManage = (record) => {
            const { RESOURCE_TYPE, type, SERVICENAME, SERVICEID } = record;
            openModal(true, {
                status: 'manage',
                base: { RESOURCE_TYPE, type, SERVICENAME, SERVICEID },
                version: {}
            });
        }


        //弹窗确认
        const onSubmit = () => {
            reload();
        }
        const [
            registerTable,
            { reload, getRowSelection, getSelectRowKeys, setSelectedRowKeys, setPagination },
        ] = useTable({
            title: '资源列表', //'菜单列表'
            api: getResData, //加载数据
            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',
            },
        });
        return {
            resBtns,
            currentResType,
            columns,
            hasSelected,
            isgl,
            ...toRefs(data),
            // func
            // registerResModal,
            registerModal,
            registerModalAll,
            registerTable,
            getResData,
            searchTable,
            resetTable,
            handleChangeRes,

            handleManageAll,
            handleDelAll,
            handleDel,
            handleFetchRes,
            handleLookRes,
            handleManage,
            onSubmit
        };
    },
});
</script>

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

    .content {
        width: 100%;
        height: 100%;
        display: flex;

        .left-box {
            padding: 20px;
            margin-right: 10px;
            width: 240px;
            height: 100%;
            background-color: #fff;
            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 {
            width: calc(100% - 250px);
            height: 100%;

            .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: 70px;
                        flex-shrink: 0;
                    }
                }

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