import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import FluentUI.Controls
import FluentUI.impl
import Qt5Compat.GraphicalEffects
import "../base"

MyDialogWindow {
    id: dia_win
    title: "添加点位"

    signal clickEditFont()
    signal clickEditIcon()

    Rectangle {
        implicitWidth: 610
        implicitHeight: 460
        color: "transparent"
        ColumnLayout{
            anchors.fill: parent
            anchors.leftMargin: 10
            anchors.topMargin: 10
            anchors.rightMargin: 10
            spacing: 30

            RowLayout{
                spacing: 20
                Layout.fillWidth: true
                TextBox{
                    Layout.preferredWidth: 450
                    Layout.preferredHeight: 44
                    placeholderText: "请输入点位名称"
                    background: InputBackground {
                        activeColor: "#22C55E"
                        radius: 5
                        color: {
                            if(!parent.enabled){
                                return parent.FluentUI.theme.res.controlFillColorDisabled
                            }else if(parent.activeFocus){
                                return parent.FluentUI.theme.res.controlFillColorInputActive
                            }else if(parent.hovered){
                                return parent.FluentUI.theme.res.controlFillColorSecondary
                            }else{
                                return parent.FluentUI.theme.res.controlFillColorDefault
                            }
                        }
                        target: parent
                    }

                    trailing: Rectangle{
                        width: 32
                        height: 20
                        anchors.right: parent.right
                        anchors.rightMargin: 10
                        color: "transparent"
                        Rectangle{
                            width: 1
                            height: 20
                            anchors.verticalCenter: parent.verticalCenter
                            color: Qt.rgba(255/255,255/255,255/255, 0.6)
                        }
                        Image{
                            anchors.right: parent.right
                            source: "qrc:/qt/qml/Gallery/res/image/components/ico_font.png"
                            anchors.verticalCenter: parent.verticalCenter
                            ColorOverlay{
                                id: co_img
                                anchors.fill: parent
                                color: "#77ED8B"
                                source: parent
                                visible: false
                            }
                            MouseArea{
                                anchors.fill: parent
                                hoverEnabled: true
                                onEntered: {
                                    co_img.visible = true
                                }
                                onExited: {
                                    co_img.visible = false
                                }
                                onClicked: {
                                    console.log("open")
                                    clickEditFont()
                                }
                            }

                        }
                    }
                }


                Switch {
                    anchors.right: parent.right
                    text: "显示名称"
                    checked: true
                    FluentUI.primaryColor: "#77ED8B"
                    anchors.verticalCenter: parent.verticalCenter
                }
            }

            RowLayout{
                Layout.fillWidth: true
                Layout.preferredHeight: 136
                ////
                AttachmenButton{
                    p_label: "图标"
                    p_title: "名称名称名称"
                    p_btnChoose: true
                    p_btnClear: false
                    onClickItem: {
                        console.log("click...")
                        clickEditIcon()
                    }
                }
                AttachmenButton{
                    p_label: "附件"
                    p_title: "名称名称名称名称名称名称"
                    p_btnChoose: true
                    p_btnClear: true
                }
                AttachmenButton{
                    p_label: "文件夹"
                    p_title: "名称名称名称"
                    p_btnChoose: true
                    p_btnClear: true
                }
                Item{
                    Layout.fillWidth: true
                    Layout.preferredHeight: parent.height
                    Row{
                        height: 30
                        width: parent.width
                        Label{
                            text: "备注"
                            color: Qt.rgba(255/255,255/255,255/255, 0.6)
                        }
                        Label{
                            text: "清除"
                            color: "#FFAB00"
                            anchors.right: parent.right
                        }
                    }
                    MultiLineTextBox{
                        anchors.top: parent.top
                        anchors.topMargin: 20
                        width: parent.width
                        height: 96
                        placeholderText: "添加备注（最多60字）"
                        background: InputBackground {
                            activeColor: "#22C55E"
                            radius: 5
                            color: {
                                if(!parent.enabled){
                                    return parent.FluentUI.theme.res.controlFillColorDisabled
                                }else if(parent.activeFocus){
                                    return parent.FluentUI.theme.res.controlFillColorInputActive
                                }else if(parent.hovered){
                                    return parent.FluentUI.theme.res.controlFillColorSecondary
                                }else{
                                    return parent.FluentUI.theme.res.controlFillColorDefault
                                }
                            }
                            target: parent
                        }
                    }
                }
            }

            // form
            RowLayout{
                Layout.fillWidth: true
                Layout.preferredHeight: 35
                Row{
                    Layout.fillWidth: true
                    Layout.preferredHeight: parent.height
                    Label{
                        text: "显示级别："
                        color: Qt.rgba(255/255,255/255,255/255, 0.6)
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    ComboBox{
                        spacing: 0
                        model: [1,2,3,4,5,6,7,8,9,10]
                        width: 70
                        height: 30
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    Label{
                        text: "-"
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    ComboBox{
                        model: [10,11,12,13,14,15,16,17,18,19,20]
                        width: 70
                        height: 30
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
                Row{
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Label{
                        text: "叠放层数："
                        color: Qt.rgba(255/255,255/255,255/255, 0.6)
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    ComboBox{
                        spacing: 0
                        model: [1,2,3,4,5,6,7,8,9,10]
                        width: 100
                        height: 30
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
                Row{
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Label{
                        text: "名称位置："
                        color: Qt.rgba(255/255,255/255,255/255, 0.6)
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    ComboBox{
                        spacing: 0
                        model: ["自动"]
                        width: 100
                        height: 30
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
            }

            RowLayout{
                Layout.fillWidth: true
                Layout.preferredHeight: 35

                Row{
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Label{
                        text: "经度坐标："
                        color: Qt.rgba(255/255,255/255,255/255, 0.6)
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    TextBox{
                        width: 145
                        height: 30
                        anchors.verticalCenter: parent.verticalCenter
                        placeholderText: "请输入经度坐标"
                        background: InputBackground {
                            activeColor: "#22C55E"
                            radius: 5
                            color: {
                                if(!parent.enabled){
                                    return parent.FluentUI.theme.res.controlFillColorDisabled
                                }else if(parent.activeFocus){
                                    return parent.FluentUI.theme.res.controlFillColorInputActive
                                }else if(parent.hovered){
                                    return parent.FluentUI.theme.res.controlFillColorSecondary
                                }else{
                                    return parent.FluentUI.theme.res.controlFillColorDefault
                                }
                            }
                            target: parent
                        }
                    }
                }

                Row{
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Label{
                        text: "纬度坐标："
                        color: Qt.rgba(255/255,255/255,255/255, 0.6)
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    TextBox{
                        width: 100
                        height: 30
                        anchors.verticalCenter: parent.verticalCenter
                        placeholderText: "请输入纬度坐标"
                        background: InputBackground {
                            activeColor: "#22C55E"
                            radius: 5
                            color: {
                                if(!parent.enabled){
                                    return parent.FluentUI.theme.res.controlFillColorDisabled
                                }else if(parent.activeFocus){
                                    return parent.FluentUI.theme.res.controlFillColorInputActive
                                }else if(parent.hovered){
                                    return parent.FluentUI.theme.res.controlFillColorSecondary
                                }else{
                                    return parent.FluentUI.theme.res.controlFillColorDefault
                                }
                            }
                            target: parent
                        }
                    }
                }

                Row{
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Label{
                        text: "海拔高度："
                        color: Qt.rgba(255/255,255/255,255/255, 0.6)
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    TextBox{
                        width: 100
                        height: 30
                        anchors.verticalCenter: parent.verticalCenter
                        placeholderText: "请输入海拔高度"
                        background: InputBackground {
                            activeColor: "#22C55E"
                            radius: 5
                            color: {
                                if(!parent.enabled){
                                    return parent.FluentUI.theme.res.controlFillColorDisabled
                                }else if(parent.activeFocus){
                                    return parent.FluentUI.theme.res.controlFillColorInputActive
                                }else if(parent.hovered){
                                    return parent.FluentUI.theme.res.controlFillColorSecondary
                                }else{
                                    return parent.FluentUI.theme.res.controlFillColorDefault
                                }
                            }
                            target: parent
                        }
                    }
                }

            }



            Item{
                Layout.fillHeight: true
            }

            Rectangle{
                Layout.fillWidth: true
                Layout.preferredHeight: 70
                color: "#1b1b1b"
                Layout.topMargin: 0
                Layout.leftMargin: -20
                Layout.rightMargin: -20
                Layout.bottomMargin: 4
                RowLayout{
                    anchors.fill: parent
                    anchors.leftMargin: 20
                    anchors.rightMargin: 20
                    spacing: 20
                    Button{
                        Layout.fillWidth: true
                        Layout.preferredHeight: 36
                        text: "取消"
                        onClicked: {
                            dia_win.close()
                        }
                    }
                    Button{
                        Layout.fillWidth: true
                        Layout.preferredHeight: 36
                        text: "确认"
                        highlighted: true
                        background: Rectangle{
                            radius: 5
                            gradient: Gradient {
                                orientation: Gradient.Horizontal
                                GradientStop { position: 0.0; color: "#77ED8B" }
                                GradientStop { position: 1.0; color: "#22C55E" }
                            }
                        }
                    }
                }
            }

        }
    }
}