<template>
  <el-drawer :model-value="visible" title="未上传处方列表" size="600px" style="--el-drawer-padding-primary: 0"
    @close="close()">
    <my-layout v-loading="loading" class="bg-[#f2f3f4]">
      <layout-item>
        <div class="p-15px bg-white text-14px text-red-500">以下处方审核通过，但医保上传失败，请检查HIS上传软件是否正常。</div>
      </layout-item>
      <layout-main class="bg-white" :scroll="false">
        <el-table ref="tableRef" border height="100%" :data="list" @selection-change="handleSelectionChange">
          <el-table-column prop="selection" type="selection" :selectable="selectable" />
          <el-table-column prop="name" label="患者" :width="100" />
          <el-table-column prop="time" label="审核时间" :min-width="140" />
          <el-table-column prop="action" label="操作" :width="100">
            <template #default="{ row }">
              <el-text type="primary" class="cursor-pointer" @click="handle(row)">我已处理</el-text>
            </template>
          </el-table-column>
        </el-table>
      </layout-main>
      <layout-item>
        <div class="text-center py-12px bg-white relative z-1" common-shadow--r>
          <el-button plain class="w-100px mr-15px" type="primary" @click="close()">关闭</el-button>
          <el-badge :hidden="selections.length === 0" :value="selections.length" :max="99" class="item">
            <el-button class="w-100px" type="primary" @click="batchDeal()">批量处理</el-button>
          </el-badge>
        </div>
      </layout-item>
    </my-layout>
  </el-drawer>
</template>
<script setup>
import { computed, nextTick, ref, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import dayjs from "dayjs";

import MyLayout, { LayoutMain, LayoutItem } from "@/components/layout";
import { Delete, Plus } from "@element-plus/icons-vue";
import { getReUploadRxList, handleReUploadRx } from "@/api/hlw.js";

const props = defineProps({
  width: {
    type: [Number, String],
  },
  memberInfo: {
    type: Object,
    default: () => ({}),
  },
  visible: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["close", 'change']);
const list = ref([]);
const loading = ref(false);
const selections = ref([])
const tableRef = ref()

function close() {
  emit("close");
}

function handle(row) {
  deal([row._id])
}

function batchDeal() {
  if (selections.value.length > 0) {
    deal(selections.value);
  }
}

function handleSelectionChange(val) {
  const ids = val.map((item) => item._id);
  selections.value = Array.from(new Set(ids));
}

async function deal(ids) {
  loading.value = true;
  const res = await handleReUploadRx({ ids, pharmacistNo: props.memberInfo.workNo });
  loading.value = false;
  if (res.success) {
    ElMessage.success(res.message);
    getList();
  } else {
    ElMessage.error(res.message);
  }
}

async function getList() {
  loading.value = true
  const { data, success, message } = await getReUploadRxList(props.memberInfo.workNo);
  loading.value = false
  list.value = data && Array.isArray(data.data) ? data.data.map(i => ({
    ...i,
    time: i.auditTime ? dayjs(i.auditTime).format('YYYY-MM-DD HH:mm:ss') : ''
  })) : [];
  const total = data && typeof data.total === 'number' ? data.total : 0;
  tableRef.value && tableRef.value.clearSelection();
  emit('change', total);
}

watch(() => props.visible, n => {
  if (n) {
    getList()
  }
});
</script>
<style lang="scss" scoped></style>
