<template>
  <div class="loss-list">
    <template v-for="(item, index) in modelValue">
      <van-field v-if="getLossItem(item.lossTypeCode)" v-model="item.totalAmount" :label="getItemLabel(item)" placeholder="请填写" type="digit" @click="showCalculateDialog(item, index)">
        <template #button>
          <span class="field-unit">{{ item.unit }}</span>
          <van-icon @click.stop="removeItem(index)" class="remove-icon" name="delete-o" />
        </template>
      </van-field>
      <template v-else>
        <van-field v-model="item.totalAmount" :label="getItemLabel(item)" placeholder="请填写" type="digit">
          <template #button>
            <span class="field-unit">{{ item.unit }}</span>
            <van-icon @click.stop="removeItem(index)" class="remove-icon" name="delete-o" />
          </template>
        </van-field>
        <van-field v-if="item.lossTypeCode == 'OTHER_LOSS'" v-model="item.remark" label="其它损失描述" placeholder="请填写"></van-field>
      </template>
    </template>
    <van-button size="small" block type="primary" plain @click="addLoss">添加损失</van-button>
    <CalculateDialog ref="cubeCalculateDialog" @confirm="confirmCalculate" />
    <LossPicker ref="lossPicker" :options="getOptions()" @confirm="confirmAddLoss" />
  </div>
</template>

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

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

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

const lossPicker = ref(null)

const options = ref({})

const getOptions = () => {
  if(!options.value.loss) return []
  const filteredOptions = options.value.loss.filter((item) => {
    for(const valueItem of props.modelValue) {
      if(item.value === valueItem.lossTypeId) {
        return false
      }
    }
    return true
  })
  return filteredOptions
}

const dialogItemIndex = ref(null)

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

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

const removeItem = (index) => {
  emit('update:modelValue', [...props.modelValue.slice(0, index), ...props.modelValue.slice(index + 1)])
}

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
    }
  })
}

const showCalculateDialog = (item, index) => {
  if(item.unit?.indexOf('方') > -1) {
    dialogItemIndex.value = index
    cubeCalculateDialog.value?.show(item)
  }
}

const confirmCalculate = (newValue) => { 
  const oldItem = props.modelValue[dialogItemIndex.value]
  props.modelValue[dialogItemIndex.value] = { ...oldItem, ...newValue }
}

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;
    }
  }
}

.remove-icon {
  margin-left: 5px;
  font-size: 16px;
  color: #ee0a24;
}
</style>
