<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
        v-if="isButton"
        :name="iconName"
        :size="22"
        color="#000000"
        style="padding: 14rpx 14rpx 14rpx 24rpx"
        @tap="handleRight"
      />
      <u-button
        v-else
        type="primary"
        size="mini"
        @tap="submit"
        style="margin-right: 30rpx"
        >下一步</u-button
      >
    </template>
  </u-navbar>
  <u-action-sheet
    :list="sheetState.list"
    v-model="sheetState.show"
    @click="onConfirm"
  />
</template>

<script setup lang="ts">
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,
  },
  isButton: {
    type: Boolean,
    default: true,
  },
})

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

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

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

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

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

  //         break;
  // }
}

const submit = () => {
  emits("submit")
}
</script>

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