<template>
  <el-drawer
    append-to-body
    title="发货详情"
    v-loading="load"
    :visible.sync="drawer"
    @close="close"
    :direction="direction"
    size="50%">
    <div class="content" v-if="value.orderType == 'B2B'">
      <deliveryGoodsInfo :sendState="true" ref="info" :readOnly="true" />
      <div class="send-box">
        <div class="pri-title">
          <!-- <div class="title-item">
            预计送达和预计费用<span>明细></span>
          </div> -->
          <div class="title-item">
            实际送达和实际费用
          </div>
        </div>
        
        <div class="send-type">
          <el-popover
            v-for="(item,index) of priceData" :key="index"
            placement="top-start"
            width="200"
            trigger="hover">
            <div class="price-info">
              <div class="price-title">预估费用明细：</div>
              <div class="price-row freight">
                <span class="p-label">运费：</span>
                <span class="p-value">￥{{item.estimateFreight}}</span>
              </div>
              <div class="price-row">
                <span class="p-label">单价：</span>
                <span class="p-value">￥{{item.unitprice}}</span>
              </div>
              <div class="price-row">
                <span class="p-label">重量：</span>
                <span class="p-value">{{item.weight}}</span>
              </div>
              <div class="price-row">
                <span class="p-label">体积：</span>
                <span class="p-value">{{item.volume}}</span>
              </div>
              <div class="price-row">
                <span class="p-label">单位：</span>
                <span class="p-value">{{item.unit}}</span>
              </div>
            </div>
            <div slot="reference" class="send-item" :title="item.ruleName" :class="{'ont':value.priceId == item.id}" >
              <div class="label-name">{{item.ruleName}}</div>
              <div class="send-info">
                <div class="s-time">{{item.endTime}}前</div>
                <div class="send-price">￥{{item.estimateFreight}}</div>
              </div>
            </div>
          </el-popover>
        </div>
      </div>
      
      <div class="space"></div>
      <div class="deli-footer">
        <div class="send-btn" @click="showLogistics">物流信息</div>
        <div class="send-btn" @click="cancelDelivery">取消发货</div>
      </div>
    </div>
    <div class="content" v-if="value.orderType == 'B2C'">
      <div class="send-box">
        <div class="s-row">
          <div class="s-col width50">业务员：{{ value.tmsBusinessMan }}</div>
          <div class="s-col width50">业务员手机：{{ value.tmsBusinessPhone }}</div>
        </div>
        <div class="s-row">
          <div class="s-col width50">店铺名称：{{ value.wmsShopName }}</div>
          <div class="s-col width50">快递单号：{{ value.wmsExpressCode }}</div>
        </div>
        <div class="s-row">
          <div class="s-col width50">快递公司：{{ value.wmsLogisticsName }}</div>
          <div class="s-col width50">快递公司编码：{{ value.wmsLogisticsCode }}</div>
        </div>
        <div class="s-row">
          <div class="s-col width50">WMS销售订单号：{{ value.wmsSaleorderCode }}</div>
          <div class="s-col width50">WMS总费用：{{ value.wmsTotalAmount }}</div>
        </div>
        <div class="s-row">
          <div class="s-col width50">WMS订单类型：{{ value.wmsSendType }}</div>
          <div class="s-col width50">WMS状态：{{ getWmsState(value.wmsOrderStatus) }}</div>
        </div>
        <div class="s-row">
          <div class="s-col">WMS取消订单的备注：{{ value.wmsRemark }}</div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import DeliveryGoodsInfo from "./deliveryGoodsInfo.vue";
import { queryOrderByOrderId,cancleSendOrder } from  '@/api/delivery'
@Component({components:{DeliveryGoodsInfo}})
export default class DeliveryDetail extends Vue {
  drawer=false;
  direction='rtl'
  load = false;
  priceData:Array<any>=[];
  value:any={};
  wmsState='';
  setShow(v:boolean){
    this.drawer=v;
  }
  showLogistics() {
    this.drawer = false;
    this.$emit('showLogistics',this.value.tmsOrderNo)
  }
  close(){
    this.value={}
    this.priceData=[];
  }
  getWmsState(s:any){
    let n = '';
    switch(s){
      case 1:
        n = '创建';
        break;
      case 2:
        n = '确认';
        break;
      case 3:
        n = '完成';
        break;
      case 4:
        n = '取消';
        break;
    }
    return n;
  }
  setData(v:any){
    if(!v) {
      this.$message('缺少订单id');
      return
    }
    this.load = true;
    queryOrderByOrderId({
      omsOrderId:v
    }).then((res:any) => {
      if(res.data){
        this.value = res.data;
        if(res.data.subItemList){
          this.value.subItem=[];
          for(const item of this.value.subItemList){
            this.value.subItem.push({
              tmsGoodsCode:item.tmsGoodsCode,
              name:item.tmsGoodsName,
              tmsGoodsTotalPrice:item.tmsGoodsTotalPrice,
              price:item.tmsGoodsPrice,
              weight:item.tmsWeight,
              tmsQuantity:item.tmsQuantity
            })
          }
        }
        this.load = false;
        if(res.data.pricePlan){
          try{
            this.priceData = JSON.parse(res.data.pricePlan);
          }catch(e){
            this.priceData = [];
            console.error('价格列表数据转换错误！')
          }
          
        }
        setTimeout(()=>{
          if(this.$refs.info){
            (this.$refs.info as any).setValue(this.value)
          }
        },1000)
      }else{
        this.drawer = false;
        this.$message('未找到发货明细数据！')
      }
    }).catch(() => {
      this.load = false;
    })
  }
  cancelDelivery(){
    let msg = '';
    if(this.value.shippingType == 'MORE'){
      msg = '此操作将导致整车订单的发货被取消，是否继续？'
    }
    if(this.value.shippingType == 'ONE'){
      msg = '此操作将导致该订单的发货被取消，是否继续？'
    }
    if(msg){
      this.$confirm(msg, '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.load = true;
        cancleSendOrder({orderNos:[this.value.tmsOrderNo]}).then((res:any) => {
          this.drawer = false;
          this.load =false;
          this.$message({
            message:'该订单的发货已被取消！',
            type:'success'
          })
          this.$emit('handleSuccess');
        }).catch(() => {
          this.load = false;
        })
      }).catch(() => {});
    }
  }
}
</script>
<style lang="scss" scoped>
.content{
  width: 100%;
  box-sizing: border-box;
  padding: 0 16px;
  background-color: #FFF;
  .send-box{
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    padding-bottom: 0;
    margin-bottom: 16px;
    background-color: rgba(160,205,255,0.22);
    .pri-title{
      width: 100%;
      padding-bottom: 8px;
      display: flex;
      align-items: center;
      .title-item{
        width: 188px;
        font-size: 12px;
        span{
          color: #1684FC;
          padding-left: 8px;
        }
      }
    }
    .send-type{
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap:wrap;
      .send-item{
        width: 165px;
        box-sizing: border-box;
        border:solid 3px #999;
        border-radius: 6px;
        overflow: hidden;
        margin-right: 32px;
        margin-bottom: 16px;
        // cursor: pointer;
        .label-name{
          background-color: #999;
          color: #FFF;
          font-size: 16px;
          font-weight: 700;
          padding: 2px 0 4px;
          text-align: center;
        }
        .send-info{
          padding: 8px 0;
          text-align: center;
          background-color: #FFF;
          .s-time{
            font-size: 14px;
            color: #1684FC;
          }
          .send-price{
            font-size: 20px;
            padding-top: 4px;
          }
        }
      }
      .onSend{
        border:solid 3px #1684FC;
        .label-name{
          background-color: #1684FC;
        }
      }
      .ont{
        border:solid 3px #FF0404;
        .label-name{
          background-color: #FF0404;
        }
      }
    }
    .s-row{
      width: 100%;
      display: flex;
      align-items: center;
      padding-bottom: 16px;
      .s-col{
        width: 100%;
        font-size: 14px;
      }
      .width50{
        width: 50%;
      }
    }
    .s-row:last-child{
      padding: 16;
    }
  }
}
.deli-footer{
  height: 60px;
  box-shadow: 0 -5px 10px #EEE;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  background-color: #FFF;
  left: 0;
  bottom: 0;
  z-index: 10;
  .send-btn{
    width: 120px;
    height: 40px;
    line-height: 40px;
    border-radius: 8px;
    background: linear-gradient(129.2deg, rgba(22,132,252,1) 9.81%,rgba(93,167,249,1) 97.4%);
    color: rgba(255, 255, 255, 100);
    font-size: 14px;
    text-align: center;
    box-shadow: 0px 2px 6px 0px rgba(93, 167, 249, 100);
    margin-left: 16px;
    cursor: pointer;
  }
}
.space{
  height: 60px;
  width: 100%;
  margin-top: 16px;
}
</style>