<template>
  <div class="order_detail">
    <el-row :gutter="20">
      <el-col :md="24" class="order_detail_body">
        <el-card shadow="hover">
          <el-col :md="21">
            <h1 class="title"><svg-icon class="title_icon" icon-class="hongqi" />订单号：{{ orderDetailData.F_OrderId }}</h1>
          </el-col>
          <el-col :md="24" class="order_detail_content">
            <el-col :md="6" class="order_detail_item">
              售后类型：{{ orderDetailData.F_Type }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              变动金额：{{ orderDetailData.F_Money }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              售后原因及类型：{{ orderDetailData.F_ReturnType }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              售后原因：{{ orderDetailData.F_ReturnDes }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              退回商品状态：{{ orderDetailData.F_ProductStatus }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              售后备注：{{ orderDetailData.F_Remark }}
            </el-col>
            <el-col :md="24">
              补发商品：
              <el-table :data="commodityTableData" stripe border style="width: 100%">
                <el-table-column prop="F_ProductName" label="商品名称" align="center"></el-table-column>
                <el-table-column prop="F_Count" label="商品数量" align="center"></el-table-column>
              </el-table>
            </el-col>
            <el-col :md="24">
              退回商品：
              <el-table :data="oldCommodityTableData" stripe border style="width: 100%">
                <el-table-column prop="F_ProductName" label="商品名称" align="center"></el-table-column>
                <el-table-column prop="F_Count" label="商品数量" align="center"></el-table-column>
              </el-table>
            </el-col>
          </el-col>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getDictionaryValueList } from '@/api/commonAPI'
import { getOrder } from '@/api/orderManagement/orderList'
import { addAfterSaleList, editAfterSaleList, afterSaleListDetail, getAfterSaleOrderCommodityList, } from "@/api/afterSaleManagement/afterSaleList";

export default {
  name: "AfterSale",
  props: {
    rowid: {
      type: String,
      default: ""
    },
    layerid: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      commodityTableData: [], //添加商品
      oldCommodityTableData: [], //退回商品列表
      loading: false,
      orderDetailData: {
        F_Id: '', //售后id
        F_OrderId: '', //订单编号
        F_DetailList: '', //补发产品列表
        F_OldDetailList: '', //退回产品列表
        F_Type: '', //售后类型
        F_Money: '', //变动金额
        F_Remark: '', //售后备注
        F_ReturnType: '', //售后原因类型
        F_ReturnDes: '', //售后原因
        F_ProductStatus: '', //退回商品状态
        F_CheckStateSH: '', //0保存 1提交按钮 2不通过
      },
    };
  },
  created() {
    Promise.all([
    ]).then(() => {
      if (this.rowid) {
        this.orderDetailData.F_Id = this.rowid
        this.getDetail(this.rowid)
      }
    });
  },
  methods: {
    //获取售后订单详情
    getDetail(rid) {
      const params = {
        F_Id: rid,
      }
      afterSaleListDetail(params).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.data
          this.orderDetailData.F_OrderId = res.F_OrderId //订单编号
          this.orderDetailData.F_OldDetailList = res.F_OldDetailList //退回产品列表
          switch(res.F_Type){
            case 1:
              this.orderDetailData.F_Type='调换货';
              break;
            case 2:
              this.orderDetailData.F_Type='退货';
              break;
            case 3:
              this.orderDetailData.F_Type='部分退货';
              break;
            case 4:
              this.orderDetailData.F_Type='对发货';
              break;
            case 5:
              this.orderDetailData.F_Type='补发货';
              break;
            case 6:
              this.orderDetailData.F_Type='补差额';
              break;
          }
          // this.orderDetailData.F_Type = res.F_Type //售后类型
          this.orderDetailData.F_Money = res.F_Money //变动金额
          this.orderDetailData.F_Remark = res.F_Remark //售后备注
          this.orderDetailData.F_ReturnType = res.F_ReturnType //售后原因类型
          this.orderDetailData.F_ReturnDes = res.F_ReturnDes //售后原因
          this.orderDetailData.F_ProductStatus = res.F_ProductStatus //退回商品状态
          this.getAfterSaleOrderCommodity(this.orderDetailData.F_OrderId)
          this.getReissueGoods(res.F_DetailList) //补发商品
        }
      })
    },
    getReissueGoods(goodsData) {
      let reissueGoods = goodsData.split('|')
      for (let i = 1; i < reissueGoods.length; i++) {
        let reissueGoodsDetail = reissueGoods[i].split(',')
        let data = {
          F_ProductId: reissueGoodsDetail[0],
          F_ProductName: reissueGoodsDetail[2],
          F_Count: parseInt(reissueGoodsDetail[1]),
        }
        this.commodityTableData.push(data)
      }
    },
    // 售后订单商品列表
    getAfterSaleOrderCommodity(rid) {
      const params = {
        orderid: rid
      }
      getAfterSaleOrderCommodityList(params).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.data
          this.oldCommodityTableData = res
        }
      })
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.order_form .form_select {
  width: 100%;
}
.order_detail{
  .el-col{
    margin-bottom: 20px;
  }
  .el-icon-time{
    color: #d81e06;
  }
  .el-card__header{
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: #F5F5F6;
  }
  .order_file{
    .el-card__body{
      padding: 22px 0 0 0;
      text-align: center;
    }
  }
  .order_steps{
    .el-step__icon-inner{
      display: none;
    }
  }
  .order_record {
    .el-card__body{
      padding: 0;
    }
    .el-tabs__header{
      padding: 0px 20px;
      background-color: #F5F5F6;
        .el-tabs__item{
          font-size: 16px;
          height: 47px;
          line-height: 47px;
        }
    }
  }
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
	.order_detail{
		.order_detail_body{
			margin-bottom: 20px;
			.round_img{
				width: 90px;
				height: 90px;
				border-radius: 50%;
				overflow: hidden;
				margin: 14px;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.title{
				font-size: 20px;
				.title_icon{
					color: #d81e06;
					font-size: 16px;
					margin-right: 20px;
				}
			}
			.title_sub{
				font-size: 14px;
				color: #666666;
			}
			.order_detail_content{
				background-color: #F5F5F6;
				padding-top: 20px;
				color: #4c4c4c;
				font-size: 14px;
				.order_detail_item{
					margin-bottom: 10px;
					.order_content{
						margin-top: 10px;
					}
					.order_file {
						position: relative;
						cursor: pointer;
						.img_mask {
							display: none;
							position: absolute;
							left: 0px;
							top: 0px;
							background-color: rgba(0, 0, 0, 0.3);
							width: 100%;
							height: 22px;
							text-align: right;
							z-index: 1;
							i {
								font-size: 20px;
								line-height: 22px;
								display: inline-block;
								margin-right: 15px;
								color: #fff;
							}
						}
						p {
							margin-top: 5px;
							padding-left: 14px;
							padding-right: 14px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.file_icon{
							height: 68px;
							line-height: 68px;
							font-size: 68px;
							color: #409EFF;
						}
					}
					.order_file:hover .img_mask {
						display: block;
					}
				}
			}
		}
		.green {
			color: #00c1de;
		}
		.done {
			color: #198120;
		}
		.red {
			color: #d81e06;
		}
		.yellow{
			color: #e6a23c;
		}
		.order_steps{
			// height: 240px;
			.el-step__icon-inner{
				display: none;
			}
		}
		.tab_body{
			padding: 0 20px 20px 20px;
		}
	}
</style>

