<template>
  <sar-popup
    effect="slide-bottom"
    :visible="innerVisible"
    :duration="duration"
    @overlay-click="onOverlayClick"
  >
    <view :class="shareSheetClass" :style="shareSheetStyle">
      <view v-if="title || description" :class="bem.e('header')">
        <view v-if="title" :class="bem.e('title')">
          {{ description }}
        </view>
        <view v-if="description" :class="bem.e('description')">
          {{ description }}
        </view>
      </view>
      <view :class="bem.e('body')">
        <view v-for="(row, i) in finalItemList" :key="i" :class="bem.e('row')">
          <scroll-view scroll-x>
            <view :class="bem.e('row-content')">
              <view
                v-for="(item, j) in row"
                :key="j"
                :class="
                  classNames(
                    bem.e('item'),
                    bem.em('item', 'disabled', item.disabled),
                  )
                "
                @click="onSelect(item)"
              >
                <view
                  :class="bem.e('icon-wrapper')"
                  :style="
                    stringifyStyle({
                      backgroundColor: item.background,
                      color: item.color,
                    })
                  "
                >
                  <image
                    v-if="isImg(item.icon)"
                    :src="item.icon"
                    mode="aspectFill"
                    :class="bem.e('image')"
                  />
                  <sar-icon
                    v-else
                    :name="item.icon"
                    :family="item.iconFamily"
                  />
                </view>
                <view :class="bem.e('item-name')">{{ item.name }}</view>
                <view :class="bem.e('item-description')">
                  {{ item.description }}
                </view>
              </view>
            </view>
          </scroll-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,
  isFileUrl
} from "../utils";
import SarPopup from "../popup/popup.vue";
import SarIcon from "../icon/icon.vue";
import { shareSheetProps } from "./common";
const __default__ = {
  options: {
    virtualHost: true,
    styleIsolation: "shared"
  }
};
export default /* @__PURE__ */ _defineComponent({
  ...__default__,
  __name: "share-sheet",
  props: shareSheetProps,
  emits: ["update:visible", "close", "cancel", "select"],
  setup(__props, { expose: __expose, emit: __emit }) {
    __expose();
    const props = __props;
    const emit = __emit;
    const bem = createBem("share-sheet");
    const finalItemList = computed(() => {
      const itemList = props.itemList;
      if (!Array.isArray(itemList)) {
        return [];
      }
      if (!Array.isArray(itemList[0])) {
        return [itemList];
      }
      return itemList;
    });
    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) => {
      if (!item.disabled) {
        emit("select", item);
        perhapsClose("select");
      }
    };
    const onCancel = () => {
      emit("cancel");
      perhapsClose("cancel");
    };
    const isImg = (url) => {
      return typeof url === "string" && isFileUrl(url);
    };
    const shareSheetClass = computed(() => {
      return classNames(bem.b(), bem.m("titled", !!props.title), props.rootClass);
    });
    const shareSheetStyle = computed(() => {
      return stringifyStyle(props.rootStyle);
    });
    const __returned__ = { props, emit, bem, finalItemList, innerVisible, perhapsClose, onOverlayClick, onSelect, onCancel, isImg, shareSheetClass, shareSheetStyle, get classNames() {
      return classNames;
    }, get stringifyStyle() {
      return stringifyStyle;
    }, SarPopup, SarIcon };
    return __returned__;
  }
});
</script>

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