<template>
  <Panel title="服务项目">
    <div class="panel-content" style="padding: 0 24px 24px">
      <el-table v-if="itemDetail.length>0" :data="itemDetail" max-height="300"
                :header-cell-style="{ backgroundColor: '#F5FAFF' }">
        <el-table-column prop="itemName" label="项目名称" show-overflow-tooltip width="400">
          <template #default="scope">
            <el-popover
                width="485"
                @show="show(scope.row)"
                @hide="hide"
            >
              <template #reference>
                {{ scope.row.itemName }}
              </template>
              <div class="detail">
                <div style="display: flex;justify-content: space-between">
                  <div style="font-size: 18px;font-weight: 500;color: #000">{{
                      itemInfo.name
                    }}[{{ chrgitm_lv[itemInfo.chrgitmLv as keyof typeof chrgitm_lv || '-'] || '-' }}]
                  </div>
                  <div>￥{{ scope.row.unitPrice }}/{{ scope.row.unit }}</div>
                </div>
                <div style="display: flex;justify-content: space-between">
                  <div>限制条件:{{ itemInfo.lmtUsedFlag == 0 ? '否' : itemInfo.lmtUsedFlag == 1 ? '是' : '-' }}</div>
                  <div> 医保码:{{ scope.row.itemSocialCode || '-' }}</div>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="单价" width="200">
          <template #default="scope">
            ￥{{ scope.row.selectedPrice }}
          </template>
        </el-table-column>
        <el-table-column label="数量" width="250">
          <template #default="scope">
            <el-input-number v-if="props.status" v-model="scope.row.selectedNum" :min="0"
                             @change="handleNumChange" style="margin-right: 5px" size="small"></el-input-number>
            <span v-else>{{ scope.row.selectedNum }}</span>
            {{ scope.row.selectedUnit }}
          </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="delService(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%"
              @focus="focus"
              :placeholder="'请输入药服务项目或拼音码'"
              :request-api="serviceSearchApi"
              :show-config="serviceShowConfig"
              @selectedCallBack="serviceSelect" :disabled="!props.status"></SearchInput>
        </div>
        <span v-if="status" style="padding: 10px">合计：￥{{ getTotalPrice() || 0 }}</span>
      </div>
    </div>
  </Panel>
</template>
<script setup lang="ts">
import {defineProps, ref} from "vue";
import SearchInput from "@/components/SearchInput.vue";
import Panel from "@/components/common/Panel.vue";
import {post} from "@/utils/request.ts";
import chrgitm_lv from "@/assets/config/directory/chrgitmLv.json"
import {ElMessage} from "element-plus"
import {Delete} from "@element-plus/icons-vue";

const props = defineProps({
  status: {
    type: Boolean,
    default: false
  },
  statusDisabled: {
    type: Boolean,
    default: false
  }
})
const itemDetail = defineModel<any>();

const delService = (item: any) => {
  itemDetail.value = itemDetail.value.filter((i: any) => i.id != item.id)
}
const serviceSearchApi = "item/search";
const serviceShowConfig = [
  {
    label: "服务名称",
    prop: "itemName",
  },
  {
    label: "单位",
    prop: "unit",
  },
  {
    label: "售价",
    prop: "unitPrice",
  },
  {
    label: "项目等级",
    prop: "chrgitmLv",
  },
  {
    label: "限制条件",
    prop: "limit",
  },

]
const emit = defineEmits(['totalPriceChange', 'focus'])
const serviceSelect = (row: any) => {
  row.selectedNum = 1
  row.selectedUnit = row.unit

  row.selectedPrice = row.unitPrice
  if (itemDetail.value.find((i: any) => i.id == row.id)) {
    ElMessage.warning("数据已存在,只能加数量")
    itemDetail.value.find((i: any) => i.id == row.id).selectedNum += 1
    itemDetail.value.find((i: any) => i.id == row.id).selectedPrice = row.unitPrice
    emit('totalPriceChange')
    return
  }
  itemDetail.value.push(row)
  emit('totalPriceChange')
}
const handleNumChange = () => {
  emit('totalPriceChange')
}

const getTotalPrice = () => {
  let totalPrice = 0;
  if (itemDetail.value) {
    itemDetail.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 popoverRef = ref<any>(null);
const itemInfo = ref<any>({});
const show = (item: any) => {
  if (!item.itemSocialCode) return
  post('social/directory/getItemByCode', {code: item.itemSocialCode}).then((res: any) => {
    itemInfo.value = res
  })
}
const hide = () => {
  itemInfo.value = {}
}
</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>