import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Item {
    id: self
    width: parent.width/parent.childcount
    property var col: ""
    property var value: "0"
    property var text: "0"
    onTextChanged: {
        if(text == "1")
            sw.checked = true
        else
            sw.checked = false
    }
    height: 58
    clip: true

    // Switch {
    //     id: sw
    //     anchors.centerIn: parent
    //     checked: false
    //     onCheckedChanged: parent.value = (checked? "1": "0")
    // }
    Rectangle {
        id: sw
        anchors.centerIn: parent
        property var checked: false
        implicitWidth: 40
        implicitHeight: 20
        radius: 20
        smooth: true
        color: sw.checked ? "#3096ff" : "#ffffff"
        border.color: sw.checked ? "#3096ff" : "#cccccc"
        Rectangle {
            x: sw.checked ? parent.width - width : 0
            width: 20
            height: 20
            radius: 10
            smooth: true
            color: sw.down ? "#cccccc" : "#ffffff"
            border.color: sw.checked ? (sw.down ? "#3096ff" : "#3096ff") : "#999999"
        } 

        MouseArea{
            anchors.fill: parent
            onClicked: {
                sw.checked = !sw.checked
                self.value = (sw.checked? "1": "0")
            }
        }
                                    
    }
}