<template>
  <div class="orderbox">
    <div class="orderbox_left">
      <el-tabs v-model="ordereData.status" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="全部" name="">
          <div class="demo_tabs_div">
            <el-input v-model="ordereData.orderNo" placeholder="请输入订单号查询" @input="inputChange" clearable
              @focus="global.updateData(false)" @blur="global.updateData(true)" style="width: 50%;" />
            <!-- <el-button style="margin-left: 10px;" type="primary" @click="onSubmit">搜索</el-button> -->
            <dateRange @success="dateConfirm" />
          </div>
          <add :loading="ordereData.loading" :ordereData="ordereData" @emititemboxshow="emititemboxshow"
            v-if="ordereData.list.length">
          </add>
          <div v-else style="width: 100%; text-align: center; margin: 30px 0">
            暂无数据
          </div>
          <el-pagination background v-if="ordereData.list.length" v-model:current-page="ordereData.page"
            v-model:page-size="ordereData.size" :page-sizes="[10, 30, 50, 100]" layout="prev, pager, next"
            style="margin-top: 20px" :total="Number(ordereData.total)" @size-change="handleCurrentChange"
            @current-change="handleCurrentChange" />
        </el-tab-pane>
        <el-tab-pane label="销售" name="closed">
          <add :loading="ordereData.loading" :ordereData="ordereData" @emititemboxshow="emititemboxshow"
            v-if="ordereData.list.length">
          </add>
          <div v-else style="width: 100%; text-align: center; margin: 30px 0">
            暂无数据
          </div>
          <el-pagination background v-if="ordereData.list.length" v-model:current-page="ordereData.page"
            v-model:page-size="ordereData.size" :page-sizes="[10, 30, 50, 100]" layout="prev, pager, next"
            style="margin-top: 20px" :total="Number(ordereData.total)" @size-change="handleCurrentChange"
            @current-change="handleCurrentChange" />
        </el-tab-pane>
        <el-tab-pane label="退单" name="refund">
          <add :loading="ordereData.loading" :ordereData="ordereData" @emititemboxshow="emititemboxshow"
            v-if="ordereData.list.length">
          </add>
          <div v-else style="width: 100%; text-align: center; margin: 30px 0">
            暂无数据
          </div>
          <el-pagination background v-if="ordereData.list.length" v-model:current-page="ordereData.page"
            v-model:page-size="ordereData.size" :page-sizes="[10, 30, 50, 100]" layout="prev, pager, next"
            style="margin-top: 20px" :total="Number(ordereData.total)" @size-change="handleCurrentChange"
            @current-change="handleCurrentChange" />
        </el-tab-pane>
        <el-tab-pane label="快捷收银" name="cash">
          <cashTable />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="orderbox_right" v-if="itemboxshow" v-loading="orderDetaildata.loading" :loading="loadingboxshow">
      <div class="orderbox_right_top">
        <span>堂食订单</span>
        <el-icon :size="32" style="color: var(--primary-color)" @click="itemboxshow = false">
          <CircleCloseFilled />
        </el-icon>
      </div>
      <div class="tableDataclass">
        <div class="orderbox_right_item">
          <span class="span">订单号：</span><span class="nunber">{{ orderDetaildata.orderNo }}</span>
        </div>
        <div class="orderbox_right_item">
          <span class="span">收银员：</span><span class="nunber">{{ orderDetaildata.userName }}</span>
        </div>
        <div class="orderbox_right_item">
          <span class="span">创建时间：</span><span class="nunber">{{
            dayjs(orderDetaildata.createdAt).format("YYYY-MM-DD HH:mm:ss")
          }}</span>
        </div>
        <div class="orderbox_right_item">
          <span class="span">终端：</span><span class="nunber">{{ orderDetaildata.zdNo }}</span>
        </div>
        <div class="orderbox_right_item">
          <span class="span">会员：</span><span class="nunber">{{ orderDetaildata.memberName }}</span>
        </div>
        <div class="orderbox_right_item">
          <span class="span">台桌：</span><span class="nunber">{{ orderDetaildata.tableId }}</span>
        </div>
        <div class="orderbox_right_item">
          <span class="span">流水号：</span><span class="nunber">{{ orderDetaildata.masterId }}</span>
        </div>
        <div class="orderbox_right_item" v-if="orderDetaildata.discountAmount > 0">
          <span class="span">折扣：</span><span class="nunber">{{ formatDecimal(orderDetaildata.discountRatio *
            10, 1, true) }}折</span>
        </div>
        <div class="orderbox_right_top" style="margin-top: 20px; border-bottom: 2px solid #ccc">
          <span>合计：</span>
          <div>
            <template v-if="orderDetaildata.discountAmount <= 0">
              ￥{{ formatDecimal(orderDetaildata.orderAmount) }}
            </template>
            <template v-else>
              <span>￥{{ formatDecimal(orderDetaildata.orderAmount - orderDetaildata.discountAmount) }}</span>
              <span style="text-decoration: line-through;color: #999;font-size: 14px;">
                ￥{{ formatDecimal(orderDetaildata.orderAmount) }}
              </span>
            </template>
          </div>
        </div>
        <div class="orderbox_right_top" style="margin-top: 20px; border-bottom: 2px solid #ccc">
          <span style="font-size: 16px" v-if="orderDetaildata.status == 'pending'">挂单</span>
          <span style="font-size: 16px; color: red" v-if="
            orderDetaildata.status == 'refund' &&
            orderDetaildata.orderType == 'return'
          ">退单</span>
          <span style="font-size: 16px; color: #21c36b" v-if="
            orderDetaildata.orderType != 'return' &&
            (orderDetaildata.status == 'refund' ||
              orderDetaildata.status == 'closed')
          ">订单完成</span>
        </div>
        <div class="orderbox_right_top" style="margin-top: 20px">
          <span>商品明细</span>
          <span>{{ orderDetaildata.detailList.length }}项</span>
        </div>
        <div class="orderbox_right_list" style="margin-top: 20px">
          <div>商品</div>
          <div>数量</div>
          <div>单价</div>
          <div>小计</div>
        </div>
        <div class="orderbox_right_list_item" style="margin-top: 20px"
          v-for="(item, index) in orderDetaildata.detailList" :key="index">
          <div>{{ item.productName }} {{ item.productSkuName }}</div>
          <div style="text-align: center">{{ item.num }}</div>
          <div style="text-align: center">{{ item.price }}</div>
          <div v-if="item.status == 'refund'">
            <span style="border: 2px solid red; color: red; padding: 4px 2px">已退</span>
          </div>
          <div v-else>{{ item.priceAmount }}</div>
        </div>
        <div :style="{ height: reforderboxrightbuttonheight + 'px' }"></div>
      </div>

      <div class="orderbox_right_button" ref="reforderboxrightbutton">
        <div class="orderbox_right_buttonbutton">
          <el-button style="width: 100%" type="warning" :loading="callLoading" @click="callNumberHandle" v-if="
            orderDetaildata.orderType != 'return' &&
            (orderDetaildata.status == 'refund' ||
              orderDetaildata.status == 'closed')
          ">
            叫号
          </el-button>
        </div>
        <div class="orderbox_right_buttonbutton">
          <el-button style="width: 100%" v-if="
            orderDetaildata.orderType != 'return' &&
            (orderDetaildata.status == 'refund' ||
              orderDetaildata.status == 'closed')
          " type="primary" @click="recharge = true">退单</el-button>
        </div>
        <div class="orderbox_right_buttonbutton">
          <el-button style="flex: 1" :loading="invoiceLoading" @click="invoiveHandle" v-if="
            orderDetaildata.orderType != 'return' &&
            (orderDetaildata.status == 'refund' ||
              orderDetaildata.status == 'closed')
          ">开发票</el-button>
          <el-button :loading="normalPrintLoading" @click="print('normal')" style="flex: 1" v-if="
            orderDetaildata.orderType != 'return' &&
            orderDetaildata.status == 'closed'
          ">重打小票</el-button>
          <el-button :loading="labelPrintLoading" @click="print('label')" style="flex: 1" v-if="
            orderDetaildata.orderType != 'return' &&
            (orderDetaildata.status == 'refund' ||
              orderDetaildata.status == 'closed')
          ">重打标签</el-button>
          <el-button :loading="normalPrintLoading" @click="print('refund')" style="flex: 1"
            v-if="orderDetaildata.status == 'refund'">
            重打小票
          </el-button>
        </div>
      </div>
    </div>
    <div class="orderbox_rightbox" v-else>
      <div class="orderbox_rightbox_top">
        <div style="
            padding: 6px;
            background: #187ead;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
          ">
          <el-icon :size="30" color="#fff">
            <Document />
          </el-icon>
        </div>
        <div class="orderbox_rightbox_top_div">
          <div>今日普通订单</div>
          <div style="font-size: 14px">今日本终端处理的订单</div>
        </div>
      </div>
      <!-- <div class="orderbox_rightbox_top">
                <div
                    style="padding: 6px; background:#187ead; border-radius:50%;width: 50px;height: 50px; display: flex; align-items: center; justify-content: center;">
                    <el-icon :size="30" color="#fff">
                        <Connection />
                    </el-icon>
                </div>
                <div class="orderbox_rightbox_top_div">
                    <div>今日普通订单</div>
                    <div style="font-size:14px;">今日本终端处理的订单</div>
                </div>
            </div>
            <div class="orderbox_rightbox_top">
                <div
                    style="padding: 6px; background:#187ead; border-radius:50%;width: 50px;height: 50px; display: flex; align-items: center; justify-content: center;">
                    <el-icon :size="30" color="#fff">
                        <Crop />
                    </el-icon>
                </div>
                <div class="orderbox_rightbox_top_div">
                    <div>今日普通订单</div>
                    <div style="font-size:14px;">今日本终端处理的订单</div>
                </div>
            </div> -->
    </div>
    <el-dialog v-model="recharge" title="退单" width="800" :before-close="handlerecharge">
      <div class="recharge_footer">
        <div class="recharge_footer_item">
          <el-input v-model="remark" style="width: 100%" :rows="2" type="textarea" placeholder="请输入退单原因"
            @focus="global.updateData(false)" @blur="global.updateData(true)" />
          <div class="recharge_footer_items" @click="remark = '顾客取消'">
            <div>顾客取消</div>
          </div>
          <div class="recharge_footer_items" @click="remark = '等待时间长'">
            <div>等待时间长</div>
          </div>
          <div class="recharge_footer_items" @click="remark = '支付错误'">
            <div>支付错误</div>
          </div>
          <div class="recharge_footer_items" @click="remark = '商品不满意'">
            <div>商品不满意</div>
          </div>
          <div class="recharge_footer_items" @click="remark = '服务态度不满意'">
            <div>服务态度不满意</div>
          </div>
        </div>
        <div class="recharge_footer_itemright">
          <div class="recharge_footer_itemright_top">
            <div>单号：{{ orderDetaildata.orderNo }}</div>
            <div>
              下单时间：{{
                dayjs(orderDetaildata.createdAt).format("YYYY-MM-DD HH:mm:ss")
              }}
            </div>
            <div>
              <span>金额：￥{{ orderDetaildata.orderAmount }}</span>
              <!-- <span>优惠：￥0.00</span> -->
              <span>包装费：￥{{ orderDetaildata.packFee }}</span>
              <!-- <span>可退款：￥{{ orderDetaildata.packFee }}</span> -->
              <!-- <el-icon class="icon">
                                <ShoppingBag />
                            </el-icon> -->
            </div>
          </div>
          <div class="recharge_footer_itemright_botton">
            <div class="recharge_footer_itemright_botton_top">
              <el-checkbox @change="changezong" v-model="changechecked" size="large" /><span
                style="margin-left: 10px">全选，共项目</span>
            </div>
            <div class="recharge_footer_itemright_botton_item" v-for="(item, index) in orderDetaildata.detailList"
              :key="index">
              <div class="recharge_footer_itemright_botton_itemone">
                <el-checkbox @change="changezong(item, index, 1, 'quan')"
                  :disabled="item.status == 'refund' ? true : false" v-model="item.checked" size="large" />
                <span style="margin-left: 10px">{{ item.productName }}</span>
              </div>
              <div class="recharge_footer_itemright_botton_itemtow">
                <!-- {{ item.num }} -->
                <el-input-number v-model="item.num" :min="1" size="small"
                  :disabled="item.status == 'refund' ? true : false" :max="item.maxnum" @change="(currentValue, oldValue) =>
                    changezong(item, index, 1, 'num', currentValue, oldValue)
                    " @focus="global.updateData(false)" @blur="global.updateData(true)" />
                <!-- @change="changezong(item, index, 1, 'num')" -->
              </div>
              <div class="recharge_footer_itemright_botton_itemthere">
                ￥{{ item.price }}
              </div>
            </div>
          </div>
          <div class="recharge_footer_itemright_botton_box">
            <div class="recharge_footer_itemright_botton_boxone">
              <div class="recharge_footer_itemright_botton_boxoneabsolute">
                退单金额：
              </div>
              <div class="recharge_footer_itemright_botton_boxonetext">
                ￥{{ refundamount > 0 ? refundamount : "0.00" }}
              </div>
            </div>
            <div class="recharge_footer_itemright_botton_boxtow" style="margin-right: 10px;">
              <el-button style="width: 100%; height: 100%" @click="payreturnOrderclick(false)">手动退款</el-button>
            </div>
            <div class="recharge_footer_itemright_botton_boxtow">
              <el-button type="primary" style="width: 100%; height: 100%" :loading="buttonloading"
                @click="payreturnOrderclick(true)">
                <span v-if="!buttonloading">支付退回</span>
                <span v-else>支付退回...</span>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
  <takeFoodCode ref="takeFoodCodeRef" title="支付密码" type="password" placeholder="请输入支付密码" @success="passwordSuccess" />
  <invoice ref="invoiceRef" @load-complete="invoiceLoading = false" />
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { issuedby } from '@/api/invoice.js'
import { ElMessage, dayjs } from "element-plus";
import { useUser } from "@/store/user.js";
import lodash from "lodash";
import {
  orderfindOrder,
  orderorderDetail,
  payreturnOrder,
  cloudPrinterprint,
  sendMessage,
} from "@/api/order/index.js";
import add from "@/views/order/components/add.vue";
import cashTable from "@/views/order/components/cashTable.vue";
import { clearNoNum, formatDecimal } from "@/utils";
import md5 from "js-md5";
import dateRange from './components/dateRange.vue'
import { useGlobal } from "@/store/global.js";
import takeFoodCode from "@/components/takeFoodCode.vue";
import invoice from './components/invoice.vue'

const invoiceLoading = ref(false)
const invoiceRef = ref(null)
const takeFoodCodeRef = ref(null);

const labelPrintLoading = ref(false)
const normalPrintLoading = ref(false)

const global = useGlobal();

const store = useUser();
const itemboxshow = ref(false);

import { usePrint } from "@/store/print.js";
const printStore = usePrint();

import { ipcRenderer } from "electron";

const reforderboxrightbutton = ref(null); //定义ref
const reforderboxrightbuttonheight = ref(null); //获取元素高度

const handleClick = (Name) => {
  //切换teb
  ordereData.status = Name.props.name;
  ordereData.page = 1
  asyncorderfindOrder();
};

const recharge = ref(false); //退单切换

const handlerecharge = () => {
  //退单切换
  recharge.value = !recharge.value;
};

const buttonloading = ref(); //loading


// 显示开票人列表
function invoiveHandle() {
  invoiceLoading.value = true
  invoiceRef.value.show(printLabelOrder.value)
}

// 确认选择时间
function dateConfirm(time) {
  ordereData.startTime = time[0]
  ordereData.endTime = time[1]
  ordereData.page = 1
  asyncorderfindOrder();
}

// 是否线上退款
const isOnline = ref(true)
// 获取支付密码
async function passwordSuccess(pwd) {
  try {
    buttonloading.value = true;
    let arr = orderDetaildata.value.detailList.map((item) => {
      if (item.checked && item.status == "closed") {
        var obj = {
          id: item.id,
          orderId: orderDetaildata.value.id,
          remark: remark.value,
          num: item.num,
        };
      }
      return obj;
    });
    arr = arr.filter((item) => {
      return item && item;
    });
    if (arr.length != 0) {
      await payreturnOrder(arr, md5(pwd), isOnline.value);
      // await payreturnOrder(arr, '', isOnline.value);
      changechecked.value = false;
      recharge.value = false;
      itemboxshow.value = false;
      refundamount.value = 0;
      ElMessage.success("退款成功！");
      buttonloading.value = false;
      asyncorderfindOrder();
    } else {
      buttonloading.value = false;
      ElMessage.error("没有退款项目！");
    }
  } catch (error) {
    buttonloading.value = false;
  }
}

const payreturnOrderclick = lodash.debounce(
  async (e) => {
    console.log(e);
    isOnline.value = e
    //搜索手机号
    if (refundamount.value == 0) {
      buttonloading.value = false;
      ElMessage.error("退款金额不能为0！");
      return false;
    }
    takeFoodCodeRef.value.show();
    // passwordSuccess()
  },
  500,
  { leading: true, trailing: false }
);

// 重新打印标签/小票
const print = lodash.throttle(
  async function (e) {
    try {
      if (e == "label") {
        // checkLabelPrint(printLabelOrder.value)
        labelPrintLoading.value = true
        const data = {
          shop_name: store.userInfo.shopName,
          loginAccount: store.userInfo.loginAccount,
          carts: [],
          orderInfo: printLabelOrder.value,
          outNumber: printLabelOrder.value.outNumber,
          createdAt: dayjs(printLabelOrder.value.createdAt).format(
            "YYYY-MM-DD HH:mm:ss"
          ),
        };
        printLabelOrder.value.skuInfos.map((item) => {
          data.carts.push({
            categoryId: item.categoryId,
            name: item.productName,
            number: item.num,
            skuName: item.productSkuName,
          });
        });

        // console.log('重打标签小票', data);
        printStore.labelPrint(data);
        setTimeout(() => {
          labelPrintLoading.value = false
        }, 1000)
      } else if (e == 'normal') {
        if (printStore.deviceNoteList.length) {
          normalPrintLoading.value = true
          const data = {
            shop_name: store.userInfo.shopName,
            loginAccount: store.userInfo.loginAccount,
            carts: [],
            amount: formatDecimal(printLabelOrder.value.orderAmount),
            discountAmount: printLabelOrder.value.discountAmount > 0 ? formatDecimal(printLabelOrder.value.orderAmount - printLabelOrder.value.discountAmount) : formatDecimal(printLabelOrder.value.orderAmount),
            discount: printLabelOrder.value.discountRatio ? formatDecimal(printLabelOrder.value.discountRatio * 10, 1, true) : 0,
            remark: printLabelOrder.value.remark,
            orderInfo: printLabelOrder.value,
            outNumber: printLabelOrder.value.outNumber,
            createdAt: dayjs(printLabelOrder.value.createdAt).format(
              "YYYY-MM-DD HH:mm:ss"
            ),
            printTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
          }
          printLabelOrder.value.skuInfos.map(item => {
            data.carts.push(
              {
                categoryId: item.categoryId,
                name: item.productName,
                number: item.num,
                skuName: item.productSkuName,
                salePrice: formatDecimal(item.priceAmount / item.num),
                totalAmount: formatDecimal(item.priceAmount)
              }
            )
          })
          printStore.pushReceiptData(data);
          setTimeout(() => {
            normalPrintLoading.value = false
          }, 1000)
        } else {
          // 云打票
          await cloudPrinterprint({
            type: e,
            orderId: orderDetaildata.value.id,
            ispre: false,
          });
          ElMessage({
            message: "成功打票",
            type: "success",
          });
        }
      } else if (e == 'refund') {
        if (printStore.deviceNoteList.length) {
          normalPrintLoading.value = true
          const data = {
            shop_name: store.userInfo.shopName,
            loginAccount: store.userInfo.loginAccount,
            carts: [],
            amount: printLabelOrder.value.orderAmount,
            remark: printLabelOrder.value.remark,
            orderInfo: printLabelOrder.value,
            outNumber: printLabelOrder.value.outNumber,
            createdAt: dayjs(printLabelOrder.value.createdAt).format(
              "YYYY-MM-DD HH:mm:ss"
            ),
            printTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
          }
          printLabelOrder.value.skuInfos.map(item => {
            data.carts.push(
              {
                categoryId: item.categoryId,
                name: item.productName,
                number: item.num,
                skuName: item.productSkuName,
                salePrice: formatDecimal(item.priceAmount / item.num),
                totalAmount: formatDecimal(item.priceAmount)
              }
            )
          })
          printStore.printRefund(data);
          setTimeout(() => {
            normalPrintLoading.value = false
          }, 1000)
        } else {
          // 云打票
          await cloudPrinterprint({
            type: 'normal',
            orderId: orderDetaildata.value.id,
            ispre: false,
          });
          ElMessage({
            message: "成功打票",
            type: "success",
          });
        }
      }
    } catch (error) {
      console.log(error);
    }
  },
  1500,
  { leading: true, trailing: false }
);

const loadingboxshow = ref(false);
// 要打印标签的订单数据
const printLabelOrder = ref("");

const emititemboxshow = async (e) => {
  //接收子组件值  并赋值给父组件
  console.log('emititemboxshow', e);
  printLabelOrder.value = e;

  loadingboxshow.value = true;
  try {
    let res = await orderorderDetail({
      shopId: store.userInfo.shopId,
      id: e.id,
    });
    itemboxshow.value = true;
    loadingboxshow.value = false;
    orderDetaildata.value = res;
    if (reforderboxrightbutton.value) {
      //点击动态获取元素高度
      reforderboxrightbuttonheight.value =
        reforderboxrightbutton.value.offsetHeight;
    }
    orderDetaildata.value.detailList.forEach((e) => {
      e.checked = false;
      e.zongprice = e.priceAmount / e.num;
      e.maxnum = e.num - e.returnNum; // 添加最大数量
    });
    changechecked.value = false; //清空全选
    refundamount.value = 0; //退款金额清0
  } catch (error) {
    loadingboxshow.value = false;
  }
};

const remark = ref(""); //备注

const changechecked = ref(false); //全选

const refundamount = ref(0); //退款金额

const changezong = (e, b, c, d, currentValue, oldValue) => {
  console.log(e);
  if (c == 1) {
    if (d == "num" && e.checked) {
      orderDetaildata.value.detailList.forEach((item, a, b) => {
        if (item.id == e.id) {
          if (currentValue > oldValue) {
            refundamount.value = (
              Number(refundamount.value) +
              Number(currentValue - oldValue) * Number(item.zongprice)
            ).toFixed(2);
          } else {
            refundamount.value = (
              Number(refundamount.value) +
              Number(currentValue - oldValue) * Number(item.zongprice)
            ).toFixed(2);
          }
        }
      });
    }

    if (d == "quan") {
      //这是选择选项
      if (e.checked) {
        console.log(
          Number(refundamount.value),
          Number(e.num) * Number(e.zongprice)
        );
        refundamount.value = (
          Number(refundamount.value) +
          Number(e.num) * Number(e.zongprice)
        ).toFixed(2);
      } else {
        refundamount.value = (
          Number(refundamount.value) -
          Number(e.num) * Number(e.zongprice)
        ).toFixed(2);
      }
    }

    if (
      orderDetaildata.value.detailList.every((item) => item.checked == true)
    ) {
      //判断是否全选
      changechecked.value = true;
    } else {
      changechecked.value = false;
    }
  } else {
    refundamount.value = 0;
    orderDetaildata.value.detailList.forEach((e, a, b) => {
      if (changechecked.value) {
        if (e.status == "refund") {
          e.checked = false;
        } else {
          e.checked = true;
          refundamount.value = clearNoNum({
            value: JSON.stringify(
              Number(refundamount.value) + Number(e.num) * Number(e.zongprice)
            ),
          });
        }
      } else {
        e.checked = false;
        refundamount.value = 0;
      }
    });
  }
};

const orderDetaildata = ref({
  //详情数据
  // loading
});
const ordereData = reactive({
  //表格数据
  list: [],
  size: 10,
  page: 1,
  status: "",
  total: "",
  orderNo: "",
  startTime: '',
  endTime: '',
  loading: false
});
const asyncorderfindOrder = async () => {
  //获取流水
  try {
    ordereData.loading = true
    let res = await orderfindOrder({
      shopId: store.userInfo.shopId,
      status: ordereData.status,
      size: ordereData.size,
      page: ordereData.page,
      orderNo: ordereData.orderNo,
      startTime: ordereData.startTime,
      endTime: ordereData.endTime
    });
    ordereData.loading = false
    ordereData.total = res.total;
    ordereData.list = res.list;
  } catch (error) {
    // ElMessage({
    //     message: '获取失败',
    //     type: 'error',
    // })
  }
};
const handleCurrentChange = (val) => {
  //页码
  // ordereData.page = 1
  ordereData.page = val;
  asyncorderfindOrder();
};
const inputChange = lodash.debounce(function () {
  //搜索手机号
  asyncorderfindOrder();
}, 500);

// 叫号
const callLoading = ref(false);
const callNumberHandle = async () => {
  try {
    callLoading.value = true;
    const res = await sendMessage({
      orderId: orderDetaildata.value.id,
    });
    callLoading.value = false;
    ElMessage.success("叫号成功");
  } catch (error) {
    callLoading.value = false;
    console.log(error);
  }
};

onMounted(() => {
  // resetMembrform.value = { ...membrform.value }
});
</script>

<style scoped lang="scss">
.orderbox {
  display: flex;
  height: 100%;

  .orderbox_left {
    width: 60%;
    height: 100%;
    background: #fff;
    border-radius: 10px;

    .demo-tabs {
      height: 100%;

      :deep(.el-tabs__content) {
        height: 90%;
      }

      :deep(.el-tab-pane) {
        height: 100%;
      }

      :deep(.el-tabs__nav) {
        width: 100%;
      }

      :deep(.el-tabs__item) {
        width: 33.33%;
        padding: 0;
        position: relative;
        // width: 10px !important;
      }

      :deep(.el-tabs__active-bar) {
        height: 0 !important;
      }

      :deep(.el-tabs__active-bar)::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        height: 2px;
        width: 10px;
        background: red;
        transform: translateX(-50%);
        // width: 10px !important;
      }

      :deep(.el-is-active) {
        width: 33.33%;
        color: var(--primary-color);
      }

      .demo_tabs_div {
        padding: 0 20px;
        display: flex;
        gap: 10px;
      }

      .demo_tabs_box {
        width: 100%;
        padding: 10px 20px;
        height: 82%;
        overflow: auto;

        .demo_tabs_boxitem {
          width: 100%;
          padding: 6px 16px;
          border-radius: 6px;
          display: flex;
          justify-content: space-between;
          // background: #eeeeee;
          border-bottom: 1px solid #ccc;

          .demo_tabs_boxitem_one {
            display: flex;
            justify-content: flex-start;

            .demo_tabs_boxitem_oneone {
              display: flex;
              margin-left: 20px;
              flex-direction: column;
              height: 70px;
              justify-content: space-around;
            }

            .demo_tabs_boxitem_onetow {
              // width: 40%;
              display: flex;
              margin-left: 20px;
              flex-direction: column;
              height: 70px;
              justify-content: space-around;

              div {
                // width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }

        .demo_tabs_boxitem_tow {
          // width: 20%;
          display: flex;
          flex-direction: column;
          height: 70px;
          justify-content: space-around;
          align-items: flex-end;
        }
      }
    }
  }

  .orderbox_rightbox {
    position: relative;
    width: 40%;
    padding: 20px;
    margin-left: 10px;
    background: #fff;
    border-radius: 10px;

    .orderbox_rightbox_top:nth-child(1) {
      margin-top: 0;
    }

    .orderbox_rightbox_top {
      margin-top: 10px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 10px 16px;
      width: 100%;
      border-radius: 10px;
      background: #e7e5e5;

      .orderbox_rightbox_top_div {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
    }
  }

  .recharge_footer {
    display: flex;
    justify-content: space-between;

    .recharge_footer_item {
      background: #f2f2f2;
      width: 40%;
      border-radius: 10px;
      padding: 20px;
      display: flex;
      flex-flow: wrap;

      .recharge_footer_items {
        margin-left: 10px;
        // background: #187ead;
        border: 1px solid #187ead;
        padding: 10px 22px;
        color: #187ead;
        height: fit-content;
        text-align: center;
        border-radius: 6px;
        margin-top: 10px;
      }
    }

    .recharge_footer_itemright {
      padding-left: 20px;
      width: 60%;
      position: relative;
      bottom: 0;
      left: 0;

      .recharge_footer_itemright_top {
        width: 100%;
        padding: 6px 10px;
        background: #f2f2f2;
        border-radius: 10px;

        div:nth-child(1) {
          margin-top: 0px;
        }

        div:nth-child(3) {
          display: flex;
          justify-content: flex-start;

          span:nth-child(1) {
            margin-left: 0;
          }

          span:nth-child(2) {
            color: red;
          }

          span:nth-child(4) {
            font-weight: bold;
          }

          span {
            margin-left: 6px;
          }
        }

        div {
          margin-top: 10px;
        }
      }

      .recharge_footer_itemright_botton {
        max-height: 300px;
        overflow: auto;

        .recharge_footer_itemright_botton_top {
          margin-top: 10px;
          color: #757575;
        }

        .recharge_footer_itemright_botton_item {
          display: flex;
          justify-content: space-around;
          align-items: center;
          border-bottom: 1px solid #ccc;

          .recharge_footer_itemright_botton_itemone {
            flex: 2;
            display: flex;
            justify-content: flex-start;
            align-items: center;
          }

          .recharge_footer_itemright_botton_itemtow {
            flex: 1;
          }

          .recharge_footer_itemright_botton_itemthere {
            flex: 1;
            text-align: right;
          }
        }
      }

      .recharge_footer_itemright_botton_box {
        border-top: 1px solid #ccc;
        padding: calc(var(--el-dialog-padding-primary) + 10px) 12px 0 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .recharge_footer_itemright_botton_boxone {
          width: 60%;
          height: 60px;
          position: relative;
          display: flex;
          flex-direction: column;

          .recharge_footer_itemright_botton_boxoneabsolute {
            color: #c0c0c0;
          }

          .recharge_footer_itemright_botton_boxonetext {
            font-size: 26px;
          }
        }

        .recharge_footer_itemright_botton_boxtow {
          width: 40%;
          height: 60px;
        }
      }
    }
  }

  .orderbox_right {
    position: relative;
    width: 40%;
    padding: 20px;
    margin-left: 10px;
    background: #fff;
    border-radius: 10px;

    .orderbox_right_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 2px solid #000;
    }

    .orderbox_right_list {
      display: flex;
      font-size: 14px;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
      text-align: center;
      border-bottom: 2px solid #ccc;

      div:nth-child(1) {
        text-align: left;
        width: 45%;
      }

      div:nth-child(2) {
        width: 15%;
        align-items: center;
      }

      div:nth-child(3) {
        width: 15%;
        align-items: center;
      }

      div:nth-child(4) {
        text-align: right;
        width: 25%;
      }
    }

    .orderbox_right_list_item {
      display: flex;
      font-size: 14px;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;

      div:nth-child(1) {
        text-align: left;
        width: 45%;
      }

      div:nth-child(2) {
        width: 15%;
        align-items: center;
      }

      div:nth-child(3) {
        width: 15%;
        align-items: center;
      }

      div:nth-child(4) {
        text-align: right;
        width: 25%;
      }
    }

    .tableDataclass {
      width: 100%;
      overflow-y: auto;
      height: 70%;

      .orderbox_right_item {
        margin-top: 6px;

        span {
          font-size: var(--el-font-size-base);
          // color: var(--primary-color);
        }
      }
    }

    .orderbox_right_button {
      position: absolute;
      width: 96%;
      left: 50%;
      background: #fff;
      bottom: 16px;

      .orderbox_right_buttonbutton {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      transform: translateX(-50%) !important;
    }
  }
}
</style>
