<template>
  <Panel title="收费队列">
    <template #tools>
      <div @click="setDate" class="date-btn">
        <span>筛选</span>
        <el-icon style="margin-left: 21px">
          <Calendar/>
        </el-icon>
      </div>
      <el-date-picker
          v-model="selectedDate"
          type="daterange"
          @change="dateChangeHandler"
          placeholder="选择日期"
          ref="datePickerRef"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
      />
    </template>
    <template #default>
      <div class="container" style="display: flex;flex-direction: column;height: 100%">
        <div class="tabs">
          <span v-for="(item,index) in statusList " :key="index" :class="query.status == item.value ? 'tabs-item' : ''"
                @click="tab(item)">{{ item.label }}&nbsp;({{ item.num }})
          </span>
        </div>
        <div class="search">
          <div class="search-input">
            <el-input
                v-model="query.keyword"
                style="height: 100%;width: 100%"
                placeholder="根据姓名搜索"
                @input="searchInput"
            >
              <template #prefix>
                <el-icon>
                  <Search/>
                </el-icon>
              </template>
            </el-input>
          </div>
          <div class="add" @click="addChargeOrder" @mousemove="selected=true" @mouseleave="selected=false">
            <el-icon style="margin-right: 7px">
              <template #default>
                <img style="width: 26px ;height: 22px" src="/static/images/charge/1-active.png" alt="" srcset="">
              </template>
            </el-icon>
            新增患者
          </div>
          <!--         <el-button type="success" @click="addChargeOrder" size="small">+收费</el-button>-->
        </div>
        <div class="list" v-loading="loading">
          <ul>
            <el-scrollbar style="height: 100%">
              <li class="list-item" :class="curItem.id == item.id ? 'active' : ''"
                  v-for="(item, index) in ChargeQueueList"
                  :key="index" @click="clickItem(item)">
                <span class="item-avatar">
                  <img v-if="item.patientGender=='1'" class="avatar"
                       src="/static/images/outpatient/man.png"
                       alt="头像"/>
                  <img v-if="item.patientGender=='2'" class="avatar"
                       src="/static/images/outpatient/women.png"
                       alt="头像"/>
                </span>
                <span class="item-name">{{ item.patientName }}</span>
                <span class="item-time">{{ formatListTime(item.createTime) || '-' }}</span>
                <span class="item-status" :class="[item.status == 0 ?'status-active':'']">{{
                    item.status == 0 ? '未收' : item.status == 1 ? '已收' : item.status == 2 ? '已退' : ''
                  }}</span>
              </li>
            </el-scrollbar>
          </ul>

        </div>
      </div>
    </template>
  </Panel>
  <Edit ref="editRef" @close="init"></Edit>
</template>
<script setup lang="ts">
import {nextTick, onMounted, ref, watch} from "vue";
import {post} from "@/utils/request.ts";
import Panel from "@/components/common/Panel.vue";
import {formatListTime, getCurrentDate, getEndOfDay, getToday} from "@/utils/dateUtils.ts";
import {Search, Calendar} from "@element-plus/icons-vue";
import {apiConfig} from "@/assets/config/apiConfig.ts";
import Edit from "@/components/registration/Edit.vue";

const curItem = ref<any>({});
const emit = defineEmits(['clickItem', 'getStatus'])
const clickItem = (item: any) => {
  curItem.value = item
  emit('clickItem', item, query.value.status);
}
const loading = ref(false)
const ChargeQueueList = ref<any>([]);

const editRef = ref()
const addChargeOrder = () => {
  nextTick(() => {
    editRef.value?.init(null, null, true)
  })
}
const clickFirst = () => {
  clickItem(ChargeQueueList.value[0])
}
const selectedDate: any = ref()
const query = ref({
  pageSize: 100,
  pageNum: 1,
  keyword: "",
  status: 0,
  beginTime: "",
  endTime: ""
})
const init = async () => {
  query.value.beginTime = selectedDate.value[0]
  query.value.endTime = getEndOfDay(selectedDate.value[1])
  loading.value = true
  try {
    let data: any = await post(apiConfig.RecordGetChargeQueue, {query: query.value}, {catch_error: true})
    ChargeQueueList.value = data.list
  } catch {
    ChargeQueueList.value = []
  } finally {
    loading.value = false
  }
  getTipCount()
}
const delDraft = () => {
  ChargeQueueList.value.shift();
  clickFirst()
}
defineExpose({delDraft, init})
onMounted(() => {
  let today = getToday()
  selectedDate.value = [today.start, getEndOfDay(today.end)]
  init()
})
const statusList = ref([
  {
    label: '待收',
    num: 0,
    value: 0
  },
  {
    label: '已收',
    num: 0,
    value: 1
  },
  {
    label: '已退',
    num: 0,
    value: 2
  }
])
const tab = (item: any) => {
  query.value.status = item.value
  curItem.value = {}
  emit('getStatus', item.value)
  init()
}
const getTipCount = () => {
  post('statistics/getTipCount', {
    beginTime: query.value.beginTime,
    endTime: query.value.endTime
  }).then((res: any) => {
    statusList.value[0].num = res.unchargedCount
    statusList.value[1].num = res.chargedCount
    statusList.value[2].num = res.refundedCount
  })
}

const datePickerRef = ref()
const setDate = function () {
  if (datePickerRef.value) {
    datePickerRef.value.handleOpen()
  }
}
const dateChangeHandler = (seDate: any) => {
  let date = formatListTime(seDate);
  query.value.beginTime = date[0]
  query.value.endTime = getEndOfDay(seDate)
  init()
}
const searchInput = (v: any) => {
  query.value.keyword = v
  init()
}
const selected = ref(false)
</script>
<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column; // 确保子元素垂直排列
  width: 320px;

  .search {
    padding: 16px;
    height: 74px;
    width: 100%;
    display: flex;

    .search-input {
      flex: 1;
      min-width: 0;
    }

    .add {
      width: 128px;
      height: 42px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #4D6DE4;
      border-radius: 6px;
      margin-left: 16px;
      cursor: pointer;
      color: #fff;

      &:hover {
        background: rgba(#4D6DE4, 0.5);
      }
    }
  }

  .list {
    display: flex;
    min-height: 0;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .list-title {
      height: 48px;
      background: #F5FAFF;
      padding: 0 27px;
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 14px;
      color: rgba(34, 42, 57, 0.8);
      font-style: normal;

      span {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    ul {
      flex: 1;
      min-height: 0;
      height: 100%;

      .list-item {
        height: 48px;
        display: flex;
        align-items: center;
        padding: 0 18px;
        font-weight: 400;
        font-size: 14px;
        color: rgba(34, 42, 57, 0.7);
        font-style: normal;
        cursor: pointer;

        span {
          display: block;
          line-height: 48px;
          text-align: center;

        }

        .item-avatar {
          width: 26px;
          height: 100%;
          margin-right: 10px;

          .avatar {
            margin-top: 11px;
            width: 26px;
            height: 26px;
          }
        }

        .item-name {
          flex: 1;
          min-width: 0;
          text-align: left;
          white-space: nowrap; // 防止文本换行
          overflow: hidden; // 隐藏溢出的文本
          text-overflow: ellipsis; // 显示省略号
        }

        .item-time {
          width: 80px;
        }

        .item-status {
          width: 40px;
        }

        &:hover {
          background: rgba(#4D6DE4, 0.1);
        }
      }

      .status-active {
        font-weight: bold;
        color: #409EFF;
      }

      .active {
        color: #fff;
        background: #4D6DE4;

        &:hover {
          background: #4D6DE4;
        }
      }
    }
  }
}

.tabs {
  height: 27px;
  border-bottom: 1px solid #EAEAEC;
  font-weight: 500;
  color: #999999;
  font-style: normal;
  display: flex;
  justify-content: space-between;
  padding: 0 18px;

  span {
    cursor: pointer;
    text-align: center;
  }

  .tabs-item {
    border-bottom: 2px solid #4D6DE4;
    color: #4D6DE4;
    padding-bottom: 10px;
  }
}

.date-btn {
  width: 98px;
  height: 32px;
  background: #FFFFFF;
  border-radius: 6px;
  border: 1px solid #EAEAEC;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

:deep(.el-date-editor) {
  visibility: hidden;
  width: 0;
  height: 0;
  position: absolute;
  right: 0;
  top: 50px;
}
</style>