<template>
  <u-navbar
    back-text=""
    :title="title"
    :is-back="isBack"
    :back-icon-name="backIconName"
    title-color="#000000"
    :background="{ background }"
    title-width="400"
    height="48"
    back-icon-color="#000000"
    @click-left="handleLeftIconClick"
  >
    <template #default>
      <u-icon
        :name="backIconName"
        :size="22"
        color="#000000"
        style="padding: 14rpx 14rpx 24rpx"
        @tap="handleLeftIconClick"
      />
    </template>
    <template #right>
      <view style="display: flex">
        <!-- <u-icon
          :name="iconName"
          :size="22"
          color="#000000"
          style="padding: 14rpx 14rpx 24rpx"
          @tap="handleRight"
        /> -->
        <slot />
      </view>
    </template>
  </u-navbar>
  <u-action-sheet
    :list="sheetState.list"
    v-model="sheetState.show"
    @click="onConfirm"
  />
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  backIconName: {
    type: String,
    default: "arrow-left",
  },
  iconName: {
    type: String,
    default: "more-dot-fill",
  },
  background: {
    type: String,
    default: "#eeeeee",
  },
  sheetList: {
    type: Object,
    default: [],
  },
  isBack: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["handleRight", "goback"]);

const handleRight = () => {
  // sheetState.show = true;
  // emits('handleRight')
};

// 点击左侧返回图标
const handleLeftIconClick = () => {
  uni.navigateBack();
};

const sheetState = reactive({
  list: [
    {
      text: "点赞",
      color: "blue",
      fontSize: 28,
      subText: "感谢您的点赞",
    },
    {
      text: "分享",
    },
    {
      text: "评论",
    },
  ],
  show: false,
});

const onConfirm = (index: number) => {
  const item = sheetState.list[index];
  // console.log(item);
  // switch (item.options.operate) {
  //     case 'save':

  //         break;
  // }
};
</script>

<style lang="scss" scoped>
:deep(.u-line-1) {
  font-weight: bold !important;
  font-size: 16px !important;
}

:deep(.u-icon__icon) {
  font-size: 20px !important;
  font-weight: bold !important;
}
</style>
