<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 14rpx 24rpx"
    @tap="handleLeftIconClick"
   />
  </template>
  <template #right>
   <u-icon
    :name="iconName"
    :size="22"
    color="#000000"
    style="padding: 14rpx 14rpx 14rpx 24rpx"
    @tap="handleRight"
   />
  </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>
