<template>
  <div class="loss-list">
    <template v-for="item in modelValue">
      <van-field v-model="item.value" label="塌方及损失" placeholder="请填写" type="digit" @click="cubeCalculateDialog.show()">
        <template #button>
          <span class="field-unit">方/万元</span>
        </template>
      </van-field>
    </template>

    <CubeCalculateDialog ref="cubeCalculateDialog" />
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import CubeCalculateDialog from './CubeCalculateDialog.vue';

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  }
})

const cubeCalculateDialog = ref(null)

</script>

<style scoped lang="scss">
.field-unit {
  color: #969799;
  font-size: 14px;
  margin-left: 4px;
}

.loss-dialog-content {
  padding: 16px;
  
  :deep(.van-field) {
    margin-bottom: 12px;
  }
}

.calculation-preview {
  background-color: #f7f8fa;
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  
  .preview-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .preview-label {
      color: #646566;
      font-size: 14px;
    }
    
    .preview-value {
      color: #ee0a24;
      font-size: 14px;
      font-weight: 500;
    }
  }
}
</style>