<template>
  <view class="summary-view-item">
    <view class="summary-view-item-title">{{ data.title }}</view>
    <view v-if="data.type === 'normal'" class="summary-view-item-content">
      <text :class="['value-text', state.color]">{{ data.value[0] }}</text>
      <text class="normal-text">{{ data.unit }}</text>
      <text v-if="state.icon !== 'none'" :class="state.icon"></text>
    </view>

    <view v-else class="summary-view-item-content">
      <text :class="['value-text', state.color]">{{ data.value[0] }}</text>
      <text class="normal-text">时</text>
      <text :class="['value-text', state.color]">{{ data.value[1] }}</text>
      <text class="normal-text">分</text>
      <text v-if="state.icon !== 'none'" :class="state.icon"></text>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { UpDownFlat } from '@/components/up-down-flat/index';
import { computed } from 'vue';

const props = defineProps<{
  data: UpDownFlat;
}>();

// const { value } = props.data;

const states = {
  up: {
    icon: 'up-icon',
    color: 'up-color',
  },
  down: {
    icon: 'down-icon',
    color: 'down-color',
  },
  flat: {
    icon: 'flat-icon',
    color: 'flat-color',
  },
  default: {
    icon: 'none',
    color: 'default-color',
  },
};

const state = computed(() => {
  const _state = props.data.state ?? 'default';
  return states[_state];
});
</script>

<style scoped lang="scss">
.summary-view-item {
  width: 100%;
  height: 155rpx;
  border-radius: 20rpx;
  background: #f7faff;
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 20rpx;

  &-title {
    display: grid;
    place-content: center;
    height: 76rpx;
    background-color: #ebf2ff;
    color: #333;
    font-size: 26rpx;
    font-style: normal;
    font-weight: 500;
  }

  &-content {
    display: flex;
    gap: 10rpx;
    height: 79rpx;
    align-items: center;
    place-content: center;

    .normal-text {
      font-size: 26rpx;
      font-weight: 500;
      color: #333333;
    }

    .value-text {
      font-size: 28rpx;
      font-style: normal;
      font-weight: 500;
    }

    .up-icon {
      width: 26rpx;
      height: 26rpx;
      background: url('~@/static/svg/up.svg') no-repeat;
      background-size: 100% 100%;
    }

    .up-color {
      color: #3fd15f;
    }

    .down-icon {
      width: 26rpx;
      height: 26rpx;
      background: url('~@/static/svg/decline.svg') no-repeat;
      background-size: 100% 100%;
    }

    .down-color {
      color: #ff2828;
    }

    .flat-icon {
      width: 26rpx;
      height: 26rpx;
      background: url('~@/static/svg/flat.svg') no-repeat;
      background-size: 100% 100%;
    }

    .flat-color {
      color: #ff8d5f;
    }

    .default-color {
      color: #615dff;
    }
  }
}
</style>
