<template>
  <div class="app-container">
    <!-- 列表 -->
    <!-- 搜索 -->
    <page-search
      ref="searchRef"
      :search-config="searchConfig"
      :isOpenAutoSearch="true"
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    />
    <!-- 列表 -->
    <page-content
      ref="contentRef"
      :content-config="contentConfig"
      @add-click="handleAddClick"
      @edit-click="handleEditClick"
      @export-click="handleExportClick"
      @search-click="handleSearchClick"
      @toolbar-click="handleToolbarClick"
      @operat-click="handleOperatClick"
      @filter-change="handleFilterChange"
    >
      <template #originAmount="scope">
        {{ returnOriginAmount(scope.row) }}
      </template>

      <template #orderNo="scope">
        <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="scope.row.orderNo"
            placement="top-start"
          >
            {{ scope.row.orderNo }}
          </el-tooltip>
        </div>
      </template>

      <template #status="scope">
        <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
          {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
        </el-tag>
      </template>
      <template #goods="scope">
        <!-- <div class="goods_info">
          <div v-for="item in scope.row.goods" :key="item.id" class="row">
            <el-image :src="item.productImg" class="cover" lazy />
            <div class="info">
              <div class="name">
                <span :class="[item.isVip == 1 ? 'colorStyle' : '']">
                  {{ item.productName }}
                </span>
                <span v-if="item.refundNum" class="refund">(退 - {{ item.refundNum }})</span>
              </div>
              <div class="sku">{{ item.skuName }}</div>
            </div>
          </div>
        </div> -->
        <GoodsListCollapse :goods="scope.row.goods" />
      </template>
      <template #table="scope">
        <div>
          <p>
            名称：
            <el-tag type="primary">{{ scope.row.tableName || "无" }}</el-tag>
          </p>
          <!-- <p v-if="scope.row.tableCode">编号：{{ scope.row.tableCode }}</p> -->
        </div>
      </template>

      <!-- 打印状态 -->
      <template #printStatus="scope">
        <span v-if="scope.row.printStatus.length > 0" style="color: var(--el-color-danger)">
          打印失败（{{ scope.row.printStatus.map((item) => item.name).join("、") }}）
        </span>
      </template>

      <template #options="scope">
        {{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
      </template>
      <template #state="scope">
        <el-tag :type="returnStateType(scope.row[scope.prop])">
          {{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
        </el-tag>
      </template>
      <template #mobile="scope">
        <el-text>{{ scope.row[scope.prop] }}</el-text>
        <copy-button
          v-if="scope.row[scope.prop]"
          :text="scope.row[scope.prop]"
          style="margin-left: 2px"
        />
      </template>
      <template #payType="scope">
        {{ returnPayTypeOptionsLabel(scope.prop, scope.row[scope.prop]) }}
      </template>
      <template #operate="scope">
        <div>
          <el-button link @click="printOrderHandle(scope.row)">打印</el-button>
          <el-button link @click="showdetail(scope.row)">详情</el-button>
          <!-- <el-button v-if="scope.row.status == 'done'" link>开票</el-button> -->
          <el-button
            v-if="scope.row.status == 'unpaid'"
            type="primary"
            @click="toPayOrder(scope.row)"
          >
            结账
          </el-button>
        </div>
      </template>
    </page-content>

    <!-- 新增 -->
    <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
      <template #url="scope">
        <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
        <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
      </template>
    </page-modal>

    <!-- 编辑 -->
    <page-modal
      ref="editModalRef"
      :modal-config="editModalConfig"
      @submit-click="handleSubmitClick"
    >
      <template #url="scope">
        <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
        <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
      </template>
    </page-modal>

    <orderDetail ref="refDetail" @close="refresh" />
  </div>
</template>

<script setup lang="ts">
import orderDetail from "./components/detail.vue";
import orderApi, { type getListResponse, OrderInfoVo } from "@/api/order/order";
import type { IObject, IOperatData } from "@/components/CURD/types";
import usePage from "@/components/CURD/usePage";
import addModalConfig from "./config/add";
import contentConfig from "./config/content";
import editModalConfig from "./config/edit";
import searchConfig from "./config/search";
import { returnOptionsLabel, returnPayTypeOptionsLabel } from "./config/config";
import GoodsListCollapse from "./components/GoodsListCollapse.vue";
const {
  searchRef,
  contentRef,
  addModalRef,
  editModalRef,
  handleQueryClick,
  handleResetClick,
  // handleAddClick,
  // handleEditClick,
  handleSubmitClick,
  handleExportClick,
  handleSearchClick,
  handleFilterChange,
} = usePage();

function refresh() {
  console.log("refresh");
  contentRef.value?.fetchPageData();
}

//计算订单原金额
function returnOriginAmount(order: OrderInfoVo) {
  let amount = 0;
  if (order.originAmount) {
    return order.originAmount;
  }
  order.goods?.forEach((item) => {
    amount += item.payAmount * 1;
  });
  return amount.toFixed(2);
}
const route = useRoute();
const { orderNo, tableName, tableCode } = route.query;
if (orderNo || tableCode || tableName) {
  contentConfig.indexActionData = { orderNo, tableCode, tableName };
}
onMounted(() => {
  if (orderNo || tableCode || tableName) {
    searchRef.value?.setQueryValue("orderNo", orderNo);
    searchRef.value?.setQueryValue("tableName", tableName);
  }
});

// 打印订单
async function printOrderHandle(order: getListResponse) {
  try {
    await orderApi.printOrder({
      id: order.id,
      type: 0,
    });
    ElMessage.success("打印成功");
  } catch (error) {
    ElMessage.error("打印失败，请稍后重试");
  }
}

// 新增
async function handleAddClick() {
  addModalRef.value?.setModalVisible();
  // 加载部门下拉数据源
  // addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
  // 加载角色下拉数据源
  // addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
}
// 编辑
async function handleEditClick(row: IObject) {
  editModalRef.value?.handleDisabled(false);
  editModalRef.value?.setModalVisible();
  // 根据id获取数据进行填充
  // const data = await VersionApi.getFormData(row.id);
  console.log({ ...row, url: [row.url] });
  editModalRef.value?.setFormData({ ...row, url: [row.url] });
}
1;
// 其他工具栏
function handleToolbarClick(name: string) {
  console.log(name);
  if (name === "custom1") {
    ElMessage.success("点击了自定义1按钮");
  }
}
// 其他操作列
async function handleOperatClick(data: IOperatData) {
  console.log(data);
  if (data.name === "detail") {
    return;
  }
  if (data.name === "printer") {
  }
}

function returnStateType(status: string) {
  if (status === "unpaid") {
    return "warning";
  }
  if (status === "done") {
    return "primary";
  }
  if (status === "cancelled") {
    return "info";
  }
  if (status === "refund") {
    return "danger";
  }
}

const router = useRouter();
// 结账
function toPayOrder(order: getListResponse) {
  router.push({
    path: "/Instead",
    query: {
      id: order.id,
      key: "isPayOrder",
    },
  });
}
//详情
const refDetail = ref();
function showdetail(row: OrderInfoVo) {
  refDetail.value.show(row);
}
</script>

<style scoped lang="scss">
.collect_wrap {
  display: flex;
  gap: 14px;

  .item {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 20px;

    .icon_wrap {
      $size: 34px;
      $border: 6px;
      width: $size;
      height: $size;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--bg-color);
      border-radius: 50%;
      position: relative;

      &::after {
        content: "";
        width: $size + $border;
        height: $size + $border;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--bg-color);
        opacity: 0.3;
      }

      .icon {
        font-size: 16px;
        color: #fff;
      }

      .img {
        width: 20px;
        height: 20px;
      }
    }

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

      .m {
        font-weight: bold;
      }

      .t {
        font-size: 12px;
        color: #999;
        padding-top: 4px;
      }
    }
  }
}

.refund {
  color: #ff9731;
  font-weight: bold;
}

.table_order_info {
  .order_no {
    color: #999;
  }

  .type {
    color: #e6a23c;
  }
}

.goods_info {
  .row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &:not(:first-child) {
      margin-top: 10px;
    }

    .cover {
      width: 40px;
      height: 40px;
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-top: 2px;

      .sku {
        color: #999;
      }
    }
  }
}

.colorStyle {
  color: #ffc315;
}

.qrStyle {
  width: 100%;
  height: 100%;
  background-color: rgba($color: #000000, $alpha: 0.7);
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;

  .box {
    width: 380px;
    height: 320px;
    position: absolute;
    background: #fff;
    top: 26%;
    left: 36%;
    padding: 18px;

    > div:first-child {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    #canvas {
      margin-left: 49%;
      transform: translateX(-80px);
    }

    > div:last-child {
      text-align: center;
    }
  }
}
</style>
