<template>
  <el-container class="order-page panel-block">
    <el-header class="sa-header">
      <el-tabs class="sa-tabs" v-model="filterParams.data.status" @tab-change="onChangeStatus">
        <el-tab-pane
          v-for="(sl, key) in statusList"
          :key="sl"
          :label="`${sl.label}${sl.num ? '(' + sl.num + ')' : ''}`"
          :name="key"
        ></el-tab-pane>
      </el-tabs>
      <div class="sa-title sa-flex sa-row-between">
        <div class="label sa-flex">
          <span class="left">订单列表</span>
          <search-condition
            :conditionLabel="filterParams.conditionLabel"
            @deleteFilter="deleteFilter"
          ></search-condition>
        </div>
        <div>
          <el-button
            v-auth="'shop.admin.order.order.list'"
            class="sa-button-refresh"
            icon="RefreshRight"
            @click="getData()"
          ></el-button>
          <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
          <el-button
            v-auth="'shop.admin.order.order.export'"
            :loading="exportLoading"
            :disabled="exportLoading"
            @click="onExport('export')"
            >订单导出</el-button
          >
          <el-button
            v-if="filterParams.data.status == 'nosend'"
            v-auth="'shop.admin.order.order.exportdelivery'"
            :loading="exportLoading"
            :disabled="exportLoading"
            @click="onExport('exportDelivery')"
            >导出发货单</el-button
          >
        </div>
      </div>
    </el-header>
    <el-main class="sa-p-0" v-loading="loading">
      <el-table
        height="100%"
        class="sa-table"
        :data="table.data"
        :span-method="arraySpanMethod"
        default-expand-all
        @selection-change="handleSelectionChange"
      >
        <template #empty>
          <sa-empty />
        </template>
        <el-table-column type="expand">
          <template #default="props">
            <el-table
              class="sa-table sa-expand-table"
              :data="props.row.items"
              :span-method="objectSpanMethod"
            >
              <el-table-column width="88"></el-table-column>
              <el-table-column width="324">
                <template #default="scope">
                  <div class="goods-item sa-flex">
                    <sa-image :url="scope.row.goods_image" size="58" />
                    <div class="right sa-m-l-12">
                      <div class="goods-title sa-flex sa-table-line-1">
                        <span class="goods-id" @click="onOpenGoodsEdit(scope.row.goods_id)"
                          >#{{ scope.row.goods_id }}</span
                        >
                        {{ scope.row.goods_title }}
                      </div>
                      <div class="goods-sku-text sa-m-t-10">
                        <span>商品编码：{{ scope.row.goods_sku_price_out_code }}</span>
                      </div>
                      <div class="sa-flex">
                        <span class="goods-price sa-m-r-8">¥{{ scope.row.goods_price }}</span>
                        <span class="goods-num sa-m-r-12">x{{ scope.row.goods_num }}</span>
                        <index-status type="dispatch" :item="scope.row" />
                        <el-button
                          class="sa-m-l-8"
                          v-auth="'shop.admin.order.order.dispatch'"
                          type="primary"
                          size="small"
                          plain
                          @click="onOpenManualOrder(scope.row.id)"
                          >手动下单</el-button
                        >
                        <el-button
                          class="sa-m-l-8"
                          v-auth="'shop.admin.order.order.dispatch'"
                          type="primary"
                          size="small"
                          plain
                          v-if="
                            scope.row.order_source === 'zkh' && scope.row.status_code === 'nosend'
                          "
                          @click="onOpenZkhSubmitConfirm(scope.row.id)"
                          >震坤行下单</el-button
                        >
                      </div>
                      <div class="sa-m-t-8 sa-font-24">
                        <div v-if="scope.row.out_order_id"
                          >外部订单号：{{ scope.row.out_order_id }}</div
                        >
                        <div v-if="scope.row.out_order_item_id" class="sa-m-t-5 sa-m-b-5"
                          >外部子订单号：{{ scope.row.out_order_item_id }}</div
                        >
                        <div v-if="scope.row.order_source"
                          >下单渠道：{{ formatOrderSource(scope.row.order_source) }}</div
                        >
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column min-width="140" align="center">
                <template #default="scope">
                  <index-status type="aftersale" :item="scope.row" @updateList="getData" />
                </template>
              </el-table-column>
              <el-table-column min-width="92" align="center">
                <template #default>
                  <sa-user-profile :user="props.row.user" :id="props.row.user_id" mode="col" />
                </template>
              </el-table-column>
              <el-table-column min-width="168" align="center">
                <template #default>
                  <div
                    class="address-content sa-flex sa-flex-col sa-col-top"
                    v-if="props.row.address"
                  >
                    <div class="consignee sa-m-b-6">
                      <span>{{ props.row.address.consignee }}</span>
                      <span class="sa-m-l-8">{{ props.row.address.mobile }}</span>
                    </div>
                    <div class="address-name sa-m-b-6">
                      {{ props.row.address.province_name }}/{{ props.row.address.city_name }}/{{
                        props.row.address.district_name
                      }}/{{ props.row.address.town_name || '暂无' }}
                    </div>
                    <div class="address sa-table-line-1">
                      {{ props.row.address.address }}
                    </div>
                  </div>
                  <div v-else>{{ props.row.address_id }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="dispatch_type_text" min-width="168" align="center">
              </el-table-column>
              <el-table-column min-width="160" align="center">
                <template #default="scope">
                  <div class="sa-flex-col sa-col-center">
                    <div
                      v-if="scope.row.activity_type"
                      class="activity-type-text sa-m-r-4"
                      :class="scope.row.activity_type"
                      >{{ scope.row.activity_type_text }}</div
                    >
                    <div class="sa-flex">
                      ¥{{ scope.row.pay_fee }}
                      <index-status
                        v-if="scope.row.refund_status != 0"
                        type="refund"
                        :item="scope.row"
                      />
                    </div>
                    <template v-if="Number(scope.row.discount_fee)">
                      <el-popover
                        popper-class="discount-fee-popover"
                        placement="top"
                        trigger="hover"
                      >
                        <div class="sa-flex">
                          <div
                            class="promo-type-text"
                            v-for="text in scope.row.promo_types_text"
                            :key="text"
                            >{{ text }}</div
                          >
                        </div>
                        <template #reference>
                          <div>
                            <div v-if="scope.row.promo_types_text?.length > 0" class="discount-fee">
                              (优惠: ¥{{ scope.row.discount_fee }})
                            </div>
                          </div>
                        </template>
                      </el-popover>
                      <div v-if="scope.row.promo_types_text?.length == 0" class="discount-fee">
                        (优惠: -¥{{ scope.row.discount_fee }})
                      </div>
                    </template>
                  </div>
                </template>
              </el-table-column>
              <el-table-column min-width="240">
                <template #default>
                  <div class="sa-flex">
                    <el-popover
                      v-model:visible="refundPopover[props.$index]"
                      popper-class="refund-popover"
                      placement="top-start"
                      :width="204"
                      trigger="click"
                    >
                      <div class="title sa-flex">
                        <el-icon><QuestionFilled /></el-icon>
                        您同意用户进行申请退款吗？
                      </div>
                      <div class="sa-flex sa-row-right">
                        <el-button
                          v-auth="'shop.admin.order.order.applyrefundrefuse'"
                          class="is-link"
                          size="small"
                          type="info"
                          @click="onApplyRefundRefuse(props.row.id, props.$index)"
                          >拒绝</el-button
                        >
                        <el-button
                          v-auth="'shop.admin.order.order.fullrefund'"
                          size="small"
                          type="danger"
                          @click="onOpenRefund(props.row, props.$index)"
                          >同意</el-button
                        >
                      </div>
                      <template #reference>
                        <div class="apply-refund-wrap">
                          <el-button
                            v-if="props.row.btns?.includes('apply_refund_oper')"
                            class="apply-refund-button sa-m-r-12"
                            type="danger"
                            plain
                          >
                            用户申请退款
                            <el-icon><ArrowRight /></el-icon>
                          </el-button>
                        </div>
                      </template>
                    </el-popover>
                    <el-popover
                      v-model:visible="confirmPopover[props.$index]"
                      popper-class="confirm-popover sa-popper"
                      placement="top-start"
                      :width="204"
                      trigger="click"
                    >
                      <div class="title sa-flex">
                        <el-icon>
                          <question-filled />
                        </el-icon>
                        确认用户是否收货？
                      </div>
                      <div class="sa-flex sa-row-right">
                        <el-button
                          v-auth="'shop.admin.order.order.offlinerefuse'"
                          size="small"
                          type="danger"
                          link
                          @click="onOfflineRefuse(props.row.id, props.$index)"
                          >用户拒收
                        </el-button>
                        <el-button
                          v-auth="'shop.admin.order.order.offlineconfirm'"
                          size="small"
                          type="primary"
                          @click="onOfflineConfirm(props.row.id, props.$index)"
                          >确认收货
                        </el-button>
                      </div>
                      <template #reference>
                        <div class="apply-refund-wrap">
                          <el-button
                            v-if="props.row.btns?.includes('confirm')"
                            class="send-button sa-m-r-12"
                            type="primary"
                            plain
                          >
                            确认收货
                            <el-icon>
                              <arrow-right />
                            </el-icon>
                          </el-button>
                        </div>
                      </template>
                    </el-popover>

                    <el-button
                      v-if="props.row.btns?.includes('send')"
                      v-auth="'shop.admin.order.order.dispatch'"
                      class="send-button"
                      type="primary"
                      plain
                      @click="onSend(props.row)"
                    >
                      立即发货
                      <el-icon><ArrowRight /></el-icon>
                    </el-button>
                    <el-button
                      v-auth="'shop.admin.order.order.detail'"
                      class="is-link"
                      type="primary"
                      @click="detailRow(props.row.id)"
                      >详情</el-button
                    >
                    <el-button
                      v-auth="'shop.admin.order.order.action'"
                      class="is-link"
                      type="primary"
                      @click="onOpenAction(props.row.id)"
                      >日志</el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column type="selection" width="40" />
        <el-table-column label="商品信息" width="304">
          <template #default="scope">
            <div class="order-wrap sa-flex">
              <div class="id">#{{ scope.row.id }}</div>
              <div class="order-sn sa-flex">
                订单号:{{ scope.row.order_sn }}
                <sa-svg
                  class="copy sa-m-l-4 cursor-pointer"
                  name="sa-copy"
                  @click="useClip(scope.row.order_sn)"
                ></sa-svg>
              </div>
              <div class="create-time"> 下单时间:{{ scope.row.create_time }} </div>
              <div class="pay-types-text">{{ scope.row.pay_types_text?.join(',') }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="售后状态" min-width="140" align="center"></el-table-column>
        <el-table-column label="下单用户" min-width="92" align="center"></el-table-column>
        <el-table-column label="收货地址" min-width="168" align="center"></el-table-column>
        <el-table-column label="配送方式" min-width="168" align="center"></el-table-column>
        <el-table-column label="支付信息" min-width="160" align="center">
          <template #default="scope">
            <div class="sa-flex sa-row-center">
              <el-popover popper-class="pay-fee-popover sa-popper" placement="top" trigger="hover">
                <div>
                  <div class="pay-fee-item">
                    <div class="label">商品总价：</div>
                    <div class="content">¥{{ scope.row.goods_amount }}</div>
                  </div>
                  <div class="pay-fee-item">
                    <div class="label">运费价格：</div>
                    <div class="content"> ¥{{ scope.row.dispatch_amount }} </div>
                  </div>
                  <div
                    class="pay-fee-item pay-fee-item-discount"
                    v-if="scope.row.ext && (scope.row.ext.promo_infos || scope.row.coupon_id)"
                  >
                    <div class="label">活动优惠：</div>
                    <div class="content">
                      <div
                        class="pay-fee-item"
                        v-if="Number(scope.row.ext.promo_discounts.full_reduce) > 0"
                      >
                        <div class="label sa-m-r-8">满减</div>
                        <div class="content">
                          -¥{{ scope.row.ext.promo_discounts.full_reduce }}
                        </div>
                      </div>
                      <div
                        class="pay-fee-item"
                        v-if="Number(scope.row.ext.promo_discounts.full_discount) > 0"
                      >
                        <div class="label sa-m-r-8">满折</div>
                        <div class="content">
                          -¥{{ scope.row.ext.promo_discounts.full_discount }}
                        </div>
                      </div>
                      <div
                        class="pay-fee-item"
                        v-if="Number(scope.row.ext.promo_discounts.full_gift) > 0"
                      >
                        <div class="label sa-m-r-8">满赠</div>
                        <div class="content"></div>
                      </div>
                      <div
                        class="pay-fee-item"
                        v-if="Number(scope.row.ext.promo_discounts.free_shipping) > 0"
                      >
                        <div class="label sa-m-r-8">满包邮</div>
                        <div class="content">
                          -¥{{ scope.row.ext.promo_discounts.free_shipping }}
                        </div>
                      </div>
                      <div v-if="scope.row.coupon_id" class="pay-fee-item">
                        <div class="label sa-m-r-8">优惠券</div>
                        <div class="content"> -¥{{ scope.row.coupon_discount_fee }} </div>
                      </div>
                    </div>
                  </div>
                  <div class="pay-fee-item">
                    <div class="label"
                      >{{
                        ['paid', 'completed'].includes(scope.row.status) ? '实付金额' : '应付金额'
                      }}：</div
                    >
                    <div class="content sa-flex">
                      ¥{{ scope.row.pay_fee }}
                      <s
                        v-if="scope.row.pay_fee != scope.row.original_pay_fee"
                        class="original-pay-fee sa-m-l-4"
                      >
                        {{ scope.row.original_pay_fee }}
                      </s>
                    </div>
                  </div>
                </div>
                <template #reference>
                  <div class="pay-fee-reference">¥{{ scope.row.pay_fee }}</div>
                </template>
              </el-popover>
              <el-button
                v-if="scope.row?.btns.includes('change_fee')"
                class="is-link"
                type="primary"
                @click="onChangeFee(scope.row)"
                >改价</el-button
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="240">
          <template #default="scope">
            <index-status :order="scope.row" type="status_code" />
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <sa-view-bar>
      <template #left>
        <sa-batch-handle
          :batchHandleTools="batchHandleTools"
          :selectedLeng="table.selected.length"
          @batchHandle="batchHandle"
        ></sa-batch-handle>
      </template>
      <template #right>
        <sa-pagination :pageData="pageData" @updateFn="getData" />
      </template>
    </sa-view-bar>
  </el-container>
</template>
<script>
  export default {
    name: 'shop.admin.order.order',
  };
</script>
<script setup>
  import { computed, onMounted, reactive, ref } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { api } from '../order.service';
  import { useModal, usePagination } from '@/sheep/hooks';
  import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
  import { composeFilter } from '@/sheep/utils';
  import useClip from '@/sheep/utils/clipboard.js';
  import StatusButton from './components/status.vue';
  import IndexStatus from './components/index-status.vue';
  import OrderDispatch from './dispatch.vue';
  import OrderRefund from './refund.vue';
  import OrderFee from './fee.vue';
  import { activityStatusStyle } from './status.js';
  import OrderBatchDispatch from './batchDispatch.vue';
  import OrderDetail from './detail.vue';
  import OrderAction from './action.vue';
  import GoodsEdit from '@/app/shop/admin/goods/goods/edit.vue';
  import { useRoute } from 'vue-router';
  import { cloneDeep } from 'lodash';
  import ManualOrder from './manualOrder.vue';
  const route = useRoute();

  // getType
  const statusList = reactive({});
  async function getType() {
    const { data } = await api.order.getType();
    for (var key in data) {
      if (filterParams.tools[key] && key != 'status') {
        filterParams.tools[key].options.data = data[key];
      } else if (key == 'pay_type') {
        filterParams.tools['pay.pay_type'].options.data = data[key];
      } else if (key == 'status') {
        data[key].forEach((s) => {
          statusList[s.type] = { label: s.name, num: 0 };
        });
      }
    }
  }

  const filterParams = reactive({
    tools: {
      status: { label: '订单状态', value: route.query.status || 'all' },
      order: {
        type: 'tinputprepend',
        label: '请输入查询内容',
        field: 'order',
        order: {
          field: 'id',
          value: '',
        },
        options: [
          {
            label: '订单ID',
            value: 'id',
          },
          {
            label: '订单编号',
            value: 'order_sn',
          },
          {
            label: '售后单号',
            value: 'aftersale.aftersale_sn',
          },
          {
            label: '支付单号',
            value: 'pay.pay_sn',
          },
          {
            label: '交易流水号',
            value: 'pay.transaction_id',
          },
        ],
      },
      user: {
        type: 'tinputprepend',
        label: '请输入查询内容',
        field: 'user',
        user: {
          field: 'user_id',
          value: '',
        },
        options: [
          {
            label: '用户ID',
            value: 'user_id',
          },
          {
            label: '用户昵称',
            value: 'user.nickname',
          },
          {
            label: '用户手机号',
            value: 'user.mobile',
          },
          {
            label: '收货人',
            value: 'address.consignee',
          },
          {
            label: '收货人手机号',
            value: 'address.mobile',
          },
        ],
      },
      type: {
        type: 'tselect',
        label: '订单类型',
        field: 'type',
        value: '',
        options: {
          data: [],
          props: {
            label: 'name',
            value: 'type',
          },
        },
      },
      platform: {
        type: 'tselect',
        label: '订单来源',
        field: 'platform',
        value: '',
        options: {
          data: [],
          props: {
            label: 'name',
            value: 'type',
          },
        },
      },
      'pay.pay_type': {
        type: 'tselect',
        label: '支付方式',
        field: 'pay.pay_type',
        value: '',
        options: {
          data: [],
          props: {
            label: 'name',
            value: 'type',
          },
        },
      },
      activity_type: {
        type: 'tselect',
        label: '活动类型',
        field: 'activity_type',
        value: '',
        options: {
          data: [],
          props: {
            label: 'name',
            value: 'type',
          },
        },
      },
      promo_types: {
        type: 'tselect',
        label: '促销类型',
        field: 'promo_types',
        value: '',
        options: {
          data: [],
          props: {
            label: 'name',
            value: 'type',
          },
        },
      },
      'item.goods_title': {
        type: 'tinput',
        label: '商品名称',
        field: 'item.goods_title',
        value: '',
      },
      create_time: {
        type: 'tdatetimerange',
        label: '下单时间',
        field: 'create_time',
        value: route.query.create_time || [],
      },
    },
    data: {
      status: route.query.status || 'all',
      order: { field: 'id', value: '' },
      user: { field: 'user_id', value: '' },
      type: '',
      platform: '',
      'pay.pay_type': '',
      activity_type: '',
      promo_types: '',
      'item.goods_title': '',
      create_time: route.query.create_time || [],
    },
    conditionLabel: {},
  });
  const { openFilter, deleteFilter } = useSearch({ filterParams, getData });

  const loading = ref(true);

  // 表格
  const table = reactive({
    data: [],
    order: '',
    sort: '',
    selected: [],
  });

  const { pageData } = usePagination();

  // 下单渠道格式化函数
  const formatOrderSource = (source) => {
    const sourceMap = {
      self: '自下单',
      linkedmall: 'linkedmall',
      zkh: '震坤行',
    };
    return sourceMap[source] || source;
  };

  // 获取数据
  async function getData(page) {
    loading.value = true;
    if (page) pageData.page = page;
    let tempSearch = cloneDeep(filterParams.data);
    let search = composeFilter(tempSearch, {
      order_sn: 'like',
      'aftersale.aftersale_sn': 'like',
      'pay.pay_sn': 'like',
      'pay.transaction_id': 'like',
      'user.nickname': 'like',
      'user.mobile': 'like',
      'address.consignee': 'like',
      'address.mobile': 'like',
      promo_types: 'find_in_set',
      'item.goods_title': 'like',
      create_time: 'range',
    });
    const { error, data } = await api.order.list({
      page: pageData.page,
      list_rows: pageData.list_rows,
      ...search,
    });
    if (error === 0) {
      table.data = data.orders.data;
      pageData.page = data.orders.current_page;
      pageData.list_rows = data.orders.per_page;
      pageData.total = data.orders.total;
      for (var key in statusList) {
        statusList[key].num = data[key];
      }
    }
    loading.value = false;
  }

  function onChangeStatus(tab) {
    table.data = [];
    getData(1);
  }

  function handleSelectionChange(val) {
    table.selected = val;
  }

  // 导出订单/导出发货单
  const exportLoading = ref(false);
  async function onExport(type) {
    exportLoading.value = true;
    let tempSearch = cloneDeep(filterParams.data);
    let search = composeFilter(tempSearch, {
      order_sn: 'like',
      'aftersale.aftersale_sn': 'like',
      'pay.pay_sn': 'like',
      'pay.transaction_id': 'like',
      'user.nickname': 'like',
      'user.mobile': 'like',
      'address.consignee': 'like',
      'address.mobile': 'like',
      promo_types: 'find_in_set',
      'item.goods_title': 'like',
      create_time: 'range',
    });
    await api.order.export(type, { search: search.search });
    exportLoading.value = false;
  }

  const batchHandleTools = [
    {
      type: 'all',
      label: '批量发货',
      auth: 'shop.admin.order.order.dispatch',
      buttonType: 'default',
    },
  ];
  function batchHandle() {
    let order_ids = [];
    table.selected.forEach((s) => {
      order_ids.push(s.id);
    });
    useModal(
      OrderBatchDispatch,
      {
        title: '批量发货',
        order_ids,
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }

  function detailRow(id) {
    useModal(
      OrderDetail,
      {
        title: '订单详情',
        type: 'detail',
        id,
      },
      {
        confirm: () => {
          getData();
        },
        close: () => {
          getData();
        },
      },
    );
  }

  function onOpenAction(id) {
    useModal(OrderAction, {
      title: '日志',
      id,
    });
  }

  const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    if (columnIndex == 2) {
      return [1, 4];
    } else if (columnIndex == 3 || columnIndex == 4 || columnIndex == 5) {
      return [0, 0];
    }
  };

  const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    if (columnIndex == 0) {
      return [0, 0];
    }
    if (columnIndex == 1) {
      return [1, 2];
    }
    if (columnIndex == 3 || columnIndex == 4 || columnIndex == 7) {
      if (rowIndex == 0) {
        return {
          rowspan: 200,
          colspan: 1,
        };
      } else {
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    }
  };

  function onOpenGoodsEdit(id) {
    useModal(GoodsEdit, {
      title: '商品',
      type: 'edit',
      id: id,
    });
  }

  function onSend(row) {
    useModal(
      OrderDispatch,
      {
        title: '订单发货',
        data: row,
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }

  function onChangeFee(row) {
    useModal(
      OrderFee,
      {
        title: '改价',
        class: 'fee-dialog',
        id: row.id,
        pay_fee: row.pay_fee,
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }

  function onOpenRefund(row, index) {
    refundPopover[index] = false;
    useModal(
      OrderRefund,
      {
        title: '全部退款',
        class: 'refund-dialog',
        type: 'order.fullRefund',
        data: {
          id: row.id,
          money: row.pay_fee,
        },
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }

  const refundPopover = reactive({});
  async function onApplyRefundRefuse(id, index) {
    refundPopover[index] = false;
    const { error } = await api.order.applyRefundRefuse(id);
    if (error == 0) {
      getData();
    }
  }

  function onOpenZkhSubmitConfirm(order_item_id) {
    ElMessageBox.confirm('确定要下单到震坤行吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(async () => {
        const { error } = await api.order.zkhOrderSubmit({ order_item_id });
        if (error == 0) {
          ElMessage.success('下单成功');
          getData();
        }
      })
      .catch(() => {
        // 用户取消操作，不做任何处理
      });
  }

  const confirmPopover = reactive({});
  async function onOfflineRefuse(id, index) {
    confirmPopover[index] = false;
    const { error } = await api.order.offlineRefuse(id);
    if (error == 0) {
      getData();
    }
  }
  async function onOfflineConfirm(id, index) {
    confirmPopover[index] = false;
    const { error } = await api.order.offlineConfirm(id);
    if (error == 0) {
      getData();
    }
  }

  function onOpenManualOrder(id) {
    useModal(
      ManualOrder,
      {
        title: '手动下单',
        id: id,
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }

  onMounted(async () => {
    await getType();
    getData();
  });
</script>
<style lang="scss" scoped>
  .order-page {
    .el-main {
      :deep() {
        .el-table {
          --el-table-row-hover-bg-color: var(--sa-background-hex-hover);
          .el-table__row {
            background: var(--sa-background-hex-hover);
          }
          .el-table__header-wrapper {
            margin-bottom: 4px;
          }
          .el-table__expanded-cell {
            padding: 0;
            background: var(--sa-background-assist);
          }
        }
        .sa-expand-table {
          --el-table-row-hover-bg-color: var(--el-fill-color-light);
          .el-table__header-wrapper {
            margin-bottom: 0;
          }
          .el-table__row {
            background: var(--el-table-tr-bg-color);
          }
          .el-table__body tr:hover > td.el-table__cell {
            background-color: var(--sa-background-assist) !important;
          }
          .el-table__body tr.hover-row.current-row > td.el-table__cell,
          .el-table__body tr.hover-row.el-table__row--striped.current-row > td.el-table__cell,
          .el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,
          .el-table__body tr.hover-row > td.el-table__cell {
            background-color: var(--sa-background-assist) !important;
          }
        }
      }

      .sa-table {
        .apply-refund {
          font-size: 12px;
          font-weight: 400;
          color: #999;
        }
        .order-wrap {
          position: relative;
          line-height: 14px;
          font-size: 12px;
          font-weight: 400;
          color: var(--sa-font);
          & > div {
            margin-right: 24px;
          }
          .id {
            min-width: 80px;
            color: var(--sa-subtitle);
          }
          .order-sn {
            min-width: 228px;
            height: 14px;
            font-size: 12px;
            color: var(--sa-subtitle);
            .copy {
              width: 12px !important;
              height: 12px !important;
            }
          }
          .create-time {
            line-height: 14px;
            font-size: 12px;
            color: var(--sa-subtfont);
          }
          .platform-text {
            min-width: 116px;
          }
          .pay-types-text {
            margin-right: 0;
          }
        }
        .address-content {
          width: 100%;
          display: inline-flex;
          .consignee {
            line-height: 14px;
            color: var(--sa-font);
            font-size: 12px;
            text-align: left;
          }
          .address-name {
            line-height: 16px;
            font-size: 14px;
            color: var(--sa-subtitle);
            text-align: left;
          }
          .address {
            height: 14px;
            line-height: 14px;
            font-size: 12px;
            color: var(--sa-subfont);
          }
        }
      }
      .sa-expand-table {
        :deep() {
          .el-table__header-wrapper {
            display: none;
          }
        }
      }
    }
  }
  .refund-popover,
  .confirm-popover {
    .title {
      line-height: 20px;
      font-size: 12px;
      font-weight: 400;
      color: var(--sa-font);
      margin-bottom: 16px;
      .el-icon {
        font-size: 14px;
        color: #faad14;
        margin-right: 8px;
      }
    }
    .tip {
      font-size: 12px;
      font-weight: 400;
      color: var(--sa-subfont);
    }
  }
  .pay-fee-reference {
    width: fit-content;
    color: var(--t-color-primary);
    border-bottom: 1px dashed var(--t-color-primary);
    cursor: pointer;
  }
  .pay-fee-popover {
    .pay-fee-item {
      line-height: 16px;
      font-size: 12px;
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      &.pay-fee-item-discount {
        align-items: flex-start;
      }
      &:last-child {
        margin-bottom: 0;
      }
      .label {
        flex-shrink: 0;
        color: var(--sa-subfont);
      }
      .content {
        color: var(--sa-subtitle);
      }
      .original-pay-fee {
        color: #999;
      }
    }
  }

  .goods-item {
    .right {
      flex: 1;
      line-height: 14px;
      font-size: 12px;
      font-weight: 400;
      color: var(--sa-font);
      .goods-title {
        height: 14px;
        line-height: 14px;
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 4px;
        .goods-id {
          color: var(--t-color-primary);
          cursor: pointer;
        }
      }
      .goods-sku-text {
        height: 14px;
        line-height: 14px;
        margin-bottom: 10px;
      }
      .goods-price {
      }
      .goods-num {
      }
    }
  }

  .activity-type-text {
    width: fit-content;
    height: 20px;
    padding: 0 5px;
    border-radius: 2px;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    &.groupon,
    &.groupon_ladder {
      background: var(--t-bg-active);
      color: var(--t-color-primary);
    }
    &.seckill {
      background: rgba(255, 77, 79, 0.16);
      color: #ff4d4f;
    }
  }

  .discount-fee {
    line-height: 14px;
    font-size: 12px;
    font-weight: 400;
    color: var(--sa-font);
    text-decoration-line: underline;
  }
  .discount-fee-popover {
    .promo-type-text {
      width: fit-content;
      height: 20px;
      padding: 0 8px;
      background: rgba(250, 173, 20, 0.16);
      border-radius: 10px;
      font-weight: 400;
      font-size: 12px;
      color: #faad14;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .apply-refund-wrap {
    width: fit-content;
  }
  .apply-refund-button {
    height: 26px;
    border-radius: 13px;
    border: none;
    padding: 0 8px 0 12px;
    --el-button-bg-color: rgba(255, 77, 79, 0.16);
  }
  .send-button {
    height: 26px;
    border-radius: 13px;
    border: none;
    padding: 0 8px 0 12px;
    --el-button-bg-color: var(--t-bg-active);
  }
</style>
