import GeneralBiz
import FusionUI
import FunctionPanel
import Purchase 1.0
import Qt5Compat.GraphicalEffects
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import GeneralBizUI

import VECreator
Item {
    id: root
    property string iconUrl: ""
    property string title: ""
    property var contextId
    property bool selected: false
    property bool showloading: false
    property bool showStaticImage: false
    property string vipIconSource: ""
    property size vipIconSize: Qt.size(0,0)
    property size vipIconSourceSize: Qt.size(0,0)
    property string vipUseLeftText: ""
    property bool enabledButtonOpacity: false  // Do you need to gray the button icon?
    property color selectedBorderColor: LVColor.Brand_Primary_Default
    property alias imageFillMode: resourceImage.fillMode

    opacity: (enabledButtonOpacity && !enabled) ? 0.2 : 1

    signal click(var contextId)
    Column {
        id: column
        height: parent.height
        width: parent.width
        spacing: 4
        Rectangle{
            id: img
            radius: 8
            width: 62
            height: 62
            border.width: 1.5
            border.color: LVColor.Fill_Background_Level5

            Image{
                source: "qrc:/FunctionPanel/resources/beautyItemEmpty.svg"
                width: 24
                height: 24
                sourceSize: Qt.size(24, 24)
                visible: showStaticImage ? !staticImage.visible : !resourceImage.visible
                anchors.centerIn: parent
            }
            AnimatedImage {
                id: resourceImage
                anchors.fill: parent
                source: iconUrl
                playing: false
                asynchronous: AbTestConfigSettings.enableAnimatedImageAsync
                visible: iconUrl.length > 0 && !showStaticImage
                layer.enabled: AppPerformanceGlobalConfig.layerVisibleOptimizeEnable ? resourceImage.visible : true
                layer.effect: OpacityMask {
                    maskSource: Item {
                        width: resourceImage.width
                        height: resourceImage.height
                        Rectangle {
                            anchors.centerIn: parent
                            width: resourceImage.width
                            height:resourceImage.height
                            radius: 8
                        }
                    }
                }
            }

            Image {
                id: staticImage
                visible: iconUrl.length > 0 && showStaticImage
                source: iconUrl
                width: img.width
                height: img.height
                sourceSize: Qt.size(img.width, img.height)
                antialiasing: true
                smooth: true
                anchors.fill: parent
            }
            Image {
                id: vipLogo
                visible: vipIconSource.length > 0
                source: vipIconSource
                width: vipIconSize.width
                height: vipIconSize.height
                sourceSize: vipIconSourceSize
                antialiasing: true
                smooth: true
                anchors {
                    left: parent.left
                    leftMargin: 3
                    top: parent.top
                    topMargin: 3
                }
            }
            Rectangle {
                id: loading_image
                visible: showloading
                color: LVColor.Alpha50B_Black_05

                anchors{
                    right: parent.right
                    bottom: parent.bottom
                    rightMargin: 4
                    bottomMargin: 4
                }
                width: 18
                height: width
                radius: width / 2

                Image {
                    source: "qrc:/MaterialPanel/resource/Base/loading.svg"
                    width: 18
                    height: width
                    smooth: true
                    antialiasing: true
                    sourceSize: Qt.size(width * 2, height * 2)

                    NumberAnimation {
                        running: loading_image.visible
                        loops: Animation.Infinite
                        target: loading_image
                        from: 0
                        to: 360
                        property: "rotation"
                        duration: 1000
                    }
                }
            }

            Rectangle {
                // Border Rect
                id: imgBorderRect
                visible: showStaticImage ? staticImage.visible : resourceImage.visible
                radius: 8
                anchors.fill: showStaticImage ? staticImage : resourceImage
                color: LVColor.Clear
                border.color: LVColor.Clear

                border.width: 1.5
            }

            color: LVColor.Fill_Background_Level5
            MouseArea{
                hoverEnabled: true
                anchors.fill: parent
                onClicked: {
                    root.click(contextId)
                }
                onEntered: {
                    resourceImage.playing = true
                }
                onExited: {
                    resourceImage.playing = false
                }
            }
            LVToolTip {
                anchors.fill: parent
                needClickEvent: true
                needFollowMouse: true
                offsetY: 4
                text: vipUseLeftText
                visible: vipUseLeftText.length > 0
                onClicked: {
                    root.click(contextId)
                }
            }
        }

        Text{
            id: text
            anchors.horizontalCenter: column.horizontalCenter
            text: title
            horizontalAlignment: Text.AlignHCenter
            width: column.width
            font: LVFont.OverlineRegular10
            color: LVColor.Text_Tertiary
            elide: Text.ElideRight
            LVToolTip {
                anchors.fill: parent
                visible: parent.truncated
                text: parent.text
            }
        }
    }
    onSelectedChanged: {
        img.border.color = selected ? selectedBorderColor : LVColor.Clear
        imgBorderRect.border.color = selected ? selectedBorderColor : LVColor.Clear
    }
}