<!--
  @description:全部订单
  @Modifier：dijia
  @routerPath: /personalCenter/myorder
  @date：  2021/09/17
-->
<template>
  <div v-loading="loading" style="height:100%; margin-top: 20px">
    <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>
          <!-- item.status： 00：不拆单 11：大订单 拆单 -->
          <!-- 自营商铺不显示 店铺订单号 isSelfShop：是否为自营 true:是 false:不是 -->
          <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>
        <!-- orderStatus：订单的状态 01：待审核 02：待发货 03：待收货 10：已完成（待评价/已评价） 00：已驳回 04：已取消 13：供应商取消-->
        <!-- 已完成/已评价/待评价/待收货/待发货 -->
        <div v-if="['10','03','02'].indexOf(item.orderStatus) > -1 && orderData.type!=='01'">
          <!-- 子订单 -->
          <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>
            <div class="item_box_details">
              <div class="item_box_layout">
                <!-- 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 v-if="['03','10'].indexOf(item.orderStatus) > -1">
                              <!-- // 状态 待收货/已完成/已评价/待评价 -->
                              <div style="color:#F59A23;">
                                {{ fstatus(childrens.orderBackStatus) }}
                              </div>
                              <!-- <div style="color:#007CCC;" class="cursor" @click="afterSalesService(childrens, goodslist, item)">
                                申请售后
                              </div> -->
                              <!-- // 售后详情 -->
                              <div v-if="childrens.orderBackStatus !== null" class="cursor refund_detail" @click="refundDetail(childrens)">
                                售后查看
                              </div>
                              <!-- // 发起售后 -->
                              <!-- item.orderStatus 订单状态 -->
                              <div v-if="orderData.type!=='01' && (item.orderStatus==='03' || item.orderStatus==='10')">
                                <div
                                  v-if="childrens.orderBackStatus === null || childrens.orderBackStatus === '02'|| childrens.orderBackStatus === '03'|| childrens.orderBackStatus === '04'"
                                  class="cursor refund_detail"
                                  @click="saleDataClick(item, childrens, goodslist)"
                                >
                                  售后服务
                                </div>
                              </div>
                            </div>
                            <div v-if="['02'].indexOf(item.orderStatus) > -1" class="text_indent">
                              售后
                            </div>
                          </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' && goodslist.orderStatus!== '10'&& orderData.type!=='01'" class="sk">
                            {{ goodslist.orderStatus | formatStatus }}
                          </div>
                          <div v-if="item.status === '00' && item.orderStatus!== '10'&& orderData.type!=='01'" class="sk">
                            {{ item.orderStatus | formatStatus }}
                          </div>
                          <!-- 已完成订单状态 需要同时显示待评价/已评价 -->
                          <div v-if="item.status === '00' && item.orderStatus=== '10'&& orderData.type!=='01'">
                            <div class="sk">
                              {{ item.auditOptions=== '00' ? '待评价' : '已评价' }}
                            </div>
                          </div>
                          <div v-if="item.status === '11' && goodslist.orderStatus=== '10'&& orderData.type!=='01'">
                            <!-- <div class="sk">
                              已完成
                            </div> -->
                            <div class="sk">
                              {{ item.auditOptions=== '00' ? '待评价' : '已评价' }}
                            </div>
                          </div>
                          <div
                            class="order-detail"
                            @click="orderDetailBtn(goodslist,item)"
                          >
                            订单详情
                          </div>
                          <div
                            v-if="(item.status === '11' && goodslist.orderStatus === '10')||(item.status === '00' && item.orderStatus ==='10')"
                            class="order-detail"
                            @click="orderExportBtn(goodslist)"
                          >
                            订单导出
                          </div>
                          <!-- 发货后可查看物流 -->
                          <div
                            v-if="(item.status === '11' && ['03','10'].indexOf(goodslist.orderStatus) > -1 && orderData.type!=='01')||(item.status === '00' && ['03','10'].indexOf(item.orderStatus) > -1 && orderData.type!=='01')"
                            class="order-detail"
                            @click="orderDetailBtn(goodslist,item)"
                          >
                            查看物流
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 操作 -->
              <div
                v-for="(operateItem,operatind) in goodslist.orderdetails"
                :key="operatind"
                :style="{ height:operateItem.skus.length * 117 + (item.status === '11' ? 2 : 1 ) +'px' }"
                :class="['item_box_operating',item.status === '11' ? 'border_top_display' : '']"
              >
                <!-- 操作列 $route.meta.type 为 's'即为订单管理页 -->
                <div v-if="orderData.type!=='01'" class="audit_btn">
                  <!-- status：订单是否为拆单 00：只有一家店铺的订单 11：多家店铺的大订单 -->
                  <!-- orderStatus：订单的状态 01：待审核 02：待发货 03：待收货 10：已完成（待评价/已评价） 00：已取消/已驳回 -->
                  <!-- auditOptions：评价状态 00未评价 01已评价 -->
                  <!-- 待发货订单 -->
                  <!-- <div
                    v-if="(item.status==='11'&&goodslist.orderStatus==='02')||(item.status==='00'&&item.orderStatus==='02')"
                    class="assess"
                    @click="remindShipment(goodslist,operateItem,item)"
                  >
                    提醒发货
                  </div> -->
                  <div
                    v-if="(item.status==='11'&&goodslist.orderStatus==='02')||(item.status==='00'&&item.orderStatus==='02')"
                    class="assess"
                    @click="sendOrderCancel(goodslist,operateItem,item)"
                  >
                    取消订单
                  </div>
                  <!-- 待收货订单 -->
                  <div
                    v-if="(item.status==='11'&&goodslist.orderStatus==='03')||(item.status==='00'&&item.orderStatus==='03')"
                    class="assess"
                    @click="receiveOrderDetail(goodslist,operateItem,item)"
                  >
                    确认收货
                  </div>
                  <!-- 已完成订单 -->
                  <!-- <div
                    v-if="(item.status==='11'&&goodslist.orderStatus==='10')||(item.status==='00'&&item.orderStatus==='10')"
                    class="assess"
                    @click="viewInvoice(goodslist,operateItem,item)"
                  >
                    查看发票
                  </div> -->
                  <!-- 已完成订单 未评价 -->
                  <div
                    v-if="(item.status==='11'&&goodslist.orderStatus==='10'&&goodslist.auditOptions==='00')||(item.status==='00'&&item.orderStatus==='10'&&item.auditOptions==='00')"
                    class="assess"
                    @click="orderEvaluae(goodslist,item)"
                  >
                    评价
                  </div>
                  <!-- 已完成订单 已评价 -->
                  <div
                    v-if="(item.status==='11'&&goodslist.orderStatus==='10'&&goodslist.auditOptions==='01')||(item.status==='00'&&item.orderStatus==='10'&&item.auditOptions==='01')"
                    class="assess"
                    @click="orderEvaluaeDetail(goodslist,item)"
                  >
                    查看评价
                  </div>
                  <!-- 已完成订单 已评价 -->
                  <!-- <div
                    v-if="(item.status==='11'&&goodslist.orderStatus==='10'&&goodslist.auditOptions==='01')||(item.status==='00'&&item.orderStatus==='10'&&item.auditOptions==='01')"
                    class="assess"
                  >
                    追加评价
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 待审核/已取消/已驳回 -->
        <div v-if="['01','00','04','13'].indexOf(item.orderStatus) > -1 && orderData.type!=='01'||['01','00','10','03','02'].indexOf(item.orderStatus) > -1 && orderData.type==='01'">
          <!-- 子订单 -->
          <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 class="text_indent">
                              售后相关
                            </div>
                          </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'&& orderData.type!=='01'" class="sk">
                            {{ goodslist.orderStatus | formatStatus }}
                          </div>
                          <div v-if="item.status === '00'&& orderData.type!=='01'" class="sk">
                            {{ item.orderStatus | formatStatus }}
                          </div>
                          <div v-if="item.status === '11'&& orderData.type==='01'" class="sk">
                            {{ goodslist.orderStatus | manageFormat }}
                          </div>
                          <div v-if="item.status === '00'&& orderData.type==='01'" class="sk">
                            {{ item.orderStatus | manageFormat }}
                          </div>
                          <div
                            class="order-detail"
                            @click="orderDetailBtn(goodslist,item)"
                          >
                            订单详情
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 操作 -->
            <div class="item_box_operating">
              <!-- 待审核订单 平台管理员角色 -->
              <div v-if="orderData.type==='01'" class="audit_btn">
                <div
                  v-if="(item.orderStatus === '01' && currentRole === 'shopAdmin')"
                  class="assess"
                  @click="auditBulletin(item, 'examine')"
                >
                  订单审核
                </div>
                <div
                  v-if="(['00','10','03','02'].indexOf(item.orderStatus) > -1 && ['01','02'].indexOf(item.auditStatus) > -1)"
                  class="assess"
                  @click="showAuditRecord(item.id)"
                >
                  审核详情
                </div>
              </div>
              <!-- 操作列 $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>
                <div
                  v-if="item.orderStatus === '01'"
                  class="assess"
                  @click="cancelOrder(item)"
                >
                  取消订单
                </div>
                <!-- 已取消/已驳回订单 可再次购买 -->
                <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>
    <!-- 列表为空时 -->
    <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="goToHome">
              去购物
            </p>
          </dd>
        </dl>
      </div>
    </div>
    <!-- 评价 -->
    <evaluateOrder :dialog-data="evadialogData" @callback="callback" />
    <!-- 查看评价 -->
    <evaluateOrderChren :dialog-data="detadialogData" />
    <!-- 售后服务start -->
    <afterServiceDialog ref="afterDialogRef" @callBack="callback" />
    <!-- 售后服务end -->
  </div>
</template>

<script>
// api
import {
  deleteOrders,
  repurchase,
  orderCompletion,
  orderInfoExport,
  buyerCancelOrder
} from '@/api/shoppingmall/order'
import evaluateOrder from '../orderOptions/evaluateOrder-dialog'
import { download } from '@/assets/js/utils'
import evaluateOrderChren from '../orderOptions/evaluateOrderChren-dialog'
import afterServiceDialog from '../orderOptions/afterService-dialog'
import { orderGrounpMixin } from './mixins/orderGroupMixins'
export default {
  components: {
    evaluateOrder,
    evaluateOrderChren: evaluateOrderChren,
    afterServiceDialog
  },
  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 {
      currentRole: '',
      // 评价弹框
      evadialogData: {
        consignContractVisible: false
      },
      // 查看评价弹框
      detadialogData: {
        consignContractVisible: false
      }
    }
  },
  watch: {
  },
  created() {
    this.currentRole = this.$store.getters.info.currentRol.roleCode
  },
  methods: {
    // 返回
    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)
      })
      // 多个订单id以逗号隔开
      repurchase(idList.join(','), result).then(res => {
        this.$router.push({ path: '/shop/myshoppingCart' })
      }).catch(() => {
      })
    },
    // 审核订单
    auditBulletin(item, type) {
      this.$router.push({
        path: '/personalCenter/orderAudit',
        query: {
          id: item.id,
          menuIndex: this.orderData.activeIndex // 当前选中tab
        }
      })
    },
    // 回调函数
    callback() {
      this.$emit('updateOrderNum')
    },
    // 评价内容查看
    orderEvaluaeDetail(val, item) {
      if (item.status === '00') {
        this.detadialogData = {
          consignContractVisible: true,
          id: item.id
        }
      } else {
        this.detadialogData = {
          consignContractVisible: true,
          id: val.orderId,
          status: item.status
        }
      }
    },
    // 订单评价
    orderEvaluae(val, item) {
      if (item.status === '00') {
        this.evadialogData = {
          consignContractVisible: true,
          id: item.id
        }
      } else {
        this.evadialogData = {
          consignContractVisible: true,
          id: val.orderId,
          status: item.status
        }
      }
    },
    // 查看审核详情
    showAuditRecord(id) {
      this.$router.push({
        path: '/personalCenter/orderAuditRecord',
        query: {
          id: id,
          menuIndex: this.orderData.activeIndex, // 当前选中tab
          type: this.orderData.type
        }
      })
    },
    // 退货详情
    refundDetail(item) {
      this.$router.push({
        path: '/personalCenter/refundOrderDetail',
        query: {
          orderDetailId: item.id,
          orderBackId: '',
          from: this.orderData.type === '01' ? '/personalCenter/myorderDital' : '/personalCenter/myorder',
          menuIndex: this.orderData.activeIndex // 当前选中tab
        }
      })
    },
    // 售后状态
    fstatus(val) {
      if (!val) return '正常'
      for (const { code, value } of this.statusList) {
        if (code === val) {
          return value
        }
      }
    },
    // 订单导出
    orderExportBtn(val) {
      const data = {
        orderId: val.orderId,
        supplierName: val.goodsDepartName
      }
      orderInfoExport(data).then(res => {
        const filename = '已完成订单' + '.xls'
        download(res, filename)
      })
    },
    // 提醒发货
    remindShipment() {},
    // 确认收货
    receiveOrderDetail(val, vas, item) {
      // 获取商品列表
      const statusArr = vas.skus.slice(0)
      // 非必填参数（skip true或者false）,skip 在确认取消未受理的退货时传ture,后端默认false
      let skip = false
      // 提示信息
      let message = '是否确认收货？'
      // 00 待处理 01 退货中
      // 待处理的商品数量
      const pendingLen = statusArr.filter(item => item.orderBackStatus === '00').length
      // 退货中的商品数量
      const resolveLen = statusArr.filter(item => item.orderBackStatus === '01').length
      // 有退货中的商品
      if (resolveLen) {
        this.$alert('该订单中有受理中的售后，不可确认收货！', '提示', {
          confirmButtonText: '我已知晓'
        })
      } else {
        // 无退货中的商品，有待处理的商品
        if (pendingLen) {
          skip = true
          message = '该订单中有申请售后的订单，确认收货将关闭售后申请。'
        }
        this.$confirm(message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          confirmButtonClass: 'confirmBtn',
          cancelButtonClass: 'cancelBtn',
          type: 'warning'
        }).then(() => {
          let paramId = ''
          item.status === '11' ? paramId = val.orderId : paramId = item.id
          // 非必填参数（skip true或者false）,skip 在确认取消未受理的退货时传ture,后端默认false
          orderCompletion(paramId, skip).then(res => {
            this.$message.success('确认收货成功')
            this.callback()
          })
        })
      }
    },
    // 打开退货申请弹框
    saleDataClick(item, val, goodslist) {
      this.$refs.afterDialogRef.openDialog({
        item,
        val,
        goodslist
      })
    },
    // 查看发票
    viewInvoice() {},
    // 取消订单
    cancelOrder(item) {
      this.$confirm('确认要取消订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        buyerCancelOrder(item.id).then(res => {
          this.$message.success('取消订单成功')
          this.callback()
        }).catch(() => {
        })
      }).catch(() => {})
    },
    // 待发货订单 取消订单
    sendOrderCancel() {},
    // 新申请售后
    afterSalesService(child, val, item) {
      this.$router.push({
        path: '/personalCenter/selectAfterSalesType',
        query: {
          orderDetailId: child.id,
          id: child.goodsId, // 商品Id
          menuIndex: this.orderData.activeIndex, // 当前选中tab
          orderId: val.orderId, // 订单id
          status: item.status // 是否拆单
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
// style
.dialog_footer{
  margin-top: 20px;
  margin-bottom: 10px;
  height: 40px;
  align-items: center;
  display: flex;
  justify-content: center;
}
.count {
  display: flex;
  span {
    width: 35px;
    height: 33px;
    line-height: 33px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    background-color: #f7f7f7;
    border: 1px solid #ebebeb;
    i {
      color: rgb(201, 10, 10);
    }
  }
  input {
    width: 130px;
    border-left: none;
    border-right: none;
    border-top: 1px solid rgba(228, 228, 228, 1);
    border-bottom: 1px solid rgba(228, 228, 228, 1);
    text-align: center;
  }
}
.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 {
            text-indent: -9999em;
          }
          text-align: center;
          >div {
            line-height: 24px;
          }
          .refund_detail {
            color: #333;
            &:hover {
              color:#007CCC;
            }
          }
        }
      }
    }
    .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>
