<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { CzType } from '@/api/transactionLog/indexType'
import { changeMoney } from '@/common/common'
import { computed, onMounted, ref } from 'vue'
interface PropsType {
  data: Array<CzType>
  value: Number
}
onMounted(() => {
  console.log(props.data)
})
const props = defineProps<PropsType>()
const { t } = useI18n()
const emit = defineEmits(['bottom'])
// const shenhe_str = ref([t('incomeLog.daishenhe'), t('incomeLog.yipizhun'), t('incomeLog.shenheshibai')])
const text1 = computed(() => t('transactionLog.tip2'))
const text2 = computed(() => t('transactionLog.tip3'))
const text3 = computed(() => t('transactionLog.tip4'))
const remark = ref([text1, text2, text3])
const bottomFn = () => {
  emit('bottom')
}
</script>
<template>
  <scroll-view scroll-y :style="{ height: 'calc(100vh - 110px)' }" @scrolltolower="bottomFn">
    <NotData v-if="data.length === 0" />
    <view class="list-box">
      <view v-for="item in props.data" :key="item.id" class="list-item">
        <view class="list-item-left">
          <view class="list-item-shouru" style="color: #fff; font-size: 0.9375rem; font-weight: 500">{{ props.value === 1 ? t('incomeLog.shourujilu') : t('incomeLog.zhichujilu') }}</view>
          <view class="list-item-time">{{ t('incomeLog.dingdanbianhao') }}:{{ item.order_sn }}</view>
          <view class="list-item-time" style="text-align: left">{{ item.createtime }}</view>
        </view>
        <view class="list-item-right">
          <view class="list-item-shouru">{{ changeMoney(item.money) }}</view>

          <view v-if="props.value === 1" class="list-item-tag">{{ item.remark }}</view>
          <view v-if="props.value === 2" class="list-item-tag">{{ remark[Number(item.status)].value }}</view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>
<style lang="scss" scoped>
.list-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.25rem;

  .list-item {
    width: 21.5625rem;
    display: flex;
    justify-content: space-between;
    background: rgb(10, 28, 50, 0.5);
    border-radius: 1.0313rem;
    padding: 0.625rem 1.25rem;
    margin-bottom: 0.4375rem;

    .list-item-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      .list-item-tag {
        // width: 4.1875rem;
        // height: 1.2188rem;
        padding: 0.0938rem 0.25rem;
        margin-top: 0.3125rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ee2560;
        border-radius: 1.25rem;

        font-weight: 500;
        font-size: 0.75rem;
        color: #fff;
      }
    }

    .list-item-shouru {
      font-weight: 500;
      font-size: 0.9375rem;
      font-weight: 600;
      color: #48bd76;
    }

    .list-item-time {
      color: #cbcbcb;
      text-align: right;
      font-size: 0.8125rem;
      line-height: 1.125rem;
    }
  }
}
</style>
