<template>
  <Panel :title="'药品耗材'">
    <div class="content">
<!--      <div class="list">-->
<!--        <ul>-->
<!--          <li class="item" v-for="(item, index) in list" :key="index">-->
<!--            <div class="index">{{ index + 1 }}</div>-->
<!--            <div class="name">-->
<!--              <el-popover-->
<!--                  placement="top-start"-->
<!--                  trigger="hover"-->
<!--                  width="500"-->
<!--                  @show="getHilistInfo(item)"-->
<!--                  @hide="colosInfo"-->

<!--              >-->
<!--                <template #reference>-->
<!--                  {{ item.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>￥{{ item.selectedPrice }}/{{ item.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>-->
<!--            </div>-->
<!--            <div class="price">￥{{ item.selectedPrice || '0' }}</div>-->
<!--            <div class="unit">-->
<!--              <div class="unit-content">-->
<!--                <el-input-number v-model="item.selectedNum" min="1" size="small"></el-input-number>-->
<!--                <el-dropdown>-->
<!--                  <span style="line-height: 30px;margin-left: 10px">{{ item.selectedUnit }}</span>-->
<!--                  <template #dropdown>-->
<!--                    <el-dropdown-menu v-if="item.trdnFlag == 1">-->
<!--                      <el-dropdown-item @click="selectUnit(item,item.packagingUnit)">{{ item.packagingUnit }}-->
<!--                      </el-dropdown-item>-->
<!--                      <el-dropdown-item @click="selectUnit(item,item.minPackagingUnit)">{{ item.minPackagingUnit }}-->
<!--                      </el-dropdown-item>-->
<!--                    </el-dropdown-menu>-->
<!--                  </template>-->
<!--                </el-dropdown>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="sub-price">￥{{ item.unitPrice * item.selectedNum }}</div>-->
<!--            <div class="delete">-->
<!--              <div @click="deleteItem(item.id)" class="delete-btn">-->
<!--                <el-icon>-->
<!--                  <Close/>-->
<!--                </el-icon>-->
<!--              </div>-->
<!--            </div>-->
<!--          </li>-->
<!--        </ul>-->
<!--      </div>-->
      <div class="search">
        <div class="search-input">
          <SearchInput
              :request-api="itemSearchApi"
              :show-config="itemShowConfig"
              @selectedCallBack="itemSelect"
              :placeholder="'请输入药材名称'"
              :disabled="disabled"
              @focus="focus"
          >
          </SearchInput>
        </div>
        <span style="margin-right: 24px">
          ￥{{ sumPrice }}
        </span>
      </div>
    </div>
  </Panel>
</template>
<script setup lang="ts">
import Panel from "@/components/common/Panel.vue";
import SearchInput from "@/components/SearchInput.vue";
import {CircleClose, Close} from "@element-plus/icons-vue";
import {watch, ref, computed} from "vue";
import {post} from "@/utils/request.ts";

const props = defineProps({
  status: {
    type: Number,
    default: 0
  }
})
const disabled = computed(() => {
  if (props.status === 1) {
    return true
  }
})
const itemSearchApi = "goods/goods/search";
const itemShowConfig = [
  {
    label: "项目名称",
    prop: "name",
  },
  {
    label: "项目类型",
    prop: "type",
  },
  {
    label: "售价",
    prop: "unitPrice",
  },
]
const itemSelect = (row: any) => {
  row.selectedNum = 1
  row.selectedUnit = row.packagingUnit
  row.selectedPrice = row.unitPrice
  list.value.push(row)
}
const deleteItem = (id: any) => {
  list.value = list.value.filter((item) => item.id !== id);
};
const list = defineModel<any[]>({default: () => []});


const selectUnit = (item: any, unit: any) => {
  item.selectedUnit = unit;
  if (unit == item.packagingUnit) {
    item.selectedPrice = item.unitPrice
    return
  }
  if (unit == item.minPackagingUnit) {
    item.selectedPrice = item.disassemblyPrice
  }
}
const sumPrice = ref(0)
const emit = defineEmits(['focus'])
const focus = (e: any) => {
  emit('focus', e)
}
const hilistInfo = ref<any>({})
const getHilistInfo = (item: any) => {
  if (item.hilistCode) {
    post("social/directory/getByCode", {code: item.hilistCode}).then((res: any) => {
      hilistInfo.value = res
    })
  }
}
const colosInfo = () => {
  hilistInfo.value = {}
}
watch(() => list.value, (newList) => {
  sumPrice.value = newList.reduce((total, item) => {
    return total + (item.selectedNum || 0) * (item.selectedPrice || 0);
  }, 0);
}, {deep: true})
</script>

<style scoped lang="scss">
@use "@/assets/scss/base";

.content {
  display: flex;
  flex-direction: column;

  .list {
    flex: 1;
    min-height: 0;

    .item {
      height: 30px;
      border-top: 1px solid #EAEAEC;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;

      .index {
        height: 100%;
        width: 50px;
        text-align: center;
        line-height: 30px;
      }

      .name {
        flex: 1;
        margin-left: 10px;
        height: 100%;
        line-height: 30px;
      }

      .code {
        flex: 1;
        margin-left: 10px;
        height: 100%;
        line-height: 30px;
      }

      .price {
        height: 100%;
        width: 100px;
        text-align: center;
        line-height: 30px;
      }

      .unit {
        height: 100%;
        width: 180px;
        margin-left: 10px;
        line-height: 30px;

        .unit-content {
          display: flex;
          align-items: center;
        }

      }

      .sub-price {
        height: 100%;
        line-height: 30px;
      }

      .delete {
        height: 100%;
        width: 100px;
        text-align: center;
        line-height: 30px;

        .delete-btn {
          cursor: pointer;

          &:hover {
            color: base.$primary-color;
          }
        }
      }
    }
  }

  .search {
    height: 64px;
    border-top: 1px solid #EAEAEC;
    display: flex;
    align-items: center;

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