from linebot.models.responses import Content
import requests
from abc import ABC, abstractmethod
from linebot.models import TemplateSendMessage, ButtonsTemplate, PostbackAction, MessageAction, URIAction, CarouselColumn, CarouselTemplate, PostbackTemplateAction, FlexSendMessage
from bs4 import BeautifulSoup

class Message(ABC):
    def __init__(self):
        pass

    @abstractmethod
    def content(self):
        pass

# 「功能列表」按鈕樣板訊息
class Featuresmodel():
    def content(self):
        flex_message = FlexSendMessage(
            alt_text='hello',
            contents={
                "type": "bubble",
                "header": {
                    "type": "box",
                    "layout": "vertical",
                    "contents": [
                        {
                            "type": "text",
                            "text": "功能列表",
                            "size": "lg",
                            "color": "#ffffff"
                        }
                    ],
                    "backgroundColor": "#0066ff"
                },
                "body": {
                    "type": "box",
                    "layout": "vertical",
                    "contents": [
                        {
                            "type": "button",
                            "action": {
                                "type": "postback",
                                "label": "註冊",
                                "data": "註冊",
                            },
                            "margin": "sm",
                            "color": "#0066ff",
                            "style": "primary"
                        },
                        {
                            "type": "button",
                            "action": {
                                "type": "postback",
                                "label": "簽到",
                                "data": "簽到",
                            },
                            "color": "#0066ff",
                            "style": "primary",
                            "margin": "sm"
                        },
                        {
                            "type": "button",
                            "action": {
                                "type": "postback",
                                "label": "專案進度",
                                "data": "專案進度",
                            },
                            "color": "#0066ff",
                            "margin": "sm",
                            "style": "primary"
                        },
                        {
                            "type": "button",
                            "action": {
                                "type": "postback",
                                "label": "本日尚未簽到",
                                "data": "本日尚未簽到"
                            },
                            "color": "#0066ff",
                            "style": "primary",
                            "margin": "sm"
                        },
                        {
                            "type": "button",
                            "action": {
                                "type": "postback",
                                "label": "時刻表",
                                "data": "時刻表"
                            },
                            "color": "#0066ff",
                            "style": "primary",
                            "margin": "sm"
                        }
                    ]
                }
            }

        )

        return flex_message

第一個參數"type": "bubble"可以想像成我們在創造一個 FlexMessage 的框架，接下來所有的基本架構都會放在這個框架裡。當然，也不是說這四樣基本架構通通都要放進去。如果你的 FlexMessage 需要一個"header"，那就放進去"header"。如果你的 FlexMessage 不需要"footer"，那就不用放進去。
　　有了這四個基本架構之後，就可以根據你的設計，繼續在"header"、"hero"、"body"、"footer"中放入相對應的元素。這些元素也通通都是由字典物件所組成，常用的如'box'、'image'、'text'、'separator'、'button'等等

Buttons template

• type: 定義此 message 的屬性
• altText: 使用者收到通知出現的字樣
• thumbnailImageUrl: 圖片網址
• imageAspectRatio: 圖片比例有兩種，預設為 rectangle
  • rectangle: 1.51:1
  • square: 1:1
• imageSize: 圖片大小有兩種，預設為 cover
  • cover：圖像填充整個圖像區域。
  • contain：整個圖像顯示在圖像區域中。
• imageBackgroundColor: 圖像的背景顏色配合 imageSize 的 contain
• title: 標題顯示的文字
• text: 標題內容的文字
• defaultAction: 預設功能，簡單來說就是點擊其他不是 button 區域的時候會做什麼
• actions: 決定下面 button 幾個以及分別的功能

今天的歌曲是 周杰倫-星晴 Starry Mood
https://www.youtube.com/watch?v=sTNJsIcPSvE&list=PLFl6Na2uUoOZBEhBtQ_jeGA4P1V20JvpW&index=12&ab_channel=%E5%91%A8%E6%9D%B0%E5%80%ABJayChou