<template>
  <view class="u-font-28">
    <up-sticky offsetTop="0" customNavHeight="0">
      <view class="navbar">
        <view class="u-flex" style="margin-left: 100rpx" @click="back">
          <up-icon name="arrow-left" size="32rpx" color="#333"></up-icon>
          <text class="u-m-l-16">返回</text>
        </view>
        <text class="font-700 u-font-40 color-333"
          >{{ returnAreaName }} {{ returnTableName }}</text
        >
        <view class="u-flex navbar-right" style="gap: 134rpx">
          <up-icon
            name="scan"
            size="64rpx"
            color="#999"
            @click="saomaShangCai"
          ></up-icon>
        </view>
      </view>
    </up-sticky>
    <view class="container">
      <view class="goods-list">
        <goodsList v-model:selCart="selCart"></goodsList>
        <view style="height: 200rpx"></view>
        <view class="bottom u-flex u-row-between">
          <view>
            <text>合计：</text>
            <text class="color-red u-font-40"
              >¥{{ cartStore.orderCostSummary.finalPayAmount }}</text
            >
          </view>
          <view class="u-flex" style="gap: 94rpx">
            <view class="btn" @click="back">继续加菜</view>
            <view class="btn success" @click="toPay">结算</view>
          </view>
        </view>
      </view>
      <view class="controls">
        <controls @btnClick="btnClick" v-model:selCart="selCart"></controls>
      </view>
    </view>

    <model-discount
      title="菜品减免"
      :ref="setModel"
      name="discount"
      :price="modelData.data.salePrice"
      @confirm="discountconfirm"
    ></model-discount>

    <!-- 转桌 -->
    <Modal
      v-model="modalData.show"
      :width="modalData.key != 'editPersonCount' ? '800rpx' : ''"
      :title="modalData.title"
      confirmText="确定"
      @confirm="modalConfirm"
    >
      <template v-if="modalData.key == 'editPersonCount'">
        <view class="u-p-40 u-font-32 color-333 u-flex u-flex-x-center">
          <up-number-box
            v-model="modalData.form.personCount"
            integer
            :min="0"
            :max="100"
            inputWidth="200"
          ></up-number-box>
        </view>
      </template>
      <template v-if="modalData.key == 'btnClick'">
        <view class="u-p-40 u-font-32 color-333">
          <view class="u-flex">
            <text class="font-bold u-m-r-52" style="min-width: 128rpx"
              >转桌到</text
            >
            <view class="u-flex-1">
              <chooseTables
                v-model="modalData.form.targetTableCode"
              ></chooseTables>
            </view>
          </view>
          <view class="u-flex u-m-t-44">
            <text class="font-bold u-m-r-52">转入类型</text>
            <up-radio-group v-model="modalData.form.type" placement="row">
              <up-radio
                :key="1"
                label="转桌(部分商品转入)"
                :name="1"
              ></up-radio>
              <up-radio
                :key="2"
                label="并桌(全部商品转入)"
                :name="2"
              ></up-radio>
            </up-radio-group>
          </view>
          <template v-if="modalData.form.type == 1">
            <view class="u-flex u-m-t-44">
              <text class="font-bold u-m-r-52">购物车商品</text>
            </view>
            <view class="u-m-t-44">
              <u-table2
                :data="cartStore.oldCartList"
                :columns="modalData.form.columns"
                row-key="id"
                @selection-change="handleSelectionChange"
              />
            </view>
          </template>
        </view>
      </template>
    </Modal>
  </view>
</template>

<script setup>
import Modal from "@/components/my-components/modal.vue";
import chooseTables from "./components/choose-tables.vue";
import { onLoad } from "@dcloudio/uni-app";
import goodsList from "./components/goods-list.vue";
import modelDiscount from "./components/discount";

import controls from "./components/controls.vue";
import { useCartStore } from "@/stores/cart.js";
import { useAccountStore } from "@/stores/account.js";
import * as orderApi from "@/http/api/order.js";
import * as tableApi from "@/http/api/table.js";
import * as areaApi from "@/http/api/area.js";
import yskUtils from "ysk-utils";
import go from "@/commons/utils/go.js";

import { reactive, ref, provide, computed } from "vue";
const cartStore = useCartStore();
const accountStore = useAccountStore();

const modalData = reactive({
  show: false,
  key: "",
  title: "",
  form: {
    personCount: 0,
    targetTableCode: "",
    checks: [],
    type: 1,
    columns: [
      { type: "selection", width: "50px" },
      { title: "商品名称", key: "productName" },
      {
        title: "数量",
        key: "num",
        style: { "justify-content": "center", "text-align": "cnter" },
      },
    ],
  },
});

function handleSelectionChange(e) {
  console.log(e);
  modalData.form.checks = e;
}

async function transferTable() {
  if (!modalData.form.targetTableCode) {
    uni.showToast({
      title: "请选择目标台桌",
      icon: "none",
    });
    return;
  }
  if (modalData.form.type == 1 && modalData.form.checks.length <= 0) {
    uni.showToast({
      title: "请选择商品",
      icon: "none",
    });
    return;
  }
  let detailIds = cartStore.oldCartList.map((v) => v.id);
  if (modalData.form.type == 1) {
    detailIds = modalData.form.checks.map((v) => v.id);
  }

  const res = await orderApi.mergeOrder({
    sourceOrderId: cartStore.order.id,
    targetOrderId: "",
    targetTableCode: modalData.form.targetTableCode,
    detailIds,
  });
  uni.showToast({
    title: "转桌成功",
    icon: "none",
  });

  const orderRes = await orderApi.getHistoryOrder({
    tableCode: modalData.form.targetTableCode,
  });
  if (orderRes) {
    options.orderId = orderRes.id;
    getOrderById();
    modalData.show = false;
    modalData.form.targetTableCode = [];
    modalData.form.checks = [];
    modalData.form.type = 1;
  }
}

async function editPersonCount() {
  cartStore.personCount = modalData.form.personCount;
  modalData.show = false;
}
async function modalConfirm(key) {
  if (modalData.key == "transferTable") {
    transferTable();
  }
  if (modalData.key == "editPersonCount") {
    editPersonCount();
  }
}

provide("cartStore", cartStore);
provide("yskUtils", yskUtils);
provide("accountStore", accountStore);

const selCart = ref(null);

function back() {
  uni.navigateBack();
}

function toPay() {
  go.to("PAGES_ORDER_PAY", {
    orderId: cartStore.order.id,
    isNowPay: true,
    dinnerType: cartStore.currentDinnerType,
  });
}

const areaList = ref([]);

async function getArea() {
  const res = await areaApi.getShopArea({ size: 999 });
  areaList.value = res.records;
}
async function getOrderById() {
  const res = await orderApi.getOrderById({ orderId: options.orderId });
  const tableRes = await tableApi.getShopTableDetail({
    tableCode: res.tableCode,
  });
  if (tableRes) {
    cartStore.table = tableRes;
  } else {
    cartStore.table = {
      tableCode: res.tableCode,
    };
  }
  cartStore.setOrder(res);

  cartStore.sendMessage({
    operate_type: "init",
  });
}
const options = {};
onLoad(async (opt) => {
  Object.assign(options, opt);
  console.log("options", options);

  getTablelist();
  await getArea();
  getOrderById();
});

const tableList = ref([]);
async function getTablelist() {
  const res = await tableApi.getShopTable({ size: 999 });
  tableList.value = res.records || [];
}
async function shopTableClear() {
  const res = await tableApi.shopTableClear({
    id: cartStore.table.id,
  });
}
async function btnClick(type) {
  if (type == "editPersonCount") {
    console.log(modalData.form);
    modalData.form.personCount = cartStore.personCount;
    modalData.title = "就餐人数";
    modalData.key = "editPersonCount";
    modalData.show = true;
    return;
  }
  modalData.key = "btnClick";

  if (type == "clearTable") {
    uni.showModal({
      title: "提示",
      content: "是否清空该桌订单",
      success(res) {
        if (res.confirm) {
          console.log("清空该桌订单");
          shopTableClear();
        }
      },
    });
  }
  if (type == "transfer") {
    modalData.form.type == 1;
    modalData.title = "转桌";

    modalData.show = true;
  }
  if (type == "changeTable") {
    modalData.form.type == 2;
    modalData.title = "转桌";

    modalData.show = true;
  }
  if (type == "serveAll") {
    await orderApi.upOrderDetail({
      orderId: cartStore.order.id,
      type: 1,
    });
    getOrderById();
    return;
  }
  if (!selCart.value) {
    return;
  }
  if (type == "changePrice") {
    showModel("discount");
    return;
  }

  if (type == "gift") {
    updateCart({
      id: selCart.value.id,
      product_id: selCart.value.product_id,
      sku_id: selCart.value.sku_id,
      unit_price: 0,
      is_gift: 1,
    });
    return;
  }
  if (type == "startCooking") {
    await orderApi.upOrderDetail({
      orderDetailId: selCart.value.id,
      type: 0,
    });
    getOrderById();
    return;
  }
  if (type == "serve") {
    await orderApi.upOrderDetail({
      orderDetailId: selCart.value.id,
      type: 1,
    });
    getOrderById();
    return;
  }
}

const models = new Map();
const modelData = reactive({
  data: {},
});
/**
 * 设置弹窗信息
 * @param {Object} el
 */
function setModel(el) {
  if (el && el.$attrs["name"]) {
    models.set(el.$attrs["name"], el);
  }
}

/**
 * 打开弹窗
 * @param {Object} key
 * @param {Object} index
 */
function showModel(key) {
  modelData.data = selCart.value;
  const item = selCart.value;
  const model = models.get(key);
  console.log("弹窗数据===", modelData.data);
  if (key == "packNumber") {
    if (modelData.data.type == "weight" && item.pack_number <= 0) {
      let par = {
        id: modelData.data.id,
        product_id: modelData.data.product_id,
        sku_id: modelData.data.sku_id,
        pack_number: 1,
      };
      updateCart(par);
      return false;
    }
    if (item.pack_number > 0) {
      let par = {
        id: modelData.data.id,
        product_id: modelData.data.product_id,
        sku_id: modelData.data.sku_id,
        pack_number: 0,
      };
      updateCart(par);
      return false;
    }
    model &&
      model.open({
        number: item.number,
      });
  } else {
    model &&
      model.open({
        packNumber: modelData.data.remark || "",
      });
  }
}

/**
 * 单品打折
 * @param {Object} form
 */
async function discountconfirm(form) {
  if (form.discountMoney != ".") {
    let str = "";
    if (form.notes) {
      form.notes.forEach((ele) => {
        if (ele.checked) {
          str = str + ele.name + ",";
        }
      });
    }
    let discount_sale_amount = modelData.data.is_gift ? 0 : form.discountMoney;
    let par = {
      id: modelData.data.id,
      product_id: modelData.data.product_id,
      sku_id: modelData.data.sku_id,
      discount_sale_amount: discount_sale_amount,
      // discount_sale_note: str + form.note,
    };
    updateCart(par);
  }
}

/**
 * 购物车数据修改
 * @param {Object} par
 */
function updateCart(par) {
  console.log(selCart.value);
  if (selCart.value.isHistory) {
    cartStore.sendMessage({
      type: "onboc",
      operate_type: "bulk_edit",
      data: {
        history: [par],
        cart: [],
      },
    });
    return;
  }
  cartStore.sendMessage({
    type: "onboc",
    operate_type: "edit",
    ...par,
  });
  getCart();
}
/**
 * 更新购物车和历史订单数据
 */
function uodateCartAndHistory() {
  let newData = {
    history: [],
    cart: [],
  };

  websocketUtil.send(
    JSON.stringify({
      type: "onboc",
      operate_type: "bulk_edit",
      data: newData,
    })
  );
}
/**
 * 获取购物车数据
 */
function getCart() {
  // 初始化购物车
  cartStore.sendMessage({
    type: "onboc",
    operate_type: "init",
  }),
    false;
}

const returnAreaName = computed(() => {
  if (!cartStore.table) {
    return "";
  }
  if (!cartStore.table.areaId) {
    return "";
  }
  const item = areaList.value.find((v) => v.id == cartStore.table.areaId);
  return item ? item.name : "";
});
const returnTableName = computed(() => {
  if (!cartStore.table) {
    return "";
  }
  return cartStore.table.name || "";
});

/**
 * 扫码上传
 */
async function saomaShangCai() {
  uni.scanCode({
    success: async (res) => {
      console.log("条码类型：" + res.scanType);
      console.log("条码内容：" + res.result);
      console.log("orderDetailId", res.result.split(":")[1]);
      await orderApi.upOrderDetail({
        orderDetailId: res.result.split(":")[1],
        type: 1,
      });
      getOrderById();
    },
  });
}
</script>

<style lang="scss" scoped>
.line {
  width: 1px;
  height: 20rpx;
  background-color: #e5e5e5;
  margin-left: 8rpx;
  margin-right: 16rpx;
}

.my-radio {
  .circle {
    background: #ffffff;
    width: 18px;
    height: 18px;

    &.active {
      background-color: $my-main-color;
      border-color: $my-main-color;
    }

    border: 1px solid #707070;
    border-radius: 50%;
    overflow: hidden;

    &.square {
      border-radius: 8rpx;
    }
  }
}

.area {
  padding: 2px 28rpx 24rpx 28rpx;
}

.scale7 {
  transform: scale(0.7);
}

::v-deep .uni-searchbar {
  padding: 0 !important;
}

.search {
  padding: 20rpx 28rpx 20rpx 28rpx;

  .icon-saoma {
    margin-left: 20rpx;
    width: 34rpx;
    height: 32rpx;
  }
}

.list {
  padding: 38rpx 28rpx;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 50rpx;
  row-gap: 62rpx;
  .no-choose {
    padding: 36rpx 30rpx 36rpx 24rpx;
  }

  .item {
    color: #fff;
    padding: 18rpx 14rpx;
    border-radius: 16rpx;
    overflow: hidden;
    .bottom {
      padding: 26rpx 14rpx 38rpx 14rpx;
      background-color: #fff;
      border-radius: 6rpx;
    }
    .diancan {
      padding: 18rpx 18rpx;
      border-radius: 8rpx;
      text-align: center;
    }
  }
}
.icon-people {
  width: 30rpx;
  height: 34rpx;
}
.exit {
  width: 48rpx;
  height: 48rpx;
  margin-left: 100rpx;
}
.navbar {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 32rpx 0;
  padding-top: calc(var(--status-bar-height) + 32rpx);
}
.navbar-right {
  margin-right: 86rpx;
}
.status-list {
  background-color: #fff;
  display: flex;
  padding: 32rpx 72rpx;
}
.status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 68rpx;
  .circle {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
  }
}
.container {
  display: flex;
}
$control-width: 800rpx;

.goods-list {
  flex: 1;
  position: relative;
  border-right: 1px solid #e5e5e5;
  min-height: calc(100vh - 100px);

  .bottom {
    position: fixed;
    border-right: 1px solid #e5e5e5;
    bottom: calc(env(safe-area-inset-bottom));
    left: 0;
    right: $control-width;
    padding: 32rpx 102rpx;
    background-color: #f9f9f9;
  }
}
.controls {
  width: $control-width;
}
.btn {
  padding: 18rpx 76rpx;
  border-radius: 8rpx;
  border: 1px solid $my-main-color;
  color: $my-main-color;
  &.success {
    background-color: $my-main-color;
    color: #fff;
  }
}
:deep(.u-table-cell:last-child) {
  justify-content: center;
}
</style>
