
<template>
	<uv-popup
	  ref="popup"
	  mode="bottom"
	  :safeAreaInsetBottom="safeAreaInsetBottom"
	  :round="round"
		:close-on-click-overlay="closeOnClickOverlay"
		@change="popupChange"
	>
		<view class="uv-action-sheet">
			<view
			  class="uv-action-sheet__header"
			  v-if="title"
			>
				<text class="uv-action-sheet__header__title uv-line-1">{{title}}</text>
				<view
				  class="uv-action-sheet__header__icon-wrap"
				  @tap.stop="cancel"
				>
					<uv-icon
					  name="close"
					  size="17"
					  color="#c8c9cc"
					  bold
					></uv-icon>
				</view>
			</view>
			<text
			  class="uv-action-sheet__description"
				:style="[{
					marginTop: `${title && description ? 0 : '18px'}`
				}]"
			  v-if="description"
			>{{description}}</text>
			<slot>
				<uv-line v-if="description"></uv-line>
				<view class="uv-action-sheet__item-wrap">
					<view v-for="(item, index) in actions" :key="index">
						<!-- #ifdef MP -->
						<button
						  class="uv-reset-button"
						  :openType="item.openType"
						  @getuserinfo="onGetUserInfo"
						  @contact="onContact"
						  @getphonenumber="onGetPhoneNumber"
						  @error="onError"
						  @launchapp="onLaunchApp"
						  @opensetting="onOpenSetting"
						  :lang="lang"
						  :session-from="sessionFrom"
						  :send-message-title="sendMessageTitle"
						  :send-message-path="sendMessagePath"
						  :send-message-img="sendMessageImg"
						  :show-message-card="showMessageCard"
						  :app-parameter="appParameter"
						  @tap="selectHandler(index)"
						  :hover-class="!item.disabled && !item.loading ? 'uv-action-sheet--hover' : ''"
						>
							<!-- #endif -->
							<view
							  class="uv-action-sheet__item-wrap__item"
							  @tap.stop="selectHandler(index)"
							  :hover-class="!item.disabled && !item.loading ? 'uv-action-sheet--hover' : ''"
							  :hover-stay-time="150"
							>
								<template v-if="!item.loading">
									<text
									  class="uv-action-sheet__item-wrap__item__name"
									  :style="[itemStyle(index)]"
									>{{ item.name }}</text>
									<text
									  v-if="item.subname"
									  class="uv-action-sheet__item-wrap__item__subname"
									>{{ item.subname }}</text>
								</template>
								<uv-loading-icon
								  v-else
								  custom-class="van-action-sheet__loading"
								  size="18"
								  mode="circle"
								/>
							</view>
							<!-- #ifdef MP -->
						</button>
						<!-- #endif -->
						<uv-line v-if="index !== actions.length - 1"></uv-line>
					</view>
				</view>
			</slot>
			<uv-gap
			  bgColor="#eaeaec"
			  height="6"
			  v-if="cancelText"
			></uv-gap>
			<view hover-class="uv-action-sheet--hover">
				<text
				  @touchmove.stop.prevent
				  :hover-stay-time="150"
				  v-if="cancelText"
				  class="uv-action-sheet__cancel-text"
				  @tap="cancel"
				>{{cancelText}}</text>
			</view>
		</view>
	</uv-popup>
</template>

<script>
	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
	import button from '@/uni_modules/uv-ui-tools/libs/mixin/button.js'
	import openType from '@/uni_modules/uv-ui-tools/libs/mixin/openType.js'
	import props from './props.js';
	/**
	 * ActionSheet 操作菜單
	 * @description 本組件用於從底部彈出壹個操作菜單，供用戶選擇並返回結果。本組件功能類似於uni的uni.showActionSheetAPI，配置更加靈活，所有平臺都表現壹致。
	 * @tutorial https://www.uvui.cn/components/actionSheet.html
	 * @property {Boolean}			show				操作菜單是否展示 （默認 false ）
	 * @property {String}			title				操作菜單標題
	 * @property {String}			description			選項上方的描述信息
	 * @property {Array<Object>}	actions				按鈕的文字數組，見官方文檔示例
	 * @property {String}			cancelText			取消按鈕的提示文字,不為空時顯示按鈕
	 * @property {Boolean}			closeOnClickAction	點擊某個菜單項時是否關閉彈窗 （默認 true ）
	 * @property {Boolean}			safeAreaInsetBottom	處理底部安全區 （默認 true ）
	 * @property {String}			openType			小程序的打開方式 (contact | launchApp | getUserInfo | openSetting ｜getPhoneNumber ｜error )
	 * @property {Boolean}			closeOnClickOverlay	點擊遮罩是否允許關閉  (默認 true )
	 * @property {String}			lang				指定返回用戶信息的語言，zh_CN 簡體中文，zh_TW 繁體中文，en 英文
	 * @property {String}			sessionFrom			會話來源，openType="contact"時有效
	 * @property {String}			sendMessageTitle	會話內消息卡片標題，openType="contact"時有效
	 * @property {String}			sendMessagePath		會話內消息卡片點擊跳轉小程序路徑，openType="contact"時有效
	 * @property {String}			sendMessageImg		會話內消息卡片圖片，openType="contact"時有效
	 * @property {Boolean}			showMessageCard		是否顯示會話內消息卡片，設置此參數為 true，用戶進入客服會話會在右下角顯示"可能要發送的小程序"提示，用戶點擊後可以快速發送小程序消息，openType="contact"時有效 （默認 false ）
	 * @property {String}			appParameter		打開 APP 時，向 APP 傳遞的參數，openType=launchApp 時有效
	 * 
	 * @event {Function} select			點擊ActionSheet列表項時觸發 
	 * @event {Function} close			點擊取消按鈕時觸發
	 * @event {Function} getuserinfo	用戶點擊該按鈕時，會返回獲取到的用戶信息，回調的 detail 數據與 wx.getUserInfo 返回的壹致，openType="getUserInfo"時有效
	 * @event {Function} contact		客服消息回調，openType="contact"時有效
	 * @event {Function} getphonenumber	獲取用戶手機號回調，openType="getPhoneNumber"時有效
	 * @event {Function} error			當使用開放能力時，發生錯誤的回調，openType="error"時有效
	 * @event {Function} launchapp		打開 APP 成功的回調，openType="launchApp"時有效
	 * @event {Function} opensetting	在打開授權設置頁後回調，openType="openSetting"時有效
	 * @example <uv-action-sheet ref="actionSheet" :actions="list" :title="title" ></uv-action-sheet>
	 */
	export default {
		name: "uv-action-sheet",
		mixins: [openType, button, mpMixin , mixin, props],
		emits: ['close', 'select'],
		computed: {
			// 操作項目的樣式
			itemStyle() {
				return (index) => {
					let style = {};
					if (this.actions[index].color) style.color = this.actions[index].color
					if (this.actions[index].fontSize) style.fontSize = this.$uv.addUnit(this.actions[index].fontSize)
					// 選項被禁用的樣式
					if (this.actions[index].disabled) style.color = '#c0c4cc'
					return style;
				}
			},
		},
		methods: {
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			popupChange(e) {
				if(!e.show) this.$emit('close');
			},
			// 點擊取消按鈕
			cancel() {
				this.close();
			},
			selectHandler(index) {
				const item = this.actions[index]
				if (item && !item.disabled && !item.loading) {
					this.$emit('select', item)
					if (this.closeOnClickAction) {
						this.close();
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	$show-lines: 1;
	$show-reset-button: 1;
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
	@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
	$uv-action-sheet-reset-button-width:100% !default;
	$uv-action-sheet-title-font-size: 16px !default;
	$uv-action-sheet-title-padding: 12px 30px !default;
	$uv-action-sheet-title-color: $uv-main-color !default;
	$uv-action-sheet-header-icon-wrap-right:15px !default;
	$uv-action-sheet-header-icon-wrap-top:15px !default;
	$uv-action-sheet-description-font-size:13px !default;
	$uv-action-sheet-description-color:14px !default;
	$uv-action-sheet-description-margin: 18px 15px !default;
	$uv-action-sheet-item-wrap-item-padding:15px !default;
	$uv-action-sheet-item-wrap-name-font-size:16px !default;
	$uv-action-sheet-item-wrap-subname-font-size:13px !default;
	$uv-action-sheet-item-wrap-subname-color: #c0c4cc !default;
	$uv-action-sheet-item-wrap-subname-margin-top:10px !default;
	$uv-action-sheet-cancel-text-font-size:16px !default;
	$uv-action-sheet-cancel-text-color:$uv-content-color !default;
	$uv-action-sheet-cancel-text-font-size:15px !default;
	$uv-action-sheet-cancel-text-hover-background-color:rgb(242, 243, 245) !default;

	.uv-reset-button {
		width: $uv-action-sheet-reset-button-width;
	}

	.uv-action-sheet {
		text-align: center;
		&__header {
			position: relative;
			padding: $uv-action-sheet-title-padding;
			&__title {
				font-size: $uv-action-sheet-title-font-size;
				color: $uv-action-sheet-title-color;
				font-weight: bold;
				text-align: center;
			}

			&__icon-wrap {
				position: absolute;
				right: $uv-action-sheet-header-icon-wrap-right;
				top: $uv-action-sheet-header-icon-wrap-top;
			}
		}

		&__description {
			font-size: $uv-action-sheet-description-font-size;
			color: $uv-tips-color;
			margin: $uv-action-sheet-description-margin;
			text-align: center;
		}

		&__item-wrap {

			&__item {
				padding: $uv-action-sheet-item-wrap-item-padding;
				@include flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				&__name {
					font-size: $uv-action-sheet-item-wrap-name-font-size;
					color: $uv-main-color;
					text-align: center;
				}

				&__subname {
					font-size: $uv-action-sheet-item-wrap-subname-font-size;
					color: $uv-action-sheet-item-wrap-subname-color;
					margin-top: $uv-action-sheet-item-wrap-subname-margin-top;
					text-align: center;
				}
			}
		}

		&__cancel-text {
			font-size: $uv-action-sheet-cancel-text-font-size;
			color: $uv-action-sheet-cancel-text-color;
			text-align: center;
			padding: $uv-action-sheet-cancel-text-font-size;
		}

		&--hover {
			background-color: $uv-action-sheet-cancel-text-hover-background-color;
		}
	}
</style>
