<template>
  <panel title="药品耗材">
    <el-table v-if="goodsDetail.length>0" :data="goodsDetail" max-height="150" style="width: 100%">
      <el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="selectedPrice" label="单价">
        <template #default="scope">
          ￥{{ scope.row.selectedPrice }}
        </template>
      </el-table-column>
      <el-table-column prop="number" label="数量">
        <template #default="scope">
          <div v-if="disabled||props.status==0">
            <el-input-number v-model="scope.row.selectedNum" min="0" @change="handleNumChange"
                             size="small"></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="小计">
        <template #default="scope">
          ￥{{ scope.row.selectedNum * scope.row.selectedPrice }}
        </template>
      </el-table-column>
      <el-table-column label="操作" v-if="disabled||props.status==0">
        <template #default="scope">
          <el-button type="danger" link @click="delGoods(scope.row)">X</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom">
      <div class="search">
        <SearchInput
            :disabled="!disabled"
            :request-api="goodsSearchApi"
            :show-config="goodsShowConfig"
            :placeholder="'请输入药名或者拼音码'"
            @selectedCallBack="goodsSelect"></SearchInput>
      </div>
      <span>合计：￥{{ getTotalPrice() }}</span>
    </div>
  </panel>
</template>
<script setup lang="ts">
import SearchInput from "@/components/SearchInput.vue";
import {ref, watchEffect} from "vue";
import Panel from "@/components/common/Panel.vue";

const props = defineProps({
  status: {
    type: Number,
    default: 0
  }
})
const goodsDetail = defineModel<any>();
const delGoods = (item: any) => {
  goodsDetail.value = goodsDetail.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
  goodsDetail.value.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')
}
const getTotalPrice = () => {
  let totalPrice = 0;
  if (goodsDetail.value) {
    goodsDetail.value.forEach((item: any) => {
      totalPrice += item.selectedNum * item.selectedPrice
    })
  }

  return totalPrice;
}
const disabled = ref<any>(false)

watchEffect(() => {
      if (props.status == 2 || props.status == 0) {
        disabled.value = true
      } else {
        disabled.value = false
      }
    }
)
</script>
<style scoped lang="scss">
:deep(.el-table__cell) {
  padding: 0 4px;
}

.bottom {
  text-align: right;
  border-top: 1px solid #EAEAEC;
  display: flex;

  .search {
    flex: 1;
  }
}
</style>