<template>
    <a-modal title="经纬度局部坐标系" :width="380" :maskClosable="false" :open="visibleLocal" @ok="handleOk" @cancel="hide" ok-text="确定" cancel-text="取消">
        <a-form ref="form" :model="form" :labelCol="{ style: {width:'40px'} }" class="scroll-box" :rules="formRules">
            <a-form-item label="经度" :labelCol="{ span: 4 }" name="latitude">
                <a-input v-model:value="form.latitude" placeholder="例如：108.88" />
            </a-form-item>
            <a-form-item label="纬度" :labelCol="{ span: 4 }" name="longitude">
                <a-input v-model:value="form.longitude" placeholder="例如：34.2" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script>
export default {
    name: 'UploadModal',

    props: {
        visibleLocal: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            uploadType: '1',
            scene: 'a',
            showScene: false,
            loType: 'epsg',
            positionType: '1',
            visible: false,
            formModel: {
                projectId: undefined,
                openStatus: 2,
            },
            form: {
                longitude: '108.88',
                latitude: '34.2',
            },
            formRules: {
                longitude: [{ required: true, message: '请输入经度值' }],
                latitude: [{ required: true, message: '请输入纬度值' }],
            },
        }
    },
    methods: {
        handleOk() {
            const that = this
            // 触发表单验证
            that.showDelete = false
            that.$refs.form
                .validateFields()
                .then((a, b) => {
                    this.$emit('LocalCoordinatesValue', `ENU:${this.latitude},${this.longitude}`)
                })
                .catch((e) => {})
        },
        hide() {
            this.$emit('LocalClose')
        },
    },
}
</script>

<style lang="less" scoped>
:deep(.ant-upload-list) {
    max-height: 215px;
    overflow-y: auto;

    &::-webkit-scrollbar {
        //整体样式
        height: 5px;
        width: 2px;
    }

    &::-webkit-scrollbar-thumb {
        //滑动滑块条样式
        border-radius: 1px;
        box-shadow: inset 0 0 1px #fafafa;
        background: #d9d9d9;
    }

    &::-webkit-scrollbar-track {
        //轨道的样式
        box-shadow: 0;
        border-radius: 0;
        background: #fafafa;
    }
}

:deep(.scroll-box) {
    max-height: 60vh;
    overflow-y: auto;

    &::-webkit-scrollbar {
        //整体样式
        height: 5px;
        width: 2px;
    }

    &::-webkit-scrollbar-thumb {
        //滑动滑块条样式
        border-radius: 1px;
        box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.2);
        background: #8c8c8c61;
    }

    &::-webkit-scrollbar-track {
        //轨道的样式
        box-shadow: 0;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.3);
    }

    .ant-tree-node-content-wrapper {
        color: #ffffff;
    }

    .ant-list-empty-text {
        padding: 5px;
        text-align: left;
    }

    .ant-tooltip {
        max-width: 100%;
    }

    .special-item {
        .ant-form-item-children {
            display: flex;

            > div {
                display: flex;
                align-items: center;
                height: 32px;

                .ant-btn {
                    margin-left: 10px;
                    margin-right: 5px;
                }
            }
        }
    }

    .anticon {
        color: #21ad8d;
    }
}
</style>