<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 v-if="hilistInfo.type ==1301">
      {{ hilistInfo.producer }}
    </div>
    <div v-if="hilistInfo.type ==1301">
      {{ hilistInfo.json?.approval_number }}
    </div>
    <div v-if="hilistInfo.type ==1301">
      规格：{{ hilistInfo.json?.dosage_specifications }}
    </div>
    <div v-if="hilistInfo.type ==1306">
      规格：{{ hilistInfo.json?.specifications }}
    </div>
    <div>
      限价：{{ hilistInfo.hilistPricUplmtAmt ? hilistInfo.hilistPricUplmtAmt : '无' }}
    </div>
    <div>
      限价类型：{{ hilistInfo.hilistLmtpricType ? hilistInfo.hilistLmtpricType : '无' }}
    </div>
    <div v-if="hilistInfo.type ==1301">
      本位码：{{ hilistInfo.json?.standard_code }}
    </div>
  </div>

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

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

const hilistCode = defineModel<string>();
const hilistInfo = ref<HilistInfo>({});
const getHilistInfo = () => {
  if (hilistCode.value) {
    post(API.Social.Directory.GetByCode, {code: hilistCode.value}).then((res: any) => {
      hilistInfo.value = 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: 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid #EAEAEC;

  .name {
    display: flex;
  }

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

}
.hilist-detail {
  padding: 16px;
  margin-top: 8px;
  width: 100%;
  font-size: 12px;
  background: #F5F6F7;
  border-radius: 6px;
  border: 1px solid #EAEAEC;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>