<template>
  <div class="loss-list">
    <template v-for="item in modelValue">
      <van-field v-model="item.totalAmount" :label="getItemLabel(item)" placeholder="请填写" type="digit" @click="cubeCalculateDialog.show()">
        <template #button>
          <span class="field-unit">方/万元</span>
        </template>
      </van-field>
    </template>
    <van-button size="small" block type="primary" plain @click="addLoss">添加损失</van-button>
    <CubeCalculateDialog ref="cubeCalculateDialog" />
    <LossPicker ref="lossPicker" :options="options" @confirm="confirmAddLoss" />
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import CubeCalculateDialog from './CubeCalculateDialog.vue'
import { request } from '@shared/utils/request'
import LossPicker from './LossPicker.vue'

const emit = defineEmits(['update:modelValue'])

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

const lossPicker = ref(null)

const options = ref({})
// 添加损失项
const addLoss = () => {
  lossPicker.value?.show()
}

const confirmAddLoss = (item) => {
  emit('update:modelValue', [...props.modelValue, item])
}

const cubeCalculateDialog = ref(null)

const getItemLabel = (item) => {
  const loss = options.value.loss?.find((loss) => loss.value === item.lossTypeId)
  return loss?.text
}

const getLossDict = async (params) => {
  const res = await request({
    url: '/snow-ops-platform/water-damage/loss/typeAndInfo',
    method: 'get',
    params
  })
  options.value.loss = res.data.records.map((item)=>{
    return {
      text: item.lossTypeName,
      value: item.lossTypeId,
      item
    }
  })
}

onMounted(async () => {
  await getLossDict()
})
</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>
