import { defineComponent } from "vue"
import "./index.scss"
import { genPixel } from "../../utils/style"

/**
 * 块状导航
 *
 * @version 1.0.0
 */
export default defineComponent({
	name: "MpSector",
	props: {
		/**
		 * 自定义颜色
		 * @values green, blue, orange, red
		 */
		color: { type: String, default: "green" },
		/**
		 * 高度
		 */
		height: { type: [Number, String], default: "100px" },
		/**
		 * 标题
		 */
		title: { type: String, default: "" },
		/**
		 * 描述
		 */
		description: { type: String, default: "" },
	},
	setup(props, { slots }) {
		const titleElem = () => {
			if (slots.title) {
				return <view class={"mp-sector__title"}>{slots.title()}</view>
			} else if (props.title) {
				return <view class={"mp-sector__title"}>{props.title}</view>
			}
			return null
		}
		const descriptionElem = () => {
			if (slots.description) {
				return <view class={"mp-sector__description"}>{slots.description()}</view>
			} else if (props.title) {
				return <view class={"mp-sector__description"}>{props.description}</view>
			}
			return null
		}

		return () => (
			<view class={`mp-sector mp-sector__${props.color}`} style={{ height: genPixel(props.height) }}>
				{titleElem()}
				{descriptionElem()}
			</view>
		)
	},
})