<template>
   <div id="app" class="app-container">
     <el-drawer
       :withHeader="false"
       :visible.sync="isClose"
       direction="ttb"
       size="100%"
       :show-close="false">
       <div class="main">
         <div class="left-side">
           <div class="logo">
             <div class="title">收银台</div>
             <div class="store" v-if="storeInfo">({{ storeInfo.name }})</div>
             <div class="account">您好，{{ accountInfo.realName }}！</div>
           </div>
           <div class="cate">
             <ul class="nav">
               <li class="nav-item" v-for="menu in menuList">
                 <a :class="'nav-link' + (activeMenu == menu.key ? ' active' : '')" href="javascript:;" @click="switchMenu(menu.key)">
                    <img class="cate-logo" :src="menu.logo">
                    <span>{{ menu.name }}</span>
                 </a>
               </li>
             </ul>
             <div class="client">
                <a target="_blank" href="https://www.fuint.cn/download?v=202307024">下载客户端</a>
             </div>
           </div>
         </div>
         <div class="main-side">
            <div class="title">
              <el-form class="search-form" ref="searchForm" :inline="true" :model="searchForm">
                <el-form-item class="form-item" label="" prop="keyword">
                  <el-input v-model="searchForm.keyword" prefix-icon="el-icon-full-screen" class="input-item" placeholder="请输入商品关键字：商品名称、条码、商品ID..." clearable maxlength="100" />
                </el-form-item>
                <el-button type="primary" style="height: 50px;" @click="doQueryGoods()" icon="el-icon-search">查询商品</el-button>
              </el-form>
              <el-tabs class="tab-box" type="card" v-model="navTab" @tab-click="switchTab">
                <el-tab-pane label="全部" name="0"></el-tab-pane>
                <el-tab-pane v-for="tab in tabList" :label="tab.name" :key="tab.id+''" :name="tab.id+''"></el-tab-pane>
              </el-tabs>
            </div>
            <div class="goods-list">
              <div class="goods-item" v-for="goodsInfo in activeGoodsList">
                  <div class="item" @click="clickGoods(goodsInfo)">
                    <img class="image" :src="imagePath + goodsInfo.logo">
                    <div class="goods-name">{{ goodsInfo.name }}</div>
                    <div class="goods-price">￥{{ goodsInfo.price }}</div>
                  </div>
              </div>
              <el-empty v-if="activeGoodsList.length == 0" description="暂无商品..."></el-empty>
            </div>
         </div>
         <div class="right-side">
           <div class="title">
             <div class="logo">
               <img class="avatar" v-if="!memberInfo || !memberInfo.avatar" src="@/assets/images/avatar.png" />
               <img class="avatar" v-else :src="memberInfo.avatar"/>
             </div>
              <div class="member-info">
                  <span class="name" v-if="memberInfo">{{ memberInfo.mobile ? memberInfo.mobile : memberInfo.name }}</span>
                  <span class="none" v-if="!memberInfo">当前为游客</span>
                  <el-button size="mini" class="switch" type="danger" icon="el-icon-refresh" @click="switchMember()">关联会员</el-button>
              </div>
              <div class="full-screen">
                  <screenfull id="screenfull" class="icon" />
              </div>
           </div>
           <div class="carts">
             <el-tabs type="border-card" v-model="activeTab">
               <el-tab-pane class="tab" label="cart" name="cart">
                 <div slot="label" class="cart-tab-label"><i class="el-icon-goods"></i>结算商品</div>
                 <div class="cart-list" v-if="cartList.length > 0">
                     <div class="cart-item" v-for="cartInfo in cartList">
                       <img class="image" :src="cartInfo.logo"/>
                       <div class="info">
                           <div class="name">{{ cartInfo.name }}</div>
                           <div class="spec" v-if="cartInfo.specList && cartInfo.specList.length > 0">
                              <span class="item" v-for="spec in cartInfo.specList" :title="spec.value">{{ spec.value }}</span>
                           </div>
                           <div class="num"><el-input-number class="input" @change="changeBuyNum(cartInfo)" v-model="cartInfo.buyNum" :min="1" :max="1000"/></div>
                       </div>
                       <div class="option">
                           <div class="remove el-icon-delete" @click="removeFromCart(cartInfo.cartId)"></div>
                           <div class="total">￥{{ (cartInfo.price * cartInfo.buyNum).toFixed(2) }}</div>
                       </div>
                     </div>
                 </div>
                 <div class="empty" v-if="cartList.length < 1">
                   <el-empty description="暂无结算商品" :image-size="40"></el-empty>
                 </div>
               </el-tab-pane>
               <el-tab-pane class="tab" label="order" name="order">
                 <div slot="label" class="cart-tab-label" @click="getOrderList()"><i class="el-icon-notebook-2"></i>订单列表</div>
                 <div class="order-list" v-if="orderList.length > 0">
                   <div class="order-item" v-for="orderItem in orderList">
                       <div class="left">
                         <div class="info">单号：<span class="order-sn">{{ orderItem.orderSn }}</span></div>
                         <div class="info">金额：<span class="order-price">￥{{ orderItem.amount }}</span></div>
                         <div class="info" v-if="orderItem.isVisitor == 'N'">会员：<span class="member-info">{{ orderItem.userInfo.name }} {{ orderItem.userInfo.mobile }}</span></div>
                         <div class="info" v-if="orderItem.isVisitor == 'Y'">会员：<span class="member-info">游客</span></div>
                         <div class="info">时间：<span class="order-time">{{ orderItem.createTime }}</span></div>
                       </div>
                       <div class="right">
                          <div class="info">
                            <el-button v-if="orderItem.payStatus== 'B'" type="primary" style="padding:5px;" size="mini">已支付</el-button>
                            <el-button v-if="orderItem.payStatus== 'A'" @click="doPayOrder(orderItem)" type="danger" style="padding:5px;" size="mini">未支付</el-button>
                          </div>
                       </div>
                   </div>
                 </div>
                 <div class="empty" v-if="orderList.length < 1">
                   <el-empty description="暂无订单" :image-size="40"></el-empty>
                 </div>
               </el-tab-pane>
             </el-tabs>
           </div>
           <div class="footer">
             <div class="number">
               <div class="total-num">总件数：<b class="num">{{ cartTotalNum }}</b></div>
               <div class="total-price">总金额：<b class="num">￥{{ cartTotalPrice.toFixed(2) }}</b></div>
             </div>
             <div class="options">
               <div class="cash" @click="hangUp()">挂单 / 取单</div>
               <div class="submit" v-if="cartTotalNum > 0" @click="doSettlement()">提交结算</div>
               <div class="submit" v-if="cartTotalNum == 0" @click="doCashier()">无商品收款</div>
             </div>
           </div>
         </div>
       </div>
     </el-drawer>

     <!-- 规格详情 start-->
     <el-dialog center title="选择商品规格" :visible.sync="openGoodsDialog" class="common-dialog" append-to-body>
       <div class="goods-info">
         <div class="name">{{ goodsInfo.name }}</div>
         <div class="price">￥{{ goodsInfo.price }}</div>
         <div class="num"><el-input-number class="input" v-model="goodsNum" :min="1" :max="1000"/></div>
         <div class="spec-list" v-if="goodsInfo.isSingleSpec == 'N'">
             <div class="spec-item" v-for="specInfo in goodsInfo.specList">
                <div class="spec-name">{{ specInfo.name }}</div>
                <div class="values">
                  <span v-for="value in specInfo.child" :class="goodsSpecIds.includes(value.id) ? 'value active' : 'value'" @click="selectGoodsSpec(value.id)">{{ value.name }}</span>
                </div>
             </div>
         </div>
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="addToCart()">加入结算</el-button>
         <el-button @click="closeGoodsDialog()">取 消</el-button>
       </div>
     </el-dialog>
     <!-- 规格详情 end-->

     <!--关联会员对话框 start-->
     <switchMemberDialog :show-dialog="openSwitchMemberDialog" @doSwitchMember="doSwitchMember"/>
     <!--关联会员对话框 end-->

     <!--结算对话框 start-->
     <settlementDialog :show-dialog="openSettlementDialog" :memberInfo="memberInfo" :totalPrice="cartTotalPrice" :orderInfo="orderInfo" :couponList="couponList" @submit="submitSettlement" @switchMember="switchMember" @closeDialog="closeDialog"/>
     <!--结算对话框 end-->

     <!--扫码付款对话框 start-->
     <scanPayCodeDialog ref="scanPayCodeDialog" :show-dialog="openScanPayCodeDialog" :memberInfo="memberInfo" :orderId="orderId" :payType="payType" :payAmount="payAmount" @closeDialog="closeDialog" @showPayResult="showPayResult"/>
     <!--扫码付款对话框 end-->

     <!--支付结果对话框 start-->
     <payResultDialog :show-dialog="openPayResultDialog" :payResult="payResult" @showOrderPrint="showOrderPrint" @closeDialog="closeDialog"/>
     <!--支付结果对话框 end-->

     <!--打印订单对话框 start-->
     <orderPrintDialog :show-dialog="openOrderPrintDialog" :storeInfo="storeInfo" :orderInfo="orderInfo" @closeDialog="closeDialog"/>
     <!--打印订单对话框 end-->

     <!--挂单对话框 start-->
     <hangUpDialog :show-dialog="openHangUpDialog" :memberInfo="memberInfo" :cartList="cartList" @getHangNo="getHangNo" @doHangUp="doHangUp" @closeDialog="closeDialog"/>
     <!--挂单对话框 end-->

     <!-- 无商品收款组件 start-->
     <noGoodsCashier :show-dialog="openNoGoodsCashierDialog" @submit="submitCashier" @closeDialog="closeDialog"></noGoodsCashier>
     <!-- 无商品收款组件 end-->
   </div>
</template>

<script>
import { init, getGoodsInfo, searchGoods, getCartList, saveCart, removeFromCart, submitSettlement, getOrderList, doPay, getMemberInfoById } from "@/api/cashier";
import { getOrderInfo } from "@/api/order";
import { getUserId, setUserId, removeUserId } from '@/utils/auth';
import switchMemberDialog from "./components/switchMemberDialog";
import settlementDialog from "./components/settlementDialog";
import scanPayCodeDialog from "./components/scanPayCodeDialog";
import payResultDialog from "./components/payResultDialog";
import orderPrintDialog from "./components/orderPrintDialog";
import hangUpDialog from "./components/hangUpDialog";
import Screenfull from '@/components/Screenfull';
import noGoodsCashier from "./components/noGoodsCashier";
export default {
  name: "Cashier",
  components: {
    switchMemberDialog,
    settlementDialog,
    scanPayCodeDialog,
    payResultDialog,
    orderPrintDialog,
    hangUpDialog,
    Screenfull,
    noGoodsCashier
  },
  data() {
    return {
      // 右侧tab
      activeTab: 'cart',
      // 导航tab
      navTab: '0',
      isClose: true,
      openGoodsDialog: false,
      openSwitchMemberDialog: false,
      openSettlementDialog: false,
      openScanPayCodeDialog: false,
      openPayResultDialog: false,
      openOrderPrintDialog: false,
      openHangUpDialog: false,
      openNoGoodsCashierDialog: false,
      searchForm: { keyword: '' },
      payResult: { isSuccess: false, payAmount: 0, orderId: 0 },
      goodsForm: {},
      // 左侧菜单
      menuList: [{ name: '商品列表', key: 'goods', logo: require('../../assets/images/goods.png') },
                 { name: '订单列表', key: 'order', logo: require('../../assets/images/order.png') },
                 { name: '卡券核销', key: 'coupon', logo: require('../../assets/images/life.png') },
                 { name: '会员列表', key: 'member', logo: require('../../assets/images/hot.png') }],
      // 激活菜单
      activeMenu: 'goods',
      // 导航栏tab
      tabList: [],
      // 当前操作会员
      memberInfo: null,
      // 当前登录用户
      accountInfo: {},
      // 当前门店信息
      storeInfo: {},
      // 当前操作商品
      goodsInfo: { num : 1, specList : [], skuList: [] },
      // 当前选择属性
      goodsSpecIds: [],
      // 商品数量
      goodsNum: 1,
      // 当前分类
      cateId: 0,
      // 图片目录
      imagePath: '',
      // 商品分类列表
      cateList: [],
      // 商品列表
      goodsList: [],
      // 当前分类商品列表
      activeGoodsList: [],
      // 购物车列表
      cartList: [],
      // 订单列表
      orderList: [],
      // 总金额
      cartTotalPrice: 0,
      // 购物车备注
      cartRemark: '',
      // 总件数
      cartTotalNum: 0,
      // 支付金额
      payAmount: 0,
      // 当前订单号
      orderId: 0,
      // 支付方式
      payType: '',
      // 当前订单
      orderInfo: {},
      // 可用卡券列表
      couponList: [],
      // 挂单序号
      hangNo: '',
      isSearch: true
    };
  },
  mounted() {
    const app = this;
    // 监听扫码枪按键
    let code = '';
    let lastTime, nextTime; // 上次时间、最新时间
    let lastCode, nextCode; // 上次按键、最新按键
    document.onkeypress = (e) => {
      // 获取按键
      if (window.event) { // IE
          nextCode = e.keyCode;
      } else if (e.which) { // Netscape/Firefox/Opera
          nextCode = e.which;
      }
      // 如果触发了回车事件(扫码结束时间)
      if (nextCode === 13) {
          if (code.length < 3) {
              return;
          }
          if (app.openScanPayCodeDialog == true) {
              app.$refs.scanPayCodeDialog.submit(code);
              return false;
          }
          if (app.openSwitchMemberDialog == true) {
              return false;
          }
          if (app.openSettlementDialog == true) {
              app.$alert("请点击确定收款！");
              return false;
          }
          app.addToCart(code);
          code = '';
          lastCode = '';
          lastTime = '';
          return true;
      }
      nextTime = new Date().getTime(); // 记录最新时间
      if (!lastTime && !lastCode) { // 如果上次时间和上次按键为空
          code += e.key; // 执行叠加操作
      }
      // 如果有上次时间及上次按键
      if (lastCode && lastTime && nextTime - lastTime > 30) {
          code = e.key;
      } else if (lastCode && lastTime) {
          code += e.key;
      }
      lastCode = nextCode;
      lastTime = nextTime;
    }
  },
  created() {
    // 隐藏各路菜单
    this.$store.state.app.sidebar.hide = true
    this.initCashier();
    this.getCartList();
  },
  methods: {
    // 初始化数据
    initCashier() {
      const app = this;
      const userId = getUserId() > 0 ? getUserId() : 0;
      init(userId).then( response => {
          app.cateList = response.data.cateList;
          app.tabList = response.data.cateList;
          app.goodsList = response.data.goodsList;
          app.activeGoodsList = this.goodsList;
          app.imagePath = response.data.imagePath;
          app.storeInfo = response.data.storeInfo;
          app.accountInfo = response.data.accountInfo;
          app.memberInfo = response.data.memberInfo;
          app.loading = false;
          app.hangNo = '';
        }
      ).catch(() => {
        // empty
      });
    },
    // 菜单切换
    switchMenu(menuKey) {
      this.activeMenu = menuKey;
      let url = '';
      if (menuKey == 'coupon') {
          url = '/coupon/confirm/index';
      }
      if (menuKey == 'order') {
          url = '/order/index';
      }
      if (menuKey == 'member') {
          url = '/member/index';
      }
      if (url) {
          const routeLink = this.$router.resolve({ path: url });
          window.open(routeLink.href, '_blank');
      }
    },
    // tab切换
    switchTab(el) {
      this.navTab = el.name;
      this.filterCate(this.navTab);
    },
    // 过滤分类商品
    filterCate(cateId) {
       this.cateId = cateId;
       const dataList = [];
       this.goodsList.forEach(function(goods) {
          if (cateId == goods.cateId && cateId > 0) {
              dataList.push(goods);
          } else if (cateId == 0) {
              dataList.push(goods);
          }
       })
       this.activeGoodsList = dataList;
    },
    // 购物车列表
    getCartList() {
      const app = this;
      if (app.loading) {
          return false;
      }
      app.loading = true;
      app.cartList = [];
      getCartList({ userId: getUserId(), hangNo: app.hangNo }).then( response => {
           const cartList = response.data.list;
           if (cartList && cartList.length > 0) {
               cartList.forEach(function(item) {
                  const specList = [];
                  if (item.specList && item.specList.length > 0) {
                      item.specList.forEach(function (spec) {
                        specList.push({name: spec.specName, value: spec.specValue});
                      })
                  }
                  const cartInfo = { cartId: item.id, skuId: item.skuId, goodsId: item.goodsInfo.id, name: item.goodsInfo.name, logo: item.goodsInfo.logo, price: item.goodsInfo.price, buyNum: item.num, specList: specList };
                  app.cartList.push(cartInfo);
               })
           }
           app.cartTotalPrice = response.data.totalPrice;
           app.cartTotalNum = response.data.totalNum;
           app.couponList = response.data.couponList;
           app.loading = false;
      }).catch(() => {
          // empty
      });
    },
    // 查询商品
    doQueryGoods() {
      const app = this;
      if (!app.searchForm.keyword) {
          app.activeGoodsList = app.goodsList;
          return false;
      }
      app.loading = true;
      searchGoods({ keyword: app.searchForm.keyword }).then( response => {
         app.loading = false;
         if (response.data && response.data.length > 0) {
             app.activeGoodsList = response.data;
         } else {
             app.$modal.alert("抱歉，未查询到商品信息！");
             return false;
         }
      }).catch(() => {
         // empty
      });
    },
    // 点击商品规格弹框
    clickGoods(goodsInfo) {
      const app = this;
      if (app.loading) {
          return false;
      }
      app.loading = true;
      getGoodsInfo(goodsInfo.id).then( response => {
          app.goodsInfo = response.data.goodsInfo;
          app.goodsInfo.specList = response.data.specList;
          app.goodsInfo.skuList = response.data.skuList;
          app.goodsNum = 1;
          app.loading = false;
          if (app.goodsInfo.isSingleSpec == 'N') {
              app.openGoodsDialog = true;
          } else {
              app.addToCart(false);
          }
      }).catch(() => {
          // empty
      });
    },
    // 关闭规格弹框
    closeGoodsDialog() {
       this.openGoodsDialog = false;
    },
    // 选择商品属性
    selectGoodsSpec(specId) {
       const app = this;
       let specIds = [];
       app.goodsInfo.specList.forEach(function() {
          specIds.push(0);
       })
       app.goodsInfo.specList.forEach(function(specItem, index) {
          const children = [];
          specItem.child.forEach(function(child) {
              children.push(child.id)
          })
          if (children.includes(specId)) {
              specIds[index] = specId
          } else {
              specIds[index] = app.goodsSpecIds[index] == undefined ? 0 : app.goodsSpecIds[index];
          }
       })
       app.goodsSpecIds = specIds;
    },
    // 加入购物车
    addToCart(skuNo) {
      const app = this;
      app.isSearch = false;
      // 扫码枪扫描商品条码，直接加入购物车
      if (skuNo) {
          searchGoods({ keyword: skuNo }).then( response => {
            app.loading = false;
            if (response.data && response.data.length == 1) {
                app.clickGoods(response.data[0]);
                app.isSearch = true;
            } else {
                app.$modal.alert("抱歉，未查询到商品信息！");
                return false;
            }
          }).catch(() => {
             //empty
          });
      }
      if (app.loading || app.isSearch || !app.goodsInfo.id || app.goodsNum <= 0) {
          return false;
      }
      const specIds = app.goodsSpecIds.join('-');
      let skuId = 0;
      app.goodsInfo.skuList.forEach(function(skuInfo) {
         if (skuInfo.specIds == specIds) {
             skuId = skuInfo.id;
         }
      })
      if (app.goodsInfo.isSingleSpec == 'N' && skuId <= 0) {
          app.$modal.alert("请先确认商品规格！");
          return false;
      }
      // 添加到购物车
      const cartInfo = { goodsId: app.goodsInfo.id,
                         name: app.goodsInfo.name,
                         logo: app.goodsInfo.logo,
                         price: app.goodsInfo.price,
                         skuId: skuId,
                         userId: getUserId(),
                         hangNo: app.hangNo,
                         buyNum: app.goodsNum };
      app.loading = true;
      saveCart(cartInfo).then(response => {
          if (response.data.cartId) {
              app.loading = false;
              app.activeTab = 'cart';
              app.getCartList();
              app.openGoodsDialog = false;
              app.goodsSpecIds = [];
              app.goodsNum = 0;
          }
      }).catch(() => {
         // empty
      });
    },
    // 删除购物车
    removeFromCart(cartId) {
      const app = this;
      removeFromCart({ cartId: [cartId], userId: getUserId() }).then(response => {
        if (response.data) {
            app.getCartList();
        }
      }).catch(() => {
         // empty
      });
    },
    // 购物车数量变化
    changeBuyNum(cartInfo) {
      const app = this;
      const param = { goodsId: cartInfo.goodsId,
                      skuId: cartInfo.skuId,
                      cartId: cartInfo.cartId,
                      action: '=',
                      userId: app.memberInfo ? app.memberInfo.id : null,
                      hangNo: app.hangNo,
                      buyNum: cartInfo.buyNum };
      saveCart(param).then(response => {
        if (response.data.cartId) {
            app.getCartList();
            app.openGoodsDialog = false;
            app.goodsSpecIds = [];
        }
      }).catch(() => {
         // empty
      });
    },
    // 弹出关联会员
    switchMember() {
       this.openSwitchMemberDialog = true;
    },
    // 确认关联会员
    doSwitchMember(memberInfo) {
       this.openSwitchMemberDialog = false;
       if (memberInfo != 0) {
           this.memberInfo = memberInfo;
           if (memberInfo) {
               setUserId(memberInfo.id);
           } else {
               removeUserId();
           }
           this.getCartList();
       }
    },
    // 无商品结算
    doCashier() {
      this.orderInfo = {};
      this.openNoGoodsCashierDialog = true;
    },
    submitCashier(param) {
      this.orderInfo = {};
      this.openSettlementDialog = true;
      this.cartTotalPrice = parseFloat(param.amount);
      this.cartRemark = param.remark;
      this.openNoGoodsCashierDialog = false;
    },
    // 发起结算
    doSettlement() {
       if (this.cartList.length < 1) {
           this.$modal.alert("请先添加结算商品！");
           return false;
       }
       this.getCartList();
       this.orderInfo = {};
       this.openSettlementDialog = true;
    },
    // 确认结算
    submitSettlement(param) {
      const app = this;
      // 已生成的订单支付
      if (app.orderInfo.id) {
          // 微信、支付宝支付
          if (param.payType == 'MICROPAY' || param.payType == 'ALISCAN') {
              app.payAmount = app.orderInfo.payAmount;
              app.orderId = app.orderInfo.id;
              app.openScanPayCodeDialog = true;
              app.openSettlementDialog = false;
              app.payType = param.payType;
          }
          // 现金、余额支付
          if (param.payType == 'CASH' || param.payType == 'BALANCE') {
              doPay({ orderId: app.orderId, payType: param.payType, cashierPayAmount: param.totalPrice, cashierDiscountAmount: param.discountPrice, userId: getUserId() }).then( response => {
                  app.openSettlementDialog = false;
                  if (response.data.orderInfo.payStatus == 'B') {
                      app.showPayResult({ isSuccess: true, payAmount: response.data.orderInfo.payAmount, orderId: response.data.orderInfo.id });
                  } else {
                      app.$modal.alert(response.data.message ? response.data.message : "抱歉，订单操作异常！");
                  }
              }).catch(() => {
                // empty
              });
          }
          return false;
      }
      // 购物车提交结算
      let cartIds = [];
      app.cartList.forEach(function(cart){
          cartIds.push(cart.cartId);
      })
      const data = { cashierPayAmount: param.totalPrice,
                     cashierDiscountAmount: param.discountPrice,
                     cartIds: cartIds.join(','),
                     orderMode: 'oneself',
                     payType: param.payType,
                     remark: param.remark,
                     type: app.cartList.length > 0 ? 'goods' : 'payment',
                     couponId: param.userCouponId ? param.userCouponId : 0,
                     userId: getUserId() };
      submitSettlement(data).then( response => {
          app.initCashier();
          app.getCartList();
          // 微信支付，弹出扫码框
          if (response.data.orderInfo.payType == 'MICROPAY' || param.payType == 'ALISCAN') {
             app.payAmount = response.data.orderInfo.payAmount;
             app.orderId = response.data.orderInfo.id;
             app.openScanPayCodeDialog = true;
             app.openSettlementDialog = false;
             app.payType = param.payType;
             return false;
          }
          // 现金、余额支付
          if (response.data.orderInfo.payType == 'CASH' || response.data.orderInfo.payType == 'BALANCE') {
              app.openSettlementDialog = false;
              if (response.data.orderInfo.payStatus == 'B') {
                  app.showPayResult({ isSuccess: true, payAmount: response.data.orderInfo.payAmount, orderId: response.data.orderInfo.id });
              } else {
                  app.$modal.alert(response.data.message);
              }
              return false;
          }
      }).catch(() => {
         // empty
      });
    },
    // 点击挂单/取单
    hangUp() {
       this.openHangUpDialog = true;
    },
    // 取单
    getHangNo(data) {
       this.openHangUpDialog = false;
       this.hangNo = data.hangNo;
       this.getCartList();
       // 关联会员信息
       if (data.hangNo && data.hangNo.length > 0 ) {
           this.doSwitchMember(data.memberInfo);
       }
    },
    // 执行挂单
    doHangUp() {
      this.hangNo = '';
      this.getCartList();
      removeUserId();
      this.memberInfo = null;
    },
    // 关闭对话框
    closeDialog(dialog) {
       if (dialog == 'settlementDialog') {
           this.openSettlementDialog = false;
       } else if (dialog == 'switchMemberDialog') {
           this.openSwitchMemberDialog = false;
       } else if (dialog == 'scanPayCodeDialog') {
           this.openScanPayCodeDialog = false;
       } else if (dialog == 'payResultDialog') {
           this.openPayResultDialog = false;
           this.getOrderList();
       } else if (dialog == 'printOrder') {
           this.openOrderPrintDialog = false;
           this.getOrderList();
       } else if (dialog == 'hangUpDialog') {
           this.openHangUpDialog = false;
       } else if (dialog == 'openNoGoodsCashierDialog') {
           this.openNoGoodsCashierDialog = false;
       }
    },
    // 展示支付结果
    showPayResult(payResult) {
       this.payResult = payResult;
       this.openPayResultDialog = true;
    },
    // 订单列表
    getOrderList() {
      const app = this;
      if (app.loading) {
          return false;
      }
      app.loading = true;
      getOrderList({ page: 1, pageSize: 20 }).then(response => {
          app.loading = false;
          if (response.data) {
              app.orderList = response.data.content;
          }
      })
    },
    // 订单支付
    doPayOrder(orderInfo) {
       const app = this;
       app.payAmount = orderInfo.amount;
       app.orderId = orderInfo.id;
       app.orderInfo = orderInfo;
       let userId = 0
       if (orderInfo.isVisitor !== "Y") {
           userId = app.orderInfo.userInfo.id;
       }
       getMemberInfoById(userId).then(response => {
          if (response.data.memberInfo) {
              app.memberInfo = response.data.memberInfo;
          } else {
              app.memberInfo = null;
          }
       }).catch(() => {
          // empty
       });
       app.openSettlementDialog = true;
    },
    // 打印小票
    showOrderPrint(orderId) {
      const app = this;
      getOrderInfo(orderId).then(response => {
        if (response.data.orderInfo) {
            app.orderInfo = response.data.orderInfo;
            app.openOrderPrintDialog = true;
        }
      }).catch(() => {
         // empty
      });
    }
  }
};
</script>

<style lang="scss" scoped>
   .main {
     height: 100%;
     width: 100%;
     display: flex;
     flex-direction: row;
     .left-side {
        width: 160px;
        height: 100%;
        background: #00acac;
        border-right: #888888 solid 2px;
        position: absolute;
        left: 0;
        top: 0;
        padding: 0px;
        color: #FFFFFF;
        overflow-x: hidden;
        overflow-y: auto;
        display: block;
        text-align: center;
       .client {
         margin-top: 20px;
         text-align: center;
         font-size: 12px;
         color: #ffffff;
         font-weight: bold;
       }
       .logo {
         height: 70px;
         padding: 20px 12px 20px 12px;
         font-weight: bold;
         .store {
           font-size: 12px;
         }
         .account {
           font-size: 12px;
           border: solid 2px #FFFFFF;
           background: #6c757d;
           cursor: pointer;
           margin-top: 6px;
           padding: 2px;
           border-radius: 2px;
         }
       }
       .cate {
         text-align: center;
         margin-left: 14px;
         margin-top: 40px;
         .nav {
            list-style: none;
            display: block;
            margin: 0px;
            padding: 5px;
            text-align: center;
            .nav-item {
                margin-top: 10px;
                font-size: 14px;
                width: 120px;
                text-align: center;
               .nav-link {
                 position: relative;
                 padding: .5356875rem .9375rem;
                 white-space: nowrap;
                 text-align: center;
                 font-weight: 600;
                 color: #666666;
                 display: flex;
                 align-items: center;
                 flex-direction: column;
                 justify-content: center;
                 border-radius: 5px;
                 transition: color .2s linear;
                 background: #f5f5f5;
                 border: 2px solid #FFFFFF;
                 .cate-logo {
                   display: block;
                   width: 50px;
                   height: 50px;
                 }
               }
               .active {
                 font-weight: bold;
                 border: 4px #ff5b57 solid;
               }
            }
         }
       }
     }
     .right-side {
        width: 310px;
        height: 100%;
        background: #FFFFFF;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0px;
        border-left: #cccccc solid 1px;
        .title {
          height: 70px;
          width: 100%;
          background: #6c757d;
          border-bottom: #CCCCCC 2px solid;
          color: #FFFFFF;
          padding-top: 20px;
          padding-left: 1px;
          display: block;
          position: fixed;
          top: 0;
          z-index: 999;
          clear: both;
          .logo {
            float: left;
            font-size: 24px;
            .avatar {
               width: 30px;
               height: 30px;
               border-radius: 40px;
               margin: 5px 0px 5px 5px;
            }
          }
          .member-info {
            float: left;
            margin-top: 5px;
            .name {
              margin-left: 2px;
              margin-right: 3px;
            }
            .none {
               margin-left: 2px;
               margin-right: 5px;
               font-size: 13px;
            }
            .switch {
              padding: 8px 8px 8px 4px;
            }
          }
          .full-screen {
             background: #00acac;
             border: solid 1px #ffffff;
             width: 30px;
             height: 30px;
             line-height: 30px;
             text-align: center;
             margin-left: 270px;
             overflow: hidden;
             margin-top: 5px;
             cursor: pointer;
          }
        }
       .carts {
          display: block;
          width: 100%;
          color: #666666;
          margin-bottom: 120px;
          margin-top: 70px;
          padding: 0px;
          .cart-tab-label {
             width: 105px;
             text-align: center;
          }
          .tab {
            width: 50%;
            .cart-list {
              margin-bottom: 60px;
              .cart-item {
                border-bottom: 1px dashed #cccccc;
                height: 110px;
                width: 310px;
                padding-top: 5px;
                padding-right: 10px;
                .image {
                   width: 50px;
                   height: 50px;
                   margin-left: 5px;
                   border-radius: 5px;
                   border: solid 1px #ccc;
                   float: left;
                   margin-top: 20px;
                }
                .info {
                   float: left;
                   padding-left: 5px;
                   margin-top: 8px;
                   .name {
                     font-weight: bold;
                     font-size: 12px;
                     width: 150px;
                     overflow: hidden;
                     display: -webkit-box;
                     -webkit-box-orient: vertical;
                     -webkit-line-clamp: 2;
                   }
                   .spec {
                     font-size: 12px;
                     width: 160px;
                     height: 20px;
                     .item {
                        margin-right: 2px;
                        border-radius: 10px;
                        padding: 0px 2px 0px 2px;
                        text-align: center;
                        max-width: 50px;
                        height: 20px;
                        line-height: 20px;
                        float: left;
                        display: block;
                        overflow: hidden;
                        color: #606266;
                        cursor: pointer;
                        background: #cceeee;
                        padding: 0px 3px 0px 3px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                     }
                   }
                   .input {
                     width: 120px;
                     margin-top: 2px;
                   }
                }
                .option {
                   float: right;
                   text-align: right;
                   margin-right: 10px;
                   .remove {
                      font-size: 12px;
                      cursor: pointer;
                   }
                   .total {
                     margin-top: 10px;
                     font-size: 16px;
                     color: #ff5b57;
                   }
                }
              }
            }
            .order-list {
               margin-bottom: 60px;
               .order-item {
                 width: 310px;
                 height: 100px;
                 padding: 10px;
                 border-bottom: 1px dashed #cccccc;
                 margin-bottom: 5px;
                 .left {
                    float: left;
                    font-size: 14px;
                    .info {
                      .order-price {
                        font-weight: normal;
                        color: #ff5b57;
                      }
                    }
                 }
                 .right {
                   float: right;
                   margin-top: 30px;
                   margin-right: 10px;
                 }
               }
            }
            .empty {
              width: 300px;
            }
          }
       }
       .footer {
          position: fixed;
          z-index: 999;
          background: #6c757d;
          bottom: 0;
          height: 120px;
          width: 100%;
          padding-top: 5px;
          padding-right: 15px;
          color: #FFFFFF;
          display: block;
          width: 310px;
          border-top: solid 1px #cccccc;
          .number {
            float: right;
            margin: 5px;
            .total-price {
               margin-top: 3px;
               .num {
                 color: #ff5b57;
                 font-size: 20px;
               }
            }
          }
          .options {
             text-align: center;
             cursor: pointer;
             float: right;
             color: #FFFFFF;
            .cash {
              float: left;
              height: 50px;
              border: solid 1px #00acac;
              line-height: 50px;
              width: 135px;
              border-radius: 5px;
              background: #00acac;
              font-weight: bold;
            }
            .submit {
               float: left;
               height: 50px;
               border: solid 1px #ff5b57;
               margin-left: 10px;
               line-height: 50px;
               width: 135px;
               border-radius: 5px;
               background: #ff5b57;
               font-weight: bold;
            }
          }
       }
     }
     .main-side {
       height: 100%;
       width: 100%;
       min-width: 760px;
       margin-left: 160px;
       margin-right: 320px;
       overflow: auto;
       display: block;
       background: #FFFFFF;
       margin-bottom: 10px;
       .title {
         position: fixed;
         height: 106px;
         width: calc(100% - 465px);
         min-width: 700px;
         background: #ffffff;
         padding: 5px;
         border-top: #CCCCCC 2px solid;
         color: #FFFFFF;
         top: 0;
         .search-form {
            height: 50px;
            .input-item {
              min-width: 456px;
            }
         }
         .tab-box {
            margin-top: 3px;
            width: 100%;
         }
       }
       .goods-list {
         height: 100%;
         width: 100%;
         margin-top: 108px;
         margin-left: 2px;
         margin-bottom: 10px;
         .goods-item {
           width: 33%;
           min-height: 320px;
           min-width: 240px;
           padding: 3px;
           float: left;
           background: #ffffff;
           text-align: left;
           cursor: pointer;
           .item {
              background: #FFFFFF;
              padding: 10px;
              border-radius: 5px;
              margin: 0px;
              border: solid 1px #cccccc;
             .goods-name {
               margin-top: 10px;
               font-size: 18px;
               color: #666666;
               height: 30px;
               overflow: hidden;
               white-space: nowrap;
               text-overflow: ellipsis;
             }
             .goods-price {
               color: #ff5b57;
               font-size: 18px;
               font-weight: bold;
             }
             .image {
               width: 100%;
               height: 220px;
               border-radius: 3px;
             }
           }
         }
       }
     }
   }
   .goods-info {
     border: solid 1px #ccc;
     padding: 30px;
     border-radius: 5px;
     .name {
        height: 40px;
        font-weight: bold;
        font-size: 20px;
     }
     .price {
       height: 40px;
       color: #ff5b57;
       font-size: 16px;
     }
     .spec-list {
        border: solid 1px #ccc;
        padding: 20px;
        margin-top: 10px;
        border-radius: 6px;
        .spec-item {
           margin-bottom: 20px;
          .spec-name {
             font-weight: bold;
             font-size: 16px;
          }
          .values {
             display: block;
             padding-top: 10px;
             margin-left: 0px;
             padding-left: 0px;
             font-size: 12px;
             .value {
               border: solid 1px #cceeee;
               margin-right: 10px;
               padding: 8px 15px 5px 15px;
               cursor: pointer;
               border-radius: 4px;
               background: rgba(0, 172, 172, 0.1);
               color: #666666;
             }
             .active {
               border: solid 1px #ff5891;
               background: #ff5b57;
               color: #FFFFFF;
             }
          }
        }
     }
   }
</style>
<style scoped lang="scss">
  .input-item >>> .el-input__inner {
    border: #00acac solid 2px;
    line-height: 50px;
    height: 50px;
  }
  .form-item >>> .el-form-item__label {
    line-height: 50px;
    height: 50px;
  }
  .el-tabs--border-card {
    box-shadow: none;
    border: none;
  }
  ::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 0px;
  }
</style>