<template>
  <div class="content">
    <div class="cart_wrap card" v-loading="cartLoading">
      <div class="menu_top">
        <div class="menu" @click="pendingCartModalRef.show()">
          <el-icon class="icon">
            <TakeawayBox />
          </el-icon>
          <el-text class="t">({{ goodsStore.pendingList.length }})</el-text>
        </div>
        <div class="number" @click="SelectVipUserRef.show()">
          <div class="left">
            <el-icon class="icon">
              <CirclePlus />
            </el-icon>
            <template v-if="!goodsStore.vipUserInfo.id">
              <span class="t">选择会员</span>
            </template>
            <template v-else>
              <div class="user_info" @click="goodsStore.vipUserInfo = ''">
                <!-- <el-text class="n">{{ goodsStore.vipUserInfo.nickName }}</el-text> -->
                <el-text class="p">{{ formatPhoneNumber(goodsStore.vipUserInfo.phone) }}</el-text>
              </div>
            </template>
          </div>
          <div class="icon_wrap">
            <div class="u_icon" v-if="!goodsStore.vipUserInfo.id">
              <el-icon class="i">
                <ArrowRight />
              </el-icon>
            </div>
            <div class="u_icon" v-else @click.stop="clearVipUserHandle">
              <el-icon class="i">
                <Close />
              </el-icon>
            </div>
          </div>
        </div>
        <!-- <div class="select_user" @click="quickCashHandle">
          <div class="left">
            <el-icon class="icon" style="color: var(--el-color-warning);">
              <WalletFilled />
            </el-icon>
            <el-text class="t">快捷收银</el-text>
          </div>
        </div> -->
        <!-- <div class="select_user">
          <div class="left">
            <el-icon class="icon">
              <UserFilled />
            </el-icon>
            <div class="t_wrap" :class="{ 'big_text': global.orderMemberInfo.telephone && global.tableInfo.id }">
              <div class="t" v-if="global.orderMemberInfo.telephone">
                会员：{{ global.orderMemberInfo.telephone }}
              </div>
              <div class="t" v-if="global.tableInfo.id">
                台桌：{{ global.tableInfo.name }}
                <span v-if="global.tableInfo.num">/{{ global.tableInfo.num }}人</span>
              </div>
            </div>
          </div>
          <el-icon class="arrow">
            <Close />
          </el-icon>
        </div> -->
      </div>
      <div class="shop_operation">
        <div class="shop_list">
          <div class="table_info" v-if="goodsStore.tableInfo.name">
            <div class="left">
              <span>台桌：{{ goodsStore.tableInfo.name }}</span>
              <span>{{ goodsStore.tableInfo.num || 1 }}人</span>
            </div>
            <div class="close" @click="goodsStore.selectTable()">
              <el-icon class="icon">
                <Close />
              </el-icon>
            </div>
          </div>
          <div>
            <CartItem :item="item" :index="index" v-for="(item, index) in goodsStore.cartList" :key="item.id" />
          </div>
          <div class="empty" v-if="!goodsStore.cartList.length">
            <el-empty description="请选择商品" />
          </div>
          <div class="order_list_wrap">
            <div class="order_title" :class="{ border: !goodsStore.cartList.length }"
              v-if="goodsStore.orderList.length">
              <span class="l">历史下单</span>
              <div class="del" @click="goodsStore.clearHistoryOrder()">
                <el-icon class="icon">
                  <Delete />
                </el-icon>
                <span>清空历史订单</span>
              </div>
            </div>
            <CartItem
              :item="{ product_name: '客座费', number: goodsStore.tableInfo.num, lowPrice: store.shopInfo.tableFee, memberPrice: store.shopInfo.tableFee }"
              v-if="!store.shopInfo.isTableFee && goodsStore.tableInfo.id" />
            <div class="order_list_item" v-for="(arr, index) in goodsStore.orderList" :key="index">
              <div class="order_num">
                <span class="l">{{ `第${arr.orderNum}次下单` }}</span>
                <div class="del" @click="goodsStore.deleteHistoryOrder(arr.orderNum)">
                  <span>删除</span>
                </div>
              </div>
              <CartItem type="order" :border="false" :item="item" :index="index" :i="i" :key="item.id"
                v-for="(item, i) in arr.goods" />
            </div>
          </div>
        </div>
        <!-- 购物车操作栏 -->
        <cartOperation :item="cartListActiveItem" @confirm="" @delete="delCartHandle" @pending="pendingCart"
          @merging="showTableMerging" @showPackage="e => goodsRef.showPackage(e)" />
      </div>
      <div class="footer">
        <div class="top">
          <div class="num-wrap">
            <div class="num_wrap_top">
              <div class="left" @click="allSelectedHandle"
                v-if="store.shopInfo && store.shopInfo.eatModel.includes('take-out')">
                <div class="selected">
                  <div class="selected_round" v-if="!goodsStore.allSelected"></div>
                  <el-icon class="icon" v-else>
                    <CircleCheckFilled />
                  </el-icon>
                </div>
                <el-text class="t">外带</el-text>
              </div>
              <div class="left" v-else></div>
              <div class="right">
                共<el-text>
                  {{ formatDecimal(goodsStore.cartInfo.total || 0, 2, true) }}件
                </el-text>，￥{{ formatDecimal(goodsStore.cartInfo.totalAmount || 0) }}
              </div>
            </div>
            <div class="num_wrap_btm">
              {{ goodsStore.cartInfo.discountInfo }}
            </div>
          </div>
        </div>
        <div class="btm">
          <el-button icon="Edit" @click="remarkRef.show()"></el-button>
          <div class="button">
            <div class="btn" v-if="store.shopInfo.registerType == 'after'">
              <el-button type="primary" style="width: 100%;" :disabled="!goodsStore.cartList.length"
                v-loading="createOrderLoading" @click="createOrderHandle(0)">
                仅下单
              </el-button>
            </div>
            <div class="btn">
              <el-button type="primary" style="width: 100%;"
                :disabled="!goodsStore.cartList.length && !goodsStore.orderList.length" v-loading="createOrderLoading"
                @click="createOrderHandle(1)">
                去结算
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="shop_manage card">
      <!-- 分类/商品列表 -->
      <goods ref="goodsRef" @loading="cartLoading = true" />
      <!-- ©银收客 v{{ packageData.version }} -->
    </div>
    <!-- 无权限遮罩 -->
    <div class="no_permission" v-if="!store.menus.length || (store.menus.length && !store.menus[0].state)">
      无操作权限，请联系管理员(；´д｀)ゞ
    </div>
  </div>
  <!-- 备注 -->
  <remarkModal ref="remarkRef" @success="(e) => (remark = e)" />
  <!-- 修改取餐号 -->
  <takeFoodCode />
  <el-drawer v-model="membershow" :with-header="true" size="90%" title="选择会员">
    <member :membershow="'1'"></member>
  </el-drawer>
  <!-- <takeFoodCode ref="takeFoodCodeRef" title="修改取餐号" placeholder="请输入取餐号" @success="takeFoodCodeSuccess" /> -->
  <!-- 结算订单 -->
  <settleAccount ref="settleAccountRef" :cart="cartList" :amount="cartInfo.totalAmount" :remark="remark"
    :orderInfo="orderInfo" @success="" />
  <!-- 快捷收银 -->
  <fastCashier ref="fastCashierRef" type="0" />
  <!-- 挂起订单 -->
  <pendingCartModal ref="pendingCartModalRef" />
  <!-- 检查版本升级 -->
  <updateDialog />
  <!-- 选择会员 -->
  <SelectVipUser ref="SelectVipUserRef" @success="selectUser" />
</template>

<script setup>
import { ref } from "vue";
import { useGlobal } from '@/store/global.js'
import SelectVipUser from "@/components/selectVipUser.vue";
import updateDialog from '@/components/updateDialog.vue'
import remarkModal from "@/components/remarkModal.vue";
import takeFoodCode from "@/components/takeFoodCode.vue";
import cartOperation from "@/views/home/components/cartOperation.vue";
import settleAccount from "@/views/home/components/settleAccount.vue";
import fastCashier from "@/views/home/components/fastCashier.vue";
import pendingCartModal from "@/views/home/components/pendingCartModal.vue";
import tableMerging from '@/views/home/components/tableMerging.vue'
import CartItem from './components/cartItem.vue'
import { formatDecimal, formatPhoneNumber } from '@/utils/index.js'
import { useGoods } from '@/store/goods.js'
import { staffPermission } from '@/api/user.js'
import { createOrder } from '@/api/order.js'
// 商品列表
import goods from "@/views/home/components/goods.vue";
import member from "@/views/member/index.vue";
import { useUser } from '@/store/user.js'
import { useSocket } from '@/store/socket.js'

const SelectVipUserRef = ref(null)

const goodsStore = useGoods()
const socket = useSocket()
const membershow = ref(false);
const store = useUser();
const remarkRef = ref(null);
const takeFoodCodeRef = ref(null);
const goodsRef = ref(null);
const pendingCartModalRef = ref(null);
const settleAccountRef = ref(null);
const fastCashierRef = ref(null);
const tableMergingRef = ref(null)
const remark = ref("");
const cartListActive = ref(0);
const cartListActiveItem = ref({})
const cartList = ref([]);
const cartInfo = ref({});
const cartLoading = ref(false);

const orderInfo = ref({});
const createOrderLoading = ref(false);

// 选择会员
function selectUser(row) {
  console.log('selectUser===', row);

  goodsStore.vipUserInfo = { ...row }
  if (store.shopInfo.isMemberPrice && row.isVip) {
    goodsStore.showVipPrice = 1
  }
  goodsStore.calcCartInfo()
}

// 挂单量
const pendingCartNum = ref(0);

// 快捷收银
async function quickCashHandle() {
  try {
    await staffPermission('yun_xu_shou_kuan')
    fastCashierRef.value.show()
  } catch (error) {
    console.log(error);
  }
}

// 生成订单 t=0 先下单后结算 t=1直接结算
async function createOrderHandle(t = 0) {
  try {
    if (goodsStore.cartList.length) {
      // console.log(goodsStore.allSelected );
      // console.log(goodsStore.allSelected ? store.shopInfo.eatModel.split(',')[1] : store.shopInfo.eatModel.split(',')[0]);
      
      const data = {
        orderId: goodsStore.orderListInfo.id || '',  // 订单id
        shopId: store.shopInfo.id, // 店铺id
        seatNum: goodsStore.tableInfo.num || 0, // 用餐人数
        packFee: goodsStore.cartInfo.packFee, // 打包费
        originAmount: formatDecimal(+goodsStore.cartInfo.totalAmount, 2, true), // 订单原金额（包含打包费+餐位费） 不含折扣价格
        tableCode: goodsStore.cartList[0].table_code, // 台桌号
        dineMode: goodsStore.allSelected ? store.shopInfo.eatModel.split(',')[1] : store.shopInfo.eatModel.split(',')[0], // 用餐方式
        remark: remark.value, // 备注
        placeNum: (goodsStore.orderListInfo.placeNum || 0) + 1, // 下单次数
        waitCall: 0, // 是否叫号
        userId: goodsStore.vipUserInfo.userId, // 会员用户id
      }

      createOrderLoading.value = true;
      goodsStore.calcCartInfo()
      const res = await createOrder(data)
      // 设置订单信息
      goodsStore.orderListInfo = res

      if (t == 1) {
        // 向其他端发送清空购物车消息
        goodsStore.operateCart({ table_code: goodsStore.orderListInfo.tableCode }, "cleanup");
        settleAccountRef.value.show(t)
      } else {
        goodsStore.clearCart()
      }

      // 清除购物车，更新历史订单
      goodsStore.updateOrderList()
    } else {
      settleAccountRef.value.show(t)
    }
  } catch (error) {
    console.log(error);
  }
  createOrderLoading.value = false;
}

// 恢复挂单
async function pendingCartHandle(item) {
}

// 挂单
async function pendingCart(params, status = true) {
}

// 删除购物车
async function delCartHandle(params) {
  try {
    cartLoading.value = true;
    await delCart({
      cartId: params.id,
    });
    cartListActiveItem.value = {}
    await queryCartAjax();
    cartLoading.value = false;
    cartListActive.value = 0;
  } catch (error) {
    console.log(error);
  }
  cartLoading.value = false;
}

// 赠送打包操作
function giftPackHandle(key, item) {
  item[key] = false;
  addCart(item, "edit");
}

// 打包全选
const allSelectedHandle = async () => {
  if (goodsStore.allSelected) {
    goodsStore.allSelected = 0

    // 取消订单的全部外带
    if (goodsStore.orderList.length) {
      await goodsStore.historyOrderAjax(goodsStore.orderListInfo.tableCode)
      goodsStore.calcCartInfo()
    }
  } else {
    goodsStore.allSelected = 1

    // 回复订单的外带数据
    if (goodsStore.orderList.length) {
      goodsStore.orderList.map(item => {
        item.goods.map(val => {
          if (val.goods_type == 'weight') {
            val.pack_number = 1
          } else {
            val.pack_number = val.number
          }
        })
      })
      goodsStore.calcCartInfo()
    }
  }

  if (goodsStore.cartList.length) {
    goodsStore.operateCart({
      table_code: goodsStore.cartList[0].table_code,
      is_pack: goodsStore.allSelected
    }, 'batch')
  }
};


// 显示转桌/并桌
function showTableMerging() {
  let data = cartList.value.filter(item => item.placeNum)
  tableMergingRef.value.show(data)
}

// 清除会员与会员价 
function clearVipUserHandle() {
  goodsStore.vipUserInfo = ''
  goodsStore.showVipPrice = 0
  goodsStore.calcCartInfo()
}
</script>

<style scoped lang="scss">
.content {
  position: relative;
}

.no_permission {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.order_list_wrap {
  .order_list_item {
    &:not(:last-child) {
      border-bottom: 1px solid #ececec;
    }
  }

  .order_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--el-font-size-base);

    &.border {
      border-top: 1px solid #ececec;
    }

    .l {
      color: var(--el-color-warning);
    }

    .del {
      font-size: 12px;
      display: flex;
      align-items: center;

      .icon {
        margin-right: 4px;
        position: relative;
        top: 1px;
      }
    }
  }

  .order_num {
    font-size: 12px;
    color: #999;
    padding: var(--el-font-size-base) var(--el-font-size-base) 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.cart_wrap {
  flex: 1.5;
  height: 100%;
  display: flex;
  flex-direction: column;

  .menu_top {
    flex-shrink: 0;
    display: flex;
    height: var(--el-component-size-large);

    .menu {
      background-color: var(--el-color-warning);
      color: #fff;
      width: 80px;
      display: flex;
      align-items: center;
      justify-content: center;

      .icon {
        font-size: var(--el-font-size-base);
        position: relative;
        top: 2px;
      }

      .t {
        color: #fff;
        margin-left: 4px;
        font-size: var(--el-font-size-base);
      }
    }


    .number {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: var(--el-color-info-light-7);

      .left {
        display: flex;
        align-items: center;
        margin-left: 14px;
      }

      .icon_wrap {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;

        .u_icon {
          font-size: 16px;
          color: var(--el-color-primary);

          .i {
            display: flex;
          }
        }
      }

      .icon {
        color: var(--el-color-primary);
        font-size: 20px;
      }

      .t {
        font-size: var(--el-font-size-base);
        color: var(--el-color-primary);
        margin-left: 6px;
        position: relative;
        top: -1px;
      }

      .user_info {
        flex: 1;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;

        .n {
          width: 100%;
          flex: 1;
          font-size: 14px;
        }

        .p {
          width: 83px;
          flex: 1;
          color: var(--el-color-primary);
          font-size: 14px;
          margin-left: 6px;
        }
      }
    }

    .select_user {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: var(--el-color-info-light-8);
      padding: 0 10px;

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

        .icon {
          color: var(--el-color-primary);
          font-size: 20px;
        }

        .t_wrap {
          display: flex;
          flex-direction: column;
          align-items: flex-start;

          &.big_text {
            .t {
              font-size: 12px;
            }
          }
        }

        .t {
          font-size: var(--el-font-size-base);
          margin-left: 4px;
        }
      }

      .arrow {
        color: #999;
        font-size: 16px;
        position: relative;
        top: 2px;
      }
    }
  }

  .shop_operation {
    flex: 1;
    display: flex;

    .shop_list {
      flex: 1;
      height: calc(100vh - 40px - 60px - 90px);
      overflow-y: auto;
      border-right: 1px solid #ececec;

      .table_info {
        height: 40px;
        border-bottom: 1px solid #ececec;
        font-size: 14px;
        color: #999;
        display: flex;

        .left {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 var(--el-font-size-base);
        }

        .close {
          width: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          .icon {
            font-size: 16px;
          }

          &::after {
            content: "";
            height: 15px;
            border-left: 1px solid #ddd;
            position: absolute;
            left: 0;
            top: 12.5px;
          }
        }
      }

      .item {
        padding: var(--el-font-size-base);

        &.active {
          background-color: var(--primary-color-hover);
        }

        &:not(:last-child) {
          border-bottom: 1px solid #ececec;
        }

        .name_wrap {
          display: flex;
          justify-content: space-between;
          font-size: var(--el-font-size-base);

          .dis {
            color: #999;
            font-size: 12px;
            text-decoration: line-through;
            margin-right: 4px;
          }
        }

        .sku_list {
          display: flex;
          flex-wrap: wrap;
          padding-top: 10px;

          .tag {
            padding: 2px 6px;
            background-color: var(--el-color-danger);
            color: #fff;
            margin-right: 10px;
            margin-bottom: 10px;
          }
        }

        .grooup_wrap {
          padding-top: 10px;
          font-size: 12px;
          color: #555;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          line-clamp: 2;
        }

        .num {
          padding-top: var(--el-font-size-base);
          display: flex;
          align-items: center;
          justify-content: space-between;

          .left {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            padding-right: 10px;

            .icon_item {
              $size: 20px;
              height: $size;
              padding: 0 6px;
              border-radius: 2px;
              background-color: #e2e2e2;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fff;
              font-size: 10px;

              &.zen {
                background-color: #FFB0B1;
                color: #FF4D4F;
              }

              &.bao {
                background-color: #52C41A;
              }

              &.tui {
                background-color: var(--el-color-danger);
              }

              &.lin {
                background-color: var(--el-color-warning);
              }

              &.zhe {
                background-color: var(--primary-color);
              }

              &.chu {
                background-color: #ffe7ba;
                color: #e69f1c;
              }

              span {
                font-size: inherit;
                color: inherit;
              }
            }
          }

          .t {
            font-size: var(--el-font-size-base);
          }
        }
      }
    }
  }
}

.footer {
  padding: 10px var(--el-font-size-base);
  border-top: 1px solid #ececec;

  .num-wrap {
    height: 40px;
    display: flex;
    flex-direction: column;

    .num_wrap_top {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;

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

        .selected {
          width: 16px;
          height: 16px;
          display: flex;
          align-items: center;
          position: relative;
          top: 1px;

          .icon {
            display: block;
            font-size: var(--el-font-size-base);
            color: var(--primary-color);
          }

          .selected_round {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 1px solid #ddd;
          }
        }

        .t {
          margin-left: 6px;
        }
      }
    }

    .num_wrap_btm {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      font-size: 12px;
      color: #999;
    }
  }

  .btm {
    $h: 70px;
    display: flex;
    height: $h;
    padding-top: 10px;
    gap: var(--el-font-size-base);

    .editor {
      width: $h;
      border: 1px solid #ececec;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #555;
      font-size: var(--el-font-size-base);
    }

    .button {
      flex: 1;
      display: flex;
      gap: var(--el-font-size-base);

      .btn {
        flex: 1;
      }

      .js {
        .t {
          color: #fff;
          font-size: var(--el-font-size-base);
        }
      }
    }
  }
}

.shop_manage {
  flex: 3;
  margin-left: var(--el-font-size-base);
  height: 100%;
}
</style>
