<template>
  <sar-popup
    effect="slide-bottom"
    :visible="innerVisible"
    :duration="duration"
    @overlay-click="onOverlayClick"
  >
    <view :class="actionSheetClass" :style="actionSheetStyle">
      <view v-if="description" :class="bem.e('description')">
        {{ description }}
      </view>
      <view :class="bem.e('content')">
        <view
          v-for="(item, i) in itemList"
          :key="i"
          :class="
            classNames(
              bem.e('item'),
              bem.em('item', 'disabled', item.disabled),
              bem.em('item', 'loading', item.loading),
            )
          "
          :style="stringifyStyle({ color: item.color })"
          @click="onSelect(item, i)"
        >
          <template v-if="!item.loading">
            <view :class="bem.e('item-name')">
              {{ item.name }}
            </view>
            <view v-if="item.description" :class="bem.e('item-description')">
              {{ item.description }}
            </view>
          </template>
          <view v-else :class="bem.e('loading')">
            <sar-loading />
          </view>
        </view>
      </view>
      <template v-if="cancel">
        <view :class="bem.e('gap')"></view>
        <view :class="bem.e('cancel')" @click="onCancel">
          {{ cancel }}
        </view>
      </template>
    </view>
  </sar-popup>
</template>

<script lang="ts">
import { defineComponent as _defineComponent } from "vue";
import { computed, ref, watch } from "vue";
import { classNames, stringifyStyle, createBem, noop } from "../utils";
import SarPopup from "../popup/popup.vue";
import SarLoading from "../loading/loading.vue";
import { actionSheetProps } from "./common";
const __default__ = {
  options: {
    virtualHost: true,
    styleIsolation: "shared"
  }
};
export default /* @__PURE__ */ _defineComponent({
  ...__default__,
  __name: "action-sheet",
  props: actionSheetProps,
  emits: ["update:visible", "close", "cancel", "select"],
  setup(__props, { expose: __expose, emit: __emit }) {
    __expose();
    const props = __props;
    const emit = __emit;
    const bem = createBem("action-sheet");
    const innerVisible = ref(props.visible);
    watch(
      () => props.visible,
      () => {
        innerVisible.value = props.visible;
      }
    );
    const perhapsClose = (type) => {
      if (typeof props.beforeClose === "function") {
        const result = props.beforeClose(type);
        if (result instanceof Promise) {
          return result.then(() => {
            innerVisible.value = false;
            emit("update:visible", false);
          }).catch(noop);
        } else if (result === false) {
          return;
        }
      }
      innerVisible.value = false;
      emit("update:visible", false);
    };
    const onOverlayClick = () => {
      emit("close");
      if (props.overlayClosable) {
        perhapsClose("close");
      }
    };
    const onSelect = (item, index) => {
      if (!item.disabled && !item.loading) {
        emit("select", item, index);
        perhapsClose("select");
      }
    };
    const onCancel = () => {
      emit("cancel");
      perhapsClose("cancel");
    };
    const actionSheetClass = computed(() => {
      return classNames(
        bem.b(),
        bem.m("headless", !props.description),
        props.rootClass
      );
    });
    const actionSheetStyle = computed(() => {
      return stringifyStyle(props.rootStyle);
    });
    const __returned__ = { props, emit, bem, innerVisible, perhapsClose, onOverlayClick, onSelect, onCancel, actionSheetClass, actionSheetStyle, get classNames() {
      return classNames;
    }, get stringifyStyle() {
      return stringifyStyle;
    }, SarPopup, SarLoading };
    return __returned__;
  }
});
</script>

<style lang="scss">
@use './index.scss';
</style>