<template>
    <div class="tools p-4">
        <BasicTable @register="registerTable">
            <template #toolbar>
                <Button type="primary" @click="openDialog(null)">
                    新增工具
                </Button>
                <Button type="primary" danger :disabled="hasSelected" @click="delAllData">
                    批量删除
                </Button>
            </template>
            <template #func="{ record }">
                <TableAction :actions="[
                    {
                        label: '',
                        tooltip: '编辑',
                        icon: 'ant-design:edit-outlined',
                        onClick: openDialog.bind(null, record),
                    },
                    {
                        label: '',
                        tooltip: '删除',
                        icon: 'ant-design:delete-outlined',
                        onClick: onDelete.bind(null, record.id),
                    },
                ]" />
            </template>
        </BasicTable>
    </div>
</template>

<script>
import { defineComponent, onMounted, watch, ref, reactive, toRefs, computed } from 'vue';
// 导入表格组件，表格事件
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { Button } from 'ant-design-vue';

import { message, Modal } from 'ant-design-vue';
import moment from 'moment'
import { session } from '/@/utils/Memory';

export default defineComponent({
    components: { BasicTable, TableAction, Button },
    name: "tools",
    setup() {
        const toolsData = [
            {
                group: "常用工具",
                isQuick: false,
                label: "全图",
                option: {},
                idx: 0,
                id: "418d4040-df24-4f44-a718-2d4c1729532a",
                tip: "显示全图范围",
                icon: "at-icon-quantu",
                action: "zoomfull"
            },
            {
                "group": "常用工具",
                "isQuick": false,
                "label": "环境设置",
                "option": {},
                "idx": 1,
                "id": "418d4040-df24-4f44-a718-2d4c1720032a",
                "tip": "环境设置",
                "icon": "at-icon-quanjingtu",
                "action": "envConfig"
            },
            {
                "action": "lookdown3D",
                "label": "俯视",
                "option": {},
                "icon": "at-icon-fushi",
                "idx": 2,
                "group": "常用工具",
                "isQuick": true,
                "id": "7a3e12c5-e39b-4466-bbf7-c7f38e691ca7",
                "tip": "俯视看图，仰角-90°"
            },
            {
                "idx": 3,
                "icon": "at-icon-zhengbei",
                "isQuick": false,
                "action": "looknorth3D",
                "label": "正北",
                "tip": "朝正北看图，方位角为0°",
                "option": {},
                "id": "3f4bc0ec-20fa-4ec5-856a-48b7ec1997f0",
                "group": "常用工具"
            },
            {
                "label": "量长度",
                "option": {
                    "measureType": "length"
                },
                "idx": 16,
                "icon": "at-icon-liangchangdu",
                "isQuick": false,
                "id": "1b136e85-159d-4d01-90f8-3f1e8b545898",
                "action": "MeasureAction",
                "group": "测量/多屏",
                "tip": "测量长度"
            },
            {
                "tip": "测量高度",
                "icon": "at-icon-lianggaodu",
                "label": "量高度",
                "group": "测量/多屏",
                "option": {
                    "measureType": "height"
                },
                "idx": 17,
                "isQuick": false,
                "action": "MeasureAction",
                "id": "2a894bf2-7d7e-44fc-ba6e-219135a57741"
            },
            {
                "icon": "at-icon-liangmianji",
                "tip": "测量面积",
                "isQuick": false,
                "label": "量面积",
                "idx": 18,
                "group": "测量/多屏",
                "option": {
                    "measureType": "area"
                },
                "id": "e2a2050f-3822-4bbe-83fa-34991790e058",
                "action": "MeasureAction"
            },
            {
                "group": "测量/多屏",
                "label": "双屏",
                "isQuick": true,
                "idx": 19,
                "tip": "两屏对比",
                "icon": "at-icon-liangping",
                "id": "d34d9973-2841-4c4b-8d1b-161b41ce57c9",
                "option": {
                    "screenNum": 2
                },
                "action": "AttachedMapAction"
            },
            {
                "option": {
                    "screenNum": 3
                },
                "tip": "三屏对比",
                "action": "AttachedMapAction",
                "idx": 20,
                "group": "测量/多屏",
                "label": "三屏",
                "id": "0bedfcc9-91a1-4e57-939c-af1506097a94",
                "icon": "at-icon-sanping",
                "isQuick": false
            },
            {
                "group": "测量/多屏",
                "icon": "at-icon-siping",
                "id": "4c56a30b-e82f-4d03-b09c-5c73911e11b7",
                "label": "四屏",
                "option": {
                    "screenNum": 4
                },
                "isQuick": false,
                "tip": "四屏对比",
                "action": "AttachedMapAction",
                "idx": 21
            },
            {
                "id": "4342fbea-6e6e-4e9b-ac1e-730b8abc02b6",
                "idx": 22,
                "action": "DrawAction",
                "group": "绘制工具",
                "option": {
                    "drawType": "point"
                },
                "tip": "绘制点",
                "isQuick": false,
                "label": "绘点",
                "icon": "at-icon-huizhidian"
            },
            {
                "idx": 23,
                "icon": "at-icon-huizhixian",
                "isQuick": false,
                "label": "绘线",
                "tip": "绘制线",
                "id": "0f3e694b-df62-4fa0-96d1-1a1dfbc1ec14",
                "action": "DrawAction",
                "option": {
                    "drawType": "polyline"
                },
                "group": "绘制工具"
            },
            {
                "action": "DrawAction",
                "isQuick": true,
                "option": {
                    "drawType": "polygon"
                },
                "idx": 24,
                "group": "绘制工具",
                "label": "绘面",
                "tip": "绘制多边形",
                "icon": "at-icon-huizhimian1",
                "id": "34498b42-a0a6-4388-b099-e0b7ac8515db"
            },
            {
                "group": "绘制工具",
                "icon": "at-icon-huizhijuxing",
                "option": {
                    "drawType": "extent"
                },
                "tip": "绘制矩形",
                "isQuick": false,
                "idx": 25,
                "action": "DrawAction",
                "label": "绘矩形",
                "id": "c00f16b2-29b2-4f5a-90b5-f27185785456"
            },
            {
                "icon": "at-icon-huizhiyuan",
                "label": "绘圆",
                "isQuick": false,
                "idx": 26,
                "option": {
                    "drawType": "circle"
                },
                "id": "4057f545-219d-4e1a-a6d9-4c0145123cfe",
                "tip": "绘制圆形",
                "action": "DrawAction",
                "group": "绘制工具"
            },
            {
                "id": "fd585e8d-a9e8-4de9-b13a-de17350459ec",
                "option": {},
                "label": "出图",
                "isQuick": false,
                "icon": "at-icon-tupian",
                "tip": "导出当前地图为图片",
                "idx": 32,
                "group": "其他工具",
                "action": "ExportImgAction"
            },
            {
                "option": {},
                "id": "a05acc83-4859-49fe-a12d-02bf154cc7ee",
                "tip": "打印当前地图",
                "action": "PrintAction",
                "group": "其他工具",
                "idx": 33,
                "isQuick": false,
                "label": "打印",
                "icon": "at-icon-dayin"
            },
            {
                "group": "其他工具",
                "option": {},
                "icon": "at-icon-huanchongfenxi",
                "action": "BufferPointAction",
                "tip": "缓冲绘制图形进行分析",
                "id": "551f5ca2-a39e-43f8-8a0b-9db1ed36efa8",
                "label": "点缓冲",
                "idx": 35,
                "isQuick": false
            },
            {
                "group": "其他工具",
                "option": {},
                "icon": "at-icon-minus",
                "action": "BufferLineAction",
                "tip": "缓冲绘制图形进行分析",
                "id": "551f5ca2-a39e-43f8-8a0b-9db1ed36efa4",
                "label": "线缓冲",
                "idx": 35,
                "isQuick": false
            },
            {
                "group": "其他工具",
                "option": {},
                "icon": "at-icon-icon_duobianxing",
                "action": "BufferPolygonAction",
                "tip": "缓冲绘制图形进行分析",
                "id": "551f5ca2-a39e-43f8-8a0b-9db1ed36efb4",
                "label": "面缓冲",
                "idx": 35,
                "isQuick": false
            },
            {
                "isQuick": true,
                "id": "6d51001d-a5e4-4aa8-a977-0694724b916a",
                "option": {},
                "group": "其他工具",
                "tip": "清除缓冲分析",
                "icon": "at-icon-qingchu1",
                "idx": 36,
                "action": "ClearBufferAction",
                "label": "清除缓冲"
            },
            {
                "isQuick": true,
                "id": "6d51001d-a5e4-4aa8-a977-0694724b916a",
                "option": {},
                "group": "常用工具",
                "tip": "清除所有绘制",
                "icon": "at-icon-qingchu1",
                "idx": 37,
                "action": "ClearDrawAction",
                "label": "清除"
            },
            {
                "option": {
                    "data": [
                        {
                            "wkid": "EPSG:4525",
                            "name": "国家2000高斯投影3°分带37°带"
                        }
                    ]
                },
                "label": "定位",
                "isQuick": false,
                "id": "b4940bbe-ca14-497c-b51f-726744db787b",
                "tip": "定位到输入的位置",
                "icon": "at-icon-dingwei",
                "group": "常用工具",
                "action": "MapToPointAction",
                "idx": 38
            }
        ]
        const columns = [
            {
                title: '分组名称',
                dataIndex: 'group',
                key: 'group',
                align: 'center'
            },
            {
                title: 'id',
                dataIndex: 'id',
                key: 'id',
                align: 'center'
            },
            {
                title: '显示名称',
                dataIndex: 'label',
                key: 'label',
                align: 'center'
            },
            {
                title: '提示文字',
                dataIndex: 'tip',
                key: 'tip',
                align: 'center'
            },
            {
                title: '图标',
                dataIndex: 'icon',
                key: 'icon',
                align: 'center'
            },
            {
                title: '功能',
                dataIndex: 'action',
                key: 'action',
                align: 'center'
            }
        ]
        const openDialog = () => {

        }
        const onDelete = () => {

        }
        //判断是否选中数据
        const hasSelected = computed(() => {
            const rowSelection = getRowSelection();
            return !rowSelection.selectedRowKeys?.length;
        });
        //注册tag表格
        const [
            registerTable,
            { reload, getRowSelection, getSelectRowKeys, setSelectedRowKeys }
        ] = useTable({
            title: '工具列表', //'菜单列表'
            // api: getTagsData, //加载数据
            dataSource: toolsData,
            columns: columns,
            useSearchForm: false,     //开启搜索区域
            bordered: true,
            showTableSetting: true,  // 显示表格设置
            showIndexColumn: true,
            pagination: {
                // pageSize: 10,
                hideOnSinglePage: false
            },
            rowKey: (record) => record.id,
            actionColumn: {
                width: 100,
                title: '操作',
                dataIndex: 'func',
                slots: { customRender: 'func' },
            },
            rowSelection: {
                type: 'checkbox',
            },
            tableSetting: {
                redo: true,
                size: true,
                setting: false,
                fullScreen: false
            },
        });
        return {
            hasSelected,
            registerTable,
            reload,
            getRowSelection,
            getSelectRowKeys,
            setSelectedRowKeys,
            openDialog,
            onDelete
        }
    }
})
</script>