<template>
  <div>
    <!-- 订单详情对话框 -->
    <el-dialog :visible.sync="orderDialogVisible" title="订单详情" width="800">
      <div>
        <el-steps :active="formatStepStatus()
          " finish-status="success" align-center>
          <el-step title="提交订单" :description="formatTime(orderDetail.order.createTime)" />
          <el-step title="支付订单" :description="formatTime(orderDetail.order.payTime)" />
          <el-step title="服务中" :description="formatTime(orderDetail.order.shipTime)" />
          <el-step title="服务已完成" :description="formatTime(orderDetail.order.confirmTime)" />
          <el-step title="完成评价" :description="formatTime(orderDetail.order.commentTime)" />
        </el-steps>
      </div>
      <el-card shadow="never" style="margin-top: 15px">
        <div class="operate-container">
          <i class="el-icon-warning color-danger" style="margin-left: 20px" />
          <span class="color-danger">
            当前订单状态：{{ orderDetail.order.orderStatus | orderStatusFilter }}
          </span>
          <span class="color-rebuy" style="margin-left:100px"> 复购人： {{ orderDetail.recommender }} </span>
        </div>

        <div style="margin-top: 20px">
          <svg-icon icon-class="shopping" style="color: #606266" />
          <span class="font-small">预约人信息</span>
        </div>
        <div class="table-layout">
          <el-row>
            <el-col :span="6" class="table-cell-title">收货人</el-col>
            <el-col :span="6" class="table-cell-title">手机号码</el-col>
            <el-col :span="6" class="table-cell-title">收货地址</el-col>
            <el-col :span="6" class="table-cell-title">用户备注</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.consignee }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.mobile }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.address }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.message }}</el-col>
          </el-row>
        </div>

        <!-- 商品信息 -->
        <div style="margin-top: 20px">
          <svg-icon icon-class="product" style="color: #606266" />
          <span class="font-small">商品信息</span>
        </div>
        <el-table :data="orderDetail.orderGoods" style="width: 100%;margin-top: 20px" border>
          <el-table-column label="商品图片" width="120" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.picUrl" style="height: 80px" />
            </template>
          </el-table-column>

          <el-table-column label="商品名称" width="250" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.goodsName }}</p>
              <!-- <p>品牌：{{ scope.row.productBrand }}</p> -->
            </template>
          </el-table-column>

          <el-table-column label="价格/货号" align="center">
            <template slot-scope="scope">
              <p>价格：￥{{ scope.row.price }}</p>
              <p>货号：{{ scope.row.goodsSn }}</p>
            </template>
          </el-table-column>

          <el-table-column style="border-right: 0px" label="小计" align="center">
            <template slot-scope="scope">￥{{ scope.row.price * scope.row.number }}</template>
          </el-table-column>
        </el-table>

        <!-- 费用信息 -->
        <div style="margin-top: 20px">
          <svg-icon icon-class="money" style="color: #606266" />
          <span class="font-small">费用信息</span>
        </div>
        <div class="table-layout">
          <el-row>
            <el-col :span="6" class="table-cell-title">订单编号</el-col>
            <el-col :span="6" class="table-cell-title">支付编号</el-col>
            <el-col :span="6" class="table-cell-title">支付方式</el-col>
            <el-col :span="6" class="table-cell-title">支付时间</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.orderSn }}<br/>
              <!-- 美团预约单号:{{ orderDetail.order.parentOrderSn }};-->
              <span v-if="orderDetail.order.orderChannel==104"> 美团券码：{{orderDetail.mtSerialNumber}}</span></el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.payId }}</el-col>
            <el-col :span="6" class="table-cell">{{ (orderDetail.order.payChannel == null || orderDetail.order.payChannel
              == 'WX') ? '微信' : payChannelMap[orderDetail.order.payChannel] }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.payTime }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell-title">加购信息</el-col>
            <el-col :span="6" class="table-cell-title">实际费用</el-col>
            <el-col :span="6" class="table-cell-title">商品总价</el-col>
            <el-col :span="6" class="table-cell-title">优惠减免</el-col>
            <!-- <el-col :span="5" class="table-cell-title">支付时间</el-col> -->
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">
              <div style="height:20px;display:inline-block;">名称：{{ orderDetail.orderGoods ?
                orderDetail.orderGoods[0].unitDescribe : '' }}份数：{{ orderDetail.orderGoods ?
    orderDetail.orderGoods[0].unitIncreaseNumber : '' }} </div>
              <div style="height:20px;display:inline-block;">单价：{{ orderDetail.orderGoods ?
                orderDetail.orderGoods[0].unitPrice : '' }} 总计：{{ orderDetail.order.increaseSumPrice }}</div>
            </el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.actualPrice }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.goodsPrice }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.couponPrice }}</el-col>
            <!-- <el-col :span="5" class="table-cell">{{ orderDetail.order.payTime }}</el-col> -->
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell-title">退款金额</el-col>
            <el-col :span="6" class="table-cell-title">退款类型</el-col>
            <el-col :span="6" class="table-cell-title">退款备注</el-col>
            <el-col :span="6" class="table-cell-title">退款时间</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.refundAmount }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.refundType }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.refundContent }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.refundTime }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell-title">加购金额</el-col>
            <el-col :span="6" class="table-cell-title">加购数量</el-col>
            <el-col :span="6" class="table-cell-title">加购描述</el-col>
            <el-col :span="6" class="table-cell-title">订单渠道</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.increaseSumPrice }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.orderGoods ? orderDetail.orderGoods[0].unitIncreaseNumber
              : ''
            }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.orderGoods ? orderDetail.orderGoods[0].unitDescribe : ''
            }}</el-col>
            <el-col :span="6" class="table-cell"><el-tag>{{ channelsFilter(orderDetail.order.orderChannel)
            }}</el-tag></el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell-title">优惠券使用渠道</el-col>
            <el-col :span="6" class="table-cell-title">用户来源(首次消费)</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">{{ channelsFilter(orderDetail.order.couponChannel) }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.user.channelName }}</el-col>
          </el-row>
        </div>


        <div style="margin-top: 20px" v-if="orderDetail.coupon">
          <svg-icon icon-class="product-brand" style="color: #606266" />
          <span class="font-small">优惠券信息</span>
        </div>
        <div class="table-layout" v-if="orderDetail.coupon">
          <el-row>
            <el-col :span="4" class="table-cell-title">券名</el-col>
            <el-col :span="4" class="table-cell-title">券码</el-col>
            <el-col :span="4" class="table-cell-title">券金额</el-col>
            <el-col :span="4" class="table-cell-title">兑换时间</el-col>
            <el-col :span="4" class="table-cell-title">预售手机</el-col>
            <el-col :span="4" class="table-cell-title">预售时间</el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="table-cell">{{ orderDetail.coupon.couponName }}</el-col>
            <el-col :span="4" class="table-cell">{{ orderDetail.coupon.couponCode }}</el-col>
            <el-col :span="4" class="table-cell">{{ orderDetail.coupon.amount }}</el-col>
            <el-col :span="4" class="table-cell">{{ orderDetail.coupon.exchangeTime }}</el-col>
            <el-col :span="4" class="table-cell">{{ orderDetail.coupon.preMobile }}</el-col>
            <el-col :span="4" class="table-cell">{{ orderDetail.coupon.preTime }}</el-col>
          </el-row>
        </div>

        <div v-show="orderDetail.refundList && orderDetail.refundList.length > 0">
          <div style="margin-top: 20px">
            <svg-icon icon-class="marker" style="color: #606266" />
            <span class="font-small">退款详情</span>
          </div>
          <div class="table-layout">
            <el-row>
              <el-col :span="3" class="table-cell-title">订单号</el-col>
              <el-col :span="12" class="table-cell-title">日志</el-col>
              <el-col :span="3" class="table-cell-title">动作</el-col>
              <el-col :span="6" class="table-cell-title">时间</el-col>
            </el-row>
            <el-row v-for="(item, index) in orderDetail.refundList" :key="index">
              <el-col :span="3" class="table-cell">{{ item.orderId }}</el-col>
              <el-col :span="12" class="table-cell">{{ item.log }}</el-col>
              <el-col :span="3" class="table-cell">{{ item.action }}</el-col>
              <el-col :span="6" class="table-cell">{{ item.createTime }}</el-col>
            </el-row>
          </div>
        </div>
        <!-- 预约信息 -->
        <div style="margin-top: 20px">
          <svg-icon icon-class="order-return" />
          <span class="font-small">预约信息</span>
        </div>
        <el-table :data="bookDetals" height="200px" :header-cell-style="{ background: '#f2f6fc' }"
          style="width: 100%;margin-top: 20px;overflow-y: auto !important;" border>
          <el-table-column label="预约时间" align="center" prop="bookDate" :key="Math.random()" >
            <template slot-scope="scope">
              {{ scope.row.bookTime}} 

            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="content">
            <template slot-scope="scope1">
              {{ bookStatusMap[scope1.row.status] }}
            </template>
          </el-table-column>

          <el-table-column label="预约地址" align="center" prop="address" width="320px"/>
          <el-table-column label="服务商" align="center" prop="fraName" >
             <template slot-scope="scope1">
              {{  scope1.row.fraName }}-{{  scope1.row.fraWxAccount }}
            </template>
          </el-table-column>
        </el-table>

        <!-- 坐席备注信息 -->
        <div style="margin-top: 20px">
          <svg-icon icon-class="people" />
          <span class="font-small">坐席备注</span>
        </div>
        <el-table :data="orderMemo" height="200px" :header-cell-style="{ background: '#f2f6fc' }"
          style="width: 100%;margin-top: 20px;overflow-y: auto !important;" border>
          <el-table-column label="备注时间" align="center" prop="createTime" />
          <el-table-column label="内容" align="center" prop="content" />
          <el-table-column label="操作人" align="center" prop="createUserName" />
        </el-table>


        <div style="float: right;padding-top:10px;padding-bottom: 10px ">
          <el-button type="primary" @click="orderDialogVisible = false">确 认</el-button>
          <!--<el-button type="primary" @click="printOrder">打 印</el-button>-->
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>



<script>
import { detailOrder, readMemo, orderBookDetail } from "@/api/order";
import { allChannel } from "@/api/channel";

import {
  statusMap,
  statusModifyMap,
  bookStatusMap,
  ObjectToArray,
  cancelReasonList,
  changeReasonMap
} from "@/api/enumUtils";
import { formatDate } from "@/utils/date";
let vm;
export default {
  name: "orderInfoRef",
  components: {},
  beforeCreate() {
  },
  filters: {
    aftersaleStatusFilter(status) {
      if (status == 1) return "-退款申请中";
      if (status == 2) return "-退款审核通过";
      if (status == 3) return "-退款成功";
      if (status == 4) return "-退款拒绝";
      if (status == 5) return "-退款取消";
      return "";
    },
    orderStatusFilter(status) {
      return statusMap[status];
    },
  },
  data() {
    return {
      channels: [],
      payChannelMap: { "WX": '微信', 'ZFB': '支付宝', 'DOUYIN': '抖音' },
      orderDetail: {
        order: '',
        user:{}
      },
      orderMemo: [],
      orderDialogVisible: false,
      bookDetals: [],
      bookStatusMap: bookStatusMap,
    };
  },
  created() {
    allChannel().then((res) => {
      this.channels = res.data.data;
    });
  },
  methods: {
    getDetail(orderId) {
      detailOrder(orderId).then((response) => {
        this.orderDetail = response.data.data;
      });
      readMemo({ orderId: orderId }).then((res) => {
        this.orderMemo = res.data.data;
      });
      //获取预约信息
      this.getBookDetail(orderId);
      this.orderDialogVisible = true;
    },
    getBookDetail(orderId) {
      orderBookDetail(orderId).then(res => {
        this.bookDetals = res.data.data
      })
    },
    formatTime(time) {
      if (time == null || time === "") {
        return "";
      }
      const date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
    channelsFilter(value) {
      if(value==null||value==''){
        return '';
      }
      const rs = this.channels.filter((item) => {
        return item.id === value;
      });
      if (rs != null && rs.length > 0) {
        return rs[0].name;
      }
    },
    formatStepStatus() {
      let value = this.orderDetail ? this.orderDetail.order.orderStatus : '';
      let time = this.orderDetail ? this.orderDetail.order.commentTime : '';
      if (value === 201) {
        // 待发货
        return 2;
      } else if (value === 301) {
        // 已发货
        return 3;
      } else if (value === 401 || value === 402) {
        // 已完成
        if (time != null && time != "undefined") {
          return 5;
        } else {
          return 4;
        }
      } else {
        // 待付款、已关闭、无限订单
        return 1;
      }
    }
  }
}
</script>



<style> .pagination-container {
   margin-top: 0px;
   padding: 5px 16px !important;
 }

 .el-table .accept {
   background-color: #cc5858;
 }

 .el-table .completed {
   background-color: #999;
 }

 .el-table .waiting {
   background-color: #73bfec;
 }

 .el-table .nobook {
   background-color: #bebbbb;
 }

 .el-table .cancel {
   background-color: #bebbbb;
 }

 .el-table .processing {
   background-color: rgb(169 201 234);
 }


 .detail-container {
   width: 80%;
   padding: 20px 20px 20px 20px;
   margin: 20px auto;
 }

 .operate-container {
   background: #f2f6fc;
   height: 80px;
   margin: -20px -20px 0;
   line-height: 80px;
 }

 .operate-button-container {
   float: right;
   margin-right: 20px;
 }

 .table-layout {
   margin-top: 20px;
   border-left: 1px solid #dcdfe6;
   border-top: 1px solid #dcdfe6;
 }

 .table-cell {
   height: 60px;
   line-height: 20px;
   border-right: 1px solid #dcdfe6;
   border-bottom: 1px solid #dcdfe6;
   padding: 10px;
   font-size: 14px;
   color: #606266;
   text-align: center;
   white-space: pre-wrap;
   /* overflow: hidden; */
 }

 .table-cell-title {
   border-right: 1px solid #dcdfe6;
   border-bottom: 1px solid #dcdfe6;
   padding: 10px;
   background: #f2f6fc;
   text-align: center;
   font-size: 14px;
   color: #303133;
 }

 .el-table th.gutter {
   display: table-cell !important;
 }

 .el-button+.el-button {
   margin-left: 0px;
 }

 .el-table colgroup.gutter {
   display: table-cell !important;
 }

 .el-table .warning-row {
   background: oldlace;
 }

 .el-table .success-row {
   background: #f0f9eb;
 }

 .color-danger {
   color: #f56c6c;
   font-size: 18px;
 }

 .color-rebuy {
   color: #09afff;
   font-size: 18px;
 }

 .el-dialog .el-cascader {
   width: 400px;
 }

 .fixed-width .el-button--mini {
   width: auto;
   min-width: 60px;
 }

 .el-step.is-center .el-step__description {
   padding-left: 18%;
   padding-right: 18%;
 }

 .el-table th.gutter {
   display: table-cell !important;
 }
  

 </style>
