<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" :size="ELsize" v-show="showSearch" label-width="auto">
      <el-form-item label="订单号" prop="orderNo">
        <el-input v-model="queryParams.orderNo" placeholder="请输入订单号" maxlength="30" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="收货人" prop="receiverName">
        <el-input v-model="queryParams.receiverName" placeholder="请输入收货人姓名" maxlength="30" clearable
          @keyup.enter.native="handleQuery"></el-input>
      </el-form-item>
      <el-form-item label="收货人手机号" prop="receiverPhone">
        <el-input v-model="queryParams.receiverPhone" placeholder="请输入收货人手机号" maxlength="11" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="物流方式" prop="shippingMethod">
        <el-select v-model="queryParams.shippingMethod" clearable placeholder="请选择订单状态">
          <el-option label="普通快递" :value="0"></el-option>
          <el-option label="自提点自提" :value="10"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商家标识" prop="sellerMark">
        <el-select v-model="queryParams.sellerMark" clearable placeholder="请选择商家标识">
          <el-option label="普通" :value="0"></el-option>
          <el-option label="提醒" :value="10"></el-option>
          <el-option label="特别" :value="20"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="下单时间" prop="orderTime">
        <el-date-picker v-model="queryParams.orderTime" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
          start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-radio-group :size="ELsize" v-model="queryParams.transactionStatus" style="margin-bottom: 30px"
          @input="handleQuery">
          <el-radio-button :label="undefined">全部</el-radio-button>
          <el-radio-button v-for="(v, i) in OrderStatusOption" :key="i" :label="v.value">{{ v.label }}</el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="1.5"> </el-col>
      <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
    </el-row>
    <div class="table-data" v-loading="loading">
      <template v-if="dataList && dataList.length > 0">
        <div v-for="(item, index) in dataList" :key="index">
          <div class="title-div">
            <div class="flexcenter">
              <el-tooltip v-if="item.sellerRemark" class="item" effect="light" :content="item.sellerRemark"
                placement="top-start">
                <i class="el-icon-s-flag" :class="{
                  warning: item.sellerMark == 10,
                  danger: item.sellerMark == 20,
                }"></i>
              </el-tooltip>
              <span>订单号： {{ item.orderNo }}</span>
              <!-- <span class="ml10">支付订单号：{{ item.pay_order_code }}</span> -->
              <div class="ml10 text-1">店铺名称：{{ item.businessName }}</div>
              <div class="ml10 text-1">
                物流方式：
                <span v-if="item.shippingMethod == 0">普通快递</span>
                <span v-if="item.shippingMethod == 10">自提点自提</span>
              </div>

              <label class="ml10 wechatpay" v-if="item.exchange"> 积分兑换</label>
              <label class="ml10" v-if="item.exchange && item.actualPayment > 0">+</label>

              <template v-if="item.actualPayment > 0">
                <label class="ml10" :class="item.paymentMethod == 1
                  ? 'wechatpay'
                  : item.paymentMethod == 2
                    ? 'alipay'
                    : 'platformpay'
                  ">
                  <span v-if="item.paymentMethod == 0">余额支付</span>
                  <span v-if="item.paymentMethod == 1">微信支付</span>
                  <span v-if="item.paymentMethod == 2">支付宝支付</span>
                  <span v-if="item.paymentMethod == 3">积分支付</span>
                </label>
              </template>
            </div>
            <div>
              <el-button class="c-info" type="text" size="small" @click="viewHandle(item)">查看</el-button>
            </div>
          </div>
          <div class="table-content" v-for="(v, i) in item.orderDetails" :key="i">
            <div class="goods-info">
              <div class="good-img-div">
                <el-image class="table-img" :src="v.productCover" :preview-src-list="[v.productCover]">
                </el-image>
              </div>
              <div class="info">
                <div class="goods-title">{{ v.productTitle }}</div>
                <div class="price" v-if="item.exchange">
                  {{ v.singlePoint }}积分
                </div>
                <div class="price" v-if="!item.exchange">
                  ￥{{ v.singlePaymentAmount }}
                  <span v-if="v.singlePaymentAmount != v.realPrice">￥{{ v.realPrice }}
                  </span>
                </div>
                <div class="remark">{{ v.skuSetName }}</div>
              </div>
            </div>
            <div class="tc">
              <div v-if="item.exchange">{{ v.totalPoint }}积分</div>
              <div v-else>{{ v.paymentAmount }}</div>
              <div>({{ v.productNum }})</div>
            </div>
            <div class="tc" v-if="item.orderAddress">
              <div>{{ item.orderAddress.receiverName }}</div>
              <div>{{ item.orderAddress.receiverPhone }}</div>
            </div>
            <div class="tc" v-if="item.orderSelfPickup">
              <div>{{ item.orderSelfPickup.receiverName }}</div>
              <div>{{ item.orderSelfPickup.receiverPhone }}</div>
            </div>
            <div class="tc">
              <el-tag type="primary" v-if="v.transactionStatus == 0 && v.rightsMethod == 0">待支付</el-tag>
              <el-tag type="warning" v-if="v.transactionStatus == 10 && v.rightsMethod == 0">{{
                shippingStatusHandle(item,
                  v)
              }}</el-tag>
              <el-tag type="danger" v-if="v.transactionStatus == 20 && v.rightsMethod == 0">{{ rightsStatusHandle(item,
                v)
              }}</el-tag>
              <el-tag type="success" v-if="v.transactionStatus == 30 && v.rightsMethod == 0">交易完成</el-tag>
              <el-tag type="info" v-if="v.transactionStatus == 100 && v.rightsMethod == 0">订单取消</el-tag>
              <el-tag type="info" v-if="v.rightsMethod > 0">{{
                receivingStatusHandle(item, v)
              }}</el-tag>
            </div>
            <div class="tc">
              {{ item.createTime }}
            </div>
          </div>
          <div class="table-foot">
            <label class="freight" v-if="item.totalReduced">总优惠<label>￥{{ item.totalReduced }}</label></label>
            <label class="ml10 freight">{{
              item.shippingFee ? "运费：￥" + item.shippingFee : "免运费"
            }}</label>
            <label class="ml10" v-if="item.actualPayment > 0 && !item.exchange">实付金额：<label class="price">￥ {{
              item.actualPayment
            }}</label></label>
            <label class="ml10" v-if="item.paymentPoints > 0 && item.exchange">实付积分：<label> {{ item.paymentPoints
                }}</label></label>
          </div>
        </div>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" />
      </template>
      <template v-else>
        <el-empty :image-size="100"></el-empty>
      </template>
    </div>


    <!-- 详情 -->
    <el-dialog :title="`订单[${info.orderNo}]的详情`" top="5vh" :visible.sync="dialogVisible" width="60%">
      <orderDetail ref="orderDetail"></orderDetail>
    </el-dialog>
  </div>
</template>

<script>
import getListApi from "@/mixins/getListApi";
import {
  shopOrderPage,
  shopOrderPackageStockUp,
  shopOrderInfo,
  saleRightsOrderLaunch,
} from "@/api/order.js";
// shopOrderExport,
import orderDetail from "@/views/order/orderList/orderDetail.vue";
import { getShopOrderpageApi } from "@/api/chainStore.js";
import { OrderStatusOption } from "@/utils/statusEnum.js";
export default {
  components: { orderDetail },
  mixins: [getListApi],
  data() {
    return {
      OrderStatusOption,
      listURL: getShopOrderpageApi,
      // initializationShow: false,

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNo: undefined,
        receiverName: undefined,
        receiverPhone: undefined,
        shippingMethod: undefined,
        sellerMark: undefined,
        transactionStatus: undefined,
      },
      // 日期范围字段映射配置
      dateRangeMapping: {
        // 日期范围字段名: { start: 开始时间字段名, end: 结束时间字段名 }
        orderTime: { start: 'startTime', end: 'endTime' }
      },
      // --------------------------








      //按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 测试单表表格数据

      daterangeCreateTime: [],

      tabPosition: 0,
      shopList: [],
      reserveForm: {
        reservationDate: undefined,
        reservationTime: undefined,
      },
      reserveData: {
        reservationDateList: [],
        reservationTimeList: [],
      },
      btnLoading: false,
      reservationDateIndex: 0,
      verification: false,
      info: {},
      dialogVisible: false,
      deliverGoods: false,
      activeItem: {},
      goodsSubpackageShipmentsVisible: false,
      goodsSubpackageDetailVisible: false,
      addNote: false,
    };
  },
  created() {
    this.getList();
    // this.getShopList()
  },
  methods: {
    //  查看详情
    viewHandle(item) {
      this.info = item;
      this.dialogVisible = true;
      shopOrderInfo(item.orderId).then((res) => {
        this.$refs.orderDetail.init(res.data);
      });
    },

    shippingStatusHandle(mainOrder, child) {
      let text = "发";
      if (mainOrder.shippingMethod == 10) {
        text = "备";
      }
      if (child.shippingStatus == 0) {
        return "待" + text + "货";
      } else if (child.shippingStatus == 10) {
        return "部分" + text + "货";
      } else {
        return "已" + text + "货";
      }
    },
    receivingStatusHandle(mainOrder, child) {
      // if (mainOrder.rightsMethod == 0) {
      //   return ""
      // } else if (mainOrder.rightsMethod == 5) {
      //   return child.rightsStatus == 5 ? '退款中' : '退款完成'
      // } else {
      //   return child.rightsStatus == 5 ? '退货中' : '退货完成'
      // }
      return child.rightsStatus == 5 ? "退货中" : "退货完成";
    },
    rightsStatusHandle(mainOrder, child) {
      let text = "收货";
      if (mainOrder.shippingMethod == 10) {
        text = "自提";
      }
      if (child.rightsStatus == 0) {
        return "待" + text;
      } else if (child.rightsStatus == 10) {
        return "部分" + text;
      } else {
        return "已" + text;
      }
    },
    // getList() {
    //   return;
    //   this.loading = true;
    //   this.queryParams["startTime"] = undefined;
    //   this.queryParams["endTime"] = undefined;
    //   if (null != this.daterangeCreateTime && "" != this.daterangeCreateTime) {
    //     this.queryParams["startTime"] = this.daterangeCreateTime[0];
    //     this.queryParams["endTime"] = this.daterangeCreateTime[1];
    //   }
    //   shopOrderPage(this.queryParams).then((response) => {
    //     this.list = response.rows;
    //     this.total = response.total;
    //     this.loading = false;
    //   });
    // },
    // 表单重置
    reset() {
      this.form = {
        name: undefined,
        shelvedStatus: undefined,
        orderIndex: 1,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeCreateTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>

<style lang="scss" scoped>
.mt30 {
  margin-top: 30px;
}

.flexcenter {
  display: flex;
  align-items: center;
}

.thirdColor {
  color: #fff;
}

.text-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 300px;
}

.good-img-div {
  img {
    width: 85px;
    height: 85px;
    display: flex;
  }
}

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

.title-div {
  padding: 0 30px;
  height: 40px;
  background-color: #e5e5e5;
  color: #333333;
  line-height: 40px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}

.tc {
  text-align: center;
}

.table-data {
  .alipay {
    color: #009fe8;
  }

  .wechatpay {
    color: #1aad19;
  }

  .platformpay {
    color: #17b3a3;
  }

  >div {
    border: 1px solid #f0f0f0;
  }

  .table-content {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;

    >div {
      min-width: 20%;
    }

    .goods-info {
      display: flex;
      align-items: center;
      width: 20%;

      .info {
        text-align: left;
        margin-left: 10px;
        width: 60%;
      }

      .goods-title {
        font-size: 14px;
        height: 30px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .remark {
        font-size: 12px;
        color: #b1b1b1;
      }

      .price {
        font-size: 14px;
        color: #f3415f;
        margin-bottom: 15px;
        display: flex;
        align-items: center;

        i {
          cursor: pointer;
        }

        span {
          color: #b1b1b1;
          text-decoration: line-through;
        }
      }

      .price>input {
        border: none;
        color: #f3415f;
        width: auto;
        width: 50%;
        padding: 5px;
        margin: 0 2px;
        box-sizing: border-box;
        // transition: all .3s;
      }

      input:focus {
        outline: unset;
      }
    }
  }

  .table-foot {
    height: 40px;
    text-align: right;
    color: #333333;
    line-height: 40px;
    font-size: 14px;
    padding: 0 15px;

    .price {
      color: #f3415f;
    }

    .freight {
      color: #b1b1b1;
      margin-right: 10px;
    }
  }
}

.ml10 {
  margin-left: 10px;
}

.can-input {
  border: 1px solid #dfdfdf !important;
  border-radius: 2px;
}

.table-img {
  width: 100px;
  height: 100px;
}

.warning {
  color: #e6a23c;
}

.danger {
  color: #f56c6c;
}

.el-icon-s-flag {
  font-size: 20px;
}
</style>
