import QtQuick 1.0
import "Util.js" as Utility

Item {

    id:shoptabitem;
    width: parent.width
    height: parent.height


    FontLoader { id: localFont; source: "fonts/SIMLI.TTF" }
    property int currentfocus:0

    Rectangle{
        id:shopAlbumListID
        width: parent.width
        height: parent.height
        color: "#343434";

        Rectangle
        {
            id:shopAlbumListLeftID
            width: shoptabitem.width*0.8
            height: shoptabitem.height
            color: "#343434";


            ListModel {
                id: shopAlbumModel

            }

            Component {
                id: shopPrimeImageDelegate
                Item {
                    id: shopAlbumcell
                    width: shopAlbumgridID.cellWidth;
                    height: shopAlbumgridID.cellHeight


                    ImageFrame
                    {
                        id: shopAlbumImageFrameID

                        imgUrl: primaryUrl;
                        anchors.centerIn:parent
                        color: "#343434"


                        MouseArea {
                            anchors.fill: parent
                            onClicked: {


                                shopAlbumListID.opacity=0;
                                shopPhotoListID.opacity=1;
                                shopAlbumListRightID.opacity=0;

                                currentfocus=1;
                                Utility.renrenShopGetPhotos(photosetID,appState.accessToken);

                            }
                        }
                    }

                    BusyIndicator { anchors.centerIn: parent; width:20; height:20; on: shopAlbumImageFrameID.imagestatus != Image.Ready }

                    Text {
                        text: photosetDesc;
                        anchors.top: shopAlbumImageFrameID.bottom;
                        anchors.topMargin: 5

                        font.pointSize: 9
                        color:"white";
                        anchors.horizontalCenter: parent.horizontalCenter;
                        wrapMode:Text.WrapAnywhere

                    }

                    Keys.onPressed: {

                        if (event.key == Qt.Key_Return)
                        {
                            shopAlbumListID.opacity=0;
                            shopPhotoListID.opacity=1;
                            shopAlbumListRightID.opacity=0;

                            currentfocus=1;

                            Utility.renrenShopGetPhotos(photosetID,appState.accessToken);
                        }

                    }

                }
            }

            Component {
                id: appHighlight
                Rectangle { color: "lightsteelblue"; radius: 10 }
            }


            GridView {
                id: shopAlbumgridID

                anchors.fill: parent
                cellWidth: 200; cellHeight:200

                model: shopAlbumModel
                delegate: shopPrimeImageDelegate
                highlight:appHighlight
                focus: true

                ScrollBar {
                    id: shopAlbumScrollBar
                    scrollArea: shopAlbumgridID
                    height: shopAlbumgridID.height
                    width: 8
                    opacity: 0
                    anchors.right: shopAlbumgridID.right
                }
            }

        }

        Rectangle
        {
            id:shopAlbumListRightID
            anchors.left:shopAlbumListLeftID.right;

            width: shoptabitem.width*0.2
            height: shoptabitem.height
            color: "#343434";

            Image
            {
                id:shopBackImageID
                source:"images/back_button_pressed.png";

                anchors.top:shopAlbumListRightID.top;
                anchors.topMargin:10

                anchors.right:shopAlbumListRightID.right;
                anchors.rightMargin:10

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        tabcontainer.opacity=1 ;
                        shoptabcontainer.opacity=0;
                        // tabbedUIId.tabClicked(tabbedUIId.tabIndex);
                        //  tabcontainer.focus=true;

                        switch (tabbedUIId.tabIndex)
                        {
                        case 0:
                            zonghejingxuanTabContentID.setTabContentfocus();
                            break
                        case 1:
                            meixiongTabContentID.setTabContentfocus();
                            break

                        case 2:
                            changtuisiwaTabContentID.setTabContentfocus();
                            break

                        case 3:
                            xiangchemeinvTabContentID.setTabContentfocus();
                            break

                        case 4:
                            zhifuTabContentID.setTabContentfocus();
                            break

                        case 5:
                            mingxingTabContentID.setTabContentfocus();
                            break
                        }

                    }
                }

            }  //end of  back image


            Text {
                id: shopnotice
                width:shoptabitem.width*0.15

                text: "\u8D2D\u4E70\u9700\u77E5\uFF1A\n\n\u8BF7\u4F7F\u7528\u652F\u4ED8\u5B9D\u652F\u4ED8\uFF0C\u6211\u4EEC\u7684\u652F\u4ED8\u5B9D\u5E10\u53F7\u662F18964328698\uFF0C\u767B\u5F55\u652F\u4ED8\u5B9D\uFF0C\u70B9\u51FB\u8F6C\u8D26\uFF0C\u518D\u70B9\u51FB\u201C\u6211\u8981\u4ED8\u6B3E\u201D\uFF0C\u8F93\u5165\u4ED8\u6B3E\u91D1\u989D\uFF0C\u5728\u4ED8\u6B3E\u8BF4\u660E\u4E2D\u586B\u5199\u4F60\u8D2D\u4E70\u7684\u5546\u54C1\u53F7\uFF0CQQ\u53F7\uFF0C\u8054\u7CFB\u5730\u5740\uFF0C\u4EE5\u53CA\u624B\u673A\uFF0C\u5E76\u52FE\u9009\u77ED\u4FE1\u901A\u77E5\u5356\u5BB6\uFF0C\u4ED8\u6B3E\u6210\u529F\u540E\uFF0C\u6211\u4EEC\u4F1A\u8FC5\u901F\u7ED9\u4F60\u53D1\u8D27\n\n\u6709\u4EFB\u4F55\u7591\u95EE\u8BF7\u8054\u7CFBQQ\u5BA2\u670D\uFF1A2387828771\n\n\u4F60\u4E5F\u53EF\u4EE5\u70B9\u51FB\u4EE5\u4E0B\u94FE\u63A5\u53BB\u6BDB\u8C46\u79C0\u6DD8\u5B9D\u5E97\u8D2D\u4E70"
                anchors.top: shopBackImageID.bottom;
                anchors.topMargin: 20
                anchors.right:parent.right;
                anchors.rightMargin:10

                font.pointSize: 15
                font.family: localFont.name
                color:"#aaa7a7"

                wrapMode:Text.Wrap//WrapAnywhere

            }

            Image
            {
                id:shopTaobaoImageID

                source:"images/taobao.png";
                anchors.top:shopnotice.bottom;
                anchors.topMargin:20
                //anchors.right:parent.right;
               // anchors.rightMargin:10

                anchors.horizontalCenter:shopnotice.horizontalCenter

               // anchors.horizontalCenter:shopAlbumListRightID.horizontalCenter

                MouseArea {
                    anchors.fill: parent
                    onClicked: {

                           Qt.openUrlExternally("http://shop68974037.taobao.com/")

                    }
                }

            }


        }



    }

    Rectangle{
        id:shopPhotoListID
        color: "#343434";
        opacity:0

        Rectangle
        {
            id:shopPhotoListLeftID
            width: shoptabitem.width*0.8
            height: shoptabitem.height
            color: "#343434";
            anchors.top:shopPhotoListID.top
            anchors.topMargin:20


            ListModel {
                id: shopPhotoModel

            }

            Component {
                id: shopImageDelegate;

                Item {
                    id: shopPhoto

                    width:photodescID.width
                    height:shopPhotoImageID.height+photodescID.paintedHeight+20

                    anchors.horizontalCenter: parent.horizontalCenter



                    Text {
                        id: photodescID
                        width:shoptabitem.width*0.6
                        text: photoDescription

                        font.pointSize: 16
                        font.family: localFont.name
                        color:"DarkOrange";

                        anchors.horizontalCenter: parent.horizontalCenter;
                        wrapMode:Text.WrapAnywhere

                    }


                    Image
                    {

                        id: shopPhotoImageID
                        width:shoptabitem.width*0.4;
                        height:shoptabitem.width*0.4;
                        fillMode:Image.PreserveAspectFit;

                        source: fullDisplayURL;
                        anchors.horizontalCenter: parent.horizontalCenter;
                        anchors.top:photodescID.bottom
                        anchors.topMargin:20
                        smooth:true
                    }


                    BusyIndicator { anchors.centerIn: parent; on: shopPhotoImageID.status != Image.Ready }


                }
            }

            ListView {
                id: shopPhotoListViewID
                anchors.fill: parent
                //width: shoptabitem.width*0.8
                //height: shoptabitem.height
                model: shopPhotoModel
                delegate: shopImageDelegate
                anchors.horizontalCenter: parent.horizontalCenter

                spacing: 50

                ScrollBar {
                    id: shopPhotoScrollBar
                    scrollArea: shopPhotoListViewID
                    height: shopPhotoListViewID.height
                    width: 8
                    opacity: 0
                    anchors.right: shopPhotoListViewID.right
                }
            }

        }



        Rectangle
        {
            id:shopPhotoListRightID
            anchors.left:shopPhotoListLeftID.right;

            width: shoptabitem.width*0.2
            height: shoptabitem.height
            color: "#343434";


            Image
            {
                id:shopItemDetailBackImageID
                source:"images/back_button_pressed.png";
                anchors.top:parent.top;
                anchors.topMargin:10

                anchors.right:parent.right;
                anchors.rightMargin:10

                MouseArea {
                    anchors.fill: parent
                    onClicked: {

                       // shopPhotoModel.clear();
                        shopPhotoListID.opacity=0;
                        shopAlbumListID.opacity=1;
                        shopAlbumListRightID.opacity=1;
                        currentfocus=0;

                    }
                }

            }


            Text {
                id:shopitemnotice
                width:shoptabitem.width*0.15

                text: "\u8D2D\u4E70\u9700\u77E5\uFF1A\n\n\u8BF7\u4F7F\u7528\u652F\u4ED8\u5B9D\u652F\u4ED8\uFF0C\u6211\u4EEC\u7684\u652F\u4ED8\u5B9D\u5E10\u53F7\u662F18964328698\uFF0C\u767B\u5F55\u652F\u4ED8\u5B9D\uFF0C\u70B9\u51FB\u8F6C\u8D26\uFF0C\u518D\u70B9\u51FB\u201C\u6211\u8981\u4ED8\u6B3E\u201D\uFF0C\u8F93\u5165\u4ED8\u6B3E\u91D1\u989D\uFF0C\u5728\u4ED8\u6B3E\u8BF4\u660E\u4E2D\u586B\u5199\u4F60\u8D2D\u4E70\u7684\u5546\u54C1\u53F7\uFF0CQQ\u53F7\uFF0C\u8054\u7CFB\u5730\u5740\uFF0C\u4EE5\u53CA\u624B\u673A\uFF0C\u5E76\u52FE\u9009\u77ED\u4FE1\u901A\u77E5\u5356\u5BB6\uFF0C\u4ED8\u6B3E\u6210\u529F\u540E\uFF0C\u6211\u4EEC\u4F1A\u8FC5\u901F\u7ED9\u4F60\u53D1\u8D27\n\n\u6709\u4EFB\u4F55\u7591\u95EE\u8BF7\u8054\u7CFBQQ\u5BA2\u670D\uFF1A2387828771"
                anchors.top: shopItemDetailBackImageID.bottom;
                anchors.topMargin: 20
                anchors.right:parent.right;
                anchors.rightMargin:10

                font.pointSize: 15
                font.family: localFont.name
                color:"#aaa7a7"

                wrapMode:Text.Wrap//WrapAnywhere

            }





        }

        Keys.onPressed: {

            if (event.key == Qt.Key_Escape)
            {
                //shopPhotoModel.clear();
                shopPhotoListID.opacity=0;
                shopAlbumListID.opacity=1;
                shopAlbumListRightID.opacity=1;
                currentfocus=0;
            }

        }

    }


    function formatRenrenShopAlbumListModel(arr)
    {
        console.log("formatRenrenAlbumListModel start...");

        shopAlbumModel.clear();

        for (var p in arr)
        {
            var sat = arr[p];

            if (sat["type"]==0) //ÊÇÆÕÍ¨Ïà²á
                shopAlbumModel.append({ "primaryUrl":sat["url"], "photosetDesc":sat["name"], "photosetID":sat["aid"]});

        }

    }

    function formatRenrenShopPhotoListModel(arr)
    {

        console.log("formatRenrenPhotoListModel start...");
        shopPhotoModel.clear();


        for (var p in arr)
        {
            var sat = arr[p];

            shopPhotoModel.append({ "photoUrl":sat["url_main"],  "photoID":sat["pid"], "fullDisplayURL":sat["url_large"], "photoDescription":sat["caption"] });


        }
    }

    function setShopTabContentfocus()
    {
        switch(shoptabitem.currentfocus)
        {
        case 0:
            shopAlbumgridID.focus=true;
            console.log(" currentfocus 0 ");
            break
        case 1:
            shopPhotoListViewID.focus=true;
            //shopPhotoListID.focus=true;
            console.log(" currentfocus 1 ");
            break

        }

    }


}
