<template>
  <div class="order-detail-wrapper">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird" :jumPathThird="jumPathThird"></bread-crumb>
    <div class="order-detail-content screenSet" id="screenSet">
      <div class="header-title">订单详情</div>
      <div class="detail-all-info">
        <div class="trade-status" v-if="showStatus == 1"><img src="../../assets/image/order/order_status1.png"/>交易成功</div>
        <div class="trade-status" v-if="showStatus == 2"><img src="../../assets/image/order/order_status2.png"/>已发货</div>
        <div class="trade-status" v-if="showStatus == 3"><img src="../../assets/image/order/order_status3.png"/>待发货</div>
        <div class="trade-status" v-if="showStatus == 4"><img src="../../assets/image/order/order_status4.png"/>等待买家付款</div>
        <div class="trade-status" v-if="showStatus == 5"><img src="../../assets/image/order/order_status5.png"/>交易关闭</div>
        <div class="trade-info">
          <el-card class="left-card">
            <div slot="header" class="clearfix">
              <span>{{storeType == 1 ? '物流' : '配送'}}信息</span>
            </div>
            <div v-if="showStatus == 1 || showStatus == 2">
<!--              <div v-if="storeType == 3">-->
<!--                <p>无配送信息，买家自提</p>-->
<!--              </div>-->
              <div>
                <p class="trade-status1">
                  <i class="el-icon-truck" style="font-size: 18px"></i>
                  <span class="send-status" v-if="storeType == 1">已发货</span>
                  <span class="send-status" v-if="storeType == 2">云鹊配送中</span>
                  <span class="send-status" v-if="storeType == 3">已收货</span>
                </p>
                <p v-if="storeType == 1 || storeType == 2">收货地址：{{orderDetailData.receiverAddr}}，{{orderDetailData.receiver}}，{{orderDetailData.receiverMobile}}</p>
                <div v-if="storeType == 1">
                  <p>物流公司：{{orderDetailData.expressName}}</p>
                  <p>快递单号：{{orderDetailData.expressNo}}</p>
                </div>
                <div v-if="storeType == 2">
                  <p>配送员姓名：{{orderDetailData.sender}}</p>
                  <p>手机号：{{orderDetailData.senderMobile}}</p>
                </div>
                <div v-if="storeType == 3">
                  <p>收货人：{{orderDetailData.receiver}}</p>
                  <p>手机号：{{orderDetailData.receiverMobile}}</p>
                </div>
                <p v-if="storeType == 1 || storeType == 2">备注：{{orderDetailData.remark}}</p>
              </div>
            </div>
            <div v-if="(showStatus == 3) && (storeType == 1 || storeType == 2)">
              <div class="trade-status1">
                <p>
                  <i class="el-icon-truck" style="font-size: 18px"></i>
                <span class="send-status">{{storeType == 1 ? '待发货' : '待配送'}}</span>
                </p>
                <el-button type="text" @click="showSendDialog">{{storeType == 1 ? '去发货' : '去配送'}}</el-button>
              </div>
              <p>收货地址：{{orderDetailData.receiverAddr}}，{{orderDetailData.receiver}}，{{orderDetailData.receiverMobile}}</p>
            </div>
            <div v-if="showStatus == 4">
              <p>暂无{{storeType == 1 ? '物流' : '配送'}}信息，待买家支付</p>
            </div>
            <div v-if="showStatus == 5"><p>交易已关闭</p></div>
          </el-card>
          <el-card class="right-card">
            <div slot="header" class="clearfix">
              <span>订单信息</span>
            </div>
            <div>
              <p>订单编号：{{orderDetailData.orderNo}}</p>
              <p>下单时间：{{orderDetailData.createdTime}}</p>
              <p v-if="(showStatus == 1 || showStatus == 2 || showStatus == 3) && orderDetailData.payChannel">支付方式：{{orderDetailData.payChannel | payChanelFormat}}</p>
              <p v-if="showStatus == 1 || showStatus == 2 || showStatus == 3">支付时间：{{orderDetailData.paymentTime}}</p>
              <!--<p>发货时间：{{orderDetailData.sendTime}}</p>-->
              <!--<p>成交时间：{{orderDetailData.finishTime}}</p>-->
            </div>
          </el-card>
        </div>
        <el-table :data="tableData" border class="item-table" style="width: 100%;margin-top: 30px;">
          <el-table-column prop="goodsName" label="商品名称" min-width="100" align="center">
            <template slot-scope="scope">
              <div style="cursor: pointer;color: #449284" @click="goGoodsEdit(scope.row)">{{ scope.row.goodsName }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="size" label="规格" min-width="100" align="center"></el-table-column>
          <el-table-column prop="goodsQuantity" label="数量" min-width="100" align="center">
            <template slot-scope="scope">
              <span>×{{ scope.row.goodsQuantity }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价" min-width="100" align="center">
            <template slot-scope="scope">
              <span>￥{{ scope.row.price | toFixed2 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" min-width="100" align="center">
            <template slot-scope="scope">
              <span>{{orderDetailData.showStatusStr}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="total-set">
          <p><span>商品总额：</span><span>￥{{orderDetailData.totalPrice | toFixed2}}</span></p>
          <p><span>优惠：</span><span>-￥{{orderDetailData.totalCouponFee | toFixed2}}</span></p>
          <p><span>运费：</span><span>￥{{orderDetailData.expressFee | toFixed2}}</span></p>
          <p class="total-price" v-if="showStatus == 1 || showStatus == 2 || showStatus == 3"><span>实付：</span><span>￥{{orderDetailData.amount | toFixed2}}</span></p>
          <p class="total-price" v-if="showStatus == 4"><span>应付：</span><span>￥{{(orderDetailData.totalPrice)| toFixed2}}</span></p>
          <p class="total-price" v-if="showStatus == 5"><span>实付：</span><span>￥0.00</span></p>
        </div>
      </div>
      <send-set-dialog
          :sendGoodsDialog="sendGoodsDialog"
          :dialogTitle="dialogTitle"
          :sendSetFormData="sendSetForm"
          @closeSendSet="closeSendSet">
      </send-set-dialog>
    </div>
  </div>
</template>
<script>
  // import { openLoading, closeLoading } from "../../utils/utils";
  import BreadCrumb from "@/components/breadcrumb.vue";
  import { queryOrderDetail } from '@/utils/shop';
  import SendSetDialog from "@/components/shop/send-set-dialog";
  export default {
    components: {
      BreadCrumb,
      SendSetDialog
    },
    data(){
      return{
        curmbFirst: '商铺管理',
        curmbSecond: '订单管理',
        jumPathThird: '',
        curmbThird: '订单详情',
        storeId: null,
        orderId: null,
        showStatus: null,//订单展示状态,1已完成,2已发货,3待发货,4待支付,5交易关闭
        storeType: null,//店铺类型，1供应商，2小药房，3医生小店
        orderDetailData: {
          amount: '',//订单实付总金额
          createdTime: '',//下单时间
          expressId: '',//物流id
          expressName: '',//物流公司名称
          receiverAddr: '',//收货地址
          expressNo: '',//快递单号
          expressStatus: '',//物流状态
          finishTime: '',//成交时间
          orderNo: '',//订单编号
          orderStatus: '',//订单状态：1待支付,2支付中,3支付失败,4订单超时,5支付成功,6交易完成,7交易关闭
          paymentTime: '',//支付时间
          totalCouponFee: '',//优惠券金额
          totalPrice: '',//订单总金额
          remark: '',//备注
          sendTime: '',//发货时间
          payChannel: '',//支付方式
          // showStatus: null,//订单展示状态,1已完成,2已发货,3待发货,4待支付,5交易关闭
        },
        tableData: [],
        sendGoodsDialog: false,
        dialogTitle: '',
        sendSetForm: {},
      }
    },
    created() {
      const {id, storeId, storeType} = this.$route.query;
      this.orderId = id;
      this.storeId = storeId;
      this.storeType = storeType;
      this.jumPathThird = `/order-manage?storeId=${this.storeId}`;
      this.init();
    },
    methods: {
      init() {
        queryOrderDetail(this.orderId).then(res => {
          if (res.code == '000000') {
            const { goodsInfoDtoList } = res.data;
            this.orderDetailData = {...res.data};
            this.showStatus = res.data.showStatus;
            this.tableData = goodsInfoDtoList;
          }
        })
      },
      showSendDialog() {
        this.sendGoodsDialog = true;
        this.sendSetForm = this.orderDetailData;
        if (this.storeType == 1) {
          this.dialogTitle = '发货设置'
        }else {
          this.dialogTitle = '配送设置'
        }
      },
      closeSendSet(val) {
        //保存操作
        if (val.type == 2) {
          this.init();
        }
        this.sendGoodsDialog = false;
      },
      //跳转至商品编辑页
      goGoodsEdit(row) {
        // this.$store.dispatch('goodsManage/changeGoodsInfo', {...row});
        this.$router.push({
          path: '/create-good',
          query: {
            id: row.goodsId,
            storeId: this.storeId,
          }
        })
      },
    },
    filters: {
      toFixed2: function (value) {
        let val;
        if (value) {
          val = (value/100).toFixed(2);
        }else {
          val = 0.00
        }
        return val;
      },
      payChanelFormat: function (value) {
        let str = '';
        if(value == 1) {
          str = '微信支付'
        }
        return str;
      }
    },
  }
</script>
<style lang="scss">
  .order-detail-wrapper{
    .order-detail-content{
      background: #fff;
      padding: 10px;
      .header-title{
        padding: 10px 12px;
        font-size: 13px;
        color: #449284;
        border-bottom: 1px solid #efefef;
      }
      .detail-all-info{
        .trade-status{
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 30px 0;
          text-align: center;
          font-size: 24px;
          img{
            width: 25px;
            height: 25px;
            margin-right: 15px;
          }
          .set-icon{
            color: #449284;
            font-size: 28px;
            margin-right: 10px;
          }
        }
        .trade-info{
          width: 100%;
          box-sizing: border-box;
          display: flex;
          font-size: 13px;
          justify-content: space-between;
          .el-card__body{
            padding-top: 10px;
          }
          .left-card{
            width: 69%;
            display: inline-block;
            margin-right: 2%;
            .trade-status1{
              height: 26px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-bottom: 5px;
              .send-status{
                margin-left: 10px;
                display: inline-block;
              }
            }
          }
          .right-card{
            width: 28%;
            display: inline-block;
          }
          .left-card, .right-card{
            p{
              color: #838683;
              line-height: 22px;
            }
          }
          .clearfix:before,
          .clearfix:after {
            display: table;
            content: "";
          }
          .clearfix:after {
            clear: both
          }
        }
        .total-set{
          text-align: right;
          margin-top: 10px;
          p{
            font-size: 13px;
            color: #999999;
            line-height: 24px;
            span:first-child{
              display: inline-block;
              width: 72px;
              text-align: left;
            }
            span:last-child{
              display: inline-block;
              width: 90px;
            }
          }
          .total-price{
            font-size: 15px;
            color: #333333;
            margin-top: 5px;
          }
        }
      }
    }
    .el-button--text{
      color: #449284;
      font-size: 14px;
      &::after{
        content: '';
        position: relative;
        height: 14px;
        /*border-right: 1px solid #EBEEF5;*/
        border-right: 1px solid #aaaaaa;
        padding-right: 10px;
      }
      &:last-of-type{
        &::after{
          content: '';
          position: relative;
          width: 1px;
          height: 14px;
          border-right: none;
        }
      }
    }
  }
</style>
