<template>
  <el-drawer
    title="订单详情"
    size="50%"
    :visible.sync="drawer"
    direction="rtl"
    v-loading="loading"
  >
    <div class="header">
      <div class="title" style="text-align: center">【收银订单】</div>
      <div class="container">
        <div class="info_content">
          <div class="item">
            <div class="label">会员信息</div>
            <div class="row">
              <div>会员昵称：-</div>
              <div>联系电话：-</div>
            </div>
          </div>
        </div>
      </div>
      <div class="table">
        <div class="item">
          <div class="t">订单状态</div>
          <div class="b">
            <el-tag :type="detail.status == 'closed' ? 'success' : 'warning'">{{
              detail.status | statusFilter
            }}</el-tag>
          </div>
        </div>
        <div class="item">
          <div class="t">订单金额</div>
          <div class="b">￥{{ detail.orderAmount }}</div>
        </div>
        <div class="item">
          <div class="t">订单类型</div>
          <div class="b">
            {{ detail.sendType | sendTypeFilter }}
          </div>
        </div>
      </div>
      <div class="table">
        <div class="item">
          <div class="t">订单编号</div>
          <div class="b">
            {{ detail.orderNo }}
          </div>
        </div>
        <div class="item">
          <div class="t">下单时间</div>
          <div class="b">{{ detail.createdAt | timeFilter }}</div>
        </div>
        <div class="item">
          <div class="t">支付时间</div>
          <div class="b">
            {{ detail.createdAt | timeFilter }}
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <!-- <el-tabs v-model="type" @tab-click="getTableData"> -->
      <!-- <el-tab-pane label="基本信息" name="1"> -->
      <div class="info_content">
        <!-- <div class="item">
          <div class="label">会员信息</div>
          <div class="row">
            <div>会员昵称：-</div>
            <div>联系电话：-</div>
          </div>
        </div> -->
        <div class="item">
          <div class="label">收款详情</div>
          <!-- <div class="row">
            <div>商品金额：￥{{ detail.productAmount }}</div>
            <div>打包费：{{ detail.packFee || "-" }}</div>
          </div> -->
          <div class="row">
            <div>打包费：{{ detail.packFee || "-" }}</div>
            <div>订单原价：￥{{ detail.originAmount }}</div>
            <div>优惠金额：￥{{ youHuiJinE }}</div>
            <div>
              实收金额：<span style="color: red">￥{{ detail.payAmount }}</span>
            </div>
          </div>
          <div class="row">
            <div>
              退款金额：￥{{ detail.refundAmount }}
              <span
                style="color: #ff9731; cursor: pointer"
                v-if="detail.isRefund"
                @click="type = '3'"
                >退款详情></span
              >
            </div>
            <div>支付方式：{{ detail.payType }}</div>
          </div>
        </div>
        <!-- <div class="item">
          <div class="label">订单信息</div>
          <div class="row">
            <div>订单编号：{{ detail.orderNo }}</div>
            <div>订单类型：{{ detail.sendType | sendTypeFilter }}</div>
            <div>创建时间：{{ detail.createdAt | timeFilter }}</div>
          </div>
          <div class="row">
            <div>设备名称：-</div>
            <div>支付时间：{{ detail.paidTime | timeFilter }}</div>
            <div>更新时间：{{ detail.updatedAt | timeFilter }}</div>
          </div>
        </div> -->
      </div>
      <div>
        <div style="margin-bottom: 16px; font-size: 16px">商品信息</div>
        <el-table :data="detail.detailList">
          <el-table-column label="商品">
            <template v-slot="scope">
              <div class="shop_info">
                <el-image
                  v-if="scope.row.productSkuId != '-999'"
                  :src="scope.row.productImg"
                  style="width: 40px; height: 40px"
                ></el-image>
                <div class="packeFee" v-else>
                  <span>
                    {{ scope.row.productName || "客座费" }}
                  </span>
                </div>
                <div class="info">
                  <span :class="[scope.row.isVip == 1 ? 'colorStyle' : '']">{{
                    scope.row.productName
                  }}</span>
                  <span style="color: #999">{{
                    scope.row.productSkuName
                  }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="数量">
            <template v-slot="scope"> x{{ scope.row.num }} </template>
          </el-table-column>
          <el-table-column label="单价">
            <template v-slot="scope"> 
              ￥{{ scope.row.price }}
              <!-- <template v-if="isUseCalcPrice(scope.row)">
                <div class=""> ￥{{ (scope.row.canReturnAmount / scope.row.num) |to2 }}</div>
                <div class="line-th"> ￥{{ scope.row.price }}</div>
              </template>
              <template v-else>
                <div v-if="isShowGoodsVipPrice(scope.row)">
                  <div class="" > ￥{{ scope.row.memberPrice }}</div>
                  <div class="line-th"> ￥{{ scope.row.price }}</div>
                </div>
                <div v-else>
                  <div class="" > ￥{{ scope.row.price }}</div>
                </div>
              </template> -->
              </template>
          </el-table-column>
          <el-table-column label="小计">
            <template v-slot="scope"> ￥{{ scope.row.canReturnAmount }} </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <template v-if="detail.status != 'unpaid'">
                <el-button
                  v-if="canTuikuan(scope.row)"
                  type="text"
                  size="mini"
                  @click="tuikuan(scope.row)"
                  ><span>退款</span></el-button
                >
                <span class="color-999" v-if="isTui(scope.row)">已退款</span>
              </template>
              <template v-if="detail.status == 'unpaid'">
                <el-button
                  v-if="canTuicai(scope.row)"
                  type="text"
                  size="mini"
                  @click="tuiCai(scope.row)"
                  ><span>退菜</span></el-button
                >
                <span class="color-999" v-if="scope.row == 'return'"
                  >已退菜</span
                >
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- </el-tab-pane> -->
      <!-- <el-tab-pane label="商品信息" name="2">
          <el-table :data="detail.detailList">
            <el-table-column label="商品">
              <template v-slot="scope">
                <div class="shop_info">
                  <el-image :src="scope.row.productImg" style="width: 40px;height: 40px;"></el-image>
                  <div class="info">
                    <span :class="[scope.row.isVip == 1 ? 'colorStyle' : '']">{{ scope.row.productName }}</span>
                    <span style="color: #999;">{{
                      scope.row.productSkuName
                    }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="数量">
              <template v-slot="scope">
                x{{ scope.row.num }}
              </template>
            </el-table-column>
            <el-table-column label="单价">
              <template v-slot="scope">
                ￥{{ scope.row.price }}/
              </template>
            </el-table-column>
            <el-table-column label="小计">
              <template v-slot="scope">
                ￥{{ scope.row.priceAmount }}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane> 
        <el-tab-pane label="退款详情" name="3" v-if="detail.isRefund">
          <div class="refund_wrap">
            <div class="row" v-for="item in refoundList" :key="item.id">
              <div class="time">{{ item.createdAt | timeFilter }}</div>
              <div class="list">
                <div class="list_row" v-for="val in item.detailList">
                  <div class="item">
                    <el-image :src="val.productImg" style="width: 50px;height: 50px;"></el-image>
                    <span class="name">{{ val.productName }}</span>
                  </div>
                  <div class="item">
                    <span>退-{{ val.num }}</span>
                  </div>
                  <div class="item">
                    <span>￥{{ val.priceAmount }}</span>
                  </div>
                  <div class="item">
                    <span>￥-{{ val.priceAmount }}</span>
                  </div>
                </div>
              </div>
              <div class="foot">退款：￥-{{ item.orderAmount }}</div>
            </div>
          </div>
        </el-tab-pane>
        -->
      <!-- </el-tabs> -->
    </div>
    <return-cart
      :modal="false"
      ref="refReturnCart"
      :max="selGoods.num"
      @confirm="refReturnCartConfirm"
    ></return-cart>
    <return-money
      :modal="false"
      ref="refReturnMoney"
      :max="selGoods.num"
      :goods="selGoods"
      @confirm="refReturnMoneyConfirm"
    ></return-money>
  </el-drawer>
</template>

<script>
import orderEnum from "../orderEnum";
import dayjs from "dayjs";
import { tbOrderInfoDetail, tbOrderInfoData } from "@/api/order";
import returnCart from "@/views/tool/Instead/components/return-cart.vue";
import returnMoney from "@/views/tool/Instead/components/return-money.vue";
import { $returnCart, $returnOrder } from "@/api/table";
import * as $util from "../order_goods_util.js";
export default {
  components: { returnCart, returnMoney },

  data() {
    return {
      orderEnum,
      drawer: false,
      type: "1",
      detail: "",
      loading: false,
      refoundList: [],
      selGoods: { num: 1 },
    };
  },
  filters: {
    to2(n){
      return Number(n).toFixed(2)
    },
    orderTypeFilter(t) {
      if (t) {
        return t && orderEnum.orderType.find((item) => item.key == t).label;
      } else {
        return t;
      }
    },
    sendTypeFilter(t) {
      if (t) {
        return orderEnum.sendType.find((item) => item.key == t).label;
      } else {
        return t;
      }
    },
    statusFilter(t) {
      if (t) {
        return t && orderEnum.status.find((item) => item.key == t).label;
      } else {
        return t;
      }
    },
    timeFilter(t) {
      if (t) {
        return dayjs(t).format("YYYY-MM-DD HH:mm:ss");
      } else {
        return "-";
      }
    },
  },
  watch: {
    drawer: function (newval) {
      if (!newval) {
        this.close();
      }
    },
  },
  computed: {
    vipDiscountAmount() {
      if (!this.detail.memberId) {
        return 0;
      }
      if (this.detail.status == "unpaid") {
        return this.detail.detailList
          .filter((v) => !$util.isTui(v) && v.productId != "-999")
          .reduce((prve, cur) => {
            if (!cur.isMember) {
              return prve + 0;
            } else {
              const memberPrice = cur.memberPrice ? cur.memberPrice : cur.price;
              return prve + (cur.price - memberPrice) * cur.num;
            }
          }, 0)
          .toFixed(2);
      }
      return 0
    },
    youHuiJinE() {
      console.log(this.vipDiscountAmount);
      const discountAmount=this.detail.discountAmount;
      const n = $util.numSum([
        this.vipDiscountAmount,
        discountAmount,
        this.detail.productCouponDiscountAmount,
        this.detail.fullCouponDiscountAmount,
        this.detail.pointsDiscountAmount,
      ]);
      if (n * 1 <= 0) {
        return "-";
      }
      return n;
    },
  },
  methods: {
    isShowGoodsVipPrice(item){
      return $util.isShowGoodsVipPrice(item);
    },
    isUseCalcPrice(item){
      return $util.isUseCalcPrice(this.detail,item);
    },
    close() {
      console.log("drawer close");
      this.$emit("close");
    },
    isTui(item) {
      return $util.isTui(item);
    },
    canTuikuan(item) {
      return $util.canTuiKuan(this.detail, item);
    },
    canTuicai(item) {
      return $util.canTuicai(this.detail, item);
    },
    async refReturnMoneyConfirm(e) {
      const res = await $returnOrder({
        ...e,
        orderId: this.detail.id,
        orderDetails: [
          {
            id: this.selGoods.id,
            num: e.num,
          },
        ],
      });
      this.$message.success("退款成功");
      this.update();
    },
    update() {
      this.tbOrderInfoDetail(this.detail.id);
    },
    async refReturnCartConfirm(e) {
      const res = await $returnCart({
        ...e,
        cartId: this.selGoods.cartId,
        tableId: this.detail.tableId,
      });
      this.$message.success("退菜成功");
      this.update();
    },
    tuikuan(item) {
      this.selGoods = item;
      console.log(item);
      this.$refs.refReturnMoney.open({...item,priceAmount:item.canReturnAmount});
    },
    tuiCai(item) {
      this.selGoods = item;
      console.log(item);
      this.$refs.refReturnCart.open(item);
    },
    // 切换类型
    getTableData() {
      if (this.type == "3") {
        this.tbOrderInfoData();
      }
    },
    // 获取退单列表
    async tbOrderInfoData() {
      try {
        const res = await tbOrderInfoData({
          source: this.detail.id,
          page: 0,
          pageSize: 500,
          orderType: "0",
        });
        this.refoundList = res.content;
      } catch (error) {
        console.log(error);
      }
    },
    // 获取订单详情
    async tbOrderInfoDetail(id) {
      try {
        this.loading = true;
        const res = await tbOrderInfoDetail(id);
        this.detail = res;
        this.loading = false;
      } catch (error) {
        console.log(error);
      }
    },
    show(obj) {
      this.drawer = true;
      this.type = "1";
      this.detail = "";
      this.tbOrderInfoDetail(obj.id);
    },
  },
};
</script>

<style scoped lang="scss">
.packeFee {
  width: 40px;
  box-sizing: border-box;
  height: 40px;
  background: #3f9eff;
  color: #fff;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}
.shop_info {
  display: flex;

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

.header {
  padding: 0 20px 0;

  .title {
    font-size: 20px;
    color: #ff9731;
  }

  .table {
    display: flex;
    padding: 20px 0;

    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 14px;

      .b {
        padding-top: 20px;
      }
    }
  }
}
.line-th{
  text-decoration: line-through;
}
.container {
  padding: 0 20px;
  font-size: 14px;

  .info_content {
    padding: 20px 0;

    .item {
      border-bottom: 1px dashed #ececec;
      padding-bottom: 20px;

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

      .label {
        position: relative;
        padding-left: 20px;
        color: #333;

        &::after {
          content: "";
          width: 4px;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          background-color: #1890ff;
        }
      }

      .row {
        display: flex;
        color: #555;
        padding-top: 20px;

        div {
          width: 25%;
        }
      }
    }
  }

  .refund_wrap {
    .row {
      border-bottom: 1px dashed #ececec;
      padding-bottom: 20px;

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

      .time {
        font-weight: bold;
        color: #333;
      }

      .list {
        .list_row {
          display: flex;
          padding-top: 10px;

          .item {
            flex: 1;
            display: flex;
            color: #555;

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

      .foot {
        color: #333;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}

.colorStyle {
  color: #ffc315;
}
</style>
