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

MyDialogWindow {
    id: dia_win
    title: "图标样式编辑"
    Rectangle {
        implicitWidth: 825
        implicitHeight: 400
        color: "transparent"
        ColumnLayout{
            anchors.fill: parent
            anchors.leftMargin: 10
            anchors.topMargin: 10
            anchors.rightMargin: 10
            spacing: 30


            // prev
            Rectangle{
                Layout.fillWidth: true
                Layout.preferredHeight: 98
                color: "#000000"
                radius: 6
                Rectangle{
                    anchors.top: parent.top
                    anchors.left: parent.left
                    anchors.topMargin: 5
                    anchors.leftMargin: 5
                    radius: 3
                    width: 15
                    height: 15
                    gradient: Gradient {
                        orientation: Gradient.Horizontal
                        GradientStop { position: 0.0; color: "#77ED8B" }
                        GradientStop { position: 1.0; color: "#22C55E" }
                    }
                    Rectangle{
                        width: 11
                        height: 11
                        color: "#000"
                        border.color: Qt.rgba(1, 1, 1, 0.3)
                        border.width: 1
                        radius: 4
                        anchors.centerIn: parent
                    }
                }
                Rectangle{
                    anchors.top: parent.top
                    anchors.left: parent.left
                    anchors.topMargin: 5
                    anchors.leftMargin: 25
                    radius: 3
                    width: 15
                    height: 15
                    gradient: Gradient {
                        orientation: Gradient.Horizontal
                        GradientStop { position: 0.0; color: Qt.rgba(1, 1, 1, 0.1) }
                        GradientStop { position: 1.0; color: Qt.rgba(1, 1, 1, 0.1) }
                    }
                    Rectangle{
                        width: 11
                        height: 11
                        color: "#fff"
                        border.color: Qt.rgba(1, 1, 1, 0.3)
                        border.width: 1
                        radius: 4
                        anchors.centerIn: parent
                    }
                    MouseArea{
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: {
                            parent.gradient.stops[0].color = "#77ED8B"
                            parent.gradient.stops[1].color = "#22C55E"
                        }
                        onExited: {
                            parent.gradient.stops[0].color = Qt.rgba(1, 1, 1, 0.1)
                            parent.gradient.stops[1].color = Qt.rgba(1, 1, 1, 0.1)
                        }
                    }
                }
                Rectangle{
                    anchors.top: parent.top
                    anchors.left: parent.left
                    anchors.topMargin: 5
                    anchors.leftMargin: 45
                    radius: 3
                    width: 15
                    height: 15
                    gradient: Gradient {
                        orientation: Gradient.Horizontal
                        GradientStop { position: 0.0; color: Qt.rgba(1, 1, 1, 0.1) }
                        GradientStop { position: 1.0; color: Qt.rgba(1, 1, 1, 0.1) }
                    }
                    Rectangle{
                        width: 11
                        height: 11
                        color: "#7F7F7F"
                        border.color: Qt.rgba(1, 1, 1, 0.3)
                        border.width: 1
                        radius: 4
                        anchors.centerIn: parent
                    }
                    MouseArea{
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: {
                            parent.gradient.stops[0].color = "#77ED8B"
                            parent.gradient.stops[1].color = "#22C55E"
                        }
                        onExited: {
                            parent.gradient.stops[0].color = Qt.rgba(1, 1, 1, 0.1)
                            parent.gradient.stops[1].color = Qt.rgba(1, 1, 1, 0.1)
                        }
                    }
                }
                Rectangle{
                    anchors.top: parent.top
                    anchors.left: parent.left
                    anchors.topMargin: 5
                    anchors.leftMargin: 65
                    radius: 3
                    width: 15
                    height: 15
                    gradient: Gradient {
                        orientation: Gradient.Horizontal
                        GradientStop { position: 0.0; color: Qt.rgba(1, 1, 1, 0.1) }
                        GradientStop { position: 1.0; color: Qt.rgba(1, 1, 1, 0.1) }
                    }
                    Rectangle{
                        width: 11
                        height: 11
                        color: "#000"
                        border.color: Qt.rgba(1, 1, 1, 0.3)
                        border.width: 1
                        radius: 4
                        anchors.centerIn: parent
                        Rectangle{
                            x: 5
                            y: 2
                            width: 1
                            height: 6
                            color: Qt.rgba(1, 1, 1, 0.3)
                            transform: Rotation { origin.x: 0; origin.y: 3;angle: 45;}
                        }
                    }
                    MouseArea{
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: {
                            parent.gradient.stops[0].color = "#77ED8B"
                            parent.gradient.stops[1].color = "#22C55E"
                        }
                        onExited: {
                            parent.gradient.stops[0].color = Qt.rgba(1, 1, 1, 0.1)
                            parent.gradient.stops[1].color = Qt.rgba(1, 1, 1, 0.1)
                        }
                    }
                }

                Rectangle{
                    anchors.centerIn: parent
                    width: img_prev.width + 10
                    height: img_prev.height + 10
                    color: "transparent"
                    Image{
                        id: img_prev
                        anchors.centerIn: parent
                        fillMode: Image.PreserveAspectFit
                        height: 70
                        source: "qrc:/qt/qml/Gallery/res/image/icons/dw.png"
                    }
                }

            }

            // form
            RowLayout{
                Layout.fillWidth: true
                Layout.preferredHeight: 35
                Row{
                    spacing: 5
                    Layout.preferredWidth: 120
                    Layout.preferredHeight: parent.height
                    Label{
                        text: "颜色："
                        color: Qt.rgba(255/255,255/255,255/255, 0.6)
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    ColorPicker{
                        implicitHeight: 30
                        leftPadding: 3
                        topPadding: 3
                        rightPadding: 2
                        bottomPadding: 2
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
                Row{
                    spacing: 5
                    Layout.preferredWidth: 130
                    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.0','2.0','3.0']
                        width: 80
                        height: 30
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
                Row{
                    spacing: 5
                    Layout.preferredWidth: 80
                    Layout.preferredHeight: parent.height
                    Label{
                        text: "中点："
                        color: Qt.rgba(255/255,255/255,255/255, 0.6)
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    AnchorChoose{}
                }
                Row{
                    spacing: 5
                    Layout.preferredWidth: 150
                    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: ['100%','50%','30%']
                        width: 80
                        height: 30
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
                Row{
                    spacing: 1
                    Layout.fillWidth: true
                    Layout.preferredHeight: parent.height
                    Switch {
                        width: 45
                        text: ""
                        checked: true
                        FluentUI.primaryColor: "#77ED8B"
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    Label{
                        text: "描边："
                        color: Qt.rgba(255/255,255/255,255/255, 0.6)
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    ColorPicker{
                        implicitHeight: 30
                        leftPadding: 3
                        topPadding: 3
                        rightPadding: 2
                        bottomPadding: 2
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    Item{
                        width: 5
                        height: 10
                    }
                    ComboBox{
                        spacing: 0
                        model: ['外部','内部','中部']
                        width: 80
                        height: 30
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    Item{
                        width: 5
                        height: 10
                    }
                    TextBox{
                        width: 60
                        anchors.verticalCenter: parent.verticalCenter
                        height: 30
                        placeholderText: "1"
                        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
                        }
                    }
                }
            }

            // icons
            Rectangle{
                Layout.fillWidth: true
                Layout.preferredHeight: 200
                color: "#000000"
                radius: 6
                Item{
                    anchors.fill: parent
                    anchors.leftMargin: 10
                    anchors.rightMargin: 10
                    anchors.bottomMargin: 10
                    anchors.topMargin: 10
                    Rectangle{
                        width: 40
                        height: 40
                        color: Qt.rgba(255/255,255/255,255/255, 0.1)
                        radius: 5
                        border.width: 1
                        border.color: "#77ED8B"
                        Image{
                            anchors.centerIn: parent
                            fillMode: Image.PreserveAspectFit
                            width: 20
                            source: "qrc:/qt/qml/Gallery/res/image/icons/dw.png"
                        }
                        MouseArea{
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: {
                                parent.color = Qt.rgba(255/255,255/255,255/255, 0.2)
                                parent.border.color = "#77ED8B"
                            }
                            onExited: {
                                parent.color = Qt.rgba(216/255,216/255,216/255, 0.1)
                                parent.border.color = "#77ED8B"
                            }
                        }
                    }
                    Rectangle{
                        width: 40
                        height: 40
                        x: 45
                        color: Qt.rgba(255/255,255/255,255/255, 0.1)
                        radius: 5
                        border.width: 1
                        border.color: "transparent"
                        Image{
                            anchors.centerIn: parent
                            fillMode: Image.PreserveAspectFit
                            width: 20
                            source: "qrc:/qt/qml/Gallery/res/image/icons/car.png"
                        }
                        MouseArea{
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: {
                                parent.color = Qt.rgba(255/255,255/255,255/255, 0.2)
                                parent.border.color = "#77ED8B"
                            }
                            onExited: {
                                parent.color = Qt.rgba(216/255,216/255,216/255, 0.1)
                                parent.border.color = "transparent"
                            }
                        }
                    }
                }
            }

            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" }
                            }
                        }
                    }
                }
            }

        }
    }
}