<!--
  @description: 退货详情页
  @Modifier：dijia
  @routerPath:/personalCenter/refundOrderDetail
  @date：  2021/07/29
-->
<template>
  <div class="shop_order">
    <div class="nav">
      <!--当前位置-面包屑-->
      <div class="crumbs_nav_main">
        <span class="pos_title">
          <i class="iconfont icon-dizhi" />当前位置：
        </span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="toBack()">
            {{ breadcrumbTitle }}
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span>退货详情</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <i class="el-icon-close cursor" title="关闭详情" style="font-size:20px;" @click="closePage" />
    </div>
    <!-- 订单详情流程 -->
    <stateRcolDetail :order-detail-obj="orderDetailObj" />
    <!-- 订单状态 -->
    <orderInfoDetail :order-detail-obj="orderDetailObj" />
    <!-- 收货信息 -->
    <receivDetail :order-detail-obj="orderDetailObj" />
    <!-- // 采购人/采购管理员 在待处理/退货中状态下 才可以 取消退货 -->
    <div v-if="(roleCode==='19'|| roleCode==='shopAdmin') && (status==='00'||status==='01')" class="cancel_Btn" @click="cancelOrderBack">
      <!-- dealStatus 010是换货 -->
      {{ orderDetailObj.orderBackLog.dealStatus === '010' ? '取消换货' : '取消退货' }}
    </div>
  </div>
</template>

<script>
// 组件
import orderInfoDetail from './refundDetail/orderStatus' // 订单状态
import stateRcolDetail from './refundDetail/stateRcol-detail' // 订单详情流程
import receivDetail from './refundDetail/receiveGoods'// 收货信息
// 接口
import {
  getOrderBackDetail,
  cancelOrderBack
} from '@/api/shoppingmall/order'
export default {
  name: 'RefundOrderDetail',
  components: {
    orderInfoDetail, // 订单状态
    stateRcolDetail, // 订单详情流程
    receivDetail // 收货信息
  },
  props: {
  },
  data() {
    return {
      orderDetailObj: {},
      status: ''
    }
  },
  computed: {
    // 角色编码 供应商：shopSupplier 采购人：19 电商管理员：shopPlatAdmin 电商采购部门负责人：shopAdmin
    roleCode() {
      return this.$store.getters.info.currentRol.roleCode
    },
    // 面包屑标题
    breadcrumbTitle() {
      if (this.$route.query.from === '/personalCenter/myorder') {
        return '我的订单'
      } else if (this.$route.query.from === '/personalCenter/myorderDital') {
        return '订单管理'
      } else {
        return '退货管理'
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const orderDetailId = this.$route.query.orderDetailId
      const orderBackId = this.$route.query.orderBackId
      getOrderBackDetail(orderDetailId, orderBackId)
        .then(res => {
          if (res.header.ret === '0') {
            this.orderDetailObj = res.data
            this.status = res.data.orderBackLog.status
          }
        })
        .catch(err => {
          throw new Error('查看订单详情失败' + err)
        })
    },
    // 面包屑跳转
    toBack() {
      const type = { path: this.$route.query.from, query: { menuIndex: this.$route.query.menuIndex }}
      return type
    },
    // 点右上角关闭时跳转
    closePage() {
      this.$router.push(this.toBack())
    },
    // 取消退货
    cancelOrderBack() {
      this.$confirm('确认要取消吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        cancelOrderBack(this.$route.query.orderDetailId).then(res => {
          if (res.header.ret === '0') {
            this.init()
            this.$message({
              message: ' 取消成功！',
              type: 'success'
            })
          }
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
.shop_order{
  margin: 0 26px;
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .crumbs_nav_main {
    padding: 10px 0;
    font-size: 14px;
  }

  .crumbs_nav_main .pos_title {
      display: inline-block;
      vertical-align: middle;
      color: #666;
  }

  .crumbs_nav_main .pos_title .iconfont {
      margin-right: 8px;
      color: #00AACA;
  }

  .crumbs_nav_main .el-breadcrumb {
      vertical-align: middle;
      display: inline-block;
  }
  .m{
    margin-bottom: 20px;
  }
  .order_title{
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    line-height: 40px;
  }
}
.cancel_Btn {
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 40px;
    background: #F2F2F2;
    border-radius: 2px;
    border: 1px solid #e0e0e0;
    color: #333333;
    cursor: pointer;
    &:hover {
      background: #00aaca;
      color: #fff;
      border: 1px solid #00aaca;
    }
}
</style>
