<!-- eslint-disable no-empty -->
<template>
  <div class="">
    <el-dialog
      :title="title"
      fullscreen
      :visible.sync="informationdialogshow"
      @close="reset"
    >
      <div class="head-container search-box flex">
        <div style="width: 300px">
          <el-input
            v-model="goods.query.productId"
            size="small"
            clearable
            placeholder="请输入商品名称"
            style="width: 100%"
            class="filter-item"
            suffix-icon="el-icon-search"
          />
          <!-- @keyup.enter.native="getGoods" -->
        </div>

        <div
          style="display: flex; justify-content: flex-end; margin-left: 10px"
        >
          <!-- <el-button style="margin-right: 10px" type="primary" @click="getGoods"
            >查询</el-button
          >
          <el-button @click="reset">重置</el-button> -->
          <div style="width: 100px; margin-left: 20px">
            <el-select v-model="layout.sel" placeholder="请选择">
              <el-option
                v-for="item in layout.list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="diancan">
        <div class="order">
          <div class="relative">
            <div style="padding-right: 14px">
              <div class="choose-user flex">
                <el-button
                  type="success"
                  v-if="vipUser.id === ''"
                  @click="refChooseUserOpen"
                  >选择用户</el-button
                >
                <template v-else>
                  <div class="flex cur-pointer" @click="refChooseUserOpen">
                    <img class="headimg" :src="vipUser.headImg" alt="" />
                    <div>
                      <div class="ft-13 color-000">{{ vipUser.nickName }}</div>
                      <div style="margin-top: 2px" class="color-666 ft-12">
                        余额：{{ vipUser.amount }}
                      </div>
                    </div>
                  </div>
                </template>
              </div>
              <div class="flex row-between">
                <!-- <div class="tableId" @click="chooseTableOpen"> -->
                <div class="tableId">
                  {{ table ? "桌台号：" + table.name : "桌台号/取餐号" }}
                </div>

                <el-button
                  @click="clearCart"
                  type="text"
                  size="mini"
                  :disabled="order.list.length <= 0"
                  >清空</el-button
                >
                <!-- <div
                  class="clear cur-pointer color-000 flex"
                  @click="clearCart"
                >
                  清空
                </div> -->
              </div>
            </div>
            <div class="absolute bottom">
              <div class="flex row-right youhui" v-if="giftLen">
                <span> 已优惠￥{{ allGiftMoney | to2 }} </span>
                <i class="el-icon-arrow-right"></i>
              </div>

              <div class="flex row-between">
                <el-checkbox
                  v-model="order.allPack"
                  :disabled="!this.order.list.length"
                  >打包</el-checkbox
                >
                <div class="flex">
                  <span class="color-666" style="margin-right: 5px"
                    >共{{ allNumber }}件</span
                  >
                  <span class="color-000 ft-18">￥{{ allPrice }} </span>
                </div>
              </div>

              <div class="flex mt-14">
                <!-- <button class="my-btn flex-1 success" v-if="!isCreateOrder">
                  <span>仅下单</span>
                </button> -->
                <template v-if="isCreateOrder">
                  <button
                    class="my-btn flex-1 default"
                    @click="createOrderClose"
                  >
                    <span>加菜/返回</span>
                  </button>
                  <div style="width: 15px"></div>
                  <button class="my-btn flex-1 success" @click="payOrder">
                    <span>立即支付</span>
                  </button>
                </template>
                <template v-else>
                  <el-dropdown
                    split-button
                    size="medium"
                    type="success"
                    @command="changeIsPrint"
                  >
                    {{ isPrint ? "下单并打印制作单" : "仅下单(不打印)" }}
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="false"
                        >仅下单(不打印)</el-dropdown-item
                      >
                      <el-dropdown-item :command="true"
                        >下单并打印制作单</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                  <div style="width: 15px"></div>
                  <div class="flex-1">
                    <el-button
                  size="medium"
                    :disabled="!order.list.length"
                    @click="createOrderShow"
                  >
                  去结账
                  </el-button>
                  </div>
                  
                  <!-- <button
                    class="my-btn flex-1 success"
                    :class="{ disabled: !order.list.length }"
                    :disabled="!order.list.length"
                    @click="createOrderShow"
                  >
                    <span>去结账</span>
                  </button> -->
                </template>
              </div>

              <!-- <div class="flex mt-14">
                <button class="my-btn flex-1 success" v-if="!isCreateOrder">
                  <span>仅下单</span>
                </button>
                <button
                  class="my-btn flex-1 default"
                  v-else
                  @click="createOrderClose"
                >
                  <span>加菜/返回</span>
                </button>
                <div style="width: 15px"></div>
                <button
                  class="my-btn flex-1 default"
                  :class="{ disabled: !order.list.length }"
                  :disabled="!order.list.length"
                  @click="createOrderShow"
                >
                  <span>去结账</span>
                </button>
              </div> -->
            </div>
            <div class="list">
              <div
                v-for="(item, index) in order.list"
                :key="index"
                class="flex order-item relative"
                :class="{ active: order.selIndex === index }"
                @click="changeOrderSel(index)"
              >
                <span class="absolute pack" v-if="item.isPack === 'true'">
                  包
                </span>
                <div class="flex">
                  <div class="img">
                    <img :src="item.coverImg" class="" alt="" />
                  </div>
                  <div class="good-info">
                    <div class="flex lh-16">
                      <div class="name">{{ item.name }}</div>
                      <span
                        class="good_info_discount"
                        v-if="item.isGift === 'true'"
                        >赠</span
                      >
                    </div>
                    <div v-if="item.specSnap" class="specSnap">
                      {{ item.specSnap }}
                    </div>
                  </div>
                </div>
                <div class="flex">
                  <div class="order-number-box">
                    <div class="color-999" style="">X{{ item.number }}</div>
                    <div class="absolute">
                      <div class="order-input-number">
                        <i
                          class="icon-remove"
                          @click="changeOrderNumber(index, '-')"
                        ></i>
                        <div style="width: 40px" class="number-box">
                          <el-input
                            :min="0"
                            type="number"
                            v-model="item.number"
                            placeholder="0"
                          ></el-input>
                        </div>
                        <i
                          class="el-icon-circle-plus icon-add"
                          @click="changeOrderNumber(index)"
                        ></i>
                      </div>
                    </div>
                  </div>

                  <div class="color-333 total-price">
                    ￥{{ item.salePrice }}
                  </div>
                </div>
              </div>

              <div v-if="order.gift.list.length">
                <div class="carts_list_title">以下是优惠菜品</div>
              </div>

              <div v-if="!order.list.length">
                <el-empty description="点餐列表为空"></el-empty>
              </div>
            </div>

            <div class="order_remark" v-if="note.content">
              订单备注： {{ note.content }}
            </div>
          </div>

          <div class="controls">
            <div class="numberbox">
              <div class="reduce" @click="changeOrderGoodsNumber('-')">-</div>
              <div class="input relative">
                <div
                  class="disabled-box"
                  v-if="order.selIndex >= 0"
                  @click="changeKeyboradShow(true)"
                ></div>
                <!-- <input type="number" :disabled="order.selIndex<0" v-model="order.number" /> -->
                <input
                  type="number"
                  disabled
                  v-model="order.number"
                  style="display: none"
                />
                <input type="number" disabled v-model="order.cacheNumber" />
              </div>
              <div class="add" @click="changeOrderGoodsNumber()">+</div>
            </div>
            <!-- <div class="btn" v-for="(item, index) in order.btns" :key="index" :class="{ disabled: item.disabled }" @click="orderBtnsClick(index,item)">
              {{ item.text }}
            </div> -->
            <div
              class="btn"
              :class="{ disabled: !isSku }"
              @click="orderBtnsClick('sku')"
            >
              规格
            </div>
            <div
              class="btn"
              :class="{ disabled: order.selIndex < 0 }"
              @click="orderBtnsClick('gift')"
            >
              {{ returnGiftText }}
            </div>
            <div
              class="btn"
              :class="{ disabled: order.selIndex < 0 }"
              @click="orderBtnsClick('pack')"
            >
              {{ returnPackText }}
            </div>
            <div
              class="btn"
              :class="{ disabled: order.selIndex < 0 }"
              @click="orderBtnsClick('del')"
            >
              删除
            </div>

            <div
              class="btn"
              :class="{ disabled: !order.list.length }"
              @click="saveOrder"
            >
              存单
            </div>
            <div
              class="btn relative"
              :class="{ disabled: !prveOrder.list.length }"
              @click="cacheOrderShow"
            >
              取单
              <span class="prve-car-len" v-if="prveOrder.list.length">{{
                prveOrder.list.length
              }}</span>
            </div>

            <!-- <div
              class="btn"
              :class="{ disabled: !order.list.length }"
              @click="orderBtnsClick('save')"
            >
              存单
            </div>

            <div
              class="btn relative"
              :class="{ disabled: !prveOrder.list.length }"
              @click="orderBtnsClick('getOrder')"
            >
              取单
              <span class="prve-car-len" v-if="prveOrder.list.length">{{
                prveOrder.list.length
              }}</span>
            </div> -->

            <div class="btn" @click="refNoteShow">整单备注</div>
          </div>
        </div>
        <div class="goods">
          <template v-if="!isCreateOrder">
            <div class="flex categoty">
              <div
                class="show_more_btn"
                :class="{ showAll: category.showAll }"
                @click="toggleShowAll"
              >
                <div class="flex">
                  <div class="flex">
                    <i class="el-icon-arrow-down"></i>
                  </div>
                  <span>展开</span>
                </div>
              </div>
              <div
                class="flex categorys"
                :class="{ 'flex-wrap': category.showAll }"
              >
                <div
                  v-for="(item, index) in category.list"
                  :key="index"
                  @click="changeCategoryId(item)"
                >
                  <el-tag
                    size="medium"
                    type="success"
                    effect="dark"
                    v-if="goods.query.categoryId === item.id"
                    >{{ item.name }}</el-tag
                  >
                  <el-tag size="medium" type="success" v-else effect="plain">{{
                    item.name
                  }}</el-tag>
                </div>
              </div>
            </div>
            <div
              class="no-search-result"
              v-if="search.list.length <= 0 && goods.query.productId !== ''"
            >
              未找到相关商品
            </div>
            <div class="goods-list" v-if="goods.list.length">
              <div
                class="goods-item"
                :class="{
                  'layout-img-and-text': layout.sel === 'img-and-text',
                  'layout-text': layout.sel === 'text',
                  none:
                    (goods.query.categoryId !== '') &
                    (goods.query.categoryId != item.categoryId),
                }"
                @click="goodsClick(item)"
                v-for="(item, index) in goods.list"
                :key="index"
              >
                <img class="goods-img" :src="item.coverImg" alt="" />
                <div class="typeEnum">
                  <span>{{ item | returntypeName }}</span>
                </div>
                <div class="info">
                  <div class="name">{{ item.name }}</div>
                  <div class="stockNumber"></div>
                  <div class="">￥{{ item.lowPrice }}</div>
                </div>
              </div>
            </div>
            <!-- <el-pagination :total="goods.total" :current-page="goods.query.page + 1" :page-size="goods.query.size"
            layout="total, sizes, prev, pager, next, jumper" @current-change="paginationChangeinformation" @size-change="
              (e) => {
                goods.query.size = e;
                goods.query.page = 0;
                getGoods();
              }
            " /> -->
          </template>

          <template v-else>
            <div class="cashier_box goods_classify_list">
              <div class="cashier_left">
                <div class="title">选择优惠</div>
                <div class="detail_box">
                  <div class="usercard">
                    <span
                      class="el-avatar el-avatar--square"
                      style="height: 50px; width: 50px; line-height: 50px"
                      ><img v-if="vipUser.id" :src="vipUser.headImg"
                    /></span>
                    <div class="info">
                      <div class="nickname">
                        <span class="txt">{{
                          vipUser.id ? vipUser.nickName : "服务员下单"
                        }}</span>
                      </div>
                      <div class="other_info">
                        <div class="item">余额：{{ vipUser.amount | to2 }}</div>
                        <div class="item">积分：{{ vipUser.totalScore }}</div>
                      </div>
                    </div>
                  </div>

                  <!-- <div class="forms">
                    <el-form
                      ref="form"
                      :model="createOrder.form"
                      label-width="60px"
                    >
                      <el-form-item label="优惠券">
                        <el-select
                          style="margin-right: 10px"
                          v-model="createOrder.quan.sel"
                          placeholder="选择优惠券"
                        >
                        </el-select>
                        <el-button size="medium " type="text">
                          查看不可用券
                        </el-button>
                      </el-form-item>
                    </el-form>
                  </div> -->
                </div>
                <div class="btn_group">
                  <el-button size="medium"> 整单打折/减免 </el-button>
                  <el-button size="medium "> 免单 </el-button>
                </div>

                <pay-type ref="refPayType" v-model="order.payType"> </pay-type>
                <!-- <div class="flex row-right">
                  <el-button size="medium" type="success" @click="payOrder"
                    >确认支付</el-button
                  >
                </div> -->
                <!-- <div class="title">选择支付方式</div>
                <div class="btn_group">
                  <div class="price_select">
                    <div class="pay_btns">
                      <el-button size="medium" type="success">
                        微信支付/支付宝
                      </el-button>
                      <el-button size="medium"> 余额支付 </el-button>
                      <el-button size="medium"> 现金支付 </el-button>
                      <el-button size="medium"> 挂账 </el-button>
                    </div>
                  </div>
                </div> -->
              </div>
              <div class="cashier_left cashier_right">
                <div class="title">账单明细</div>
                <div class="detail_form">
                  <!---->
                  <div class="detail_form_item">
                    <div class="left">会员优惠</div>
                    <div class="right">-￥0.00</div>
                  </div>
                  <div class="detail_form_item">
                    <div class="left">门店优惠</div>
                    <div class="right">-￥0.00</div>
                  </div>
                  <div class="detail_form_item">
                    <div class="left">满减优惠</div>
                    <div class="right">-￥0.00</div>
                  </div>
                  <div class="detail_form_item">
                    <div class="left">优惠券</div>
                    <div class="right">-￥0.00</div>
                  </div>
                  <div class="detail_form_item">
                    <div class="left">整单改价</div>
                    <div class="right">-￥0.00</div>
                  </div>
                  <!---->
                  <div class="detail_form_item">
                    <div class="left">桌位费/附加费</div>
                    <div class="right">￥0.00</div>
                  </div>
                  <!----><!----><!---->
                  <div class="detail_form_item">
                    <div class="left">总价</div>
                    <div class="right">
                      ￥{{ createOrder.data.amount | to2 }}
                    </div>
                  </div>
                  <div class="detail_form_item">
                    <div class="left">抹零</div>
                    <div class="right">-￥0.00</div>
                  </div>
                  <div class="detail_form_item">
                    <div class="left">应付金额</div>
                    <div class="right redfont">
                      ￥{{ createOrder.data.amount | to2 }}
                    </div>
                  </div>
                  <div class="line"></div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>

      <!-- <slot name="footer">
        <div style="display: flex; justify-content: flex-end">
          <el-button style="margin-right: 20px" @click="haocaiCancel">取消</el-button>
          <el-button type="primary" @click="haocaiConfirm">确定</el-button>
        </div>
      </slot> -->
    </el-dialog>

    <!-- 选择规格 -->
    <el-dialog
      width="410px"
      :title="selGoods.title"
      :visible.sync="selGoods.show"
      @close="onSelGoodsSkuClose"
    >
      <div class="tag-group">
        <div
          class="tag-item"
          v-for="(item, index) in selGoods.skuList"
          :key="index"
        >
          <div class="tag-name">
            {{ item.name }}
            <span v-if="item.values.length >= 2"
              >({{ item.values.length }}选1)</span
            >
          </div>
          <div>
            <span
              style="margin: 0 10px 10px 0"
              v-for="(val, valIndex) in item.values"
              :key="valIndex"
            >
              <el-tag
                v-if="val === item.sel"
                size="medium "
                @click="changeTagSel(index, val)"
                effect="dark"
                type="success"
              >
                <!-- :effect="val === item.sel ? 'dark' : 'light '" -->

                {{ val }}
              </el-tag>
              <el-tag
                v-else
                size="medium"
                type="success"
                @click="changeTagSel(index, val)"
                effect="light"
              >
                {{ val }}
              </el-tag>
            </span>
          </div>
        </div>
      </div>

      <div slot="footer">
        <div class="flex row-between">
          <div>
            <div class="price">￥{{ skuGoods.data.salePrice | to2 }}</div>
            <div class="sku-group-text">
              <span> {{ skuText }}</span>
              <span>库存：{{ skuGoods.data.stockNumber || "" }}</span>
            </div>
          </div>
          <div class="flex">
            <i class="icon-remove" @click="skuNumberReduce"></i>
            <div style="width: 40px" class="number-box">
              <el-input
                :min="skuGoods.data.suit"
                type="number"
                v-model="skuGoods.number"
                placeholder="0"
              ></el-input>
            </div>
            <!-- <i class="el-icon-remove"></i> -->
            <i class="el-icon-circle-plus icon-add" @click="skuNumberAdd"></i>
          </div>
        </div>
        <div class="flex" style="margin-top: 14px">
          <button
            class="my-btn disabled flex-1"
            v-if="!skuGoods.data.isGrounding"
            disabled
          >
            已下架
          </button>
          <button
            class="my-btn success flex-1"
            v-else
            :disabled="CanConfirm"
            @click="chooseSkuConfirm"
          >
            确定
          </button>
        </div>
      </div>
    </el-dialog>

    <!-- 数字键盘 -->
    <el-dialog width="410px" title="数量" :visible.sync="keyborad.show">
      <div class="simple-Keyboard-number">
        <div class="carts">
          <div class="title font-bold">
            <span class="color-000">数量</span>
            <i class="el-icon-close" @click="changeKeyboradShow(false)"></i>
          </div>
          <div class="box_status">{{ keyborad.number }}</div>
          <div class="number_list_box">
            <div class="yd-keyboard">
              <div class="mini-number-box1">
                <div class="mini-number">
                  <div class="key-line">
                    <div class="key" @click="keyboradAdd('1')">1</div>
                    <div class="key" @click="keyboradAdd('2')">2</div>
                    <div class="key" @click="keyboradAdd('3')">3</div>
                  </div>
                  <div class="key-line">
                    <div class="key" @click="keyboradAdd('4')">4</div>
                    <div class="key" @click="keyboradAdd('5')">5</div>
                    <div class="key" @click="keyboradAdd('6')">6</div>
                  </div>
                  <div class="key-line">
                    <div class="key" @click="keyboradAdd('7')">7</div>
                    <div class="key" @click="keyboradAdd('8')">8</div>
                    <div class="key" @click="keyboradAdd('9')">9</div>
                  </div>
                  <div class="key-line">
                    <div class="key"></div>
                    <div class="key" @click="keyboradAdd('0')">0</div>
                    <div
                      class="key"
                      style="font-size: 31px"
                      @click="keyboradReduce"
                    >
                      <svg
                        t="1723453480343"
                        class="icon"
                        viewBox="0 0 1664 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="1467"
                        width="32"
                        height="32"
                      >
                        <path
                          d="M1526.08 1.6H459.84L41.28 416c-53.76 53.248-53.76 139.52 0 192.64l418.624 414.592v-0.064h1066.176a136.96 136.96 0 0 0 137.6-136.256V137.792a136.96 136.96 0 0 0-137.6-136.192z m-331.392 631.168c26.816 26.624 26.816 69.76 0 96.384-26.88 26.56-70.4 26.56-97.28 0l-121.28-120.128-123.328 122.112a69.76 69.76 0 0 1-97.92 0 68.096 68.096 0 0 1 0-96.96L878.208 512l-121.28-120.064a67.648 67.648 0 0 1 0-96.32c26.88-26.624 70.4-26.624 97.28 0l121.216 120.064 122.24-120.96a69.696 69.696 0 0 1 97.92 0 68.032 68.032 0 0 1 0 96.96l-122.24 120.96 121.344 120.064z"
                          fill="#333333"
                          p-id="1468"
                        ></path>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="submit" @click="keyboradConfirm">确认</div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 取单 -->
    <el-dialog width="550px" title="取单" :visible.sync="prveOrder.show">
      <div class="take_order_list">
        <div class="tol_left_list">
          <div
            class="tolll_item"
            :class="{ active: prveOrder.sel === index }"
            @click="changePrveOrder(index)"
            v-for="(item, index) in prveOrder.list"
            :key="index"
          >
            <div class="tollli_index">{{ index + 1 }}</div>
            <div class="tollli_price">￥{{ item.totalAmount }}</div>
            <div class="tollli_time_and_num">
              <div class="tollli_time">{{ item.created_at || "" }}</div>
              <div class="tollli_num">({{ item.totalNumber }}件)</div>
            </div>
          </div>
        </div>
        <div
          class="tol_right_list"
          v-if="prveOrder.list.length && prveOrder.sel >= 0"
        >
          <div
            class="tolrl_item"
            v-for="(item, index) in prveOrder.selCart"
            :key="index"
          >
            <div class="tolrli_img">
              <img :src="item.coverImg" alt="" />
            </div>
            <div class="tolrli_right">
              <div class="tr_top">
                <div class="trt_name">{{ item.name }}</div>
                <div class="trt_num">x{{ item.number }}</div>
                <div class="trt_price">￥{{ item.totalAmount || 0 }}</div>
              </div>
              <div class="tr_bottom">
                <span class="trb_item">
                  {{ item.specSnap | formatSpecSnap }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="flex row-center">
        <div style="margin-right: 20px">
          <el-button
            size="medium"
            type="success"
            @click="confirmChoosePrveOrder"
            >确认此单</el-button
          >
        </div>
        <el-button size="medium" @click="delPrveOrder">删除此单</el-button>
      </div>
    </el-dialog>

    <choose-user
      ref="refChooseUser"
      @chooseUser="chooseUserConfirm"
    ></choose-user>
    <choose-table
      ref="refChooseTable"
      @confirm="chooseTableConfirm"
    ></choose-table>
    <order-note ref="refOrderNote" @confirm="refOrderNoteConfirm"></order-note>
  </div>
</template>

<script>
import chooseUser from "./choose-user.vue";
import payType from "./pay-type.vue";
import chooseTable from "./table-diancan-components/choose-table-master.vue";
import orderNote from "./table-diancan-components/note.vue";
import dayjs from "dayjs";
import {
  getGoodsLists,
  addCart,
  getCart,
  $clearCart,
  $removeCart,
  $updateCart,
  $allPack,
  $createOrder,
  $getMasterId,
  $cacheOrder,
  $getCacheOrder,
  $delOrder,
  $setUser
} from "@/api/table";
import { tbShopCategoryGet } from "@/api/shop";
function returnReverseVal(val, isReturnString = true) {
  const isBol = typeof val === "boolean";
  const isString = typeof val === "string";
  let reverseNewval = "";
  if (isBol) {
    reverseNewval = !val;
  }
  if (isString) {
    reverseNewval = val === "true" ? "false" : "true";
  }
  return reverseNewval;
}

export default {
  components: {
    chooseUser,
    chooseTable,
    payType,
    orderNote,
  },
  data() {
    return {
      //是否打印
      isPrint: false,
      // 备注
      note: {
        content: "",
        isShow: false,
      },
      isCreateOrder: false,
      $goodsData: "",
      search: {
        list: [],
      },
      skuGoods: {
        number: 1,
        data: {
          stockNumber: 0,
          salePrice: 0,
        },
      },
      selGoods: {
        isEdit: false,
        data: {},
        skuList: [],
        skuMap: [],
        title: "",
        show: false,
      },
      dayjs,
      dialogshow: false, //弹框显示
      dialogtitle: "", //文字显示
      informationdialogshow: false,
      informationdialogshowedit: false,
      goods: {
        list: [],
        query: {
          productId: "",
          categoryId: "",
          page: 1,
          size: 300,
        },
        loading: false,
        total: 0,
      },
      order: {
        payType: "",
        allPack: false,
        btns: [
          {
            text: "规格",
            disabled: false,
          },
          {
            text: "赠送",
            disabled: false,
          },
          {
            text: "打包",
            disabled: false,
          },
          {
            text: "删除",
            disabled: false,
          },
        ],
        list: [],
        gift: {
          list: [],
          selIndex: -1,
        },
        query: {
          page: 1,
          size: 20,
        },
        number: 1,
        cacheNumber: 1,
        selIndex: -1,
        total: 0,
      },
      table: "",
      category: {
        list: [],
        showAll: false,
      },
      keyborad: {
        show: false,
        number: "0",
      },
      prveOrder: {
        list: [],
        show: false,
        sel: 0,
        selCart: [],
      },
      layout: {
        list: [
          { label: "经典布局", value: "default" },
          { label: "图文显示", value: "img-and-text" },
          { label: "文字显示", value: "text" },
        ],
        sel: "default",
      },
      // 选择用户
      vipUser: {
        id: "",
      },
      //餐桌号
      masterId: "",
      canUpdate: true,
      //下单
      createOrder: {
        form: {},
        data: {},
        quan: {
          list: [],
          sel: "",
        },
      },
      timer: null,
    };
  },
  computed: {
    title() {
      return this.table ? "代客下单" + `(${this.table.name})` : "代客下单";
    },
    allGiftMoney() {
      const price = this.order.list
        .filter((v) => v.isGift === "true")
        .reduce((a, b) => {
          return a + b.number * b.salePrice;
        }, 0);
      return price;
    },
    giftLen() {
      return this.order.list.filter((v) => v.isGift === "true").length;
    },
    isSku() {
      if (this.order.selIndex < 0 || this.order.list.length <= 0) {
        return false;
      }
      return this.order.list[this.order.selIndex].specSnap;
    },
    returnGiftText() {
      if (this.order.selIndex < 0) {
        return "赠送";
      }
      return this.order.list[this.order.selIndex].isGift === "true"
        ? "取消赠送"
        : "赠送";
    },
    returnPackText() {
      if (this.order.selIndex < 0) {
        return "打包";
      }
      return this.order.list[this.order.selIndex].isPack === "true"
        ? "取消打包"
        : "打包";
    },
    skuText() {
      const result = this.selGoods.skuList.reduce((a, b) => {
        return a + b.sel + "+";
      }, "");
      return result.substring(0, result.length - 1);
    },
    allPrice() {
      const price = this.order.list
        .filter((v) => v.isGift !== "true")
        .reduce((a, b) => {
          return a + b.number * b.salePrice;
        }, 0);
      return price.toFixed(2);
    },
    allNumber() {
      return this.order.list.reduce((a, b) => {
        return a + b.number;
      }, 0);
    },
    selGoodsHide() {
      this.selGoods.show = false;
    },
    CanConfirm() {
      if (!this.selGoods.skuList.length) {
        return true;
      }
      return (
        this.selGoods.skuList.filter((v) => v.sel !== "").length !==
        this.selGoods.skuList.length
      );
    },
  },
  filters: {
    formatSpecSnap(str) {
      if (str === "" || str === null || str === undefined) {
        return "";
      }
      return str.replaceAll(",", " / ");
    },
    to2(n) {
      if (n === undefined) {
        return "";
      }
      return Number(n).toFixed(2);
    },
    returntypeName(item) {
      return item.typeEnum === "sku" ? "多规格" : "单规格";
    },
  },
  watch: {
    "vipUser.id":async function(val){
        this.masterId= await this.getMasterId()
        $setUser({
          tableId:this.table.tableId,
          masterId:this.masterId,
          vipUserId:val,
          type:val===''?1:0
        })
    },
    "prveOrder.list.length": function (val) {
      if (val !== 0) {
        this.prveOrder.selCart =
          this.prveOrder.list[this.prveOrder.sel].carList;
      } else {
        this.prveOrder.selCart = [];
      }
      console.log(this.prveOrder.selCart);
    },
    "prveOrder.sel": function (val) {
      this.prveOrder.selCart =
        this.prveOrder.list.length !== 0
          ? this.prveOrder.list[val].carList
          : [];
      console.log(this.prveOrder.selCart);
      if (val < 0) {
        this.prveOrde.show = false;
      }
    },
    // 本地缓存版本
    // "prveOrder.list.length": function (val) {
    //   console.log(val);
    //   if (val !== 0) {
    //     this.prveOrder.selCart = this.prveOrder.list[this.prveOrder.sel].cart;
    //     localStorage.setItem(
    //       "orderList",
    //       JSON.stringify(
    //         this.prveOrder.list.map((v) => {
    //           return { ...v, cart: JSON.stringify(v.cart) };
    //         })
    //       )
    //     );
    //   } else {
    //     this.prveOrder.selCart = [];
    //     localStorage.removeItem("orderList");
    //   }
    //   console.log(this.prveOrder.selCart);
    // },
    // "prveOrder.sel": function (val) {
    //   this.prveOrder.selCart =
    //     this.prveOrder.list.length !== 0 ? this.prveOrder.list[val].cart : [];
    //   console.log(this.prveOrder.selCart);
    // },
    "order.allPack": function (val) {
      console.log(val);
      if (this.order.list.length <= 0) {
        return;
      }
      $allPack({
        masterId: this.masterId,
        tableId: this.table.tableId,
        state: val ? 1 : 0,
      }).then((res) => {
        this.order.list.map((v) => {
          v.isPack = `${val}`;
        });
      });
    },
    "order.selIndex": function (val, oldval) {
      console.log(val);
      if (val === -1) {
        // return (this.order.number = 1);
        this.order.cacheNumber = 1;
      } else {
        this.order.cacheNumber = this.order.list[val].number;
        // this.order.number = this.order.list[val].number;
      }
    },
    "order.list.length": function (val) {
      if (val <= 0) {
        this.order.selIndex = -1;
      }
      if (this.order.selIndex >= 0) {
        this.order.cacheNumber = this.order.list[this.order.selIndex].number;
        // this.order.number = this.order.list[this.order.selIndex].number;
      }
    },
    "order.number": function (newval) {
      if (this.order.list.length <= 0 || this.order.selIndex < 0) {
        return;
      }
      this.createOrderClose();

      let item = this.order.list[this.order.selIndex];
      console.log(item.specSnap);
      const { productId, skuId, isPack, isGift, number } = item;
      $updateCart({
        cartId: item.id,
        productId,
        skuId,
        tableId: this.table.tableId,
        num: this.order.number, // 0会删除此商品
      }).then((res) => {
        this.$set(this.order.list, this.order.selIndex, {
          ...res,
          specSnap: item.specSnap,
        });
      });
      return;
      this.updateOrder({
        num: newval, // 0会删除此商品
      });
    },
    "goods.query.productId": function (newval) {
      console.log(newval);
      if (newval === "") {
        this.goods.list = this.$goodsData.records || [];
      } else {
        const newarr = this.$goodsData.records.filter((v) =>
          v.name.includes(newval)
        );
        this.search.list = newarr;
        this.goods.list = newarr.length ? newarr : this.$goodsData.records;
      }
    },
  },
  mounted() {
    this.getGoods();
    this.getCategory();
  },
  methods: {
    //改变是否打印
    changeIsPrint(e) {
      console.log(e);
      this.isPrint = e;
    },
    refOrderNoteConfirm(note) {
      this.note.content = note;
    },
    refNoteShow() {
      this.$refs.refOrderNote.open(this.note.content);
    },
    // 支付订单
    async payOrder() {
      return this.payOrderSuccess();
      console.log({
        orderId: this.createOrder.data.id,
        payType: this.order.payType,
      });
      const res = await $clearCart({
        tableId: this.table.tableId,
        masterId: this.masterId,
        orderId: this.createOrder.data.id,
        payType: this.order.payType,
      });
      this.payOrderSuccess();
    },
    payOrderSuccess() {
      this.$notify({
        title: "更新成功",
        type: "success",
      });
      this.reset();
    },
    chooseTableConfirm(item) {
      console.log(item);
      this.table = item;
    },
    chooseTableOpen() {
      this.$refs.refChooseTable.open();
    },
    chooseUserConfirm(user) {
      console.log(user);
      if (user) {
        this.vipUser = user;
      } else {
        this.vipUser = { id: "" };
      }
    },
    refChooseUserOpen() {
      this.$refs.refChooseUser.open();
    },
    createOrderClose() {
      this.isCreateOrder = false;
    },
    async createOrderShow() {
      this.order.payType;
      this.isCreateOrder = true;
      const res = await $createOrder({
        masterId: this.masterId,
        vipUserId: this.vipUser.id,
        tableId: this.table.tableId,
        note: this.note.content,
      });
      this.createOrder.data = res;
      const masterId = await this.getMasterId();
      this.masterId = masterId;
    },

    // 获取取餐号
    getMasterId() {
      return $getMasterId({
        tableId: this.table.tableId,
        vipUserId: this.vipUser.id,
      });
    },
    onSelGoodsSkuClose() {
      this.selGoods.isEdit = false;
    },
    changePrveOrder(index) {
      this.prveOrder.sel = index;
    },
    updateOrder(par = {}) {
      let item = this.order.list[this.order.selIndex];
      console.log(item.specSnap);
      const { productId, skuId, isPack, isGift, number } = item;
      addCart({
        masterId: this.masterId,
        vipUserId: this.vipUser.id,
        productId,
        skuId,
        tableId: this.table.tableId,
        num: number,
        isPack: isPack === "true" ? true : false,
        isGift: isGift === "true" ? true : false,
        ...par,
      }).then((res) => {
        this.$set(this.order.list, this.order.selIndex, {
          ...res,
          specSnap: item.specSnap,
        });
      });
    },
    keyboradAdd(n) {
      if (Number(this.keyborad.number) === 0) {
        return (this.keyborad.number = n);
      }
      this.keyborad.number += n;
    },
    keyboradReduce() {
      if (this.keyborad.number.length <= 1) {
        return (this.keyborad.number = "0");
      }
      this.keyborad.number = this.keyborad.number.substring(
        0,
        this.keyborad.number.length - 1
      );
    },
    keyboradConfirm() {
      const orderGoods = this.order.list[this.order.selIndex];
      // 如果设置为0,商品数量减1
      if (this.keyborad.number == 0) {
        this.changeOrderNumber(this.order.selIndex, true);
      } else {
        orderGoods.number = Number(this.keyborad.number);
      }
      this.order.cacheNumber = orderGoods.number;
      this.order.number = orderGoods.number;
      this.changeKeyboradShow(false);
    },
    changeKeyboradShow(show) {
      if (show) {
        this.keyborad.number = `${this.order.list[this.order.selIndex].number}`;
      }
      this.keyborad.show = show;
    },
    // 获取本地缓存挂单
    // getPrveCart() {
    //   const arr = localStorage.getItem("orderList")
    //     ? JSON.parse(localStorage.getItem("orderList"))
    //     : [];
    //   this.prveOrder.list = arr.map((v) => {
    //     return { ...v, cart: JSON.parse(v.cart) };
    //   });
    // },
    orderBtnsClick(key) {
      const orderGoods = this.order.list[this.order.selIndex];
      this.createOrderClose();
      if (key === "sku") {
        this.selGoods.title = orderGoods.name;
        this.selGoods.isEdit = true;
        const item = this.goods.list.find((v) => v.id == orderGoods.productId);
        console.log(item);
        return this.showSelGoods({ ...item, ...orderGoods });
      }
      if (key === "gift") {
        const isGift = orderGoods.isGift === "true" ? "flase" : "true";
        this.updateOrder({ isGift: isGift === "true" ? true : false });
        return;
      }
      if (key === "pack") {
        const isPack = orderGoods.isPack === "true" ? "flase" : "true";
        this.updateOrder({ isPack: isPack === "true" ? true : false });
        return;
      }
      if (key === "del") {
        return this.removeCart();
      }
      if (key === "save") {
        this.prveOrder.list.push({
          cart: this.order.list,
          id: Date.now(),
          created_at: `${new Date().getHours()}:${new Date().getMinutes()}`,
          goods_num: this.allNumber,
          order_total: this.allPrice,
        });
        localStorage.setItem(
          "orderList",
          JSON.stringify(
            this.prveOrder.list.map((v) => {
              return { ...v, cart: JSON.stringify(v.cart) };
            })
          )
        );
        this.order.list = [];
        this.order.selIndex = -1;
        return;
      }
      if (key === "getOrder") {
        this.prveOrder.show = true;
        this.getPrveCart();
        return;
      }
    },
    //选择挂单确认
    async confirmChoosePrveOrder() {
      if (this.prveOrder.list.length <= 0) {
        return;
      }
      // const { sel } = this.prveOrder;
      // const order=this.prveOrder.list[sel];
      // const res=await $cacheOrder({
      //   orderId:order.orderId,
      //   isPending:false,
      //   tableId:this.table.tableId,
      //   masterId:order.carList[0].masterId
      // })
      const {masterId,tableId,userId}= await $cacheOrder({orderId:this.prveOrder.list[this.prveOrder.sel].orderId,isPending:false})

      getCart({
        masterId,
        tableId,
        vipUserId:userId?userId:''
      })
      return 
      this.order.list = this.prveOrder.list[this.prveOrder.sel].carList;
      this.delPrveOrder();
      this.prveOrder.show = false;
    },
    //删除挂单
    async delPrveOrder() {
      const { sel } = this.prveOrder;
      const order = this.prveOrder.list[sel];
      const res = await $delOrder({
        orderId: order.orderId
      });
      this.$notify({
        message: "删除成功",
        type: "success",
      });
      this.prveOrder.list.splice(sel, 1);
      this.prveOrder.sel = sel - 1 <= 0 ? 0 : sel - 1;
    },
    cacheOrderShow() {
      this.prveOrder.show = true;
    },
    //获取挂起订单
    async getCacheOrder() {
      const res = await $getCacheOrder();
      console.log(res);
      this.prveOrder.list = res;
    },
    async saveOrder() {
      const res = await $cacheOrder({
        masterId: this.masterId,
        tableId: this.table.tableId,
        vipUserId: this.vipUser.id,
        isPending: true,
      });
      this.order.list = [];
      this.order.selIndex = -1;
      const masterId = await this.getMasterId();
      this.masterId = masterId;
      this.$nextTick(() => {
        this.getCacheOrder();
      });
    },
    // 删除购物车商品
    removeCart() {
      const orderGoods = this.order.list[this.order.selIndex];
      $removeCart({
        cartId: orderGoods.id,
        tableId: this.table.tableId,
      });
      this.order.list.splice(this.order.selIndex, 1);
      const newval = this.order.selIndex - 1;
      this.order.selIndex = newval <= 0 ? 0 : newval;

      //  this.$message({
      //         type: "success",
      //         message: "清除成功!",
      //       });
    },
    async changeOrderNumber(index, isReduce) {
      if (index < 0) {
        return;
      }
      this.order.selIndex = index;
      console.log(index);
      const item = this.order.list[index];
      const mumber = item.number * 1;
      const newval = mumber + (isReduce ? -1 : 1);
      if (newval <= 0) {
        return this.removeCart();
      }
      if (newval >= 100000) {
        return;
      }
      // const res= await addCart({
      //    productId: item.productId,
      //     skuId: item.skuId,
      //     tableId: this.table.tableId,
      //     num: newval, // 0会删除此商品
      //     isPack: false, // 是否打包
      // })
      this.order.list[index].number = newval;
      this.order.number = newval;
      this.order.cacheNumber = newval;
    },
    changeOrderGoodsNumber(isReduce) {
      if (this.order.selIndex < 0) {
        return;
      }
      const item = this.order.list[this.order.selIndex];
      console.log(item);
      const mumber = item.number * 1;
      const newval = mumber + (isReduce ? -1 : 1);
      if (newval <= 0) {
        return;
      }
      if (newval >= 100000) {
        return;
      }
      console.log(newval);

      // this.order.list[this.order.selIndex].number = newval;
      this.order.number = newval;
      this.order.cacheNumber = newval;
    },
    clearCart() {
      if (this.order.list.length <= 0) {
        return;
      }
      this.$confirm("确定要清空点餐列表吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $clearCart({
            masterId: this.masterId,
            tableId: this.table.tableId,
          }).then((res) => {
            this.order.list = [];
            this.order.selIndex = -1;
            this.$message({
              type: "success",
              message: "清除成功!",
            });
          });
        })
        .catch(() => {});
    },
    skuNumberAdd() {
      const number = Number(this.skuGoods.number);
      if (number > 10000) {
        return;
      }
      this.skuGoods.number = number + 1;
    },
    skuNumberReduce() {
      if (this.skuGoods.number - 1 <= 0) {
        return;
      }
      this.skuGoods.number -= 1;
    },
    toggleShowAll() {
      this.category.showAll = !this.category.showAll;
    },
    changeCategoryId(item) {
      this.goods.query.categoryId = item.id;
    },
    async getCategory() {
      const { content } = await tbShopCategoryGet({
        page: 0,
        size: 100,
        sort: "id",
        shopId: localStorage.getItem("shopId"),
      });
      this.category.list = content.reduce((prve, cur) => {
        prve.push(cur);
        return [...prve, ...cur.childrenList];
      }, []);
      this.category.list.unshift({
        id: "",
        name: "全部",
      });
      console.log(this.category.list);
    },
    changeOrderSel(index) {
      this.order.selIndex = index;
    },
    chooseSkuConfirm() {
      if (this.timer) {
        return;
      }
      this.skuGoodsAdd();
      this.timer = setTimeout(() => {
        clearTimeout(this.timer);
        this.timer = null;
      }, 500);
      console.log(this.timer);
    },
    async skuGoodsAdd() {
      let name = this.selGoods.skuList.reduce((prve, cur) => {
        return prve + cur.sel + ",";
      }, "");
      name = name.substring(0, name.length - 1);
      // const item = this.selGoods.data.specList.find((v) => v.specSnap === name);
      const item = this.selGoods.skuMap[name];
      if (!item.isGrounding) {
        //该商品已经下架
        return this.$notify({
          title: "该商品规格已经下架",
          type: "error",
        });
      }
      let res = "";

      console.log(orderGoods);
      //更改购物车订单商品规格数量
      if (this.selGoods.isEdit) {
        res = await $updateCart({
          cartId: this.order.list[this.order.selIndex].id,
          productId: this.selGoods.data.productId,
          skuId: item.id,
          tableId: this.table.tableId,
          num: this.skuGoods.number, // 0会删除此商品
        });
        this.$set(this.order.list, this.order.selIndex, {
          ...res,
          specSnap: name,
        });
        this.$notify({
          title: "更新成功",
          type: "success",
        });
        this.selGoods.show = false;
        return;
      }

      const orderGoodsIndex = this.order.list.findIndex((V) => {
        return V.skuId == item.id && V.productId == this.selGoods.data.id;
      });
      const orderGoods =
        orderGoodsIndex != -1 ? this.order.list[orderGoodsIndex] : undefined;
      console.log(orderGoods);
      if (orderGoods) {
        //更新
        res = await $updateCart({
          cartId: orderGoods.id,
          productId: this.selGoods.data.id,
          skuId: item.id,
          tableId: this.table.tableId,
          num: orderGoods.number * 1 + this.skuGoods.number, // 0会删除此商品
          isPack: false, // 是否打包
        });
        orderGoods.number += this.skuGoods.number;
        this.order.selIndex = orderGoodsIndex;
        this.order.cacheNumber = orderGoods.number;
      } else {
        //添加
        res = await addCart({
          masterId: this.masterId,
          vipUserId: this.vipUser.id,
          productId: this.selGoods.data.id,
          skuId: item.id,
          tableId: this.table.tableId,
          num: this.skuGoods.number, // 0会删除此商品
          isPack: false, // 是否打包
        });
        this.orderListPush({ ...res, specSnap: name });
        // this.orderListPush({
        //   skuId: item.id,
        //   number: this.skuGoods.number,
        //   specSnap: name,
        // });
      }

      this.$notify({
        title: orderGoods ? "更新成功" : "添加成功",
        type: "success",
      });
      this.selGoods.show = false;
    },
    orderListPush(item) {
      const { isPack, isGift } = item;
      // const isPack=item.isPack==='false'?false:true
      // const isGift=item.isGift==='false'?false:true
      this.order.list.push({ ...item, isPack, isGift });
      this.order.selIndex = this.order.list.length - 1;
    },
    changeTagSel(index, val) {
      this.$set(this.selGoods.skuList[index], "sel", val);
      let specSnap = this.selGoods.skuList.reduce((a, b) => {
        return a + b.sel + ",";
      }, "");
      specSnap = specSnap.substring(0, specSnap.length - 1);
      const skuGoods = this.selGoods.skuMap[specSnap];
      this.skuGoods.data = skuGoods;
      this.skuGoods.number = skuGoods.suit || 1;
    },
    reset() {
      // this.goods.list = [];
      this.order.list = [];
      this.order.query.page = 1;
      this.goods.total = 0;
      this.order.list = [];
      this.isCreateOrder = false;
      this.note.content = "";
      this.vipUser = { id: "" };
      this.allPack = false;
      this.note.content = "";
    },
    //获取购物车数据
    async getCart() {
      const res = await getCart({
        ...this.order.query,
        masterId: this.masterId,
        tableId: this.table.tableId,
      });
      this.order.list = res.records;
      this.order.total = res.total;
    },
    showSelGoods(item) {
      console.log(item);
      this.selGoods.data = item;
      this.selGoods.skuMap = {};
      const specList = item.specList;
      for (let i in specList) {
        this.selGoods.skuMap[specList[i].specSnap] = specList[i];
      }
      console.log(this.selGoods.skuMap);
      let specSnap = "";
      let specSnapArr = item.specSnap ? item.specSnap.split(",") : [];
      this.selGoods.skuList = JSON.parse(item.skuResult.tagSnap).map(
        (v, index) => {
          const values = v.value.split(",");
          specSnap += values[0] + ",";
          return {
            ...v,
            values: values,
            sel: specSnapArr.length ? specSnapArr[index] : values[0],
          };
        }
      );
      specSnap = item.specSnap
        ? item.specSnap
        : specSnap.substring(0, specSnap.length - 1);
      const skuGoods = this.selGoods.skuMap[specSnap];
      this.skuGoods.data = skuGoods;
      console.log(skuGoods);
      this.skuGoods.number = item.number ? item.number : skuGoods.suit || 1;
      console.log(this.skuGoods.data);
      this.selGoods.title = item.name;
      this.selGoods.show = true;
    },
    //根据右侧商品单规格多规格做不同处理
    async goodsClick(item) {
      if (item.typeEnum === "sku") {
        this.selGoods.data = item;
        this.selGoods.skuMap = {};
        const specList = item.specList;
        for (let i in specList) {
          this.selGoods.skuMap[specList[i].specSnap] = specList[i];
        }
        console.log(this.selGoods.skuMap);
        let specSnap = "";
        // const canBudyGoods=specList.filter(v=>v)
        this.selGoods.skuList = JSON.parse(item.skuResult.tagSnap).map((v) => {
          const values = v.value.split(",");
          specSnap += values[0] + ",";
          return {
            ...v,
            values: values,
            sel: values[0],
          };
        });
        specSnap = specSnap.substring(0, specSnap.length - 1);
        const skuGoods = this.selGoods.skuMap[specSnap];
        this.skuGoods.data = skuGoods;
        console.log(skuGoods);
        this.skuGoods.number = skuGoods.suit || 1;
        console.log(this.skuGoods.data);
        this.selGoods.title = item.name;
        this.selGoods.show = true;
        return;
      }
      //单规格
      const orderGoodsIndex = this.order.list.findIndex((V) => {
        return V.skuId == item.specList[0].id && V.productId == item.id;
      });
      const orderGoods =
        orderGoodsIndex != -1 ? this.order.list[orderGoodsIndex] : undefined;
      // const orderGoods =  this.order.list.find((V) => {
      //   return V.skuId == item.specList[0].id && V.productId == item.id;
      // });
      let res = "";
      if (orderGoods) {
        //更新
        // res = await $updateCart({
        //   cartId: orderGoods.id,
        //   productId: item.id,
        //   skuId: item.specList[0].id,
        //   tableId: this.table.tableId,
        //   num: orderGoods.number * 1 + item.specList[0].suit, // 0会删除此商品
        // });
        orderGoods.number += item.specList[0].suit;
        this.order.number = orderGoods.number;
        this.order.selIndex = orderGoodsIndex;
      } else {
        //增加
        console.log(item);
        res = await addCart({
          masterId: this.masterId,
          vipUserId: this.vipUser.id,
          productId: item.id,
          skuId: item.specList[0].id,
          tableId: this.table.tableId,
          num: item.specList[0].suit, // 0会删除此商品
          isPack: false, // 是否打包
        });
        this.orderListPush(res);
      }
    },
    async getGoods() {
      const res = await getGoodsLists(this.goods.query);
      console.log(res);
      this.goods.list = res.records;
      this.goods.total = res.total;
      this.$goodsData = res;
    },
    async open(item) {
      this.table = item;
      this.informationdialogshow = true;
      const res = await this.getMasterId();
      this.masterId = res.masterId;
      this.getCart();
      // this.getPrveCart();
      this.getCacheOrder();
    },
    close() {
      this.informationdialogshow = false;
    },
    resetCommodityArr() {
      this.commodityArr = [];
      this.$refs.addSelect.resetFields();
    },
    haocaiCancel() {
      this.informationdialogshow = false;
    },
    haocaiConfirm() {
      console.log(haocaiSelectedMap);

      this.$emit("confirm", haocaiSelectedMap);
      this.informationdialogshow = false;
      return;
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e - 1;
      this.getTableData();
    },
    paginationChangeinformation(e) {
      this.goods.query.page = e;
      this.getGoods();
    },
  },
};
</script>

<style scoped lang="scss">
/* 针对所有input type="number" */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.icon-add {
  color: rgb(34, 191, 100);
  font-size: 22px;
  cursor: pointer;
}
.prve-car-len {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 2px;
  right: 2px;
  height: 16px;
  width: 16px;
  font-size: 12px;
  color: rgb(255, 255, 255);
  border-radius: 50%;
  background-color: rgb(250, 85, 85);
}
::v-deep .number-box .el-input__inner {
  border: none;
}
::v-deep .el-button--text {
  color: #000;
}
::v-deep .number-box .el-input__inner {
  border: none;
  padding: 0 4px;
  text-align: center;
}

::v-deep .number-box .el-input__inner::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
::v-deep .el-button--success {
  background: #22bf64;
  color: #fff;
}
::v-deep .el-tag--dark .el-tag--success {
  background: #22bf64;
  color: #fff;
}
::v-deep .flex-1 .el-button{
  width: 100%;
}
::v-deep .el-button--medium {
  padding-top: 12px;
  padding-bottom: 12px;
}

::v-deep .number-box .el-input__inner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.carts_list_title {
  padding: 16px 0 12px 0;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  &::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #ebebeb;
    margin-left: 10px;
  }
}

.lh-16 {
  line-height: 16px;
}
.good_info_discount {
  height: 16px;
  padding: 0 3px;
  color: #ff3f3f;
  background-color: rgba(255, 63, 63, 0.1);
  border-radius: 2px;
  margin-left: 6px;
  font-size: 12px;
  white-space: nowrap;
}
.icon-remove {
  border: 1px solid #d8d8d8;
  width: 22px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;

  &::after {
    content: "";
    display: block;
    width: 10px;
    height: 1px;
    background: #999;
  }
}
.row-center {
  justify-content: center;
}
.sku-group-text {
  text-align: left;
  color: #666;
  font-size: 11px;
  margin-top: 2px;
}

.price {
  font-size: 18px;
  text-align: left;
  color: rgb(255, 81, 82);
  font-weight: 600;
}
.youhui {
  color: #c12a2a;
  font-size: 13px;
  line-height: 16px;
}

::v-deep .el-dialog__footer {
  border-top: 1px solid #efefef;
}

.sku-bottom {
  padding: 14px 12px 5px;
}

.relative {
  position: relative;
}
.col-baseline {
  align-items: baseline;
}

.absolute {
  position: absolute;
}

.order-number-box {
  position: relative;

  .absolute {
    width: 60px;
    height: 40px;
    right: -30px;
    top: -12px;
    position: absolute;

    .order-input-number {
      position: absolute;
      right: -6px;
      top: 0;
      justify-content: center;
      align-items: center;
      display: none;
      background-color: #fff;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
      padding: 9px 6px;
      background-color: #fff;
      height: 40px;
    }

    &:hover .order-input-number {
      display: flex;
    }
  }
}

.color-333 {
  color: #333;
}

.color-666 {
  color: #666;
}
.ft-13 {
  font-size: 13px;
}

.color-000 {
  color: #000;
}

.color-999 {
  color: #999;
}

.ft-12 {
  font-size: 12px;
}

.ft-18 {
  font-size: 18px;
}

.transition {
  transition: all 0.2s ease-in-out;
}

::v-deep .el-dialog__header {
  border-bottom: 1px solid #efefef;
}

.tableId {
  padding: 9px 15px;
  border: 1px solid #dcdfe6;
  font-size: 12px;
  border-radius: 3px;
  cursor: pointer;

  &:hover {
    border-color: #409eff;
    color: #409eff;
    background-color: rgba(24, 144, 255, 0.1);
  }
}

.cur-pointer {
  cursor: pointer;
}

.flex-1 {
  flex: 1;
}

.flex-wrap {
  flex-wrap: wrap;
}

.mt-14 {
  margin-top: 14px;
}

.my-btn {
  outline: none;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  color: #000;
  justify-content: center;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  padding: 0 5px;
  background-color: #fff;
  position: relative;

  &.disabled {
    color: #c0c4cc;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ebeef5;
  }
}

.flex-wrap {
  flex: 1;
}
.headimg {
  width: 34px;
  height: 34px;
  display: block;
  border-radius: 2px;
  margin-right: 6px;
}
.take_order_list {
  display: flex;
  justify-content: space-between;
  .tol_left_list {
    height: 360px;
    margin-right: 24px;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      width: 0;
    }
    .tolll_item {
      border: 1px solid rgb(247, 247, 250);
      height: 86px;
      width: 130px;
      padding: 10px 14px;
      margin-bottom: 12px;
      border-radius: 4px;
      color: #303133;

      background-color: #f7f7fa;
      &.active {
        border: 1px solid rgb(0, 194, 95);
        background-color: rgba(0, 194, 95, 0.1);
        color: rgb(0, 194, 95) !important;
        .tollli_time,
        .tollli_num {
          color: rgb(0, 194, 95) !important;
        }
      }
      cursor: pointer;
      .tollli_index {
        font-weight: 600;
        font-size: 18px;
      }
      .tollli_price {
        margin-top: 8px;
        font-size: 14px;
      }
      .tollli_time_and_num {
        margin-top: 6px;
        display: flex;
        justify-content: space-between;
        .tollli_time,
        .tollli_num {
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }
  .tol_right_list {
    flex: 1;
    height: 360px;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      width: 0;
    }
    .tolrl_item {
      display: flex;
      padding: 2px 2px 13px 2px;
      margin-bottom: 12px;
      border-bottom: 1px solid #ebebeb;
      .tolrli_img {
        img {
          width: 40px;
          height: 40px;
          border-radius: 4px;
        }
      }
      .tolrli_right {
        display: flex;
        justify-content: space-between;
        flex: 1;
        flex-direction: column;
        padding: 1px 0 1px 8px;
        .tr_top {
          display: flex;
          justify-content: space-between;
          .trt_name {
            width: 150px;
            font-size: 14px;
            color: #212121;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .trt_num {
            font-size: 14px;
            color: #212121;
          }
          .trt_price {
            width: 100px;
            text-align: right;
            font-size: 14px;
            color: #212121;
          }
        }
        .tr_bottom {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}

.success {
  color: #fff;
  border-color: #22bf64;
  background-color: rgb(34, 191, 100);
}

.categoty {
  position: relative;
  margin-left: 7px;

  .show_more_btn {
    padding: 0 10px;
    color: #1890ff;
    font-size: 16px;
    display: flex;
    align-items: center;
    user-select: none;
    min-width: 80px;
    background: #f7f7fa;
    position: absolute;
    right: -20px;
    top: 0;
    height: 38px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    .el-icon-arrow-down {
      transition: all 0.2s;
    }

    &.showAll .el-icon-arrow-down {
      transform: rotate(180deg);
    }
  }
}

.search-box {
  display: flex;
  justify-content: flex-end;
  margin-left: 12px;
  border-bottom: 1px solid #ebebeb;
}
::v-deep .el-dialog__title {
  font-size: 20px;
  font-weight: 600;
}

::v-deep .categorys .el-tag--plain.el-tag--success {
  border: 1px solid #dcdfe6;
  color: #000;
  font-weight: 600;
}

::v-deep .el-dialog {
  user-select: none;
}

::v-deep .categorys .el-tag {
  min-width: 80px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  box-sizing: border-box;
  text-align: center;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 2px;
  user-select: none;
  margin: 0 10px 10px 0;
  cursor: pointer;
}

::v-deep .tag-group .el-tag {
  min-width: 80px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  box-sizing: border-box;
  text-align: center;
  padding: 0 15px;
  font-size: 14px;
  border-radius: 2px;
  user-select: none;
  margin: 0 10px 10px 0;
  cursor: pointer;
  border-radius: 4px;
}

::v-deep .tag-group .el-tag--light {
  color: #000;
  background-color: #fff;
  border: 1px solid #dcdfe6;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #22bf64;
  border-color: #22bf64;
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #22bf64;
}

::v-deep .tag-group .el-tag--dark {
  background: rgba(34, 191, 100, 0.1);
  color: #22bf64;
  border-color: #22bf64;
}
.no-search-result {
  color: #888;
  margin: 0 0 10px 7px;
}
.numberbox {
  border: 1px solid #dcdfe6;
  background-color: #fff;
  color: #000;
  min-height: 38px;
  line-height: 38px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  margin: 0 0 10px;

  .reduce,
  .add {
    font-size: 28px;
    color: #999;
    height: 38px;
    line-height: 38px;
    text-align: center;
  }

  .input {
    font-size: 30px;
    display: flex;
    overflow: hidden;
    padding: 0 10px;
    height: 50px;
    border-top: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;

    input {
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      outline: none;
      justify-content: center;
      border: none;
      text-align: center;
    }
  }
}

.tag-group {
  margin-top: 10px;

  .tag-item {
    margin-bottom: 20px;

    .tag-name {
      margin-bottom: 10px;
      font-size: 12px;
      color: #999;
    }
  }
}

.flex {
  display: flex;
  align-items: center;
}

.row-between {
  justify-content: space-between;
}

.row-right {
  justify-content: flex-end;
}

.none {
  display: none !important;
}

.handle {
  font-size: 18px;
  color: #999;

  &:hover {
    cursor: grab;
  }
}

.shop_info {
  display: flex;

  .info {
    flex: 1;
    padding-left: 8px;
    display: flex;
    flex-direction: column;

    .tag_wrap {
      display: flex;
    }
  }
}

.font-bold {
  font-weight: bold;
}

.head-container .filter-item {
  margin: 0 5px 0 0;
}

.diancan {
  display: flex;
  height: 80vh;

  .choose-user {
    padding: 10px 0;
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 10px;
  }
  .order {
    border-radius: 6px;
    display: flex;
    padding-left: 12px;
    .bottom {
      left: 0;
      right: 0;
      box-sizing: border-box;
      padding: 14px;
      bottom: 0;
      background-color: #fff;
      z-index: 10;
      border-top: 1px solid #ebebeb;
    }

    .list {
      width: 352px;
      padding: 12px 12px 0 0;
    }

    .controls {
      min-width: 106px;
      width: 106px;
      border-radius: 4px;
      background-color: #f7f7fa;
      padding: 14px 10px;
      position: relative;
      overflow-y: auto;

      .btn {
        border: 1px solid #dcdfe6;
        background-color: #fff;
        color: #000;
        min-height: 38px;
        line-height: 38px;
        text-align: center;
        border-radius: 4px;
        position: relative;
        cursor: pointer;
        margin: 0 0 10px;

        &.disabled {
          color: #999;
          pointer-events: none;
          cursor: no-drop;
          background-color: rgb(250, 250, 252);
        }
      }
    }

    .order-item {
      padding: 4px;
      border-radius: 2px;
      display: flex;
      cursor: pointer;
      align-items: center;
      justify-content: space-between;
      background-color: rgba(0, 0, 0, 0);
      transition: all 0.3s;
      .pack {
        right: 100%;
        width: 18px;
        height: 18px;
        background: #35ac6a;
        border-radius: 4px 0 4px 0;
        font-size: 12px;
        color: #fff;
        text-align: center;
        line-height: 17px;
      }
      &.active {
        background-color: rgba(0, 0, 0, 0.04);
      }

      .total-price {
        width: 94px;
        text-align: right;
      }

      .good-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 70px;

        .specSnap {
          color: #999;
          font-size: 12px;
          margin-top: 3px;
        }
      }

      .name {
        font-size: 13px;
        text-align: left;
        color: #212121;
        overflow: hidden;
      }

      .img {
        width: 40px;
        height: 40px;
        position: relative;
        margin-right: 10px;

        img {
          width: 40px;
          height: 40px;
        }
      }
    }
  }

  .goods {
    box-sizing: border-box;
    flex: 1;
    background-color: #f7f7fa;
    margin-left: 20px;
    padding: 14px 20px 0;
    overflow: hidden;

    .goods-list {
      display: flex;
      flex-wrap: wrap;

      .goods-item {
        position: relative;
        cursor: pointer;
        min-width: 98px;
        max-width: 100px;
        height: 100px;
        flex: 1;
        opacity: 1;
        margin: 0 7px 14px;
        border-radius: 4px;

        overflow: hidden;
        position: relative;

        .typeEnum {
          position: absolute;
          right: 0;
          top: 0;
          border-radius: 0 0 0 10px;
          background-color: #46a6ff;
          color: #fff;
          padding: 2px 10px;
          display: none;
        }

        .info {
          font-size: 14px;
          position: absolute;
          inset: 0;
          background: rgba(0, 0, 0, 0.4);
          color: #fff;
          box-sizing: border-box;
          padding: 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
        img {
          width: 100%;
          height: 100%;
        }
        &.layout-img-and-text {
          min-width: 116px !important;
          max-width: 136px !important;
          height: 175px;
          background-color: #fff;
          display: flex;
          flex-direction: column;
          box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.07);

          img {
            width: 136px;
            height: 125px;
          }
          .info {
            position: inherit;
            background-color: #fff;
            padding: 4px 4px 8px;
            color: #000;
            .name {
              font-size: 15px;
              font-weight: 600;
              height: 20px;
              line-height: 20px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin-bottom: 2px;
            }
            .price {
              font-size: 13px;
            }
          }
        }
        &.layout-text {
          margin: 0 5px 10px;
          box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
          min-width: 128px !important;
          max-width: 148px !important;
          background-color: #fff;
          height: 80px;
          .info {
            background-color: #fff;

            position: inherit;
            color: #000;
            .name {
              font-weight: 600;
              font-size: 15px;
              color: #000;
              line-height: 22px;
              overflow: hidden;
              text-overflow: ellipsis;

              height: 44px;
            }

            .price {
              font-weight: 600;
              font-size: 16px;
              margin: 6px 0 0;
            }
          }
          img {
            display: none;
          }
        }
      }
    }
  }
}

.carts {
  flex-direction: column;
  background: #fff;
  height: 100%;
  position: relative;
  z-index: 10;
}

.carts .title,
.carts {
  display: flex;

  align-items: center;
  width: 100%;
}

.carts .title {
  justify-content: space-between;
  height: 64px;
  border-bottom: 1px solid #ebebeb;
  padding: 20px;
  padding-top: 30px;
}

.carts .title .left {
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 18px;
  color: #000;
}

.carts .title .right {
  font-size: 14.4px;
  cursor: pointer;
}

.carts .box_status {
  width: 370px;
  height: 58px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;

  display: flex;

  justify-content: center;

  align-items: center;
  margin-top: 20px;
  font-family: MicrosoftYaHei;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: 1.25px;
  text-align: center;
}

.carts .box_status span {
  padding: 0 5px;
}

.number_list_box {
  width: 370px;
  background: #fff;
  border-radius: 3px;
  margin: 20px 0;
}

.submit {
  width: 366px;
  height: 44px;
  background: #22bf64;
  border-radius: 2px;

  display: flex;

  justify-content: center;

  align-items: center;
  font-size: 14px;
  color: #fff;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  margin-bottom: 40px;
  cursor: pointer;
}

.yd-keyboard {
  justify-content: center;
  margin-top: -8px;
  margin-left: -8px;
}

.mini-number-box1 .mini-number,
.yd-keyboard {
  display: flex;

  flex-direction: column;
}

.mini-number-box1 .mini-number {
  margin-left: 8px;
  border: 1px solid #dcdfe6;
}

.mini-number-box1 .mini-number .key-line {
  margin-top: 0;
}

.mini-number-box1 .mini-number .key {
  width: 122px;
  height: 60px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  margin-left: 0;
}

.mini-number-box1 .mini-number .key:not(:last-child) {
  border-right: 1px solid #dcdfe6;
}

.mini-number-box1 .mini-number .key-line:not(:last-child) {
  border-bottom: 1px solid #dcdfe6;
}

.mini-number-box2 {
  display: flex;

  justify-content: center;
}

.mini-number-box2 .key {
  width: 80px;
  height: 70px;
}

.mini-number-box2 .function-button {
  display: flex;

  flex-direction: column;
}

.mini-number-box2 .function-button .key {
  margin-top: 8px;
}

.key-line {
  margin-top: 8px;
}

.key,
.key-line {
  display: flex;

  justify-content: center;
}

.key {
  width: 64px;
  height: 64px;
  background: #fff;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10196078431372549);
  border-radius: 4px;

  align-items: center;
  margin-left: 8px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.8);
  text-align: center;
  line-height: 34px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10196078431372549);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.simple-Keyboard-number,
.simple-Keyboard-weight {
  min-width: 410px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  background: #fff;
  -webkit-box-shadow: 12px 18px 20px 0 rgba(0, 0, 0, 0.23921568627450981);
  box-shadow: 12px 18px 20px 0 rgba(0, 0, 0, 0.23921568627450981);
  border-radius: 4px;
  overflow: hidden;
}
.submit {
  width: 366px;
  height: 44px;
  background: #22bf64;
  border-radius: 2px;

  display: flex;

  justify-content: center;

  align-items: center;
  font-size: 14px;
  color: #fff;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  margin-bottom: 40px;
  cursor: pointer;
}
.disabled-box {
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.cashier_box {
  display: flex;
  width: 100%;

  flex: 1;
  background: #f7f7fa;
  position: relative;
  margin: 0 24px 0 0;
  border-radius: 4px;
  overflow-y: auto;
}

.cashier_left .el-form-item {
  margin-bottom: 0;
}

.cashier_left {
  padding: 0 20px 0;

  flex: 1;
  min-width: 310px;
}

.cashier_left .title {
  font-size: 18px;
  color: #000;
  font-weight: 600;
  padding: 20px 0;
}

.cashier_left .detail_box {
  background: #fff;
  border-radius: 4px;
  padding: 0 14px;
  margin-bottom: 20px;
}

.cashier_left .detail_box .forms {
  padding: 10px 0;
  border-top: 1px solid #ebebeb;
}

.cashier_left .detail_box .usercard {
  display: flex;

  align-items: center;
  width: 100%;
  height: 80px;
  cursor: pointer;
}

.cashier_left .detail_box .usercard .info {
  margin-left: 10px;

  display: flex;

  flex-direction: column;

  justify-content: space-around;
}

.cashier_left .detail_box .usercard .info .nickname {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.cashier_left .detail_box .usercard .info .nickname .txt {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 25px;
  line-height: 25px;
}
::v-deep .cashier_left .el-form-item__label {
  text-align: left;
}
.cashier_left .detail_box .usercard .info .nickname .vip_level {
  font-size: 12px;
  padding: 0 5px;
  background: #f7793d;
  height: 20px;
  line-height: 20px;
  color: #fff;
  border-radius: 4px;
}

.cashier_left .detail_box .usercard .info .other_info {
  display: flex;
  font-size: 14px;
  color: #666;
}

.cashier_left .detail_box .usercard .info .other_info .item {
  margin-right: 10px;
}

.cashier_right {
  min-width: 250px;
  border-left: 1px solid #ebebeb;

  display: flex;

  flex-direction: column;
  padding-bottom: 20px;
}

.cashier_right .detail_form {
  flex: 1;
  overflow-y: auto;
}

.cashier_right .detail_form .detail_form_item {
  display: flex;

  justify-content: space-between;
  position: relative;
  margin-bottom: 16px;

  align-items: center;
}

.cashier_right .detail_form .detail_form_item .left {
  font-size: 14px;
  color: #000;
  letter-spacing: 1px;
}

.cashier_right .detail_form .detail_form_item .right {
  font-size: 14px;
  color: #000;

  display: flex;
  margin-right: 40px;
}

.cashier_right .detail_form .detail_form_item .right .btn {
  font-size: 14px;
  color: #1890ff;
  margin-left: 10px;
  cursor: pointer;
  position: absolute;
  right: 0;
}

.cashier_right .detail_form .detail_form_item .right .dfi_button {
  display: flex;

  justify-content: center;

  align-items: center;
  margin-left: 10px;
  width: 98px;
  height: 36px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.8);
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  cursor: pointer;
}

.cashier_right .detail_form .detail_form_item .redfont {
  color: #fa5555;
  font-size: 20px;
}

.cashier_right .detail_form .line {
  width: 100%;
  height: 1px;
  background: #ebebeb;
  margin-top: 4px;
  margin-bottom: 20px;
}

.cashier_right .pay_btn {
  width: 100%;
  line-height: 44px;
  height: 44px;
  background: #22bf64;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  color: #fff;
  letter-spacing: 1px;
  cursor: pointer;
}

.cashier_right .pay_btn:hover {
  opacity: 0.9;
}

.btn1 {
  background: #22bf64;
  color: #fff;
  border: none;
}
.pay_btns .el-button + .el-button {
  margin-left: 0;
}

.pay_btns .el-button {
  margin-right: 10px;
  margin-bottom: 10px;
}

.pay_btns .el-button:disabled {
  border: 1px solid #dcdfe6;
}
</style>
