import QtQuick 2.0
import QtQml 2.12
import QtQuick.Layouts 1.12
import org.ukui.appwidget 1.0
import QtGraphicalEffects 1.0
//import QtQuick.Controls 2.0
AppWidget {
    id:appwidget
    appname: "time"
    visible: true
    width: 448*scalefactor
    height: 162*scalefactor
    anchors.centerIn: parent
    property double scalefactor: 1.00
    property string timeformat: "12";
    property string dateformat: "cn"
    property string hour;
    property string minute;
    property int hournumber;
    property string week;
    property string amorpm;
    property  bool v: false
    property string themename;

    Timer {
        id: gettime;
        interval: 100;
        running: true;
        repeat: true;
        triggeredOnStart: true
        onTriggered: {
            appwidget.hour = Qt.formatTime(new Date(),"hh");
            appwidget.minute = Qt.formatTime(new Date(),"mm");
            if(appwidget.timeformat === "12") {
                appwidget.hournumber = Number(appwidget.hour);
                if(appwidget.hournumber > 12) {
                    if(appwidget.dateformat == "cn") {
                        ampm.text = "下午"
                    }
                    else if(appwidget.dateformat == "en") {
                        ampm.text = "PM"
                    }
                    appwidget.hournumber -= 12;
                }
                else {
                    if(appwidget.dateformat == "cn") {
                        ampm.text = "上午"
                    }
                    else if(appwidget.dateformat == "en") {
                        ampm.text = "AM"
                    }
                }

                if(appwidget.hournumber < 10) {
                    time1rec.width = 244
                    time1.width = 244
//                    console.log("=12制 宽度=",time1rec.width);
                }else {
                    time1rec.width = 294
                    time1.width = 294
//                    console.log("=12制 宽度=",time1rec.width);
                }

                appwidget.hour = appwidget.hournumber.toString();
                time1.text = appwidget.hour + ":" + appwidget.minute
//                console.log("=12制=",time1.text);
            }
            else {
                time2.text = appwidget.hour + ":" + appwidget.minute
//                console.log("=24制=",time2.text);
            }
            week1.text = Qt.formatDate(new Date(),"ddd")
            week2.text = Qt.formatDate(new Date(),"ddd")

            if(dateformat == "cn") {
                date1.text = Qt.formatDate(new Date(),"MM/dd");
                date2.text = Qt.formatDate(new Date(),"MM/dd");
            }
            if(dateformat == "en") {
                date1.text = Qt.formatDate(new Date(),"MM-dd");
                date2.text = Qt.formatDate(new Date(),"MM-dd");
            }
        }
    }


    Rectangle {
        id :twelverec
        color: "transparent"
//        radius: 15
        anchors.fill: parent
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        visible: !v
        Rectangle {
            id :time1rec
            color: "transparent"
//            border.color: "green"
            anchors.verticalCenter: parent.verticalCenter
            width: 244*appwidget.scalefactor
            height: 112*appwidget.scalefactor
            Text {
                id: time1
                anchors.fill:parent
                verticalAlignment: TextInput.AlignVCenter
                color: "#FAFAFA"
                font.pixelSize:112*appwidget.scalefactor
                font.letterSpacing: 0
                font.family: "STxihei"

                layer.enabled: true
                layer.effect: DropShadow {
                    verticalOffset: 1
                    color: "#40262626"
                    samples: 4
                }
            }
        }
        Rectangle {
            //间隔
            id :spacing1
            width: 16*appwidget.scalefactor
            height: 112*appwidget.scalefactor
            anchors.left: time1rec.right
            anchors.verticalCenter: parent.verticalCenter
            color: "transparent"
        }
        Rectangle {
            id :daterec
            color: "transparent"
//            border.color: "pink"
            width: 137*appwidget.scalefactor
            height: 96*appwidget.scalefactor
            anchors.verticalCenter: parent.verticalCenter
            Layout.fillWidth: true
            anchors.left: spacing1.right

            ColumnLayout{
                width: 137*appwidget.scalefactor
                height: 96*appwidget.scalefactor
                anchors.centerIn: parent
                Text {
                    id: ampm
                    color: "#FAFAFA";
                    font.pixelSize:40*appwidget.scalefactor;
                    font.letterSpacing: 0
                    font.family: "STxihei"
                    verticalAlignment: TextInput.AlignVCenter

                    layer.enabled: true
                    layer.effect: DropShadow {
                        verticalOffset: 1
                        color: "#40262626"
                        samples: 4
                    }
                }
                RowLayout {
                    Text {
                        id: week1
                        color: "#FAFAFA";
                        font.pixelSize: 28*appwidget.scalefactor;
                        font.letterSpacing: 0
                        font.family: "STxihei"
                        verticalAlignment: TextInput.AlignVCenter

                        layer.enabled: true
                        layer.effect: DropShadow {
                            verticalOffset: 1
                            color: "#40262626"
                            samples: 4
                        }
                    }
                    Text {
                        id: date1
                        color: "#FAFAFA";
                        font.pixelSize: 28*appwidget.scalefactor;
                        font.letterSpacing: 0
                        font.family: "STxihei"
                        verticalAlignment: TextInput.AlignVCenter

                        layer.enabled: true
                        layer.effect: DropShadow {
                            verticalOffset: 1
                            color: "#40262626"
                            samples: 4
                        }
                    }
                }
            }
        }
    }


    Rectangle{
        id :twentyfoursystem
        color: "transparent"
//        radius: 15
        anchors.fill: parent
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        visible: v
        Rectangle {
            id :time2rec
            color: "transparent"
//            border.color: "pink"
            anchors.verticalCenter: parent.verticalCenter
            width: 294*appwidget.scalefactor
            height: 112*appwidget.scalefactor
            Text {
                id: time2
                anchors.fill:parent
                verticalAlignment: TextInput.AlignVCenter
                color: "#FAFAFA"
                font.pixelSize:112*appwidget.scalefactor
                font.letterSpacing:0
                font.family: "STxihei"

                layer.enabled: true
                layer.effect: DropShadow {
                    verticalOffset: 1
                    color: "#40262626"
                    samples: 4
                }
            }
        }
        Rectangle {
            //间隔
            id :spacing2
            width: 16*appwidget.scalefactor
            height: 112*appwidget.scalefactor
            anchors.left: time2rec.right
            anchors.verticalCenter: parent.verticalCenter
            color: "transparent"
        }
        Rectangle {
            color: "transparent"
            width: 87*appwidget.scalefactor
            height: 112*appwidget.scalefactor
            Layout.fillWidth: true
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: spacing2.right

            ColumnLayout{
                width: 87*appwidget.scalefactor
                height: 112*appwidget.scalefactor
                anchors.centerIn: parent
                Layout.fillWidth: true
                Text {
                    id: week2
                    color: "#FAFAFA";
                    font.pixelSize:40*appwidget.scalefactor;
                    font.letterSpacing: 0
                    font.family: "STxihei"
                    verticalAlignment: TextInput.AlignVCenter

                    layer.enabled: true
                    layer.effect: DropShadow {
                        verticalOffset: 1
                        color: "#40262626"
                        samples: 4
                    }
                }
                Text {
                    id: date2
                    color: "#FAFAFA";
                    font.pixelSize:40*appwidget.scalefactor;
                    font.letterSpacing: 0
                    font.family: "STxihei"
                    verticalAlignment: TextInput.AlignVCenter

                    layer.enabled: true
                    layer.effect: DropShadow {
                        verticalOffset: 1
                        color: "#40262626"
                        samples: 4
                    }
                }
            }
        }
    }

    Component.onCompleted: {

        initScalefactor()
        gettime.start();
//        appwidget.update.connect(appwidget.onupdate);
        console.log("qml 接收到数据更新信号");

        appwidget.creatGsetting("org.ukui.control-center.panel.plugins");
        appwidget.gsettingUpdate.connect(appwidget.onGsettingUpdate);
        timeformat = appwidget.getGsettingValue("org.ukui.control-center.panel.plugins","hoursystem");
        dateformat = appwidget.getGsettingValue("org.ukui.control-center.panel.plugins","date");
        if(timeformat == "24") {
            v = true
        }else {
            v = false
        }
        console.log("当前gsetting为", timeformat, dateformat);
    }
    function onGsettingUpdate(key, value)
    {
        if(key === "hoursystem")
        {
            timeformat = value
            if(timeformat == "24") {
                v = true
            }else {
                v = false
            }
        }
        if(key === "date")
        {
            dateformat = value
        }
    }
    function initScalefactor()
    {
        //按宽计算缩放比例,计算在这个比例系数下的小插件宽高，如果高超出父类的高，则更换比例系数的计算方式
        //按高计算缩放比例，
        //console.log("父类窗口大小", appwidget.parent.width,appwidget.parent.height);
        appwidget.scalefactor = appwidget.parent.width/448
        //console.log("当前比例系数", appwidget.scalefactor);
        var tw = appwidget.scalefactor *448
        var th = appwidget.scalefactor *162
        //console.log("大小：", tw,th ,appwidget.height);
        if(th > appwidget.parent.height) {
            appwidget.scalefactor = appwidget.parent.height/162
            //console.log("以宽度计算比例系数", appwidget.scalefactor);
        }
    }
}