<template>
  <div>
    <!-- 订单详情对话框 -->
    <el-dialog :visible.sync="orderDialogVisible" title="订单详情" width="800">
      <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">
            当前订单状态：{{  orderStatusFilter(orderDetail.status) }}
          </span>
          <span class="color-rebuy" style="margin-left:100px"> 核销时间： {{ formatTime(orderDetail.verificationTime) }} </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="4" class="table-cell-title">客户姓名</el-col>
            <el-col :span="4" class="table-cell-title">客户手机号码</el-col>
            <el-col :span="6" class="table-cell-title">客户身份证</el-col>
            <el-col :span="10" class="table-cell-title">客户地址</el-col>

          </el-row>
          <el-row>
            <el-col :span="4" class="table-cell">{{ orderDetail.name }}</el-col>
            <el-col :span="4" class="table-cell">{{ orderDetail.contactMobile }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.idCard }}</el-col>
            <el-col :span="10" class="table-cell">{{ orderDetail.installedAddress }}</el-col>

          </el-row>
        </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="4" class="table-cell-title">渠道运营商</el-col>
            <el-col :span="4" class="table-cell-title">领客订单号</el-col>
            <el-col :span="6" class="table-cell-title">抖音订单号</el-col>
            <el-col :span="4" class="table-cell-title">核销券码</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">{{ orderDetail.commodityName }}</el-col>
            <el-col :span="4" class="table-cell">{{ operatorChannelText(orderDetail.operatorChannel) }}</el-col>
            <el-col :span="4" class="table-cell">{{ orderDetail.outOrderNo }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.orderNo }}</el-col>
            <el-col :span="4" class="table-cell">{{ orderDetail.ticketCode }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell-title">支付时间</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">{{ formatTime(orderDetail.dyPaymentTime) }}</el-col>
          </el-row>
        </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="12" class="table-cell-title">预计上门时间</el-col>
            <el-col :span="12" class="table-cell-title">预约上门地址</el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="table-cell">{{ orderDetail.predictVisitDate }}</el-col>
            <el-col :span="12" class="table-cell">{{ orderDetail.installedAddress }}</el-col>
          </el-row>


          <el-row>
            <el-col :span="12" class="table-cell-title">操作客服</el-col>
            <el-col :span="12" class="table-cell-title">操作时间</el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="table-cell">{{ orderDetail.createOrderUser }}</el-col>
            <el-col :span="12" class="table-cell">{{ formatTime(orderDetail.createTime) }}</el-col>
          </el-row>
        </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.deviceNumber }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.topUpAmount }}</el-col>
            <el-col :span="6" class="table-cell">{{ formatTime(orderDetail.topUpDate) }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.isCreateOrder==1?'是':'否' }}</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.createOrderUser }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.telecomOrderNo }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.paymentNo }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.remark }}</el-col>

          </el-row>
        </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="8" class="table-cell-title">充值后退费金额</el-col>
            <el-col :span="8" class="table-cell-title">提交线下退费月份</el-col>
            <el-col :span="8" class="table-cell-title">订单号</el-col>

          </el-row>
          <el-row>
            <el-col :span="8" class="table-cell">{{ orderDetail.refundAmount }}</el-col>
            <el-col :span="8" class="table-cell">{{ orderDetail.refundDate }}</el-col>
            <el-col :span="8" class="table-cell">{{ orderDetail.refundNo }}</el-col>
          </el-row>
        </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="24" class="table-cell-title">备注</el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="table-cell">{{ orderDetail.userRemark }}</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>
              &lt;!&ndash; <p>品牌：{{ scope.row.productBrand }}</p> &ndash;&gt;
            </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="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 "";
    },
  },
  data() {
    return {
      channels: [],
      payChannelMap: { "WX": '微信', 'ZFB': '支付宝', 'DOUYIN': '抖音' },
      orderDetail: {
        order: ''
      },
      orderMemo: [],
      orderDialogVisible: false,
      bookDetals: [],
      bookStatusMap: bookStatusMap,
    };
  },
  created() {
  },
  methods: {
    getDetail(row) {
      console.log(row)
        this.orderDetail = row;
      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) {
      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;
      }
    },
    /*  -1已取消，0待确认，1确认，8已完成*/
    orderStatusFilter(status) {
      if(status==0){
        return '待确认'
      }else if(status==-1){
        return '已取消'
      }else if(status==1){
        return '确认'
      }else if(status==8){
        return '已完成'
      }
      return ""
    },
    //1 上海电信 2 浙江移动 3 北京移动
    operatorChannelText(operatorChannel){
      if(operatorChannel==1){
        return '上海电信'
      }else if(operatorChannel==2){
        return '浙江移动'
      }else if(operatorChannel==3){
        return '北京移动'
      }
      return ""
    }
  }
}
</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>
