<template>
  <vxe-modal v-model="value" id="addOrder" @show="show" width="70%" height="80%" show-zoom resize transfer @hide="hide" v-loading="load">
    <template #title>
      <span>创建新订单</span>
    </template>
    <template #default>
      <div class="order-step" v-if="orderValue.id">
        <el-steps :active="stepActive" align-center finish-status="success" v-if="stepCon.indexOf(orderValue.status) >= 0" size="mini">
          <el-step title="1.待付款"></el-step>
          <el-step title="2.已付款待审核"></el-step>
          <el-step title="3.已客审待财审"></el-step>
          <el-step title="4.等供销商|外仓发货"></el-step>
          <el-step title="5.已发货"></el-step>
        </el-steps>
        <div class="other" v-else>{{ stepTypeName(orderValue.status) }}</div>
      </div>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="基本信息" name="1" class="add-order-item">
          <by-form :propConfig="config" ref="baseform">
            <template v-slot:sourceFrom_desc='{ value }'>
              {{ getFromText(value.sourceFrom) }}
            </template>
           
          </by-form>
        </el-collapse-item>
        <el-collapse-item title="买家信息" name="2" class="add-order-item">
          <by-form :propConfig="config2" ref="infoform">
            <template v-slot:receiverProvinceCode_desc='{ value }'>
              {{ value.receiverProvince + '-' + value.receiverCity + '-' + value.receiverDistrict + (value.receiverTown?'-'+value.receiverTown:'') }}
            </template>
          </by-form>
        </el-collapse-item>
        <el-collapse-item title="发票信息" name="5" class="add-order-item">
          <by-form :propConfig="invoicesConfig" ref="invoicesform"></by-form>
        </el-collapse-item>

        <el-collapse-item title="订单支付情况" name="4" class="add-order-item" >
          <div class="pay-info">
            <el-descriptions v-for="(item,index) of orderValue.pays" :key="index" :title="item.payment" size="mini" :column="4">
              <el-descriptions-item label="单号">{{item.outerPayId}}</el-descriptions-item>
              <el-descriptions-item label="金额">{{item.amount}}</el-descriptions-item>
              <el-descriptions-item label="支付日期">{{item.payDate}}</el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag v-if="item.status == 'Invalid'" type="info" size="mini">已失效</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          
        </el-collapse-item>
        <el-collapse-item title="商品订单" name="3" class="add-order-item">
          <div class="addProductTool">
            <div></div>
            <div class="preferential">
              <span>抵扣金额：{{ freeAmount }}</span>
            </div>
          </div>
          <by-table :propConfig="tableConfig" ref="table">
            <template v-slot:name='{ row }'>
              <div class="product-cont">
                <div class="product-name">{{ row.name }} <el-tag v-if="row.isGift == 1" size="mini" type="success">赠</el-tag></div>
              </div>
            </template>
            
          </by-table>
          <div class="product-row">
            <div class="p-left">数量：{{ num }}</div>
            <div class="p-right">
              <div class="amount-title">商品成交总金额：</div>
              <div class="amount-price">¥{{ productTotal }}</div>
            </div>
          </div>
          <div class="product-row">
            <div class="p-left"></div>
            <div class="p-right">
              <div class="amount-title">抵扣金额：</div>
              <div class="amount-price">¥{{orderValue.freeAmount?orderValue.freeAmount:'0.00'}}</div>
            </div>
          </div>
          <div class="product-row">
            <div class="p-left"></div>
            <div class="p-right">
              <div class="amount-title">运费：</div>
              <div class="amount-price">¥{{orderValue.freight?orderValue.freight:'0.00'}}</div>
            </div>
          </div>
          <div class="product-row">
            <div class="p-left"></div>
            <div class="p-right">
              <div class="amount-title">应付总金额：</div>
              <div class="amount-price" style="color:#F00; font-size: 14px;">¥{{orderValue.payAmount?orderValue.payAmount:'0.00'}}</div>
            </div>
          </div>
          <div class="product-row" v-if="orderValue.paidAmount">
            <div class="p-left"></div>
            <div class="p-right">
              <div class="amount-title">实付总金额：</div>
              <div class="amount-price" style="color:#F00; font-size: 14px;">¥{{orderValue.paidAmount?orderValue.paidAmount:'0.00'}}</div>
            </div>
          </div>
        </el-collapse-item>
       
      </el-collapse>
      
    </template>
  </vxe-modal>
  
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { single,delItem,addPay,batchItem } from '@/api/omsOrder'
import { add,multiply,subtract,divide } from '@/benyun/utils/accuracy'
@Component({components:{}})
export default class DetailOrder extends Vue {
  value=false;
  num:any=0;
  load = false;
  freeAmount="";
  productTotal:any=0;
  userInfo:any='';//用户信息
  orderValue:any={}; //新增订单值
  stepActive:number=0;
  stepCon=['WaitPay','WaitConfirm','WaitFConfirm','WaitOuterSent','Sent']
  activeNames:Array<any> =['1','2','3','4','5','save'];
  sourceFrom:any={
    'ERP':'手工下单',
    'COPY':'复制',
    'MERGE':'合并',
    'SPLIT':'拆分；拆分还原',
    'MOBILE':'导入',
    'drp-s':'供销推送',
    'drp-d':'分销推送',
    'KWAISHOP':'快手；微商城',
    'PINDUODUO':'拼多多',
    'TOUTIAOFXG':'头条放心购',
    'JUSHUITAN':'聚水潭'
  }
  config:any={
    attr:{
      showType:'desc',
      size:'small',
      itemCount:4,
    },
    columns:[
      [{
        span:6,
        label:'店铺名称',
        prop:'shopName'
      },{
        span:6,
        label:'线上订单',
        prop:'sourceId'
      },{
        span:6,
        label:'订单日期',
        prop:'orderDate'
      }],
      [{
        span:6,
        label:'运费',
        prop:'freight'
      },{
        span:6,
        label:'快递公司',
        prop:'logisticsCompany'
      },{
        span:6,
        label:'业务员',
        prop:'createBy'
      }],
      [{
        span:6,
        label:'订单来源',
        prop:'sourceFrom',
        descSlot:true,
        colspan:2
      },{
        label:'标签',
        prop:'labels',
        span:12,
        colspan:2,
        slot:true
      }],
      [{
        label:'线下备注',
        prop:'note',
        colspan:2
      }],
      [{
        label:'买家留言',
        prop:'buyerMessage',
        colspan:2
      }],
      [{
        label:'卖家备注',
        prop:'remark',
        colspan:4
      }]
    ]
  }
  config2:any={
    attr:{
      showType:'desc',
      size:'small',
      itemCount:4
    },
    columns:[
      [{
        span:6,
        label:'买家账号',
        prop:'buyerId',
        component:'by-input',
        compConfig:{}
      },{
        span:6,
        label:'收货人',
        prop:'receiverName',
        component:'by-input',
        rules:[{
          required: true, message: '收货人不能为空', trigger: 'blur'
        }],
        compConfig:{
          attr:{
            placeholder:'请输入收货人',
            clearable:true
          }
        }
      }],
      [{
        span:24,
        label:'收货地址',
        // slot:true,
        prop:'receiverProvinceCode',
        component:'by-area',
        colspan:2,
        descSlot:true,
        compConfig:{
          attr:{
            province:'receiverProvince', //省
            provinceCode:'receiverProvinceCode', //省编码
            city:'receiverCity',   //市
            cityCode:'receiverCityCode',  //市编码
            county:'receiverDistrict',  //县/区
            countyCode:'receiverDistrictCode',   //县/区编码
            townCode:'receiverTownCode',
            town:'receiverTown',
            // show:'county'
          }
        }
      }],
      [{
        span:24,
        label:'详细地址',
        prop:'receiverAddress',
        component:'by-input',
        compConfig:{
          attr:{
            placeholder:'请输入详细地址',
            clearable:true
          }
        }
      }],
      [{
        span:6,
        label:'手机',
        prop:'receiverMobile',
        component:'by-input',
        compConfig:{
          attr:{
            placeholder:'请输入手机',
            clearable:true
          }
        }
      },{
        span:6,
        label:'电话',
        prop:'receiverPhone',
        component:'by-input',
        compConfig:{
          attr:{
            placeholder:'请输入电话',
            clearable:true
          }
        }
      },{
        span:6,
        label:'邮编',
        prop:'receiverZip',
        component:'by-input',
        compConfig:{
          attr:{
            placeholder:'请输入邮编',
            clearable:true
          }
        }
      }]
    ]
  }
  tableConfig:any={
    attr:{
      size:'mini',
      align:'center',
    },
    columns:[{
      title:'名称',
      field:'name',
      slot:true,
      // width:300
    },{
      title:'数量',
      field:'qty',
      width:150,
      slot:true
    },{
      title:'单价',
      field:'price',
      width:120,
      slot:true
    },{
      title:'原价',
      field:'basePrice',
      width:120
    },{
      title:'成交金额',
      field:'amount',
      width:120
    }]
  }
  invoicesConfig:any={
    attr:{
      showType:'desc',
      size:'small',
      itemCount:4,
    },
    columns:[
      [{
        span:6,
        label:'发票类型',
        prop:'type'
      },{
        span:6,
        label:'发票抬头',
        prop:'title'
      },{
        span:6,
        label:'发票税号',
        prop:'taxNo'
      }],
      [{
        span:6,
        label:'发票地址',
        prop:'address'
      },{
        span:6,
        label:'专票银行',
        prop:'bank'
      },{
        span:6,
        label:'发票电话',
        prop:'phone'
      }],
      [{
        span:6,
        label:'专票账户',
        prop:'account'
      },{
        span:6,
        label:'专票邮箱',
        prop:'email'
      },{
        span:6,
        label:'专票人',
        prop:'userName'
      }],
      [{
        span:6,
        label:'专票电话',
        prop:'userPhone'
      },{
        span:12,
        label:'专票地址',
        prop:'userAddress'
      }]
    ]
  }
  //订单来源转换文字信息
  getFromText(f:any){
    let t='';
    if(f){
      let arr:Array<any>=f.split(',');
      for(const item of arr){
        if(this.sourceFrom[item]){
          if(t){
            t = t + ' , ' + this.sourceFrom[item]
          }else{
            t = this.sourceFrom[item]
          }
        }
      }
    }
    return t;
  }
  stepTypeName(n:string){
    let t = '';
    if(n == 'Merged'){
      t = '被合并'
    }
    if(n == 'Question'){
      t = '异常'
    }
    if(n == 'Split'){
      t = '被拆分'
    }
    if(n == 'Cancelled'){
      t = '已取消'
    }
    return t;
  }
  setShow(v:boolean){
    this.value = v;
  }
  setDetail(data:any){
    this.orderValue = data;
  }
  created(){
    this.userInfo = this.$store.getters.userInfo;
  }
  //获取数据
  getData(){
    if(!this.orderValue.id){
      return
    }
    this.load = true;
    single({
      id:this.orderValue.id
    }).then((res:any) => {
      this.load = false;
      this.orderValue = res.data;
      this.show();
      this.$forceUpdate();
    }).catch(()=>{
      this.load = false
    })
  }
  show(){
    let data = this.orderValue;
    this.freeAmount = this.orderValue.freeAmount;
    //基本信息
    let info:any={};
    info.shopName = data.shopName;
    info.sourceId = data.sourceId;
    info.orderDate = data.orderDate;
    info.freight = Number(data.freight)?Number(data.freight):0;
    info.logisticsCompany = data.logisticsCompany;
    info.createBy = data.createBy;
    info.note = data.note;
    info.buyerMessage = data.buyerMessage;
    info.remark = data.remark;
    info.sourceFrom = data.sourceFrom;
    (this.$refs.baseform as any).setValue(info);
    //买家
    let buyerInfo:any={};
    buyerInfo.buyerId = data.buyerId;
    buyerInfo.receiverName = data.receiverName;
    buyerInfo.receiverProvince=data.receiverProvince;//省
    buyerInfo.receiverProvinceCode=data.receiverProvinceCode; //省编码
    buyerInfo.receiverCity=data.receiverCity;   //市
    buyerInfo.receiverCityCode=data.receiverCityCode;  //市编码
    buyerInfo.receiverDistrict=data.receiverDistrict;  //县/区
    buyerInfo.receiverDistrictCode=data.receiverDistrictCode;   //县/区编码
    buyerInfo.receiverTownCode=data.receiverTownCode;
    buyerInfo.receiverTown=data.receiverTown;
    buyerInfo.receiverAddress = data.receiverAddress;
    buyerInfo.receiverPhone = data.receiverPhone;
    buyerInfo.receiverMobile = data.receiverMobile;
    buyerInfo.receiverZip = data.receiverZip;
    (this.$refs.infoform as any).setValue(buyerInfo);
    //商品
    const productData:Array<any> = data.items ? data.items : [];
    (this.$refs.table as any).setValue(productData);
    //付款
    this.orderValue.isPay = data.isPay;
    //发票
    if(data.invoices && data.invoices[0]){
      (this.$refs.invoicesform as any).setValue(data.invoices[0]);
    }

    this.totalAmount();
    this.amountChange();
    // this.payAmountChange();
    this.totalNum();
    if(this.stepCon.indexOf(data.status) >=0 ){
      this.stepActive = this.stepCon.indexOf(data.status) 
    }
    
  }
  hide(){

  }
  //抵扣金额数值变化
  freeAmountChange(v:any){
    this.orderValue.freeAmount = 0;
    this.amountChange();
    this.payAmountChange();
  }
  //商品成交总金额
  totalAmount(){
    let nowData = (this.$refs.table as any).getValue();
    this.productTotal = 0;
    for(const item of nowData){
      if(Number(item.amount) && item.isGift != 1){
        this.productTotal = add(item.amount, this.productTotal)
      }
    }
    this.productTotal = this.productTotal.toFixed(2);
  }
  //具体折扣数目
  amountChange(){
    if(this.freeAmount){
      if(Number(this.freeAmount) >= 0){
        this.orderValue.freeAmount = Number(this.freeAmount)
      }else{
        let arr:Array<any> = this.freeAmount.split("%");
        if(arr.length == 2 && Number(arr[0]) > 0){
          const n = divide(Number(arr[0]),100)
          this.orderValue.freeAmount = multiply(this.productTotal,n)
        }
      }
      this.orderValue.freeAmount = this.orderValue.freeAmount.toFixed(2);
    }
  }
  //应付总金额
  payAmountChange(){
    const freight = Number(this.orderValue.freight)?Number(this.orderValue.freight):0;
    const freeAmount = Number(this.orderValue.freeAmount)?Number(this.orderValue.freeAmount):0;
    let t = subtract(this.productTotal, freeAmount);
    this.orderValue.payAmount = add(t, freight);
    this.orderValue.payAmount = this.orderValue.payAmount.toFixed(2);
  }
  //商品总数量
  totalNum(){
    let nowData = (this.$refs.table as any).getValue();
    this.num = 0;
    for(const item of nowData){
      if(Number(item.qty)){
        this.num = add(Number(item.qty), Number(this.num))
      }
    }
  }
  
}
</script>

<style lang="scss" scoped>
.btn{
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.btn-save{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 16px 0;
  border-bottom: 1px solid #e6ebf5;
}
.updateBuyer{
  padding: 0 16px;
}
.addProductTool{
  width: 100%;
  padding-bottom: 8px;
  display: flex;
  justify-content: space-between;
  .preferential{
    width: 240px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    .pre-title{
      width: 80px;
      flex-shrink: 0;
    }
  }
}
.payType{
  padding-bottom: 16px;
}
.product-cont{
  width: 100%;
  .product-name{
    font-size: 12px;
    // padding-bottom: 4px;
    color: #000;
  }
  .other-info{
    font-size: 12px;
    span{
      padding: 0 8px;
    }
  }
}
.product-row{
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 12px;
  padding: 4px 0;
  .p-left,.p-right{
    width: 50%;
  }
  .p-left{
    text-align: right;
  }
  .p-right{
    display: flex;
    align-items: center;
    .amount-title{
      width: 70%;
      text-align: right;
      box-sizing: border-box;
      padding-right: 8px;
    }
    .amount-price{
      width: 30%;
    }
  }
}
.pay-info{
  width: 100%;
}
.pay-row{
  display: flex;
  justify-content: flex-end;
}
.order-step{
  padding-bottom: 8px;
  width: 100%;
  .other{
    height: 30px;
    line-height: 30px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    font-size: 14px;
    color: #FFF;
    background-color: #198cf8;
  }
}
.updata-btn-row{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-bottom: 8px;
}
</style>

<style lang="scss">
.add-order-item{
  .el-collapse-item__content{
    padding-bottom: 0;
  }
}
.pay-info{
  .el-descriptions{
    padding-bottom: 8px;
    .el-descriptions__header{
      margin-bottom: 0 !important;
      .el-descriptions__title{
        font-size: 14px;
      }
    }
  }
}
</style>