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: 670
        implicitHeight: 360
        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: lbl_prev.width + 10
                    height: lbl_prev.height + 10
                    color: "#ccc"
                    Label {
                        id: lbl_prev
                        text: "预览文字内容"
                        anchors.centerIn: parent
                    }
                }

            }

            // form
            RowLayout{
                Layout.fillWidth: true
                Layout.preferredHeight: 35
                Row{
                    spacing: 5
                    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: ["微软雅黑", "宋体", "楷体"]
                        width: 120
                        height: 30
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    ComboBox{
                        spacing: 0
                        model: ["正常", "粗体", "斜体"]
                        width: 120
                        height: 30
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
                Row{
                    spacing: 5
                    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: [9,10,11,12,13,14,15,16,17,18]
                        width: 115
                        height: 30
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
                Row{
                    spacing: 5
                    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: ['10%', '20%', '50%']
                        width: 115
                        height: 30
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
            }

            RowLayout{
                Layout.fillWidth: true
                Layout.preferredHeight: 35
                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
                    }
                    ColorPicker{
                        implicitHeight: 30
                        leftPadding: 3
                        topPadding: 3
                        rightPadding: 2
                        bottomPadding: 2
                        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
                        }
                    }
                }
                Row{
                    spacing: 1
                    Layout.preferredWidth: 175
                    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{
                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" }
                            }
                        }
                    }
                }
            }

        }
    }
}