<template>
  <view
    class="fixed-wrap"
    :style="{ '--num': showCancel ? '63px' : '0px' }"
    v-if="isShow"
  >
    <view class="fixed-btn" id="targetRef">
      <div class="btn">
        <u-button
          type="primary"
          :shape="shape"
          size="large"
          @click="emits('confirm')"
          >{{ confirmText }}</u-button
        >
      </div>
      <div class="btn" v-if="showCancel">
        <u-button :shape="shape" size="large" @click="emits('cancel')"
          >取消</u-button
        >
      </div>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, nextTick, getCurrentInstance } from "vue";
import { isMainShop } from "@/store/account.js";

const props = defineProps({
  isOpenPermission: {
    type: Boolean,
    default: true,
  },
  confirmText: {
    type: String,
    default: "保存",
  },
  showCancel: {
    type: Boolean,
    default: false,
  },
  shape: {
    type: String,
    default: "circle", // squre circle
  },
});
const isShow = computed(() => {
  if (props.isOpenPermission) {
    return isMainShop();
  }
  return true;
});
const emits = defineEmits(["confirm", "cancel"]);
</script>

<style scoped lang="scss">
.fixed-wrap {
  --height: calc(83px + var(--num) + env(safe-area-inset-bottom) / 2);
  width: 100%;
  height: var(--height);
  .fixed-btn {
    width: 100%;
    height: var(--height);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    padding: 10px 14px calc(20px + env(safe-area-inset-bottom) / 2) 10px;
    background-color: #fff;
    .btn {
      &:first-child {
        margin-bottom: 14px;
      }
    }
  }
}
</style>
