<template>
  <up-popup
    :customStyle="props?.insetBottom ? { bottom: 'calc(env(safe-area-inset-bottom) + 48px)' } : {}"
    :overlayStyle="props?.insetBottom ? { bottom: 'calc(env(safe-area-inset-bottom) + 48px)' } : {}"
    :show="props.show"
    @close="onClose"
    :mode="props?.mode || 'top'"
    :round="props?.round || 0"
    :closeable="props?.closeable"
    :bgColor="props?.bgColor"
  >
    <view class="popup_slot_content">
      <view class="popup_slot_title"> 邀请您对工单进行评价 </view>
      <view class="star_contents_body">
        <up-icon
          v-for="(i, index) in 5"
          :key="index"
          name="star-fill"
          size="32"
          :color="index < rating ? '#FFC53D' : '#F3F3F4'"
          @click="onClickCurrent(i)"
        ></up-icon>
      </view>
      <view class="evaluate_text" v-if="rating > -1">
        {{ evaluateObj[rating as keyof typeof evaluateObj] }}
      </view>
      <view v-else class="evaluate_text no_evaluate_text"> 请点击星星进行评价 </view>

      <view class="popup_footer">
        <hs-button type="primary" @click="onSubmit" label="提交评价" size="md" />
      </view>
    </view>
  </up-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps(['show', 'mode', 'insetBottom', 'round', 'closeable', 'bgColor'])
const emit = defineEmits(['onSubmit', 'onClose'])
const rating = ref(-1)
const evaluateObj = {
  1: '非常差',
  2: '比较差',
  3: '一般',
  4: '满意',
  5: '非常满意'
}
const onClickCurrent = (idx: number) => {
  console.log(idx, 'idx')
  rating.value = idx
}
const onClose = () => {
  emit('onClose')
}
const onSubmit = () => {
  if (rating?.value > -1) {
    emit('onSubmit', { rating: rating.value })
  } else {
    uni.showToast({
      title: '请先评价',
      icon: 'none'
    })
  }
}
</script>

<style lang="scss" scoped>
:deep(.u-transition) {
  padding-bottom: calc(env(safe-area-inset-bottom) + 48px) !important;
}
.popup_slot_content {
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  overflow: hidden;
  background-color: #fff;
  // background: linear-gradient(180deg, #deefff 0%, #ffffff 26%, #ffffff 100%);
  min-height: 300rpx;
}
.popup_slot_title {
  color: #3d3d3d;
  font-size: 32rpx;
  text-align: center;
  line-height: 100rpx;
}
.star_contents_body {
  display: flex;
  flex: 1;
  gap: 10px;
  align-items: center;
  padding: 30rpx 0;
  justify-content: center;
}
.evaluate_text {
  text-align: center;
  font-size: 28rpx;
  font-weight: 500;
  padding: 20rpx 0;
}
.no_evaluate_text {
  color: #666666;
}
.popup_footer {
  padding: 40rpx 30rpx 0 30rpx;
}
</style>
