<template>
  <!-- 我的订单 -->
  <div class="user-order-list">
    <div class="user-com-tab">
      <span
        class="item"
        :class="{ on: tabCur === item.key }"
        v-for="(item, index) in tabList"
        :key="index"
        @click="bindTab(item)"
      >
        {{ item.title }}
        <template v-if="item.num">({{ item.num }})</template>
      </span>
    </div>
    <div class="order-list">
      <ul>
        <li v-for="(item, index) in orderList" :key="index">
          <div class="bd" @click="goDetail(item)">
            <div class="order-txt">
              <span class="sign" v-if="item.type == 2">砍价</span>
              <span class="sign" v-else-if="item.type == 3">拼团</span>
              <span class="sign" v-else-if="item.type == 1">秒杀</span>
              订单日期: {{ item._add_time }}
              <span class="ml15">{{item._status._msg}}</span>
              <div v-if="item._status._type == 9" class="status">线下付款,未支付</div>
              <div v-else-if="item._status._type == 0" class="status">待付款</div>
              <div
                v-else-if="item._status._type == 1 && (item.shipping_type == 1 || item.shipping_type == 3)"
                class="status"
              >
                待发货
                <span v-if="item.refund.length">{{item.is_all_refund?'，退款中':'，部分退款中'}}</span>
              </div>
              <div
                v-else-if="item._status._type == 1 && (item.shipping_type == 2 || item.shipping_type == 4)"
                class="status"
              >
                {{item.shipping_type == 2?'待核销':'待收货'}}
                <span
                  v-if="item.refund.length"
                >{{item.is_all_refund?'，退款中':'，部分退款中'}}</span>
              </div>
              <div v-else-if="item._status._type == 2" class="status">
                待收货
                <span v-if="item.refund.length">{{item.is_all_refund?'，退款中':'，部分退款中'}}</span>
              </div>
              <div v-else-if="item._status._type == 3" class="status">
                待评价
                <span v-if="item.refund.length">{{item.is_all_refund?'，退款中':'，部分退款中'}}</span>
              </div>
              <div v-else-if="item._status._type == 4" class="status">
                已完成
                <span v-if="item.refund.length">{{item.is_all_refund?'，退款中':'，部分退款中'}}</span>
              </div>
              <div v-else-if="item._status._type == -2" class="status">已退款</div>
              <div v-else-if="item._status._type == 5 && item.status == 0" class="status">
                待核销
                <span v-if="item.refund.length">{{item.is_all_refund?'，退款中':'，部分退款中'}}</span>
              </div>
              <div v-else-if="item._status._type == 5 && item.status == 5" class="status">
                部分核销
                <span v-if="item.refund.length">{{item.is_all_refund?'，退款中':'，部分退款中'}}</span>
              </div>
              <div v-else-if="item._status._type == -1" class="status">申请退款</div>
            </div>
            <div class="content">
              <div class="goods-item" v-for="(goods, index) in item.cartInfo" :key="index">
                <div class="img-box" v-if="goods.productInfo.attrInfo">
                  <img :src="goods.productInfo.attrInfo.image" alt />
                </div>
                <div class="img-box" v-else>
                  <img :src="goods.productInfo.image" alt />
                </div>
                <div class="txtCon acea-row row-between-wrapper">
                  <div class="info-txt">
                    <div class="title line2">
                      <span v-if="goods.is_gift" class="font-color-red">[赠品]</span>
                      {{ goods.productInfo.store_name }}
                    </div>
                    <div
                      class="info"
                      v-if="goods.productInfo.attrInfo"
                    >{{ goods.productInfo.attrInfo.suk }}</div>
                    <div
                      v-if="goods.refund_num && item._status._type != -2"
                      class="return"
                    >{{ goods.refund_num }}件退款中</div>
                  </div>
                  <div class="cartInfo">
                    <div>¥{{goods.productInfo.attrInfo?goods.productInfo.attrInfo.price:goods.productInfo.price}}</div>
                    <div class="num">x{{ goods.cart_num }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="foot">
            <p>
              共{{ item.total_num || 0 }}件商品，总金额
              <span>￥{{ item.pay_price }}</span>
              (含运费{{ item.pay_postage }})
            </p>
            <div class="btn-wrapper">
              <div
                class="rest"
                v-if="item._status._type === 0 || item._status._type === 9"
                @click="cancelOrder(item, index)"
              >取消订单</div>
              <div class="pay" v-if="item.paid === 0" @click="goBuy(item)">立即支付</div>
              <!--<div class="rest" v-if="item._status._type === 1 || item._status._type === 9"-->
              <!--@click="goRefound(item)">申请退款-->
              <!--</div>-->
              <div
                class="rest"
                v-if="item._status._type === 3 || item._status._type === 4"
                @click="goOrderConfirm(item.order_id)"
              >再次购买</div>
              <div
                class="pay"
                v-if="item._status._type === 3 && !item.is_reply"
                @click="goDetail(item)"
              >去评价</div>
              <div class="pay" v-if="item._status._type === 4" @click="delOrder(item)">删除订单</div>
              <div class="pay" @click="goDetail(item)">查看详情</div>
            </div>
          </div>
          <div class="refund-icon" v-if="item._status._type === -1 || item._status._type === -2">
            <img src="~assets/images/order_status_1.png" alt v-if="item.refund_status === 2" />
            <img src="~assets/images/order_status_2.png" alt v-if="item.refund_status === 1" />
          </div>
        </li>
      </ul>
      <div class="pages-box" v-if="total > 0">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="bindPageCur"
          :total="total"
          :current-page="page"
        ></el-pagination>
      </div>
      <div class="empty-box" v-if="orderList.length == 0">
        <img src="~assets/images/noorder.png" alt />
        <p>亲，暂无订单信息哟~</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "orderList",
  auth: "guest",
  scrollToTop: true,
  data() {
    return {
      tabCur: "",
      tabList: [
        {
          title: "全部订单",
          key: ""
        },
        {
          title: "待付款",
          key: "0",
          numberName: "unpaid_count"
        },
        {
          title: "待发货",
          key: "1",
          numberName: "unshipped_count"
        },
        {
          title: "待收货",
          key: "2",
          numberName: "received_count"
        },
        {
          title: "待评论",
          key: "3",
          numberName: "evaluated_count"
        },
        {
          title: "已完成",
          key: "4",
          numberName: "complete_count"
        }
      ],
      orderList: [],
      total: 0,
      page: 1,
      limit: 10
    };
  },
  fetch({ store }) {
    store.commit("isHeader", true);
    store.commit("isFooter", true);
  },
  head() {
    return {
      title: "我的订单-" + this.$store.state.titleCon
    };
  },
  created() {},
  mounted() {
    Promise.all([this.getList(), this.getNumber()]);
  },
  methods: {
    //  再次购买
    goOrderConfirm(orderId) {
      let that = this;
      that.$axios
        .post("/order/again", {
          uni: orderId
        })
        .then(res => {
          that.$router.push({
            path: "/order_confirm",
            query: { new: 1, cartId: res.data.cateId }
          });
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    //删除订单
    delOrder(item) {
      let that = this;
      this.$confirm("确定删除该订单吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(res => {
        that.$axios
          .post("/order/del", {
            uni: item.order_id
          })
          .then(data => {
            that.getList();
            that.tabList.forEach((i, index) => {
              if (i.key == 4) {
                that.$set(
                  that.tabList[index],
                  "num",
                  that.tabList[index].num - 1
                );
              }
            });
            this.$message.success("删除成功");
          });
      });
    },
    // 选项卡
    bindTab(item) {
      this.tabCur = item.key;
      this.page = 1;
      this.getList();
    },
    // 获取订单个数
    getNumber() {
      this.$axios.get("order/data").then(res => {
        for (var i in res.data) {
          this.tabList.forEach(tab => {
            if (i == tab.numberName) {
              tab.num = res.data[i];
            }
          });
        }
      });
    },
    // 获取订单列表
    getList() {
      this.$axios
        .get("pc/get_order_list", {
          params: {
            type: this.tabCur,
            page: this.page,
            limit: this.limit
          }
        })
        .then(res => {
          this.orderList = res.data.list;
          this.total = res.data.count;
        });
    },
    // 取消订单
    cancelOrder(item) {
      this.$confirm("确定取消该订单吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(res => {
        this.$axios
          .post("order/cancel", {
            id: item.order_id
          })
          .then(data => {
            this.getList();
            this.tabList.forEach((item, index) => {
              if (item.key == 0) {
                this.$set(
                  this.tabList[index],
                  "num",
                  this.tabList[index].num - 1
                );
              }
            });
            return this.$message.success(data.msg);
          });
      });
    },
    // 查看详情
    goDetail(item) {
      this.$router.push({
        path: `/order_detail`,
        query: {
          orderId: item.order_id
        }
      });
    },
    // 去评价
    goEvaluation(item) {
      this.$router.push({
        path: `/evaluation`,
        query: {
          unique: item.unique
        }
      });
    },
    // 去退款
    goRefound(item) {
      this.$router.push({
        path: `/refund`,
        query: {
          orderId: item.order_id
        }
      });
    },
    // 去物流
    goLogistics(item) {
      this.$router.push({
        path: `/logistics`,
        query: {
          orderId: item.order_id
        }
      });
    },
    // 分页点击
    bindPageCur(data) {
      this.page = data;
      this.getList();
    },
    // 立即支付
    goBuy(item) {
      this.$router.push({
        path: "/payment",
        query: {
          result: item.order_id
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.user-com-tab {
  .item {
    padding: 0 10px;
  }
}

.user-order-list {
  li {
    position: relative;
    padding: 30px 0 26px;
    border-bottom: 1px solid #ececec;
    .refund-icon {
      position: absolute;
      right: 50px;
      top: 40px;
    }
    .bd {
      padding-right: 40px;
      border-bottom: 1px dashed #e1e1e1;
      cursor: pointer;

      .order-txt {
        color: #282828;
        font-size: 14px;

        .sign {
          border: 1px solid #e93323;
          color: #e93323;
          padding: 0 5px;
          border-radius: 3px;
          font-size: 12px;
          margin-right: 3px;
        }

        .status {
          float: right;
          color: #e93323;
        }
      }

      .content {
        margin-top: 20px;

        .goods-item {
          display: flex;
          position: relative;
          margin-bottom: 20px;

          .img-box {
            width: 120px;
            height: 120px;

            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }

          .txtCon {
            width: 795px;
          }

          .cartInfo {
            font-size: 14px;
            color: #999;
            text-align: right;
            .num {
              font-size: 12px;
              margin-top: 2px;
            }
          }

          .info-txt {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 500px;
            margin-left: 24px;
            font-size: 14px;
            .info {
              font-size: 12px;
              color: #aaa;
              margin-top: 4px;
            }

            .return {
              color: #e93323;
              font-size: 12px;
              margin-top: 3px;
            }

            .price {
              margin-top: 15px;
              color: #e93323;
            }

            .num {
              position: absolute;
              right: 0;
              top: 60%;
              transform: translateY(-50%);
              color: #999999;
            }
          }
        }
      }
    }

    .foot {
      padding-top: 26px;
      padding-right: 32px;

      p {
        text-align: right;
        color: #666;
        font-size: 14px;

        span {
          color: #e93323;
        }
      }

      .btn-wrapper {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;

        div {
          width: 110px;
          height: 36px;
          text-align: center;
          line-height: 34px;
          margin-left: 20px;
          border: 1px solid #999999;
          border-radius: 4px;
          font-size: 14px;
          color: #666666;
          cursor: pointer;

          &.pay {
            border-color: #e93323;
            background: #e93323;
            color: #fff;
          }
        }
      }
    }
  }
}
.pages-box {
  margin-top: 30px;
  text-align: right;
}
</style>