<!--
  @description: 售后服务-选择售后类型
  @Modifier：dijia
  @routerPath:/personalCenter/selectAfterSalesType
  @date：  2021/12/15
-->
<template>
  <div>
    <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>
    <!-- 商品信息 -->
    <div class="goods_box">
      <div class="img_box" @click="goToDetail()">
        <img :src="goodsInfo.productPicture" alt="商品图片">
      </div>
      <div class="goodsName_box">
        <p class="cursor goods_item_title_two" @click="goToDetail()">
          {{ goodsInfo.productName }}
        </p>
        <span style="color:#F59A23;">¥{{ goodsInfo.price }}</span>
      </div>
    </div>
    <p class="type_title">
      选择服务类型
    </p>
    <div class="select_type">
      <div class="cursor" title="换货" @click="goToFillInfo('exchange')">
        <img src="@assets/img/shopmall/exchangeGoods.png" alt="换货">
        <div>
          <h3>我要换货</h3>
          <p>已收到货，与卖家协商换货</p>
        </div>
      </div>
      <div class="cursor" title="退货" @click="goToFillInfo('return')">
        <img src="@assets/img/shopmall/returnGoods.png" alt="退货">
        <div>
          <h3>我要退货</h3>
          <p>已收到货，需要退还收到的货物</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { productDetails } from '@/api/shoppingmall/products'
export default {
  name: 'SelectAfterSalesType',
  components: {},
  data() {
    return {
      goodsInfo: {} // 商品信息
    }
  },
  computed: {
    // 面包屑标题
    breadcrumbTitle() {
      if (this.$route.query.from === '/personalCenter/myorder') {
        return '我的订单'
      } else {
        return '电商直采'
      }
    }
  },
  watch: {},
  created() {
    this.getProductDetail()
  },
  methods: {
    // 获取商品信息
    getProductDetail() {
      const goodsId = this.$route.query.goodsId
      // 商品详情
      productDetails(goodsId).then((res) => {
        if (res.header.ret === '0') {
          this.goodsInfo = res.data
        }
      })
    },
    // 面包屑跳转
    toBack() {
      const type = { path: this.$route.query.from, query: { menuIndex: this.$route.query.menuIndex }}
      return type
    },
    // 返回
    closePage() {
      this.$router.push({
        path: '/personalCenter/myorder',
        query: { menuIndex: this.$route.query.menuIndex }
      })
    },
    goToDetail() {
      const goodsId = this.$route.query.goodsId
      this.$router.push({ path: '/shop/goodsClassDetail', query: { id: goodsId }})
    },
    // 跳转到 填写售后信息 页
    goToFillInfo(type) {
      // type return:退货  exchange:换货
      this.$router.push({
        path: '/personalCenter/fillAfterSalesInfo',
        query: {
          ...this.$route.query,
          refundType: type // 售后类型
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #333333;
  line-height: 40px;
  height: 41px;
  padding: 0 12px;
  border-bottom: 1px solid #eee;
  > i:hover {
    color: #007ccc;
  }
}
.goods_box {
  display: flex;
  height: 162px;
  margin: 30px 40px 0;
  padding: 28px 70px 28px 35px;
  border: 1px solid #eee;
  box-shadow: 2px 2px 5px rgba(170,170,170,0.18);
  .img_box {
    border: 1px solid #eee;
    width: 104px;
    height: 104px;
    padding: 7px;
    img {
      width: 90px;
      height: 90px;
    }
  }
  .goodsName_box {
    flex: 1;
    height: 100%;
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 15px;
    line-height: 22px;
    >p:hover {
      color: #00aaca;
      font-family: "MicrosoftYaHei";
    }
    >span {
      font-size: 14px;
      margin-bottom: 10px;
    }
  }
}
.type_title {
  font-size: 16px;
  margin: 30px 40px 20px;
}
.select_type {
  height: 130px;
  margin: 0 40px;
  display: flex;
  justify-content: space-between;
  >div {
    width: 48%;
    padding: 39px 0;
    padding-left: 10%;
    border: 1px solid #eee;
    box-shadow: 2px 2px 5px rgba(170,170,170,0.18);
    display: flex;
    justify-content: flex-start;
    &:hover {
      border-color: rgb(0,143,224);
    }
    >img {
      user-select: none;
      width: 52px;
      height: 52px;
      margin-right: 15px;
    }
    h3 {
      font-size: 18px;
    }
    p {
      margin-top: 3px;
      font-size: 16px;
      color: #908c8c;
    }
  }
}
</style>
