<template>
  <view v-if="isShow">
    <view class="zhanwei" :class="[direction == 'column' ? 'zhanwei1' : '']"></view>

    <view
      class="fixed-bottom u-flex gap-20"
      :class="[direction == 'column' ? 'u-flex-column' : '']"
    >
      <view class="u-flex-1">
        <my-button type="primary" @click="save" shape="circle">
          保存
        </my-button>
      </view>
      <view class="u-flex-1">
        <my-button bgColor="#fff" type="default" @click="cancel" shape="circle">
          取消
        </my-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue";
const emit = defineEmits(["save", "cancel"]);
import { isMainShop } from "@/store/account.js";

const props = defineProps({
  isOpenPermission: {
    type: Boolean,
    default: false,
  },
  //方向 row横向布局 column 纵向布局
  direction: {
    type: String,
    default: "row",
  },
});


const isShow = computed(() => {
  if (props.isOpenPermission) {
    return isMainShop();
  }
  return true;
});

function save() {
  emit("save");
}
function cancel() {
  emit("cancel");
}
</script>

<style lang="scss">
.zhanwei {
  height: 180rpx;
}
.zhanwei1{
  height: 240rpx;
}
.fixed-bottom {
  &.u-flex-column{
    align-items: stretch;
  }
}
</style>
