<!--
  @description: 已取消订单
  @Modifier：dijia
  @routerPath: /personalCenter/myorder
  @date：  2021/09/13
-->
<template>
  <div v-loading="loading" style="height:100%;">
    <div v-if="orderList.length" id="no_scroll" class="scrollbar">
      <div
        v-for="(item, index) in orderList"
        :key="index"
        class="all-order"
        style="overflow: hidden"
      >
        <!-- 大订单标题 -->
        <div class="item_title_top title_box">
          <span>{{ item.createTime }}</span>
          <span>订单号：{{ item.orderNumber }}</span>
          <span v-if="item.status === '00'&&!item.orderPage[0].isSelfShop">
            店铺订单号：
            {{ item.supplierOrderId }}
          </span>
          <span>
            {{ item.status === '11' ? '订单合计：¥' : '店铺合计：¥' }}
            {{ item.parentOrderAmount }}
          </span>
          <span v-if="item.status === '00'">店铺：
            <span class="goodsDepartCon">
              {{ item.goodsDepartName }}
            </span>
          </span>
          <!-- <i class="el-icon-delete cursor delete_order" title="删除订单" @click="deleteOrdersClickBtn(item.id)" /> -->
        </div>
        <!-- 子订单 -->
        <div class="item_box_details">
          <div class="item_box_layout">
            <div v-for="(goodslist, gindex) in item.orderPage" :key="gindex" class="item_box">
              <!-- 订单详情 金额 收货人 状态 -->
              <div v-if="item.status === '11'" class="item_title_top default_back">
                <span>子订单号：{{ goodslist.orderNo }}</span>
                <span v-if="!goodslist.isSelfShop">
                  店铺订单号：{{
                    goodslist.supplierOrderId1
                  }}
                </span>
                <span>
                  店铺合计：¥ {{ goodslist.orderdetails[0].orderAmount }}
                </span>
                <span>店铺：
                  <span class="goodsDepartCon">
                    {{
                      goodslist.goodsDepartName
                    }}
                  </span>
                </span>
              </div>
              <!-- 11 为拆单 -->
              <div :class="['item',item.status === '11'? 'border_top_display':'']">
                <!-- 订单详情左侧 -->
                <div class="item-left">
                  <div v-for="(val,i) in goodslist.orderdetails" :key="i" class="item_left_box">
                    <!-- 商品图片和商品名称 -->
                    <div class="shop-item">
                      <div v-for="(childrens, ind) in val.skus" :key="ind" class="item_goods_list">
                        <div class="goods_title_box">
                          <div class="img_container" @click="goToDetail(childrens)">
                            <img :src="childrens.productPicture" alt width="69px" height="69px">
                          </div>
                          <div class="goodsName goods_item_title_two" :title="childrens.goodsName" @click="goToDetail(childrens)">
                            {{ childrens.goodsName }}
                          </div>
                        </div>
                        <div class="goodsNumber">
                          <span>x</span>{{ childrens.number }}
                        </div>
                        <div class="refund_btn">
                          售后相关
                        </div>
                      </div>
                    </div>
                    <!-- 金额列 -->
                    <div class="total_count">
                      <div v-for="(gchildrens, gind) in val.skus" :key="gind" class="total_count_in">
                        ￥<span class="count">{{ gchildrens.commodityPrice }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 订单详情右侧 -->
                <div class="item-right">
                  <!-- 收货人 -->
                  <div class="receive_name">
                    <div
                      v-for="(vas,receives) in goodslist.orderdetails"
                      :key="receives"
                      :style="{ height:vas.skus.length * 117 +'px' }"
                      class="receive_name_ins"
                    >
                      {{ goodslist.receiverName }}
                    </div>
                  </div>
                  <!-- 全部状态栏 -->
                  <div class="all_status">
                    <div
                      class="sleep-fk"
                    >
                      <div
                        v-for="(vas,sleeps) in goodslist.orderdetails"
                        :key="sleeps"
                        :style="{ height:vas.skus.length * 117 +'px' }"
                        style="color: #666666;"
                        class="nd_in"
                      >
                        <div v-if="item.status === '11'" class="sk">
                          {{ goodslist.orderStatus | formatStatus }}
                        </div>
                        <div v-else class="sk">
                          {{ item.orderStatus | formatStatus }}
                        </div>
                        <div
                          class="order-detail"
                          @click="orderDetailBtn(goodslist,item)"
                        >
                          订单详情
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 操作 -->
          <div class="item_box_operating">
            <!-- 操作列 $route.meta.type 为 's'即为订单管理页 -->
            <div v-if="orderData.type !== '01'" class="audit_btn">
              <!-- 订单已取消并驳回 -->
              <div
                v-if="(item.orderStatus === '00'&&item.auditStatus==='02')"
                class="audit_record"
                @click="showAuditRecord(item.id)"
              >
                审核详情
              </div>
              <!-- 00:已驳回 04:已取消 13:供应商取消 -->
              <div
                v-if="item.orderStatus === '00'||item.orderStatus === '04'||item.orderStatus === '13'"
                class="assess"
                @click="repurChaseClickBtn(item.orderPage,item.status)"
              >
                再次购买
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 订单列表为空 -->
    <div v-if="!orderList.length" style="height:100%">
      <div class="all-order" style="overflow: hidden">
        <dl id="no-order">
          <dt>
            <img src="@/assets/img/shopmall/noOrder.png" alt>
          </dt>
          <dd>
            <p>没有已取消的订单哦~</p>
            <p @click="watchPage">
              查看全部订单
            </p>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
// api
import {
  deleteOrders,
  repurchase
} from '@/api/shoppingmall/order'
import { orderGrounpMixin } from './mixins/orderGroupMixins'
export default {
  mixins: [orderGrounpMixin],
  props: {
    // 订单列表数据
    orderList: {
      type: Array,
      default: function() {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    // 其它参数
    orderData: {
      type: Object,
      default: function() {
        return {
          activeName: '', // 默认选中tabList index值
          activeIndex: '', // 当前选中tab下标
          type: '' // 00 我的订单 01订单查看
        }
      }
    }
  },
  data() {
    return {
      totalPrice: 0,
      type: '',
      text: ''
    }
  },
  methods: {
    // 跳转到全部订单列
    watchPage() {
      this.$emit('watchPage', '0')
    },
    // 回调函数
    callBack() {
      this.$emit('updateOrderNum')
    },
    // 返回
    goToHome() {
      this.$router.push({ path: '/shop/shopHome' })
    },
    // 商品详情
    goToDetail(val) {
      this.$router.push({
        path: '/shop/goodsClassDetail',
        query: { id: val.goodsId }
      })
    },
    // 查看订单详情
    orderDetailBtn(val, item) {
      this.$router.push({
        path: '/personalCenter/orderShopDetail',
        query: {
          orderId: val.orderId, // 订单id
          supplierOrderId1: val.supplierOrderId1, // 子订单 店铺订单号
          supplierOrderId: item.supplierOrderId, // 大订单 店铺订单号
          status: item.status, // 是否拆单
          from: this.orderData.type === '01' ? '/personalCenter/myorderDital' : '/personalCenter/myorder', // 记录从哪个页面跳转到详情页
          menuIndex: this.orderData.activeIndex // 当前选中tab
        }
      })
    },
    // 删除订单
    deleteOrdersClickBtn(id) {
      this.$confirm('确认要删除订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        deleteOrders(id).then(res => {
          this.$message.success('订单删除成功')
          this.callBack()
        }).catch(() => {
        })
      }).catch(() => {})
    },
    // 再次购买
    repurChaseClickBtn(orderPgae, status) {
      let result = ''
      if (status === '00') {
        result = ''
      } else {
        result = '11'
      }
      const idList = []
      orderPgae.forEach(item => {
        idList.push(item.orderId)
      })
      repurchase(idList.join(','), result).then(res => {
        this.$router.push({ path: '/shop/myshoppingCart' })
      }).catch(() => {
      })
    },
    // 查看审核详情
    showAuditRecord(id) {
      this.$router.push({
        path: '/personalCenter/orderAuditRecord',
        query: {
          id: id,
          menuIndex: this.orderData.activeIndex, // 当前选中tab
          type: this.orderData.type
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.item_box_details {
  display: flex;
  .item_box_layout {
    flex: 9;
  }
}
.item_box_operating {
  flex: 1;
  position: relative;
  border-left: 1px solid #eee;
  border-bottom: 1px solid #eee;
  .assess {
    border: 1px solid #e0e0e0;
    font-size: 12px;
    font-family: Microsoft YaHei;
    background: #f2f2f2;
    color: #333333;
    line-height: 26px;
    text-align: center;
    width: 75px;
    height: 28px;
    display: inline-block;
    cursor: pointer;
    margin-top: 5px;
    &:hover {
      color: #FFF;
      background-color: #007CCC;
      border-color: #b3d8f0;
    }
  }
}
.all-order {
  margin: 20px 0 0px 0;
  border: 1px solid #eee;
  border-bottom: none;
}
.pagination_style {
  margin-top: 20px;
}
.el-scrollbar__wrap {
  overflow: hidden;
}

.sk {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #AAA;
  line-height: 24px;
}
.goodsDepartCon{
  display: inline-block;
  border-width: 0px;
  padding: 1px 5px;
  width: auto;
  background-color: rgba(245, 154, 35, 1);
  text-align: center;
  border-radius: 4px;
  box-shadow: none;
  font-size: 12px;
  color: #FFFFFF;
}
.item-title {
  .icon-shanchu {
    float: right;
    margin-right: 20px;
    width: 12px;
    height: 15px;
  }

  .icon-shanchu:hover {
    color: #ff6600;
  }

  span {
    display: inline-block;

    &:nth-child(1) {
      margin-left: 10px;
    }

    &:nth-child(2) {
      margin-left: 10px;
      margin-right: 10px;
    }
  }
}
.border_top_display {
  border-top: 1px solid #eee;
}
.item {
  display: flex;
  font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
  border-bottom: 1px solid #eee;
  .item-left {
    flex: 7;
    display: flex;
    .item_left_box {
      flex: 1;
      display: flex;
    }
    .shop-item {
      display: flex;
      flex: 6;
      flex-direction: column;
      .item_goods_list {
        width: 100%;
        display: flex;
        height: 117px;
        align-items: center;
        .goods_title_box {
          flex: 4;
          display: flex;
          align-items: center;
          .img_container {
            cursor: pointer;
            width:75px;
            height:75px;
            margin-left: 15px;
            border: 1px solid #eee;
            padding: 2px;
          }
        }
        .goodsName {
          flex: 1;
          color: #333333;
          font-family: "MicrosoftYaHei";
          cursor: pointer;
          margin: 18px 30px 18px 15px;
          height: 36px;
        }
        .goodsName:hover {
          color: #00aaca;
          font-family: "MicrosoftYaHei";
        }
        .goodsNumber {
          flex: 1;
          color: #AAA;
          text-align: center;
          >span {
            margin-right: 1px;
          }
        }
        .refund_btn {
          flex: 1;
          text-indent: -9999em;
        }
      }
    }
    .total_count {
      flex: 1;
      text-align: center;
      border-right: 1px solid #eeeeee;
      border-left: 1px solid #eeeeee;
      .total_count_in {
        color: #AAA;
        width: 100%;
        height: 117px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #eeeeee;
        &:last-of-type {
          border-bottom: none;
        }
      }
    }
  }

  .item-right {
    flex: 2;
    height: 100%;
    display: flex;

    .receive_name {
      flex: 1;
      border-right: 1px solid #eeeeee;

      .receive_name_ins {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0 1em;
      }
    }
    .all_status {
      flex: 1;
      text-align: center;
      .sleep-fk {
        // width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        border-top: 1px solid #eeeeee;
        // border-right: 1px solid #eeeeee;
        &:nth-of-type(1) {
          border-top: none;
        }
        .nd_in {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        .order-detail {
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333;
          line-height: 24px;
          cursor: pointer;
          &:hover {
            color: #007CCC;
          }
        }
      }
    }
    // .repay {
    //   color: #ff6600;
    //   border: 1px solid #ff6600;
    //   height: 26px;
    //   line-height: 26px;
    //   width: 67px;
    //   text-align: center;
    //   margin-right: 20px;
    //   margin-top: 20px;
    //   cursor: pointer;
    // }

  }
}
.audit_record {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 24px;
  color: #AAA;
  cursor: pointer;
  &:hover {
    color: #007CCC;
  }
}
.audit_btn {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.item_title_top {
  width: 100%;
  background-color: #fafafa;
  padding: 10px 0;
  font-size: 12px;
  border-top: none;
  color: #666;
  border-bottom: 1px solid #eee;
  >span {
    margin-left: 10px;
    margin-right: 10px;

    &:nth-of-type(1) {
      margin-left: 10px;
    }
  }
}
.title_box {
  position: relative;
  .delete_order {
    position: absolute;
    color: #bfbfbf;
    font-size: 16px;
    top: 50%;
    right: 16px;
    transform: translate(-50%,-50%);
    &:hover {
      color: #007CCC;
    }
  }
}
.default_back {
  background-color: #fff;
  padding: 8px 0;
  border-bottom: none;
}
#no-order {
  width: 30%;
  display: flex;
  margin: 168px auto;

  p {
    text-indent: 35px;
    color: #333333;
    font-size: 16px;
    margin-top: 10px;

    &:nth-last-of-type(1) {
      font-size: 12px;
      width: 104px;
      height: 26px;
      text-indent: 0;
      text-align: center;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(224, 224, 224, 1);
      color: rgba(102, 102, 102, 1);
      line-height: 24px;
      margin-top: 35px;
      margin-left: 34px;
      cursor: pointer;
    }
  }
}

</style>
