<template>
  <vxe-modal v-model="value" id="addOrder" @show="show" width="70%" height="80%" min-width="460" min-height="320"
    show-zoom resize transfer show-footer @hide="hide" v-loading="load">
    <template #title>
      <span>{{ orderValue.id ? '订单详情' : '创建新订单' }}</span>
    </template>
    <template #default>
      <div class="order-step" v-if="orderValue.id">
        <el-steps :active="stepActive" align-center finish-status="success"
          v-if="topStep.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="3.发货中"></el-step>
        </el-steps>
        <div class="other" v-if="stepTypeName(orderValue.status)">{{ stepTypeName(orderValue.status) }}</div>
      </div>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="基本信息" name="1" class="add-order-item">
          <by-form :propConfig="baseConfig" ref="baseform" @formChange="formChangeBase">
            <template v-slot:operationFlag_desc='{ value }'>
              {{ getFromText(value.operationFlag) }}
            </template>
            <template v-slot:shopName="{ value }">
              <el-input :placeholder="!orderValue.id ? '请选择标签' : ''" :value="value.shopName"
                :disabled="orderValue.id ? true : false" @clear="clearShop" size="small" class="myinpuy-with-select"
                clearable>
                <el-button slot="append" v-if="!orderValue.id" icon="el-icon-more" @click="showShop"></el-button>
              </el-input>
            </template>
            <template v-slot:labels="{ value }">
              <el-input :placeholder="!orderValue.id ? '请选择标签' : ''" :value="value.labels"
                :disabled="orderValue.id ? true : false" size="small" @clear="clearLabels" class="myinpuy-with-select"
                clearable>
                <el-button slot="append" v-if="!orderValue.id" icon="el-icon-more" @click="showLabels"></el-button>
              </el-input>
            </template>
          </by-form>
        </el-collapse-item>
        <el-collapse-item title="买家信息" name="2" class="add-order-item">
          <by-form :propConfig="buyerInfoConfig" ref="infoform">
            <template v-slot:buyerNickname="{ value }">
              <el-input placeholder="请选择买家'" :value="value.buyerNickname" @clear="clearBuyer" size="small"
                class="myinpuy-with-select" clearable>
                <el-button slot="append" icon="el-icon-more" @click="showBuyer"></el-button>
              </el-input>
            </template>
            <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" v-if="orderValue.id">
          <by-form :propConfig="newInvoicesConfig" ref="invoicesform"></by-form>
        </el-collapse-item>
        <div class="btn-save" v-if="orderValue.id && orderValue.isSubmitted != 1">
          <el-button type="primary" size="small" @click="saveBase">保存基本信息及收获地址</el-button>
        </div>
        <el-collapse-item title="订单支付情况" name="4" class="add-order-item" v-if="orderValue.id">
          <div class="pay-row"
            v-if="orderValue.status != 'Split' && orderValue.status != 'Merged' && orderValue.status != 'Cancelled'">
            <!-- <el-button type="text" v-if="!orderValue.pays || orderValue.pays.length == 0">快速支付</el-button> -->
            <div class="add-pay-btn" v-if="orderValue.status !== 'Delivering' && orderValue.status !== 'Sent'">
              <el-button type="text" v-if="!showPay" @click="showPay = true">添加手工支付</el-button>
              <el-button v-else icon="el-icon-close" size="mini" circle @click="showPay = false"></el-button>
            </div>

          </div>
          <by-form v-if="showPay" :propConfig="payConfig" ref="payform"></by-form>
          <div class="pay-row"
            v-if="showPay && orderValue.status != 'Split' && orderValue.status != 'Merged' && orderValue.status != 'Cancelled'">
            <el-button type="primary" size="small" @click="addPay">添加</el-button>
          </div>
          <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="状态"
                v-if="orderValue.status !== 'Delivering' && orderValue.status !== 'Sent'">
                <div class="payHandle" v-if="item.status == 'WaitConfirm'">
                  <span @click="payStatusHandle(item, 'Confirmed')">审核通过</span>
                  <span @click="payStatusHandle(item, 'Invalid')">作废</span>
                </div>
                <div class="payHandle" v-if="item.status == 'Confirmed'">
                  <span @click="payStatusHandle(item, 'WaitConfirm')">取消审核</span>
                </div>
                <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">
            <by-tool :propConfig="toolConfig" v-if="orderValue.status !== 'Delivering' && orderValue.status !== 'Sent'"
              ref="tool"></by-tool>
            <div class="preferential">
              <div class="pre-title">抵扣金额<i class="el-icon-info"
                  title="支持输入数字和百分比。若输入百分比，将自动计算折扣金额=商品成交总金额*百分比（举例：打9折，请输入10%），只在订单创建时计算一次，在订单创建后修改商品价格不会自动计算，运费不参与折扣。"></i>：
              </div>
              <vxe-input v-if="!orderValue.id" v-model="freeAmount" class="freeAmount" placeholder="请输入" size="mini"
                @change="freeAmountChange"></vxe-input>
              <span v-else>{{ 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>
            <template v-slot:qty='{ row }'>
              <vxe-input v-model="row.qty" v-if="!orderValue.id" placeholder="数量" align="center" size="mini"
                type="integer" @input="qtyChange($event, row)">
              </vxe-input>
              <span v-else>{{ row.qty }}</span>
            </template>
            <template v-slot:price='{ row }'>
              <span v-if="row.isGift == 1">0</span>
              <vxe-input v-else-if="!orderValue.id" v-model="row.price" placeholder="单价" align="center" size="mini"
                type="number" @input="priceChange($event, row)">
              </vxe-input>
              <span v-else>{{ row.price }}</span>
            </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-item title="订单支付情况" name="4" class="add-order-item" v-if="!orderValue.id">
          <el-radio-group v-model="radioPay" @input="inputPay" class="payType">
            <el-radio :label="0">待付款</el-radio>
            <el-radio :label="1">快速支付&已付款</el-radio>
            <el-radio :label="2">手工添加支付信息</el-radio>
            <el-radio :label="3">货到付款</el-radio>
          </el-radio-group>
          <by-form v-if="radioPay == 2" :propConfig="payConfig" ref="payform"></by-form>
        </el-collapse-item>
        <el-collapse-item title="发票信息" name="5" class="add-order-item" v-if="!orderValue.id">
          <by-form :propConfig="newInvoicesConfig" ref="invoicesform"></by-form>
        </el-collapse-item>

        <el-collapse-item title="出库信息" name="5" class="add-order-item">
          <by-form :propConfig="outBoundOrderConfig" ref="outBoundOrderForm"></by-form>
        </el-collapse-item>
      </el-collapse>
      <!-- 商品 -->
      <product-sku-modal ref="product" :mulit="true" @confirm="confirmProduct" />
      <!-- 赠品 -->
      <product-sku-modal ref="productGift" :mulit="true" @confirm="confirmProductGift" />

      <add-product-modal ref="addProductModal" @handleSuccess="handleSuccess" :mask="false" />
      <edit-product-modal ref="editProductModal" @handleSuccess="handleSuccess" />
      <!-- 店铺 -->
      <shop-modal ref="shopModal" @shopSelect="shopSelect" />
      <!-- 标签 -->
      <labels-modal ref="labelsModal" @onChange="onChangeLabel" />
      <!-- 买家 -->
      <buyer-info-modal ref="buyerInfoModal" @confirm="confirmBuyerInfo" />
      <el-drawer class="log-drawer" :size="600" append-to-body title="操作日志" :visible.sync="drawer" direction="rtl">
        <byLog :propConfig="logConfig" ref="log" />
      </el-drawer>
    </template>
    <template #footer>
      <div class="btn">
        <el-button type="primary" size="small" v-if="!orderValue.id" @click="btn('continue')">确定并继续</el-button>
        <el-button type="primary" size="small" v-if="!orderValue.id" @click="btn">确定</el-button>
        <el-button v-if="orderValue.id" @click="logShow">日志</el-button>
      </div>
    </template>

  </vxe-modal>

</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { addOrder, saveBaseOrder, single, delItem, addPay, updateStatus } from '@/api/omsOrder'
import { add, multiply, subtract, divide } from '@/benyun/utils/accuracy'
import AddProductModal from "./addProductModal.vue";
import EditProductModal from "./editProductModal.vue";
import LabelsModal from "./labelsModal.vue";
import ShopModal from "./shopModal.vue";
import BuyerInfoModal from "./buyerInfoModal.vue";
@Component({ components: { AddProductModal, EditProductModal, LabelsModal, ShopModal, BuyerInfoModal } })
export default class AddOrder extends Vue {
  logConfig: any = {
    request: {
      url: '/omsOrder/omsOrderOperateLog/page',
      method: 'GET'
    }
  };
  drawer = false;
  value = false;
  num: any = 0;
  showPay = false;
  load = false;
  freeAmount = "";
  productTotal: any = 0;
  userInfo: any = '';//用户信息
  orderValue: any = {}; //新增订单值
  radioPay = 1;
  stepActive: number = 0;
  topStep = ['WaitPay', 'WaitConfirm', 'Delivering']
  stepCon = ['WaitPay', 'WaitConfirm', 'WaitFConfirm', 'WaitOuterSent', 'Sent', 'Delivering']
  activeNames: Array<any> = ['1', '2', '3', '4', '5', 'save'];
  operationFlag: any = {
    'OMS': '手工下单',
    'COPY': '复制',
    'MERGE': '合并',
    'SPLIT': '拆分；拆分还原',
    'MOBILE': '导入',
    'DRP-S': '供销推送',
    'DRP-D': '分销推送',
    'KWAISHOP': '快手；微商城',
    'PINDUODUO': '拼多多',
    'TOUTIAOFXG': '头条放心购',
    'JUSHUITAN': '聚水潭'
  }
  baseConfig: any = {};
  buyerInfoConfig: any = {};
  newInvoicesConfig: any = {}
  config: any = {
    attr: {
      size: 'small',
      itemCount: 4,
      rules: {
        orderDate: [{
          required: true, message: '订单日期不能为空！', trigger: 'blur'
        }]
      }
    },
    columns: [
      [{
        span: 6,
        label: '来源渠道',
        prop: 'upSourceName',
        // slot:true,
        component: 'by-input',
        compConfig: {
          attr: {
            readonly: true
            // type:'integer',
            // placeholder:'请输入店铺名称',
            // clearable:true
          }
        }
      }, {
        span: 6,
        label: '线上订单',
        prop: 'sourceId',
        component: 'by-input',
        compConfig: {
          attr: {
            placeholder: '自动生成',
            readonly: true
          }
        }
      }, {
        span: 6,
        label: '订单日期',
        prop: 'orderDate',
        component: 'by-date-picker',
        compConfig: {
          attr: {
            // placeholder:'请输入订单日期',
            clearable: true,
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            defaultNow: true
          }
        }
      }],
      [{
        span: 6,
        label: '运费',
        prop: 'freight',
        component: 'by-input',
        compConfig: {
          attr: {
            placeholder: '请输入运费',
            type: 'number',
            clearable: true
          }
        }
      }, {
        span: 6,
        label: '快递公司',
        prop: 'logisticsCompany',
        component: 'by-input',
        compConfig: {
          attr: {
            placeholder: '请输入快递公司',
            clearable: true
          }
        }
      },
      {
        span: 6,
        label: '业务员',
        prop: 'createBy',
        component: 'by-input',
        compConfig: {
          attr: {
            placeholder: '请输入业务员',
            // readonly:true
          }
        }
      }],
      [{
        span: 6,
        label: '操作标记',
        prop: 'operationFlag',
        descSlot: true,
        component: 'by-select',
        colspan: 2,
        compConfig: {
          attr: {
            // placeholder:'请输入订单日期',
            disabled: true,
            data: [{
              label: '手工下单',
              value: 'OMS'
            }, {
              label: '复制',
              value: 'COPY'
            }, {
              label: '合并',
              value: 'MERGE'
            }, {
              label: '拆分；拆分还原',
              value: 'SPLIT'
            }, {
              label: '手机',
              value: 'MOBILE'
            }, {
              label: '导入',
              value: 'IMPORT'
            }, {
              label: '供销推送',
              value: 'DRP-S'
            }, {
              label: '分销推送',
              value: 'DRP-D'
            }, {
              label: '快手；微商城',
              value: 'KWAISHOP'
            }, {
              label: '拼多多',
              value: 'PINDUODUO'
            }, {
              label: '头条放心购',
              value: 'TOUTIAOFXG'
            }, {
              label: '聚水潭',
              value: 'JUSHUITAN'
            }]
          }
        }
      }, {
        label: '标签',
        prop: 'labels',
        span: 12,
        colspan: 2,
        slot: true
      }],
      [{
        label: '线下备注',
        prop: 'note',
        component: 'by-input',
        colspan: 2,
        compConfig: {
          attr: {
            placeholder: '请输入线下备注',
            clearable: true
          }
        }
      }],
      [{
        label: '买家留言',
        prop: 'buyerMessage',
        component: 'by-input',
        colspan: 2,
        compConfig: {
          attr: {
            placeholder: '请输入买家留言',
            clearable: true
          }
        }
      }],
      [{
        label: '卖家备注',
        prop: 'remark',
        component: 'by-input',
        colspan: 4,
        compConfig: {
          attr: {
            placeholder: '请输入卖家备注',
            clearable: true
          }
        }
      }]
    ]
  }
  config2: any = {
    attr: {
      size: 'small',
      itemCount: 4,
      rules: {
        buyerNickname: [{
          required: true, message: '买家账号不能为空！', trigger: 'blur'
        }],
        receiverDistrictCode: [{
          required: true, message: '收货地址不能为空！', trigger: 'blur'
        }],
        receiverAddress: [{
          required: true, message: '详细地址不能为空！', trigger: 'blur'
        }],
        receiverMobile: [{
          required: true, message: '手机号不能为空！', trigger: 'blur'
        }, {
          validator: this.validatePhone, trigger: 'blur'
        }]
      }
    },
    columns: [
      [{
        span: 6,
        label: '买家',
        prop: 'buyerNickname',
        colspan: 2,
        slot: true,
        // component:'by-input',
        // compConfig:{
        //   attr:{
        //     type:'integer'
        //   }
        // }
      }, {
        span: 6,
        label: '收货人',
        prop: 'receiverName',
        colspan: 2,
        component: 'by-input',
        rules: [{
          required: true, message: '收货人不能为空', trigger: 'blur'
        }],
        compConfig: {
          attr: {
            placeholder: '请输入收货人',
            clearable: true
          }
        }
      }],
      [{
        span: 6,
        label: '手机',
        colspan: 2,
        prop: 'receiverMobile',
        component: 'by-input',
        compConfig: {
          attr: {
            placeholder: '请输入手机',
            clearable: true
          }
        }
      }, {
        span: 6,
        label: '固定电话',
        prop: 'receiverPhone',
        colspan: 1,
        component: 'by-input',
        compConfig: {
          attr: {
            placeholder: '请输入电话',
            clearable: true
          }
        }
      }, {
        span: 6,
        label: '邮编',
        prop: 'receiverZip',
        colspan: 1,
        component: 'by-input',
        compConfig: {
          attr: {
            placeholder: '请输入邮编',
            clearable: true
          }
        }
      }],
      [{
        span: 24,
        label: '收货地址',
        // slot:true,
        prop: 'receiverProvinceCode',
        component: 'by-area',
        colspan: 4,
        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',
        colspan: 4,
        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: 'barCode',
      width: 120
    }, {
      title: '数量',
      field: 'qty',
      width: 130,
      slot: true
    }, {
      title: '单价',
      field: 'price',
      width: 130,
      slot: true
    }, {
      title: '原价',
      field: 'basePrice',
      width: 120
    }, {
      title: '成交金额',
      field: 'amount',
      width: 120
    },
    // {
    //   title:'库存',
    //   field:'stock',
    //   width:100
    // },
    {
      title: '操作',
      action: true,
      width: 160,
      plugins: [{
        icon: 'el-icon-delete',
        name: '删除',
        audit: '',
        event: {
          show: (row: any) => {
            if (row.status == 'Merged' || row.status == 'Cancelled') {
              return false
            } else {
              return true
            }
          },
          click: (item: any) => {
            this.deletaProduct(item);
          }
        }
      }]
    }]
  }
  toolConfig = {
    customTools: [
      {
        name: '新增商品', icon: 'el-icon-plus', event: {
          click: () => {
            this.toolAddProduct()
          }
        }
      },
      {
        name: '添加赠品', icon: 'el-icon-plus', event: {
          click: () => {
            this.toolAddGift();

          }
        }
      }
    ]
  }
  invoicesConfig: any = {
    attr: {
      size: 'small',
      itemCount: 4,
    },
    columns: [
      [{
        span: 6,
        label: '发票类型',
        prop: 'type',
        component: 'by-select',
        compConfig: {
          attr: {
            placeholder: '发票类型',
            clearable: true,
            data: [{
              value: '个人电子普通',
              label: '个人电子普通'
            }, {
              value: '单位电子普通',
              label: '单位电子普通'
            }, {
              value: '个人纸质普通',
              label: '个人纸质普通'
            }, {
              value: '单位纸质普通',
              label: '单位纸质普通'
            }, {
              value: '个人电子增值税',
              label: '个人电子增值税'
            }, {
              value: '单位电子增值税',
              label: '单位电子增值税'
            }, {
              value: '个人纸质增值税',
              label: '个人纸质增值税'
            }, {
              value: '单位纸质增值税',
              label: '单位纸质增值税'
            }]
          }
        }
      }, {
        span: 6,
        label: '发票抬头',
        prop: 'title',
        component: 'by-input',
        compConfig: {
          attr: {
            clearable: true
          }
        }
      }, {
        span: 6,
        label: '发票税号',
        prop: 'taxNo',
        component: 'by-input',
        compConfig: {
          attr: {
            clearable: true
          }
        }
      }],
      [{
        span: 6,
        label: '发票地址',
        prop: 'address',
        component: 'by-input',
        compConfig: {
          attr: {
            clearable: true
          }
        }
      }, {
        span: 6,
        label: '专票银行',
        prop: 'bank',
        component: 'by-input',
        compConfig: {
          attr: {
            clearable: true
          }
        }
      }, {
        span: 6,
        label: '发票电话',
        prop: 'phone',
        component: 'by-input',
        compConfig: {
          attr: {
            clearable: true
          }
        }
      }],
      [{
        span: 6,
        label: '专票账户',
        prop: 'account',
        component: 'by-input',
        compConfig: {
          attr: {
            clearable: true
          }
        }
      }, {
        span: 6,
        label: '专票邮箱',
        prop: 'email',
        component: 'by-input',
        compConfig: {
          attr: {
            clearable: true
          }
        }
      }, {
        span: 6,
        label: '专票人',
        prop: 'userName',
        component: 'by-input',
        compConfig: {
          attr: {
            clearable: true
          }
        }
      }],
      [{
        span: 6,
        label: '专票电话',
        prop: 'userPhone',
        component: 'by-input',
        compConfig: {
          attr: {
            clearable: true
          }
        }
      }, {
        span: 12,
        label: '专票地址',
        prop: 'userAddress',
        component: 'by-input',
        compConfig: {
          attr: {
            clearable: true
          }
        }
      }]
    ]
  }
  payConfig: any = {
    // attr:{
    //   size:'mini'
    // },
    columns: [
      [{
        span: 6,
        label: '支付方法',
        prop: 'payment',
        component: 'by-select',
        rules: [
          { required: true, message: '请选择支付方法', trigger: 'change' }
        ],
        compConfig: {
          attr: {
            placeholder: '支付方法',
            clearable: true,
            data: [{
              value: '支付宝',
              label: '支付宝'
            }, {
              value: '快钱',
              label: '快钱'
            }, {
              value: '财付通',
              label: '财付通'
            }]
          }
        }
      }, {
        span: 6,
        label: '支付日期',
        prop: 'payDate',
        rules: [
          { required: true, message: '请选择支付日期', trigger: 'change' }
        ],
        component: 'by-date-picker',
        compConfig: {
          attr: {
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            clearable: true,
            defaultNow: true
          }
        }
      }, {
        span: 6,
        label: '支付单号',
        prop: 'outerPayId',
        component: 'by-input',
        rules: [
          { required: true, message: '请输入支付单号', trigger: 'change' }
        ],
        compConfig: {
          attr: {
            placeholder: '支付单号',
            clearable: true
          }
        }
      }],
      [{
        span: 6,
        label: '支付金额',
        prop: 'amount',
        component: 'by-input',
        rules: [
          { required: true, message: '请输入支付金额', trigger: 'blur' }
        ],
        compConfig: {
          attr: {
            type: 'number',
            placeholder: '支付金额',
            clearable: true
          }
        }
      }, {
        span: 6,
        label: '买家支付账号',
        prop: 'buyerAccount',
        component: 'by-input',
        compConfig: {
          attr: {
            placeholder: '买家账号',
            clearable: true
          }
        }
      }, {
        span: 6,
        label: '卖家收款账号',
        prop: 'sellerAccount',
        component: 'by-input',
        compConfig: {
          attr: {
            placeholder: '收款账号',
            clearable: true
          }
        }
      }]
    ]
  }
  outBoundOrderConfig: any = {
    attr: {
      showType: 'desc'
    },
    columns: [
      [{
        span: 6,
        label: '出库单号',
        prop: 'outBoundOrderNo',
      }, {
        span: 6,
        label: '出库时间',
        prop: 'outBoundTime',
      }, {
        span: 6,
        label: '业务员名称',
        prop: 'orderStaffName',
      }, {
        span: 6,
        label: '合并订单号',
        prop: 'mergeOrderNo',
      }]
    ]
  }
  validatePhone(rule: any, value: any, callback: any) {
    if (value) {
      if (!/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value)) {
        callback(new Error('手机号格式不正确！'));
      } else {
        callback();
      }

    } else {
      callback();
    }
  }
  //订单来源转换文字信息
  getFromText(f: any) {
    let t = '';
    if (f) {
      let arr: Array<any> = f.split(',');
      for (const item of arr) {
        if (this.operationFlag[item]) {
          if (t) {
            t = t + ' , ' + this.operationFlag[item]
          } else {
            t = this.operationFlag[item]
          }
        }
      }
    }
    return t ? t : '--';
  }
  stepTypeName(n: string) {
    let t = '';
    if (n == 'Merged') {
      t = '被合并'
    }
    if (n == 'Question') {
      t = '异常'
    }
    if (n == 'Split') {
      t = '被拆分'
    }
    if (n == 'Cancelled') {
      t = '已取消'
    }
    return t;
  }
  logShow() {
    if (!this.orderValue.id) return
    this.drawer = true;
    let data = {
      orderNumber: this.orderValue.id
    }
    this.$nextTick(() => {
      if (this.$refs.log) {
        (this.$refs.log as any).setBillValue(data);
        (this.$refs.log as any).request();
      }
    })
  }
  setShow(v: boolean) {
    this.value = v;
  }
  showBuyer() {
    (this.$refs.buyerInfoModal as any).setShow(true)
  }
  showShop() {
    (this.$refs.shopModal as any).setShow(true);
  }
  shopSelect(data: any) {
    let value: any = (this.$refs.baseform as any).getValue();
    value.shopId = data.id;
    value.shopName = data.shopName;
    (this.$refs.baseform as any).setValue(value);
  }
  clearShop() {
    let value: any = (this.$refs.baseform as any).getValue();
    value.shopId = '';
    value.shopName = '';
    (this.$refs.baseform as any).setValue(value);
  }
  clearBuyer() {
    let value: any = (this.$refs.infoform as any).getValue();
    value.buyerId = '';
    value.buyerNickname = '';
    (this.$refs.infoform as any).setValue(value);
  }
  setDetail(data: any) {
    this.orderValue = data;
    this.radioPay = this.orderValue.isPay
    if (this.orderValue.isCod == 1) {
      this.radioPay = 3
    }
  }
  //订单支付情况单选值
  inputPay(v: number) {
    if (v === 3) {
      this.orderValue.isCod = 1
      this.orderValue.isPay = 0
    } else {
      this.orderValue.isPay = v;
      this.orderValue.isCod = 0
    }
  }
  created() {
    this.userInfo = this.$store.getters.userInfo;
  }
  //标签弹窗信息
  onChangeLabel(v: string) {
    let value: any = (this.$refs.baseform as any).getValue();
    value.labels = v;
    (this.$refs.baseform as any).setValue(value);
  }
  //显示标签弹窗
  showLabels() {
    if (this.$refs.labelsModal) {
      (this.$refs.labelsModal as any).setShow(true);
    }
  }
  clearLabels() {
    let value: any = (this.$refs.baseform as any).getValue();
    value.labels = '';
    (this.$refs.baseform as any).setValue(value);
  }
  handleSuccess() {
    this.$emit('handleSuccess');
    this.getData();
  }
  //修改支付单号
  payStatusHandle(item: any, status: string) {
    if (status == 'Invalid') {
      this.$confirm('此操作将永久作废单号为：' + item.outerPayId + ' 的订单支付, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.payStatusRequest(item, status)
      }).catch(() => { });
    } else {
      this.payStatusRequest(item, status)
    }
  }
  payStatusRequest(item: any, status: string) {
    this.load = true;
    updateStatus({ id: item.id, status }).then((res: any) => {
      this.load = false;
      if (res && res.code == 200) {
        this.$message({
          message: '操作成功！',
          type: 'success'
        })
        item.status = status;
        this.$forceUpdate();
        this.$emit('handleSuccess');
      }
    }).catch(() => {
      this.load = false;
    })
  }
  //添加手工支付
  addPay() {
    (this.$refs.payform as any).validate({ noMsg: true }).then(() => {
      let payFormValue = (this.$refs.payform as any).getValue();
      payFormValue.sellerId = this.userInfo.userId;
      payFormValue.orderId = this.orderValue.id;
      payFormValue.operationFlag = this.orderValue.operationFlag;
      payFormValue.isOrderPay = 1;
      payFormValue.buyerNickname = this.orderValue.buyerNickname;
      payFormValue.status = this.orderValue.status;
      this.load = true;
      addPay(payFormValue).then(() => {
        this.load = false;
        this.$message({
          message: '操作成功',
          type: 'success'
        });
        this.showPay = false;
        this.handleSuccess();
      }).catch(() => {
        this.load = false;
      })
    })

  }
  // 买家信息
  confirmBuyerInfo(data: any) {
    let v: any = {}
    v.buyerNickname = data[0].name
    v.buyerId = data[0].id
    v.receiverName = data[0].contacts
    v.receiverProvince = data[0].province
    v.receiverProvinceCode = data[0].provinceCode
    v.receiverCity = data[0].city
    v.receiverCityCode = data[0].cityCode
    v.receiverDistrict = data[0].region
    v.receiverDistrictCode = data[0].regionCode
    v.receiverTownCode = data[0].streetCode
    v.receiverTown = data[0].street
    v.receiverAddress = data[0].address
    v.receiverMobile = data[0].telephone
    v.receiverPhone = data[0].phonenum
    if (this.$refs.infoform) {
      (this.$refs.infoform as any).setValue(v)
    }
  }
  //添加商品
  toolAddProduct() {
    if (this.orderValue.status == 'Delivering' || this.orderValue.status == 'Sent') {
      this.$message({
        message: '该订单已发货不能进行修改！',
        type: 'warning'
      })
      return
    }
    if (this.orderValue.id) {
      (this.$refs.addProductModal as any).setBillValue(this.orderValue.id);
      (this.$refs.addProductModal as any).setShow(true);
      (this.$refs.addProductModal as any).setGift(false);
    } else {
      (this.$refs.product as any).setShow(true);
    }
  }
  //添加赠品
  toolAddGift() {
    if (this.orderValue.status == 'Delivering' || this.orderValue.status == 'Sent') {
      this.$message({
        message: '该订单已发货不能进行修改！',
        type: 'warning'
      })
      return
    }
    if (this.orderValue.id) {
      (this.$refs.addProductModal as any).setBillValue([this.orderValue.id]);
      (this.$refs.addProductModal as any).setShow(true);
      (this.$refs.addProductModal as any).setGift(true);
    } else {
      (this.$refs.productGift as any).setShow(true);
    }
  }
  //获取数据
  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
    })
  }
  //商品编辑
  editProduct() {
    if (this.orderValue.status == 'Delivering' || this.orderValue.status == 'Sent') {
      this.$message({
        message: '该订单已发货不能进行修改！',
        type: 'warning'
      })
      return
    }
    let tableValue = (this.$refs.table as any).getValue();
    (this.$refs.editProductModal as any).setShow(true);
    (this.$refs.editProductModal as any).setOrderValue(this.orderValue);
    (this.$refs.editProductModal as any).setTableValue(tableValue);
  }
  //判断是否加密数据，如果加密数据就返回****，否则返回原值
  showEncryptData(data: string) {
    //正则表达式匹配 包含~，=，-，_，:
    let reg = /[~= -_:]/;
    if (reg.test(data)) {
      return '****'
    }
    return data
  }
  show() {
    this.baseConfig = (this as any).$lodash.cloneDeep(this.config);
    this.buyerInfoConfig = (this as any).$lodash.cloneDeep(this.config2);
    this.newInvoicesConfig = (this as any).$lodash.cloneDeep(this.invoicesConfig);
    if (this.$refs.tool) {
      (this.$refs.tool as any).initTools();
    }
    if (this.orderValue.id) {
      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.labels = data.labels;
      info.logisticsId = data.logisticsId;
      info.operationFlag = data.operationFlag;
      this.baseConfig.attr.data = info;
      (this.$refs.baseform as any).setValue(info);
      //买家
      let buyerInfo: any = {};
      buyerInfo.buyerNickname = this.showEncryptData(data.buyerNickname);
      buyerInfo.receiverName = this.showEncryptData(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 = this.showEncryptData(data.receiverAddress);
      buyerInfo.receiverPhone = this.showEncryptData(data.receiverPhone);
      buyerInfo.receiverMobile = this.showEncryptData(data.receiverMobile);
      buyerInfo.receiverZip = data.receiverZip;
      this.buyerInfoConfig.attr.data = buyerInfo;
      (this.$refs.infoform as any).setValue(buyerInfo);
      //商品
      const productData: Array<any> = data.items ? data.items : [];
      for (let dItem of productData) {
        dItem.status = this.orderValue.status
      }
      (this.$refs.table as any).setValue(productData);
      if (this.orderValue.status == 'Merged' || this.orderValue.status == 'Cancelled') {
        (this.$refs.tool as any).setTool([]);
      } else {
        if (this.$refs.tool) {
          (this.$refs.tool as any).setCustomTools([{
            name: '商品编辑', icon: 'el-icon-edit', event: {
              click: () => {
                this.editProduct()
              }
            }
          }])
        }


      }

      //付款
      this.orderValue.isPay = data.isPay;
      this.radioPay = data.isPay
      if (data.isCod == 1) {
        this.radioPay == 3
      }
      //发票
      if (data.invoices && data.invoices[0]) {
        (this.$refs.invoicesform as any).setValue(data.invoices[0]);
      }
      if (this.orderValue.isSubmitted == 1) {
        this.baseConfig.attr.showType = 'desc';
        this.baseConfig.attr.size = 'medium';
        this.baseConfig.columns[1].splice(2, 0, {
          label: '快递单号',
          prop: 'logisticsId'
        })
      }
      else {
        for (let col of this.baseConfig.columns) {
          for (let item of col) {
            let disField: Array<string> = ['freight', 'note', 'remark']
            if (!item.slot && disField.indexOf(item.prop) == -1) {
              if (!item.compConfig.attr) item.compConfig.attr = {};
              item.compConfig.attr.disabled = true;
            }
          }
        }
      }

      if (this.orderValue.isSubmitted == 1) {
        this.buyerInfoConfig.attr.showType = 'desc';
        this.buyerInfoConfig.attr.size = 'medium';
        this.newInvoicesConfig.attr.showType = 'desc';
        this.newInvoicesConfig.attr.size = 'medium';
      }

      this.totalAmount();
      this.amountChange();
      // this.payAmountChange();
      this.totalNum();
      if (this.stepCon.indexOf(data.status) >= 0) {
        this.stepActive = this.stepCon.indexOf(data.status)
      }
    } else {
      let value: any = (this.$refs.baseform as any).getValue();
      value.createBy = this.userInfo.userName;
      (this.$refs.baseform as any).setValue(value);
    }
    (this.$refs.baseform as any).setConfig(this.baseConfig);
    (this.$refs.infoform as any).setConfig(this.buyerInfoConfig);
    (this.$refs.invoicesform as any).setConfig(this.newInvoicesConfig);
    (this.$refs.outBoundOrderForm as any).setValue(this.orderValue);
  }
  hide() {
    this.showPay = false;
    this.clearValue();
  }
  //抵扣金额数值变化
  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 ? this.orderValue.freeAmount.toFixed(2) : 0;
    } else {
      this.orderValue.freeAmount = 0
    }
  }
  //应付总金额
  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))
      }
    }
  }
  //基本信息表单数据变化
  formChangeBase(data: any) {
    if (!this.orderValue[data.code]) {
      Vue.set(this.orderValue, data.code, data.value);
    } else {
      this.orderValue[data.code] = data.value;
    }
    if (data.code == 'freight') {
      this.payAmountChange();
    }
    if (data.code == 'shopName') {
      this.orderValue.shopId = data.value;
    }
  }
  //确定新增的商品
  confirmProduct(data: Array<any>) {
    this.productHandle(data, false);
  }
  //新增赠品
  confirmProductGift(data: Array<any>) {
    this.productHandle(data, true);
  }
  //商品处理
  productHandle(data: Array<any>, isGift: boolean) {
    let nowData = (this.$refs.table as any).getValue();
    let names = '';
    if (data.length > 0) {
      for (const item of data) {
        let t = true;
        let v = isGift ? 1 : 0;
        for (const t_item of nowData) {
          if (item.id == t_item.itemId && t_item.isGift == v) {
            if (!names) {
              names = item.skuTitle
            } else {
              names = names + ',' + item.skuTitle
            }
            t = false;
            break;
          }
        }
        if (t) {
          let obj: any = {};
          obj.name = item.skuTitle; //商品名称
          obj.skuId = item.skuCode; //商品编码
          obj.itemId = item.id;
          obj.styleId = item.itemNumber; //款式编码
          obj.qty = 1;
          if (isGift) {
            obj.price = 0;  //单价
            obj.isGift = 1;
          } else {
            obj.price = item.price;  //单价
            obj.isGift = 0;
          }

          obj.basePrice = item.price; //原价
          obj.amount = item.price;
          // obj.stock = item.stock;
          nowData.push(obj)
        }
      }
      (this.$refs.table as any).setValue(nowData);
      if (!isGift) {
        this.totalAmount();
        this.amountChange();
        this.payAmountChange();
      }
      this.totalNum();
      if (names) {
        let name = isGift ? '赠品' : '商品';
        this.$alert(name + '“' + names + '”已存在，请在列表做调整！', '提示', {
          confirmButtonText: '确定',
          callback: action => { }
        });
      }
    }
  }
  //删除商品
  deletaProduct(row: any) {
    if (this.orderValue.status == 'Delivering' || this.orderValue.status == 'Sent') {
      this.$message({
        message: '该订单已发货不能进行修改！',
        type: 'warning'
      })
      return
    }
    let n = row.isGift == 1 ? '赠品' : '商品';
    this.$confirm('此操作将删除' + n + '“' + row.name + '”, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      let del = () => {
        let data = (this.$refs.table as any).getValue();
        let index = -1;
        for (const item of data) {
          index++;
          if (row.skuId == item.skuId && row.name == item.name && row.isGift == item.isGift) {
            break;
          }
        }
        data.splice(index, 1);
        (this.$refs.table as any).setValue(data);
        this.totalAmount();
        this.amountChange();
        this.payAmountChange();
        this.totalNum();
      }
      if (row.id) {
        this.load = true;
        delItem({
          itemId: row.id,
          id: this.orderValue.id
        }).then(() => {
          this.load = false;
          del();
          this.$emit('handleSuccess');
        }).catch(() => {
          this.load = false;
        })
      } else {
        del();
      }

    }).catch(() => { });
  }
  //数量的变化
  qtyChange(v: any, row: any) {
    if (v.value && row.price) {
      row.amount = multiply(Number(v.value), Number(row.price))
    } else {
      row.amount = 0
    }
    this.totalAmount();
    this.amountChange();
    this.payAmountChange();
    this.totalNum();
  }
  //单价的变化
  priceChange(v: any, row: any) {
    if (v.value && row.qty) {
      row.amount = multiply(Number(v.value), Number(row.qty))
    } else {
      row.amount = 0
    }
    this.totalAmount();
    this.amountChange();
    this.payAmountChange();
  }
  //清除整个订单数据
  clearValue() {
    this.orderValue = {};
    this.stepActive = 0;
    (this.$refs.baseform as any).clearValue();
    (this.$refs.baseform as any).clearValidate();
    (this.$refs.infoform as any).clearValue();
    (this.$refs.infoform as any).clearValidate();
    (this.$refs.table as any).setValue([]);
    if (this.$refs.payform) {
      (this.$refs.payform as any).clearValue();
      (this.$refs.infoform as any).clearValidate();
    }
    (this.$refs.invoicesform as any).clearValue();

    this.num = 0;
    this.productTotal = 0;
    this.radioPay = 1;
    this.freeAmount = '';
  }
  getOrderValue(n?: string) {
    // this.orderValue = {};
    return new Promise((resolve: Function, reject: Function) => {
      let r = true;
      //基本信息
      (this.$refs.baseform as any).validate({ noMsg: true }).then(() => {
        let baseInfo = (this.$refs.baseform as any).getValue();
        for (const key in baseInfo) {
          this.orderValue[key] = baseInfo[key]
        }
        if (this.orderValue.freight) {
          this.orderValue.freight = Math.floor(Number(this.orderValue.freight) * 100) / 100;
        } else {
          this.orderValue.freight = 0
        }

        //买家信息
        (this.$refs.infoform as any).validate({ noMsg: true }).then(() => {
          let infoValue = (this.$refs.infoform as any).getValue();
          for (const key in infoValue) {
            this.orderValue[key] = infoValue[key]
          }
          if (n == 'base') {
            resolve();
            return
          }
          //商品
          let productOrder: Array<any> = [];
          if (this.$refs.table) {
            productOrder = (this.$refs.table as any).getValue();

          }
          if (productOrder.length > 0) {
            this.orderValue.items = productOrder;
          } else {
            this.$message({
              message: '商品订单不能为空！',
              type: 'warning'
            });
            reject();
          }
          if (this.radioPay === 0 || this.radioPay === 1) {
            this.orderValue.isPay = this.radioPay;
            this.orderValue.pays = []
          }
          if (this.radioPay == 2) {
            this.orderValue.isPay = this.radioPay;
            (this.$refs.payform as any).validate({ noMsg: true }).then(() => {
              this.orderValue.pays = [];
              let payFormValue = (this.$refs.payform as any).getValue();
              payFormValue.sellerId = this.userInfo.userId;
              this.orderValue.pays.push(payFormValue);
              resolve();
            }).catch(() => {
              if (r) {
                (this as any).$message({
                  message: '验证未通过，请检查！',
                  type: 'warning',
                })
              }
              r = false;
              reject();
            });
          } else {
            resolve();
          }


        }).catch(() => {
          if (r) {
            (this as any).$message({
              message: '验证未通过，请检查！',
              type: 'warning',
            })
          }
          r = false;
          reject();
        }).catch(() => {
          if (r) {
            (this as any).$message({
              message: '验证未通过，请检查！',
              type: 'warning',
            })
          }
          r = false;
          reject();
        })
      }).catch(() => {
        if (r) {
          (this as any).$message({
            message: '验证未通过，请检查！',
            type: 'warning',
          })
        }
        r = false;
        reject();
      });

      let invoiceValue = (this.$refs.invoicesform as any).getValue();
      this.orderValue.invoices = [];
      if (JSON.stringify(invoiceValue) !== '{}') {
        this.orderValue.invoices.push(invoiceValue);
      }
    })
  }
  //确定
  btn(n?: string) {
    this.getOrderValue().then(() => {
      this.orderValue.receiverCountryCode = '0';
      this.orderValue.receiverCountry = "中国";
      this.load = true;
      this.orderValue.isCod = this.orderValue.isCod ? 1 : 0;
      this.orderValue.businessType = 'B2C';
      this.orderValue.freeAmount = this.orderValue.freeAmount ? this.orderValue.freeAmount : 0;
      addOrder(this.orderValue).then((res: any) => {
        if (n != 'continue') {
          this.value = false;
        } else {
          this.clearValue();
          let value: any = (this.$refs.baseform as any).getValue();
          value.createBy = this.userInfo.userName;
          (this.$refs.baseform as any).setValue(value);
        }
        this.load = false;
        (this as any).$message({
          message: '订单添加成功！',
          type: 'success',
        })
        this.$emit('handleSuccess');
      }).catch((err: any) => {
        this.load = false;
      })
    }).catch((err: any) => { })
  }

  //保存基本信息及守护地址
  saveBase() {
    this.getOrderValue('base').then(() => {
      this.load = true;
      this.orderValue.receiverCountryCode = '0';
      this.orderValue.receiverCountry = "中国";
      saveBaseOrder(this.orderValue).then(() => {
        this.load = false;
        (this as any).$message({
          message: '订单修改成功！',
          type: 'success',
        })
        this.$emit('handleSuccess');
      }).catch((err: any) => {
        this.load = false;
      })
    }).catch(() => { })

  }
}
</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: flex-end;

  .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;
  padding-bottom: 8px;
}

.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;
}

.add-pay-btn {
  padding-left: 8px;
  display: flex;
  align-items: center;
}

.payHandle {
  display: flex;
  align-items: center;

  >span {
    margin-left: 8px;
    cursor: pointer;
    font-size: 12px;
    color: #198cf8;
  }

  >span:hover {
    text-decoration: underline;
  }
}
</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>