<template>
  <el-table :data="data.goodsDetail" max-height="150">
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="selectedPrice" label="单价"></el-table-column>
    <el-table-column prop="number" label="数量">
      <template #default="scope">
        <div v-if="data.status == 0">
          <el-input-number v-model="scope.row.selectedNum" min="0" @change="handleNumChange"></el-input-number>
          <el-dropdown>
            <span style="line-height: 30px;margin-left: 10px">{{ scope.row.selectedUnit }}</span>
            <template #dropdown>
              <el-dropdown-menu v-if="scope.row.trdnFlag == 1">
                <el-dropdown-item @click="selectUnit(scope.row,scope.row.packagingUnit)">{{  scope.row.packagingUnit }}
                </el-dropdown-item>
                <el-dropdown-item @click="selectUnit(scope.row,scope.row.minPackagingUnit)">{{  scope.row.minPackagingUnit }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div v-else>
          <div>{{ scope.row.selectedNum }} {{ scope.row.selectedUnit }}</div>
        </div>

      </template>
    </el-table-column>
    <el-table-column label="操作" v-if="data.status == 0">
      <template #default="scope">
        <el-button type="danger" link @click="delGoods(scope.row)">X</el-button>
      </template>
    </el-table-column>
  </el-table>
  <SearchInput :request-api="goodsSearchApi" :show-config="goodsShowConfig" @selectedCallBack="goodsSelect"></SearchInput>
</template>
<script setup lang="ts">
import SearchInput from "@/components/SearchInput.vue";

const data = defineModel<any>();
const delGoods = (item: any) => {
  data.value.goodsDetail = data.value.filter((i: any) => i.id != item.id)
}

const goodsSearchApi = "goods/goods/search";
const goodsShowConfig = [
  {
    label: "项目名称",
    prop: "name",
  },
  {
    label: "项目类型",
    prop: "type",
  },
  {
    label: "售价",
    prop: "unitPrice",
  },
]
const goodsSelect = (row: any) => {
  row.selectedNum = 1
  row.selectedUnit = row.packagingUnit
  row.selectedPrice = row.unitPrice
  data.value.goodsDetail.push(row)
  emit('totalPriceChange')
}
const selectUnit = (item: any, unit: any) => {
  item.selectedUnit = unit;
  if (unit == item.packagingUnit) {
    item.selectedPrice = item.unitPrice
  }else if (unit == item.minPackagingUnit) {
    item.selectedPrice = item.disassemblyPrice
  }
  emit('totalPriceChange')

}
const emit = defineEmits(["totalPriceChange"])
const handleNumChange = ()=>{
 emit('totalPriceChange')
}
</script>
<style scoped lang="scss">

</style>