<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">({{ pendingCartNum }})</el-text>
        </div>
        <div class="number" @click="takeFoodCodeRef.show()">
          <el-text class="t">{{ masterId }}</el-text>
        </div>
        <div class="select_user" @click="quickCashHandle"
          v-if="!global.orderMemberInfo.telephone && !global.tableInfo.id">
          <div class="left">
            <el-icon class="icon">
              <WalletFilled />
            </el-icon>
            <el-text class="t">快捷收银</el-text>
          </div>
          <el-icon class="arrow">
            <ArrowRight />
          </el-icon>
        </div>
        <div class="select_user" v-else @click="clearMember">
          <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">
          <template v-for="(arr, index) in cartList" :key="index">
            <el-divider v-if="arr.placeNum">{{ `第${arr.placeNum}次下单` }}</el-divider>
            <div class="item" :class="{ active: item.active }" :key="item.id" v-for="(item, i) in arr.info"
              @click="selectCartItemHandle(item, index, i)">
              <div class="name_wrap">
                <span>{{ item.name }}</span>
                <div class="price">
                  <span :class="{ dis: item.discountSaleAmount }">￥{{ item.salePrice }}</span>
                  <span v-if="item.discountSaleAmount">
                    ￥{{ formatDecimal(item.salePrice - item.discountSaleAmount, 2, true) }}</span>
                </div>
              </div>
              <div class="sku_list" v-if="item.skuName">
                <div class="tag" v-for="item in item.skuName.split(',')">
                  {{ item }}
                </div>
              </div>
              <div class="num">
                <div class="left">
                  <div class="icon_item zen" v-if="item.isGift == 'true'" @click="giftPackHandle('isGift', item)">
                    <span class="t">赠</span>
                  </div>
                  <div class="icon_item bao" v-if="item.isPack == 'true'" @click="giftPackHandle('isPack', item)">
                    <span class="t">包</span>
                  </div>
                  <div class="icon_item tui" v-if="item.status == 'return'">
                    <span class="t">退</span>
                  </div>
                  <div class="icon_item lin" v-if="item.isTemporary == 1">
                    <span class="t">临</span>
                  </div>
                  <div class="icon_item zhe" v-if="item.discountSaleAmount">
                    <span class="t">折</span>
                  </div>
                  <div class="icon_item chu" v-if="item.isPrint == 0">
                    <span class="t">免厨打印</span>
                  </div>
                </div>
                <el-text class="t">X{{ formatDecimal(item.number, 2, true) }}</el-text>
              </div>
            </div>
          </template>
          <div class="empty">
            <el-empty description="请选择商品" v-if="!cartList.length" />
          </div>
        </div>
        <!-- 购物车操作栏 -->
        <cartOperation :item="cartListActiveItem" @confirm="(res) => addCart(res, 'edit')" @delete="delCartHandle"
          @pending="pendingCart" @clearCart="clearCartHandle" />
      </div>
      <div class="footer">
        <div class="top">
          <div class="left" @click="allSelectedHandle"
            v-if="JSON.parse(shopStore.info.eatModel).some(item => item == 'take-out')">
            <div class="selected">
              <div class="selected_round" v-if="!allSelected"></div>
              <el-icon class="icon" v-else>
                <CircleCheckFilled />
              </el-icon>
            </div>
            <el-text class="t">打包(￥{{ cartInfo.packAmount || 0 }})</el-text>
          </div>
          <div class="left" v-else></div>
          <div class="num-wrap">
            <!-- 共{{ cartInfo.productNum || 0 }}种商品 -->
            共<el-text>{{
              cartInfo.productSum || 0
            }}件</el-text>，￥{{ formatDecimal(cartInfo.totalAmount || 0) }}
          </div>
        </div>
        <div class="btm">
          <el-button icon="Edit" @click="remarkRef.show()"></el-button>
          <div class="button">
            <div class="btn" v-if="shopStore.info.registerType == 'restaurant'">
              <el-button type="primary" style="width: 100%;" :disabled="!cartList.length" v-loading="createOrderLoading"
                @click="createOrderHandle(0)">
                <template v-if="!createOrderLoading">
                  仅下单</template>
                <template v-else>下单中...</template>
              </el-button>
            </div>
            <div class="btn" v-if="shopStore.info.registerType != 'restaurant' || cartList.length">
              <el-button type="primary" style="width: 100%;" :disabled="!cartList.length" v-loading="createOrderLoading"
                @click="createOrderHandle(1)">
                <template v-if="!createOrderLoading">
                  去结算</template>
                <template v-else>下单中...</template>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="shop_manage card">
      <!-- 分类/商品列表 -->
      <goods ref="goodsRef" :masterId="masterId" @success="addCart" @loading="cartLoading = true" />
      <!-- ©银收客 v{{ packageData.version }} -->
    </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"
    :masterId="masterId" :orderInfo="orderInfo" @paySuccess="createCodeAjax(1)" />
  <!-- 快捷收银 -->
  <fastCashier ref="fastCashierRef" type="0" />
  <!-- 挂起订单 -->
  <pendingCartModal ref="pendingCartModalRef" @select="pendingCartHandle" />
  <!-- 检查版本升级 -->
  <updateDialog />
</template>

<script>
export default {
  name: "home",
};
</script>
<script setup>
import { onMounted, ref } from "vue";
import { useRoute } from 'vue-router'
import { useUser } from "@/store/user.js";
import { useGlobal } from '@/store/global.js'

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 useStorage from '@/utils/useStorage'
import { formatDecimal } from '@/utils/index.js'

import {
  createCart,
  queryCart,
  createCode,
  packall,
  delCart,
  cartStatus,
  clearCart,
  createOrder,
} from "@/api/product";

import { orderChoseCount } from '@/api/table.js'

import { queryShopInfo, staffPermission } from '@/api/user.js'

// 商品列表
import goods from "@/views/home/components/goods.vue";
import member from "@/views/member/index.vue";
import { ElMessage } from "element-plus";

import { useShop } from '@/store/shop.js'

const shopStore = useShop()

const global = useGlobal()

const route = useRoute()

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 allSelected = ref(false);

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);

// 取餐码
const masterId = ref("");

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

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

// 生成订单
async function createOrderHandle(t = 0) {
  try {
    createOrderLoading.value = true;
    await staffPermission('yun_xu_xia_dan')
    const res = await createOrder({
      masterId: masterId.value,
      shopId: store.userInfo.shopId,
      remark: remark.value,
      vipUserId: global.orderMemberInfo.id || '',
      tableId: global.tableInfo.qrcode || '',
      type: t,
      seatNum: global.tableInfo.num
    });
    createOrderLoading.value = false;

    // 订单数据
    orderInfo.value = res;

    if (shopStore.info.registerType == 'restaurant' && t == 0) {
      ElMessage.success('下单成功')
      queryCartAjax()
    } else {
      settleAccountRef.value.show();
    }

    // if (global.tableInfo.id && t == 0) {
    //   ElMessage.success('下单成功')
    //   global.setOrderTable({})
    //   createCodeAjax(1)
    // } else {
    //   orderInfo.value = res;
    //   settleAccountRef.value.show();
    // }
  } catch (error) {
    console.log(error);
    createOrderLoading.value = false;
  }
}

// 清空购物车
async function clearCartHandle() {
  try {
    await clearCart({
      shopId: store.userInfo.shopId,
      masterId: masterId.value,
      tableId: global.tableInfo.qrcode || ''
    });
    cartListActiveItem.value = {}
    queryCartAjax();

    // 清除商品所有红点
    goodsRef.value.clearDot()
  } catch (error) {
    console.log(error);
  }
}

// 恢复挂单
async function pendingCartHandle(item) {
  const nItem = { ...item };
  if (cartList.value.length) {
    // 当购物车有数据时，先挂起当前购物车
    await pendingCart({ masterId: masterId.value });
  }
  masterId.value = nItem.masterId;
  await pendingCart(nItem, false);
  await queryCartAjax();
}

// 挂单
async function pendingCart(params, status = true) {
  try {
    cartLoading.value = true;
    await cartStatus({
      shopId: store.userInfo.shopId,
      masterId: params.masterId,
      status: status,
      uuid: params.uuid,
      vipUserId: global.orderMemberInfo.id || '',
      tableId: global.tableInfo.qrcode || '',
      orderId: params.orderId
    });
    if (status && cartList.value.length) {
      await createCodeAjax();
      setTimeout(() => {
        cartLoading.value = false;
      }, 500);
    } else {
      setTimeout(() => {
        cartLoading.value = false;
      }, 500);
    }
  } catch (error) {
    cartLoading.value = false;
    console.log(error);
  }
}

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

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

// 打包全选
const allSelectedHandle = async () => {
  if (!cartList.value.length) return;
  allSelected.value = !allSelected.value;
  await packall({
    shopId: store.userInfo.shopId,
    status: allSelected.value,
    masterId: masterId.value,
  });
  queryCartAjax();
};

// 确认取餐号
async function takeFoodCodeSuccess(code) {
  if (cartList.value.length) {
    await pendingCart({
      masterId: masterId.value,
      uuid: cartList.value[0].uuid,
    });
  }
  masterId.value = `#${code}`;
  queryCartAjax();
}

// 从购物车选择商品
function selectCartItemHandle(row, index, i) {
  cartList.value.map(item => {
    item.info.map(val => {
      if (val.id == row.id) {
        val.active = true
        cartListActiveItem.value = val
      } else {
        val.active = false
      }
    })
  })
}

// 选择完规格开始添加购物车
async function addCart(params = {}, type = "add") {
  console.log(params);

  try {
    cartLoading.value = true;
    if (params.isTemporary) {
      await createCodeAjax()
      cartLoading.value = false;
    } else {
      let skuId = ''
      if (params.skuList && params.skuList.length) {
        skuId = params.skuList[0].id
      } else {
        skuId = type == "add" ? params.id : params.skuId
      }

      const res = await createCart({
        productId: params.productId,
        masterId: masterId.value,
        tableId: global.tableInfo.qrcode || '',
        vipUserId: global.orderMemberInfo.id || '',
        shopId: store.userInfo.shopId,
        // skuId: type == "add" ? params.id : params.skuId,
        skuId: skuId,
        number: params.number || 1,
        isPack: params.isPack || "false",
        isGift: params.isGift || "false",
        cartId: type == "add" ? "" : params.id,
        uuid: params.uuid || store.userInfo.uuid,
        type: type,
        groupProductIdList: params.groupProductIdList || []
      });
      cartLoading.value = false;
      masterId.value = res;
      goodsRef.value.updateData();
      queryCartAjax();
    }
  } catch (error) {
    console.log(error);
    cartLoading.value = false;
  }
}

// 获取购物车商品
async function queryCartAjax() {
  try {
    const res = await queryCart({
      masterId: masterId.value,
      shopId: store.userInfo.shopId,
      tableId: global.tableInfo.qrcode || '',
      vipUserId: global.orderMemberInfo.id || ''
    });

    if (!res.list.length) {
      cartListActiveItem.value = {}
    }

    res.list.map((item, index) => {
      item.info.map((val, i) => {
        if (i == 0 && index == 0) {
          val.active = true
          if (!cartListActiveItem.value.id) {
            cartListActiveItem.value = val
          }
        } else {
          val.active = false
        }
      })
    })

    cartList.value = res.list;

    if (cartListActiveItem.value.id) {
      selectCartItemHandle(cartListActiveItem.value)
    }

    cartInfo.value = res.amount;
    pendingCartNum.value = res.num;
    goodsRef.value.updateData();

    let i = 0;
    res.list.map((item) => {
      if (item.isPack == "true") {
        i++;
      }
    });
    if (i == res.list.length) {
      allSelected.value = true;
    } else {
      allSelected.value = false;
    }
  } catch (error) {
    console.log("获取购物车商品", error);
  }
}

// 增加点餐人数
async function addTableNum() {
  try {
    const res = await orderChoseCount({
      masterId: masterId.value,
      shopId: store.userInfo.shopId,
      tableId: global.tableInfo.qrcode,
      num: global.tableInfo.num
    })
  } catch (error) {
    console.log(error);
  }
}

// 获取取餐码
async function createCodeAjax(type = "0") {
  try {
    // if (!process.env.VITE_DEV_SERVER_URL) {
    //   masterId.value = '#20'
    // } else {
    //   const res = await createCode({
    //     shopId: store.userInfo.shopId
    //   })
    //   masterId.value = res.code
    // }
    if (global.tableInfo.masterId) {
      masterId.value = global.tableInfo.masterId
    } else {
      const res = await createCode({
        shopId: store.userInfo.shopId,
        type: type,
        tableId: global.tableInfo.qrcode || '',
      });
      masterId.value = res.code;
    }

    if (global.tableInfo.num) {
      await addTableNum()
    }
    await queryCartAjax();

    if (type == 1) {
      // 结算订单 清楚商品所有红点
      goodsRef.value.clearDot()
    }
  } catch (error) {
    console.log(error);
  }
}

// 清除本地会员/台桌信息
function clearMember() {
  global.setOrderMember({})
  global.setOrderTable({})
  createCodeAjax()
}

onMounted(() => {
  createCodeAjax()
  shopStore.queryShopInfo()
});
</script>

<style scoped lang="scss">
.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: 60px;
      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 {
      width: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--el-color-info-light-7);
      // padding-left: var(--el-font-size-base);

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

    .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 - 80px);
      overflow-y: auto;
      border-right: 1px solid #ececec;

      .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;
          }
        }

        .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: var(--el-font-size-base);
  border-top: 1px solid #ececec;

  .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;
    }
  }

  .top {
    display: flex;
    justify-content: space-between;
  }

  .btm {
    $h: 70px;
    display: flex;
    height: $h;
    padding-top: var(--el-font-size-base);
    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>
