<template>
  <div  class="hilist-code"  @click="openSearch">
    <div class="name">
      {{ hilistInfo.name }}
    </div>
<!--    <div class="code"> {{ hilistInfo.code }}</div>-->
  </div>
  <div v-if="hilistInfo" class="hilist-detail">
    <div class="name">
      {{ hilistInfo.name }}
      {{ hilistInfo.json?.category ? '[' + hilistInfo.json.category + ']' : '-' }}
    </div>
    <div>
      {{ hilistInfo.code }}
    </div>
    <div>
      {{ hilistInfo.producer }}
    </div>
    <div>
      {{ hilistInfo.json?.approval_number }}
    </div>
    <div>
      规格：{{ hilistInfo.json?.dosage_specifications }}
    </div>
    <div>
      限价：{{ hilistInfo.hilistPricUplmtAmt ? hilistInfo.hilistPricUplmtAmt : '无' }}
    </div>
    <div>
      限价类型：{{ hilistInfo.hilistLmtpricType ? hilistInfo.hilistLmtpricType : '无' }}
    </div>
    <div>
      本位码：{{ hilistInfo.json?.standard_code }}
    </div>
  </div>

</template>
<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import {post} from "@/utils/request.ts";

interface HilistInfo {
  name?: string;
  producer?: string;
  code?: string;
  json?: {
    category?: string;
    approval_number?: string;
    dosage_specifications?: string;
    standard_code?: string;
  };
  hilistPricUplmtAmt?: string | number;
  hilistLmtpricType?: string;
}

const hilistCode = defineModel<string>();
const hilistInfo = ref<HilistInfo>({});
const getHilistInfo = () => {
  if (hilistCode.value) {
    post("social/directory/getByCode", {code: hilistCode.value}).then((res: any) => {
      hilistInfo.value = res
      console.log("hilistInfo", res)
    })
  }
}
watch(() => hilistCode.value, (newVal) => {
  if (newVal) {
    getHilistInfo()
  }
})
const emit = defineEmits(['openSearch'])
const openSearch = () => {
  emit('openSearch')
}
onMounted(() => {
  getHilistInfo()
})

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

.hilist-code {
  cursor: pointer;
  width: 100%;
  height: 25px;
  border: 1px #ddd solid;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-radius: 10px;

  .name {
    display: flex;

  }

  .code {
    margin-right: 5px;
    font-size: 12px;
    color: #7e7d7d;
  }

}
.hilist-detail {
  padding: base.$padding-base;
  margin-top: 3px;;
  width: 100%;
  height: 250px;
  border: 1px base.$border-color-base solid;
  font-size: 12px;
  border-radius: 8px;
}


</style>