<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">{{expressType == 1 ? '已发货':'云鹊配送中'}}</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 || (storeType == 2 && expressType == 1)">
                  <p>物流公司：{{orderDetailData.expressName}}</p>
                  <p>快递单号：{{orderDetailData.expressNo}}</p>
                  <el-button type="text" @click="copyTxt">复制</el-button>
                  <el-button type="text" @click="updateOrderNo">修改物流单号</el-button>
                  <input type="text" id="copyInput" class="hidden-input" />
                </div>
                <div v-if="storeType == 2 && expressType == 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 class="steps-logistics" v-if="storeType == 1 || storeType == 3 || expressType == 1">
                <el-steps direction="vertical" :active="0">
                  <el-step
                    v-for="item in expressData"
                    :title="item.time"
                    :description="item.context"
                    :key="item.time"
                  >
                    <div slot="icon">
                      <div class="dot"></div>
                    </div>
                  </el-step>
                </el-steps>
              </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 v-if="showStatus == 1 || showStatus == 2 || showStatus == 3">&nbsp;&nbsp;&nbsp;招募人：{{orderDetailData.ownerName}}</p>
              <p v-if="showStatus == 1 || showStatus == 2 || showStatus == 3">所属药代：{{orderDetailData.brokerName}}</p>
              <p>下单人手机号：{{orderDetailData.prescriberMobile}}</p>
              <p>订单类型：{{orderDetailData.saleTypeStr}}</p>
              <p v-if="orderDetailData.refundReason">退款原因：{{orderDetailData.refundReason}}</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>&nbsp;运费：</span>
            <span v-if="orderDetailData.expressFee == 0">免运费</span>
            <span v-else-if="orderDetailData.expressFee != 0">￥{{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"
          :dtType="dtType"
          :sendSetFormData="sendSetForm"
          @closeSendSet="closeSendSet">
      </send-set-dialog>
    </div>
    <el-dialog
      class="tui-dialog"
      title="修改物流单号"
      :visible="showOrderNoFlag"
      @close="showOrderNoFlag = false"
      width="600px"
    >
      <el-form ref="orderDetailData" :model="orderDetailData" :rules="rulesExpress" label-width="120px">
        <el-form-item label="快递公司" prop="expressName">
          <el-input v-model="orderDetailData.expressName"></el-input>
        </el-form-item>
        <el-form-item label="快递单号" prop="expressNo">
          <el-input v-model="orderDetailData.expressNo"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="orderDetailData.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="confirmExpressNo">完成</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  // import { openLoading, closeLoading } from "../../utils/utils";
  import BreadCrumb from "@/components/breadcrumb.vue";
  import { queryOrderDetail, updateExpressNo, expressInfo } 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: '',//支付方式
          ownerName:'',// 招募人姓名
          brokerName:'',//药代名称
          prescriberMobile:'',//下单人手机号
          // showStatus: null,//订单展示状态,1已完成,2已发货,3待发货,4待支付,5交易关闭
          saleTypeStr:'',// 订单类型
        },
        expressData:[
          {
            time: "",
            context: "待揽收",
          }
        ],
        rulesExpress: {
          expressName: [
            { required: true, message: '请输入快递公司', trigger: "blur"},
          ],
          expressNo: [
            { required: true, message: '请输入快递单号', trigger: "blur"},
          ]
        },
        tableData: [],
        sendGoodsDialog: false,
        dtType: 1,
        sendSetForm: {},
        showOrderNoFlag: false,
        expressType: 1
      }
    },
    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.expressType = res.data.expressType; // 小店 1.普通快递，2云鹊快递
            this.tableData = goodsInfoDtoList;
            this.viewLogistics()
          }
        })
      },
      showSendDialog() {
        this.sendGoodsDialog = true;
        this.sendSetForm = this.orderDetailData;
        if (this.storeType == 1) {
          this.dtType = 1;
        }else {
          this.dtType = 2;
        }
      },
      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,
          }
        })
      },
      // 修改物流单号
      updateOrderNo(){
        this.showOrderNoFlag = true;
      },
      confirmExpressNo() {
        if (this.orderDetailData.expressName == null || this.orderDetailData.expressName == "") {
          this.$message.error("请填写快递公司");
          return;
        }
        if (this.orderDetailData.expressNo == null || this.orderDetailData.expressNo == "") {
          this.$message.error("请填写快递单号");
          return;
        }
        updateExpressNo({
          orderId: this.orderId,
          expressName: this.orderDetailData.expressName,
          expressNo: this.orderDetailData.expressNo,
          remark: this.orderDetailData.remark
        }).then(res => {
          if (res.code == '000000') {
            this.$message.success('操作成功');
            this.showOrderNoFlag = false;
            this.searchList();
          } else {
            this.$message.success(`操作失败:${res.message}，请重试`);
          }
        });
      },
      copyTxt() {
        let txt = document.getElementById("copyInput");
        txt.value = this.orderDetailData.expressNo;
        // if (navigator.userAgent.match(/(iPhone|iPod|iPad|Mac);?/i)) {
        if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") < 1) {
          var el = document.createElement('input');
          el.value = txt.value;//要复制的内容
          el.style.opacity = '0';
          document.body.appendChild(el);
          var editable = el.contentEditable;
          var readOnly = el.readOnly;
          el.contentEditable = true;
          el.readOnly = false;
          const range = document.createRange();
          range.selectNodeContents(el);
          var sel = window.getSelection();
          sel.removeAllRanges();
          sel.addRange(range);
          el.setSelectionRange(0, 999999);
          el.contentEditable = editable;
          el.readOnly = readOnly;
          var ret = document.execCommand('copy');
          el.blur();
        } else {
          txt.select(); //选择对象
          document.execCommand("copy");
        }
        this.$message.success('复制成功');
      },
      //查看物流
      viewLogistics() {
        if (this.orderDetailData.expressNo && this.orderDetailData.receiverMobile)
        expressInfo({
          expressNo: this.orderDetailData.expressNo,
          receiverMobile: this.orderDetailData.receiverMobile,
        }).then((res) => {
          if (res.code == "000000") {
            if (res.data.data && res.data.data.length) {
              this.expressData = res.data.data;
            } else {
              this.expressData[0].time = res.data.updateTime || '';
              this.expressData = this.expressData;
            }
          }
        });
      },
    },
    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{
    .hidden-input {
      height: 0;
    }
    .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;
              }
            }
            .steps-logistics {
              border-top: 2px solid #ddd;
              padding-top: 20px;
              margin-top: 20px;
              height: 200px;
              overflow-y: scroll;
            }
          }
          .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;
        }
      }
    }
    .el-step__icon {
      border: none;
      background: transparent;
    }
    .el-step__title {
      font-size: 14px;
    }

    .el-step:last-of-type .el-step__line {
      display: block !important;
      height: 30%;
    }
    .dot {
      border-radius: 50%;
      height: 8px;
      width: 8px;
      border: 1px solid #999999;
      background-color: #b8b8b8;
    }
  }
</style>
