<template>
  <el-table :data="data.itemDetail" max-height="150">
    <el-table-column prop="itemName" label="项目名称" show-overflow-tooltip></el-table-column>
    <el-table-column label="单价">
      <template #default="scope">
        ￥{{scope.row.selectedPrice}}
      </template>
    </el-table-column>
    <el-table-column label="数量">
      <template #default="scope">
        <el-input-number v-model="scope.row.selectedNum" min="0"
                         @change="handleNumChange" v-if="data.status == 0" size="small"></el-input-number>
        <span v-else>{{scope.row.selectedNum}}</span>
        {{scope.row.selectedUnit}}
      </template>
    </el-table-column>
    <el-table-column label="小计">
      <template #default="scope">
        ￥{{scope.row.selectedNum*scope.row.selectedPrice}}
      </template>
    </el-table-column>
    <el-table-column label="操作" v-if="data.status ==0">
      <template #default="scope">
        <el-button type="danger" link @click="delService(scope.row)">X</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="bottom">
    <SearchInput v-if="data.status == 0" :request-api="serviceSearchApi" :show-config="serviceShowConfig"
                 @selectedCallBack="serviceSelect"></SearchInput>
    <span>合计：￥{{getTotalPrice()}}</span>
  </div>

</template>
<script setup lang="ts">
import SearchInput from "@/components/SearchInput.vue";

const data = defineModel<any>();
const delService = (item: any) => {
  data.value.itemDetail = data.value.itemDetail.filter((i: any) => i.id != item.id)
}
const serviceSearchApi = "item/search";
const serviceShowConfig = [
  {
    label: "服务名称",
    prop: "itemName",
  },
  {
    label: "服务医保码",
    prop: "itemSocialCode",
  },
  {
    label: "售价",
    prop: "unitPrice",
  },
]
const emit = defineEmits(['totalPriceChange'])
const serviceSelect = (row: any) => {
  row.selectedNum = 1
  row.selectedUnit = row.unit
  row.selectedPrice = row.unitPrice
  data.value.itemDetail.push(row)
  emit('totalPriceChange', row)
}
const handleNumChange = () => {
  emit('totalPriceChange')
}

const getTotalPrice =()=>{
  let totalPrice = 0;
  data.value.itemDetail?.forEach((item:any)=>{
    totalPrice += item.selectedNum*item.selectedPrice
  })
  return totalPrice;
}
</script>
<style scoped lang="scss">
:deep(.el-table__cell){
  padding: 0 4px;
}
.bottom{
  text-align: right;
}
</style>