<template>
  <el-drawer v-loading="loading" :close-on-click-modal="false" :model-value="visible" title="药品详情" size="70%"
    style="--el-drawer-padding-primary: 0" @close="close">
    <my-layout>
      <layout-main>
        <el-form :label-width="140" label-suffix="：" class="p-15px pr-30px" :class="loading ? 'pointer-events-none' : ''">
          <div active-title-bar class="my-2.5">药品基本信息</div>
          <el-row>
            <el-col :span="12" v-for="item in basicInfoList" :key="item.prop">
              <el-form-item class="mb-5px" :label="item.label" :prop="item.prop"
                :class="requiredMap[item.prop] ? 'is-required' : ''">
                {{ form[item.prop] }}
              </el-form-item>
            </el-col>
          </el-row>
          <div active-title-bar class="my-2.5">药品标准用法用量</div>
          <el-row>
            <el-col :span="12" v-for="item in usageInfo" :key="item.prop">
              <el-form-item class="mb-5px" :label="item.label" :prop="item.prop"
                :class="requiredMap[item.prop] ? 'is-required' : ''">
                {{ form[item.prop] }}
              </el-form-item>
            </el-col>
          </el-row>
          <div active-title-bar class="my-2.5">药品规则配置</div>
          <el-row v-if="libType === 'online'">
            <el-col :span="12" v-for="item in otherInfo" :key="item.prop">
              <el-form-item class="mb-5px" :label="item.label" :prop="item.prop"
                :class="requiredMap[item.prop] ? 'is-required' : ''">
                {{ form[item.prop] }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item class="mb-5px" label="是否上传用药证明">
                {{ form.need_medication_proof }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item class="mb-5px" label="是否限制使用范围">
                {{ form.has_usage_restriction }}
              </el-form-item>
            </el-col>
          </el-row>
          <div active-title-bar class="my-2.5">药品维护记录</div>
          <el-row>
            <el-col :span="12" v-for="item in maintenanceInfo" :key="item.prop">
              <el-form-item class="mb-5px" :label="item.label" :prop="item.prop"
                :class="requiredMap[item.prop] ? 'is-required' : ''">
                {{ form[item.prop] }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </layout-main>
      <layout-item>
        <div common-shadow--r class="text-center py-10px">
          <el-button plain type="primary" class="w-100px" @click="close()">取消</el-button>
          <el-button :type="data.onSale ? 'info' : 'success'" class="w-100px" @click="setOnSale()">
            {{ data.onSale ? '下架' : '上架' }}
          </el-button>
          <el-button type="primary" class="w-100px" @click="edit()">编辑</el-button>

          <!-- <el-button class="w-100px" :loading="loading" type="primary" @click="save()">保存</el-button> -->
        </div>
      </layout-item>
    </my-layout>
  </el-drawer>
</template>
<script setup>
import { computed, ref, watch } from 'vue';
import { storeToRefs } from "pinia";
import { ElMessage, ElMessageBox } from "element-plus";
import dayjs from "dayjs";
import { setHlwDrugOnSale, setOnlineDrugOnSale } from "@/api/hlw";
import { drugFieldDict } from './drug-dict.js'
import { memberStore } from "@/store/member";

import MyLayout, { LayoutMain, LayoutItem } from "@/components/layout";

const emits = defineEmits(['close', 'edit', 'changeSale'])
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  // 库类型：hlw = 互联网医院药品库(drug-info)，online = 配送/线上药品库(online-drug-info)
  libType: {
    type: String,
    default: 'hlw'
  },
  data: {
    type: Object,
    default: () => ({})
  }
})
const { memberInfo } = storeToRefs(memberStore());

const basicInfo = [
  { label: '药品名称', prop: "name" },
  { label: '药品规格', prop: "specification" },
  { label: '包装单位', prop: "unit" },
  { label: '包装量', prop: "package_amount" },
  { label: '生产厂家', prop: "manufacturer" },
  { label: '商品条形码', prop: "barcode" },
  { label: '医保编码', prop: "insurance_code" },
  { label: '药品类型', prop: "category" },
  { label: '药品拼音码', prop: "pinyin_code" },
  { label: '药库货品ID', prop: "product_id" },
  { label: '通用名', prop: "generic_name" },
  { label: '通用名拼音码', prop: "generic_pinyin" },
]

// 在线药品库扩展展示字段：管理分类 + 剂型
const onlineBasicInfoExtra = [
  { label: '管理分类', prop: "manage_category" },
  { label: '剂型', prop: "dosage_form" },
  { label: 'hisID', prop: "his_drug_code" },
]

const basicInfoList = computed(() => {
  return props.libType === 'online'
    ? [...basicInfo, ...onlineBasicInfoExtra]
    : basicInfo;
})

const usageInfo = [
  { label: '单次标准剂量', prop: "dosage" },
  { label: '剂量单位', prop: "dosage_unit" },
  { label: '给药标准频次', prop: "frequency" },
  { label: '给药标准方式', prop: "administration_method" },
  { label: '用药标准天数', prop: "days" },
  { label: '发药标准数量', prop: "recommended_quantity" },
]

const maintenanceInfo = [
  { label: '平台ID', prop: "_id" },
  { label: '当前状态', prop: "onSale" },
  { label: '创建时间', prop: "createTime" },
  { label: '创建人', prop: "creator" },
  { label: '最近更新时间', prop: "updateTime" },
  { label: '最近更新人', prop: "updater" },
]

const otherInfo = [
  { label: '适用性别', prop: 'suitableGender' },
  { label: '是否儿童用药', prop: 'suitableChild' },
  { label: '重复用药标识', prop: 'repeatTag' },
]

const requiredMap = drugFieldDict.reduce((m, cur) => {
  m[cur.field] = typeof cur.required === 'boolean' ? cur.required : false
  return m
}, {})

const showForm = computed(() => {
  const genderMap = { common: '通用', male: '男', female: '女' };

  let repeatTag = props.data.repeatTag;
  if (Array.isArray(repeatTag)) {
    repeatTag = repeatTag.join('，');
  }

  return {
    onSale: props.data.onSale ? '已上架' : '已下架',
    createTime: props.data.createTime && dayjs(props.data.createTime).isValid() ? dayjs(props.data.createTime).format('YYYY-MM-DD HH:mm:ss') : '',
    updateTime: props.data.updateTime && dayjs(props.data.updateTime).isValid() ? dayjs(props.data.updateTime).format('YYYY-MM-DD HH:mm:ss') : '',
    // 如果存在描述文本，则认为为“是”，并展示描述；否则为“否”。保持与编辑抽屉的语义一致。
    need_medication_proof: props.data.medication_proof_desc ? `是（${props.data.medication_proof_desc}）` : '否',
    has_usage_restriction: props.data.usage_restriction_desc ? `是（${props.data.usage_restriction_desc}）` : '否',
    suitableGender: genderMap[props.data.suitableGender] || props.data.suitableGender,
    suitableChild: props.data.suitableChild ? '是' : '否',
    repeatTag,
  }
})
const form = computed(() => ({ ...props.data, ...showForm.value }))
const loading = ref(false)


function close() {
  if (loading.value) return;
  emits('close', false)
}

function edit() {
  if (loading.value) return;
  close()
  emits('edit')
}

async function setOnSale() {
  await ElMessageBox.confirm(`确定${props.data.onSale ? '下架' : '上架'}药品吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  });
  const onSale = !props.data.onSale;
  const isOnline = props.libType === 'online';
  const { success, message } = await (isOnline
    ? setOnlineDrugOnSale({
      ids: [props.data._id],
      onSale,
      updater: memberInfo.value.anotherName,
      updaterId: memberInfo.value._id,
    })
    : setHlwDrugOnSale({
      ids: [props.data._id],
      onSale,
      updater: memberInfo.value.anotherName,
      updaterId: memberInfo.value._id,
    }));
  if (success) {
    ElMessage.success(message);
    emits('changeSale', onSale)
  } else {
    ElMessage.error(message);
  }
}

</script>
