import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Item {
    width: 800
    height: 600

    property alias mTabView: tab_view

    Rectangle{

        anchors.fill: parent
        color: "#fafafa"

        TabView {
            id: tab_view
            anchors.fill: parent

            Tab {
                id: tab1
                anchors.fill: parent
                title: qsTr("首页")
                active: true

                FirstForm {
                    property string name: "home"
                    anchors.fill: parent
                }
            }

            style: TabViewStyle{
                frameOverlap: 1
                tab: Rectangle {
                    id: rctMain
                    color: styleData.selected ? "#f3f3f4" :"#ffffff"
                    implicitWidth: Math.max(text.width + 60, 120)
                    implicitHeight: 40
                    border.color: "#cdc5c5"
                    border.width: 1
                    radius: 0

                    Rectangle {
                        id: rctClose
                        width: 32
                        anchors.right: parent.right
                        anchors.rightMargin: 1
                        anchors.top: parent.top
                        anchors.topMargin: 1
                        anchors.bottom: parent.bottom
                        anchors.bottomMargin: 1
                        color:"#00000000"
                        visible: styleData.index !== 0

                        Image {
                            id:imgClose
                            width: 12
                            height: 12
                            anchors.centerIn: parent
                            source: "image/close-normal.png"

                            states: [
                                State {
                                    name: "NORMAL"
                                    PropertyChanges { target: imgClose; source: "image/close-normal.png" }
                                },
                                State {
                                    name: "HOVER"
                                    PropertyChanges { target: imgClose; source: "image/close-hovered.png" }
                                }
                            ]
                        }

                        MouseArea {
                            hoverEnabled: true
                            anchors.fill: parent

                            onEntered: {
                                imgClose.state = "HOVER";
                            }
                            onExited: {
                                imgClose.state = "NORMAL";
                            }
                            onClicked: {
                                console.log("title:" + styleData.title);
                                console.log("index:" + styleData.index);
                                tab_view.removeTab(styleData.index);
                            }
                        }
                    }

                    Text {
                        id: text
                        anchors.centerIn: parent
                        text: styleData.title
                        color: styleData.selected ? "#23508e" : "#999"
                        font.family: "Alibaba PuHuiTi R"
                        font.pixelSize: 13
                    }

                }
                frame: Rectangle {      //
                    color: "#f3f3f4"
                    border.color: "#cdc5c5"
                    border.width: 1
                }

            }
        }
    }


}