<script setup lang="ts">
import {ref,defineProps} from "vue";
import {post} from "@/utils/request.ts";
import { ElCol, ElRow} from "element-plus";


const props = defineProps({
  purchaseNum: {
    type: Number,
    default: 0
  },
  sum: {
    type: Number,
    default: 0
  }
})
const state = ref([])
const options = ref<any>([])
const selectRef = ref();
const noActive = ref(false)
const querySearchAsync = (queryString: string) => {
  if (!queryString) return
  post("vip/vip/search", {keyword: queryString}).then((res: any) => {
    options.value = res;
    let list = res;
    for (let i = 0; i < list.length; i++) {
      list[i].value = list[i].name;
      if (!list[i].levelId) return
      post("vip/vipLevel/get", {levelId: list[i].levelId}).then((res: any) => {
        options.value.levelName = res.name
      })
    }
  })
}
const listItem = ref<any>({})
const emit = defineEmits(['selectCallBack', 'closePurchaseList'])
const handleSelect = (item: any) => {
  let goods = JSON.parse(JSON.stringify(item));
  noActive.value = true
  listItem.value = goods
  post("vip/vipLevel/get", {levelId: goods.levelId}).then((res: any) => {
    listItem.value.levelName = res.name
    listItem.value.discountRate = res.discountRate
    emit('selectCallBack', listItem.value)
  })

}
const clear = () => {
  closePurchaseList()

}
defineExpose({handleSelect,clear})
const isTrue = ref(false)
const closePurchaseList = () => {
  noActive.value = false
  options.value = []
  emit('closePurchaseList')
}

</script>

<template>
  <div class="search_box">
    <el-select-v2
        v-if="!noActive"
        v-model="state"
        style="width: 100%"
        filterable
        remote
        ref="selectRef"
        :remote-method="querySearchAsync"
        :options="options"
        placeholder="输入患者号"
        :fit-input-width="500"
    >
      <template #prefix>
        <div class="prefix-wrapper">
          <el-icon>
            <Search/>
          </el-icon>
        </div>
      </template>
      <template #header>
        <div class="header">
          <div class="text">患者信息</div>
          <div class="text">联系电话</div>
          <div class="text">患者等级</div>
        </div>
      </template>
      <template #default="{ item }">
        <div class="row" @click="handleSelect(item)">
          <div class="text">{{ item.realName }}</div>
          <div class="text">{{ item.phone }}</div>
          <div class="text">{{ options.levelName || '无' }}</div>
        </div>
      </template>
      <template #footer>
      </template>
    </el-select-v2>
    <div v-else>
      <el-popover
          class="box-item"
          title=""
          content=""
          placement="bottom-start"
          :width="500"
      >
        <template #reference>
          <div class="detail" :class="isTrue?'active':''" @mouseleave="isTrue=false" @mousemove="isTrue=true">
            <div class="info">
              <div>{{ listItem.realName }}</div>
              <div class="levelName">
                <el-tag type="success">{{ listItem.levelName || '-' }}</el-tag>
              </div>
            </div>
            <div>余额：{{ listItem.balance }}元 <span style="margin: 0 10px" @click="closePurchaseList()">X</span></div>
          </div>

        </template>
        <div v-if="isTrue" class="detail_box">
          <div class="content">
            <div class="head_box">
              <el-tag type="success">{{ listItem.levelName || '-' }}</el-tag>
              <div style="margin: 10px 0">消费{{ props.purchaseNum }}次，累计￥{{props.sum}}</div>
            </div>
            <div class="middle_box">
              <div class="title">患者详情</div>
              <div class="right_content">
                <div class="bottom_box">
                  <el-row style="margin-bottom: 10px">
                    <el-col :span="12">
                      <span class="col_name">出生日期</span>
                      <span>{{ listItem.birthday || "2000-03-06" }}</span>
                    </el-col>
                    <el-col :span="12">
                      <span class="col_name">民族</span>
                      <span>{{ listItem.nation || "汉族" }}</span>
                    </el-col>
                  </el-row>
                  <el-row style="margin-bottom: 10px">
                    <el-col :span="12">
                      <span class="col_name">创建日期</span>
                      <span>{{ listItem.createDatetime || "2024-03-06" }}</span>
                    </el-col>
                    <el-col class="col" :span="12">
                      <span class="col_name">身份证号码</span>
                      <span>{{ listItem.idCode || "123141424" }}</span>
                    </el-col>
                  </el-row>
                  <el-row style="margin-bottom: 10px">
                    <el-col class="col" :span="12">
                      <span class="col_name">来源</span>
                      <span>{{ listItem.source || "皇姑" }}</span>
                    </el-col>
                    <el-col class="col" :span="12">
                      <span class="col_name">家庭地址</span>
                      <span>{{ listItem.address || "沈阳站" }}</span>
                    </el-col>
                  </el-row>
                  <el-row style="margin-bottom: 10px">
                    <el-col :span="24">
                      <span class="col_name">备注</span>
                      <span>{{ listItem.remark || "加撒比打算大大的" }}</span>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<style scoped lang="scss">
.search_box {
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  box-sizing: border-box;
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
}

.header {
  padding: 10px;
  font-size: 18px;
  display: flex;

  .text {
    font-size: 16px;
    width: 200px;
    color: #6a6a6a;
  }
}

.row {
  display: flex;
  max-height: 500px;

  .text {
    font-size: 12px;
    width: 150px;
    margin-left: 10px;
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
    white-space: nowrap; /* 防止换行 */
  }
}

.el-popper.is-pure {
  padding: 10px;
}

.detail {
  min-width: 400px;
  height: 32px;
  border: 1px solid #8b8e8f;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  font-family: inherit;
  font-size: 14px;

  .info {
    position: relative;
    display: flex;
    align-items: center;

    .levelName {
      margin: 0 50px 0 20px;
    }
  }
}

.active {
  border: 1px solid #00ace9;
}

.detail_box {
  .title {
    font-size: 15px;
    font-weight: bold;
    margin: 20px 0;
  }

  .content {
    font-size: 14px;

    .head_box {
      border-bottom: 1px solid rgba(165, 162, 162, 0.5);
    }

    .middle_box {
      background-color: #fff;

      .right_content {
        font-size: 14px;
        .bottom_box {
          .col_name {
            display: inline-block;
            width: 100px;
            color: #6e6e6e;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>