<template>
  <panel title="药品耗材">
    <div class="panel-content" style="padding: 0 24px 24px">
      <el-table v-if="goodsDetail.length>0" :data="goodsDetail" max-height="300" style="width: 100%"
                :header-cell-style="{ backgroundColor: '#F5FAFF' }">
        <el-table-column prop="name" label="名称" width="400" :show-overflow-tooltip="showTooltip">
          <template #default="scope">
            <el-popover
                v-if="!showTooltip"
                placement="top-start"
                trigger="hover"
                width="600"
                @show="getHilistInfo(scope.row)"
                @hide="colosInfo"

            >
              <template #reference>
                {{ scope.row.name }}
              </template>
              <div class="detail">
                <div style="display: flex;justify-content: space-between">
                  <div style="font-size: 18px;font-weight: 500;color: #000">{{
                      hilistInfo.name
                    }}[{{ hilistInfo.json?.category || '-' }}]
                  </div>
                  <div>￥{{ scope.row.selectedPrice }}/{{ scope.row.selectedUnit }}</div>
                </div>
                <div style="display: flex;justify-content: space-between">
                  <div>规格:{{ hilistInfo.json?.dosage_specifications || '-' }}</div>
                  <div>生产厂商:{{ hilistInfo.json?.producer || '-' }}</div>
                  <div>限价:{{ hilistInfo.json?.stock || '0' }}</div>
                </div>
                <div style="display: flex;justify-content: space-between">
                  <div>批准文号:{{ hilistInfo.json?.approval_number || '-' }}</div>
                  <div>本位码:{{ hilistInfo.json?.standard_code || '-' }}</div>
                </div>
                <div style="display: flex;justify-content: space-between">
                  <div>限价:{{ hilistInfo.hilistPricUplmtAmt ? hilistInfo.hilistPricUplmtAmt : '无' }}</div>
                  <div>限价类型:{{ hilistInfo.hilistLmtpricType ? hilistInfo.hilistLmtpricType : '无' }}</div>
                </div>
              </div>
            </el-popover>
            <span v-else>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="使用方法" width="200">
          <template #default="scope">
            <el-input ref="minPackagingRef" v-model="scope.row.minPackagingNumber" type="number"
                      class="input"
                      style="width: 200px;">
            </el-input>
            <el-popover
                placement="bottom"
                title="Title"
                :width="200"
                trigger="click"
            >
              <UnitSelector :units="packagingUnit" v-model="scope.row.minPackagingUnit"></UnitSelector>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="selectedPrice" label="单价" width="200">
          <template #default="scope">
            ￥{{ scope.row.selectedPrice }}
          </template>
        </el-table-column>
        <el-table-column prop="number" label="数量" width="250">
          <template #default="scope">
            <div v-if="props.status">
              <el-input-number v-model="scope.row.selectedNum" ref="inputRef" :min="0"
                               @change="handleNumChange(scope.row)"
                               style="margin-right: 5px" size="small"></el-input-number>
              <el-dropdown v-if="scope.row.trdnFlag == 1">
                <span style="line-height: 30px;margin-left: 10px;cursor: pointer">{{ scope.row.selectedUnit }}</span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <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>
              <span v-else style="line-height: 30px;margin-left: 10px">{{ scope.row.selectedUnit }}</span>
            </div>
            <div v-else>
              <div>{{ scope.row.selectedNum }} {{ scope.row.selectedUnit }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="小计">
          <template #default="scope">
            ￥{{ Math.round(scope.row.selectedNum * scope.row.selectedPrice * 100) / 100 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" v-if="props.status">
          <template #default="scope">
            <el-button type="danger" link @click="delGoods(scope.row)">
              <el-icon style="margin-right: 3px">
                <Delete/>
              </el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom" v-if="!statusDisabled">
        <div class="search">
          <SearchInput
              style="height: 100%"
              :request-api="goodsSearchApi"
              :show-config="goodsShowConfig"
              :placeholder="'请输入药名或者拼音码'"
              @selectedCallBack="goodsSelect"
              :disabled="!props.status"
              @focus="focus"
              :width="1000"
          ></SearchInput>
        </div>
        <span v-if="status" style="padding: 10px">合计：￥{{ getTotalPrice() }}</span>
      </div>
    </div>
  </panel>
</template>
<script setup lang="ts">
import SearchInput from "@/components/SearchInput.vue";
import Panel from "@/components/common/Panel.vue";
import {nextTick, onMounted, ref} from "vue";
import {post} from "@/utils/request.ts";
import {ElMessage} from "element-plus";
import {Delete} from "@element-plus/icons-vue";
import {packagingUnit} from "@/utils/unitList.ts";
import UnitSelector from "@/components/UnitSelector.vue";

const props = defineProps({
  status: {
    type: Boolean,
    default: false
  },
  statusDisabled: {
    type: Boolean,
    default: false
  }
})
const showTooltip = ref(false);
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: "specifications",
  },
  {
    label: "库存",
    prop: "inventory",
  },
  {
    label: "价格",
    prop: "unitPrice",
  },
  {
    label: "厂家",
    prop: "producer",
  },
  {
    label: "效期",
    prop: "lifespan",
  },
  {
    label: "项目等级",
    prop: "category",
  },
  {
    label: "限制条件",
    prop: "limit",
  }
]
const inputRef = ref<any>()
const goodsSelect = (row: any) => {
  row.selectedNum = 1
  row.selectedUnit = row.packagingUnit
  row.selectedPrice = row.unitPrice
  row.shouldNumber = 1;
  row.idCode = row.idCode ? row.idCode == "" ? null : row.idCode.split(",") : null

  if (goodsDetail.value.find((i: any) => i.id == row.id)) {
    ElMessage.warning("数据已存在,只能加数量")
    goodsDetail.value.find((i: any) => i.id == row.id).selectedNum += 1
    goodsDetail.value.find((i: any) => i.id == row.id).selectedPrice = row.unitPrice
    emit('totalPriceChange')
    return
  }
  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", 'focus'])
const handleNumChange = (row: any) => {
  //应采数量
  let shouldNumber = 0;
  if (row.selectedUnit == row.packagingUnit) {
    shouldNumber = row.selectedNum
  } else {
    shouldNumber = Math.ceil(row.selectedNum / row.minPackagingNumber)
  }
  row.shouldNumber = shouldNumber

  emit('totalPriceChange')
}
const getTotalPrice = () => {
  let totalPrice = 0;
  if (goodsDetail.value) {
    goodsDetail.value.forEach((item: any) => {
      totalPrice += item.selectedNum * item.selectedPrice
      totalPrice = Math.round(totalPrice * 100) / 100
    })
  }

  return totalPrice;
}
const focus = (e: any) => {
  emit('focus', e)
}
const hilistInfo = ref<any>({})
const getHilistInfo = (item: any) => {
  if (item.hilistCode != null) {
    post("social/directory/getByCode", {code: item.hilistCode}).then((res: any) => {
      if (!res) {
        hilistInfo.value = {}
        return
      }
      hilistInfo.value = res
    })
  }
}
const colosInfo = () => {
  hilistInfo.value = {}
  getTotalPrice()
  emit('totalPriceChange')
}
</script>
<style scoped lang="scss">
:deep(.el-table__cell) {
  padding: 0 4px;
  height: 36px;
}

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

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