<template>
  <div class="PostDelivery">
    <div class="PostDeliveryContent">
      <!-- 注意事项 -->
      <div class="scanInWarning">
        <div class="warningTitle">
          <img
            src="../../assets/image/warningIcon.png"
            alt=""
          >
          <span>注意：</span>
          <Icon
            v-if="isOpen"
            color="#979797"
            type="ios-arrow-down"
            @click="toggleArrow"
          />
          <Icon
            v-else
            color="#979797"
            type="ios-arrow-up"
            @click="toggleArrow"
          />
        </div>
        <div
          v-if="isOpen"
          class="warningText"
        >
          <p>1. 后置打单/出库前请先设置打印单据类型，默认仅打印物流单，可勾选打印发货单同时打印物流单发货单。</p>
          <p>2. 勾选打印物流单立即发货后，打印物流单完成后订单状态直接更新为仓库发货。</p>
          <p>3. 仅支持一订单一商品的订单通过此形式出库。</p>
        </div>
      </div>
      <!-- 扫描项 -->
      <div class="linkGoods">
        <foldPanel
          v-model="linkGoodsStatus"
          title="扫描项"
        >
          <div
            slot="content"
            class="block"
          >
                <div class='squreBottom'>
                  <img
                    src="../../assets/image/scanIcon.png"
                    alt=""
                  >
                  <span>商品条码（国标码）</span>
                  <Input
                    ref="SKUEnter"
                    class="SKUEnter"
                    v-model.trim="formInline.SKUCode"
                    type="text"
                    placeholder="请扫描商品条码（国标码）"
                    @on-enter="getSKUByCode"
                  />
                </div>
                <div class="squreMsgBox">
                  <div class='orderMsgTitle'>订单信息</div>
                    <div
                      class="conditionContent oldOrderContent"
                    >
                      <div
                        class="itemContent"
                      >
                        <div class="itemLabel">
                          订单编号
                        </div>
                        <span>{{ oldOrderMsg.orderCode }}</span>
                      </div>
                      <div
                        class="itemContent"
                      >
                        <div class="itemLabel">
                          平台
                        </div>
                        <span>{{ oldOrderMsg.platform }}</span>
                      </div>
                      <div
                        class="itemContent"
                      >
                        <div class="itemLabel">
                          平台单号
                        </div>
                        <span>{{ oldOrderMsg.sourceCodes }}</span>
                      </div>
                      <div
                        class="itemContent"
                      >
                        <div class="itemLabel">
                          下单店铺
                        </div>
                        <span>{{ oldOrderMsg.shop }}</span>
                      </div>
                      <div
                        class="itemContent"
                      >
                        <div class="itemLabel">
                          物流公司
                        </div>
                        <span>{{ oldOrderMsg.shipper_name }}</span>
                      </div>
                      <div
                        class="itemContent"
                      >
                        <div class="itemLabel">
                          发货仓库
                        </div>
                        <span>{{ oldOrderMsg.delivery_warehouse }}</span>
                      </div>
                      <div
                        class="itemContent"
                      >
                        <div class="itemLabel">
                          商品名称
                        </div>
                        <span>{{ oldOrderMsg.goodName }}</span>
                      </div>
                      <div
                        class="itemContent"
                      >
                        <div class="itemLabel">
                          商品SKU
                        </div>
                        <span>{{ oldOrderMsg.SKU }}</span>
                      </div>
                      <div
                        class="itemContent"
                      >
                        <div class="itemLabel">
                          规格
                        </div>
                        <span>{{ oldOrderMsg.SKUSpec }}</span>
                      </div>
                      <div
                        class="itemContent imgBox"
                      >
                        <div class="itemLabel">
                          商品图片
                        </div>
                        <img v-if='oldOrderMsg.goodImgUrl' class='itemContentImg' :src="oldOrderMsg.goodImgUrl" alt="" @mouseenter="mouseenterImg($event)" @mouseleave='mouseleaveImg'>
                      </div>
                      <div
                        class="itemContent"
                      >
                        <div class="itemLabel">
                        </div>
                        <img style='display: none;' class='itemContentImg' :src="oldOrderMsg.goodImgUrl" alt="">
                      </div>
                    </div>
                </div>
          </div>
        </foldpanel>
      </div>
      <!-- 打印单据设置 -->
      <div class="OrderMsg">
        <foldPanel
          v-model="PrintBillStatus"
          title="打印单据设置"
        >
          <div
            slot="content"
            class="block"
          >
            <Form
              :model="formInline"
              :label-width="140"
              inline
            >
              <FormItem label="打印物流单">
                <Checkbox v-model="formInline.IsPrintExpress" size='large' disabled></Checkbox>
              </FormItem>
              <FormItem label="打印发货单">
                <Checkbox v-model="formInline.IsPrintOutStore" size='large'></Checkbox>
              </FormItem>
            </Form>
          </div>
        </foldpanel>
      </div>
      <div class='OrderMsg'>
        <foldPanel
          v-model="PrintOutStatus"
          title="打印发货设置"
        >
          <div
            slot="content"
            class="block"
          >
            <Form
              :model="formInline"
              :label-width="140"
              inline
            >
              <FormItem label="打印物流单后立即发货">
                <Checkbox v-model="formInline.IsSendAfterPrint" size='large'></Checkbox>
              </FormItem>
            </Form>
          </div>
        </foldPanel>
      </div>
    </div>
    <!-- 录入商品不在退单/订单的商品列表中弹框 -->
    <Modal
      v-model="isShowSureEnterGood"
      mask
      :mask-closable="maskClosable"
      title="提示"
      title-align="left"
      class-name="showTipModel"
      width="400px"
      @on-ok="sureEnterGood"
      @on-cancel="cancelEnterGood"
    >
      <p><i class="iconfont iconbj_doubt fcWarning " />{{ TipTitle }}</p>
    </Modal>
    <!-- 声音提示 -->
    <!-- 扫描商品编码 -->
    <audio
      id="audioscanoutok"
      preload="auto"
    >
      <source :src="urlscanoutok">
    </audio>
    <!-- 扫描物流单号 -->
    <audio
      id="audioscanExpress"
      preload="auto"
    >
      <source :src="urlscanExpress">
    </audio>
    <!-- 入库成功 -->
    <audio
      id="audiosuccess"
      preload="auto"
    >
      <source :src="urlsuccess">
    </audio>
    <!-- 入库失败 -->
    <audio
      id="audioerror"
      preload="auto"
    >
      <source :src="urlerror">
    </audio>
    <!-- 提示音 -->
    <audio
      id="audiosacnOk"
      preload="auto"
    >
      <source :src="urlsacnOk">
    </audio>
  </div>
</template>
<script>
  // import R3 from '../../../static/r3/r3.publish/r3.min';
  import foldPanel from '../customizedContent/FoldPanel.vue';
  // import { DirectPrintLogist } from '../../../iframe/Scripts/Business/WingPrintFuncsPost.js';
  // import { getLodop } from '../../../iframe/Content/Lodop/LodopFuncPost'; //导入模块
  const R3 = window.R3;

  const { network } = R3;
  export default {
    components: { foldPanel },
    data() {
      return {
        loading: false,
        urlerror: '', // error:失败
        urlsacnOk: '', // sacnOk：单纯提示
        urlscanExpress: '', // scanExpress：扫描物流单
        urlscanoutok: '', // scanoutok：扫描商品
        urlsuccess: '', // success：成功
        // urlerror: '../../../iframe/Scripts/mp3/error.mp3', // error:失败
        // urlsacnOk: '../../../iframe/Scripts/mp3/sacnOk.mp3', // sacnOk：单纯提示
        // urlscanExpress: '../../../iframe/Scripts/mp3/scanExpress.mp3', // scanExpress：扫描物流单
        // urlscanoutok: '../../../iframe/Scripts/mp3/scanoutok.mp3', // scanoutok：扫描商品
        // urlsuccess: '../../../iframe/Scripts/mp3/success.mp3', // success：成功
        audioType: '',
        isOpen: true,
        linkGoodsStatus: true,
        PrintBillStatus: true,
        PrintOutStatus: true,
        formInline: {
          SKUCode: '',
          IsPrintExpress: true, //打印物流单
          IsPrintOutStore: false, //打印发货单
          IsSendAfterPrint: false, // 打印物流单后立即发货
        },
        platformList: [],
        shopList: [],
        hasPlatform: true,
        disabled: false, // 根据运单号带出信息时,不可编辑
        TipTitle: '', // 扫描商品提示信息
        isShowSureEnterGood: false, // 明细中不存在该商品
        scanGoodMsg: {},

        // 原退单/订单信息
        oldOrderMsg: {
          orderCode: '', // 订单编号
          platform: '', // 平台
          sourceCode: '', // 平台单号
          shop: '', // 下单店铺
          shipper_name: '', // 物流公司
          delivery_warehouse: '', // 发货仓库
          goodName: '', // 商品名称
          SKU: '',  // 商品SKU
          SKUSpec:'',  // 规格
          goodImgUrl: '', // 商品图片
        },

        //打印相关基础信息
        OrderDetailMsg: [], // 当前订单详情
        userId:'', // 当前用户macAdd
        localPrinterList: [], // 本地打印机
        printName: '', // 当前订单配置的打印机
        OMSPRINTTEMPLATEID: '', // 打印机上配置的模板id
        TEMPLATEDESC: '', // 打印模板，本地打印，lodop
      };
    },
    created() {
      this.getOMSSOUNDSET();
      this.userId = this.GetMacAddress();
      // console.log(LodopSet)
    },
    mounted(){ //dom加载完，还没加载数据的时候
    //  let arr = [
    //    '../../../iframe/Content/Lodop/LodopFuncPost',
    //    '../../../iframe/Scripts/Business/WingPrintFuncsPost.js'
    //  ]
    //  arr.map(item => {
    //    const s = document.createElement('script');
    //     s.type = 'text/javascript';
    //     s.src = item;
    //     document.body.appendChild(s);
    //  })
    },
    methods: {
      getOMSSOUNDSET() {
          let virtual={
              range: 100,
              startindex: 0,
              table: 'T_OMSSOUNDSET',
              fkdrplist: {
                searchcols: ['TYPE_NAME', 'ID', 'SOUND_ID', 'URL']
              },
              isdroplistsearch: true,
          }
          network.post('/p/cs/list/query', virtual).then((res) => {
              res.data.rows.forEach(row => {
                  if(row.TYPE_NAME.val == '提示'){
                    this.urlsacnOk = row.URL.val
                  }else if(row.TYPE_NAME.val == '成功'){
                    this.urlsuccess = row.URL.val
                  }else if(row.TYPE_NAME.val == '失败'){
                    this.urlerror = row.URL.val
                  }else if(row.TYPE_NAME.val == '扫描商品'){
                    this.urlscanoutok = row.URL.val
                  }else if(row.TYPE_NAME.val == '扫描物流'){
                    this.urlscanExpress = row.URL.val
                  }
              })
              console.log(this.urlscanExpress)
          })
      },
      changeSKU(val){
        console.log(this.formInline.SKUCode)
      },
      getPlatformList(query) {
        let virtual = {
          fixedcolumns: query ? { PLATFORMNAME: query } : {},
          range: 1000,
          startindex: 0,
          table: 'T_V_OMSPLATFORM' 
        };
        network.post('/p/cs/list/query', virtual).then((res) => {
          this.platformList = res.data.rows.map(i=>({
            label: i.PLATFORMNAME.val,
            value: i.ID.val
          }));
        });
      },
      reset() {
        this.formInline = {
          expressCode: '',
          SKUCode: ''
        };
        this.clearMsg();
      },
      clearMsg() {
        this.oldOrderMsg = {
          retureOrderCode: '', // 退单编号
          orderCode: '', // 原订单编号
          expressCode: '', // 退回物流单号
          sourceCodes: '', // 原平台单号
          user_name: '', // 姓名
          tel: '', // 电话
          remark: '', // 备注
          phone: '', // 手机号
          delivery_address: '', // 收件地址
          platform: '', // 平台
          shop: '', // 店铺
          buyer_nick: '', // 买家昵称
          shipper_name: '', // 退回物流公司
        };
      },
      // 注意展开关闭
      toggleArrow() {
        this.isOpen = !this.isOpen;
      },
      // 获取打印需要的基础信息
      // 获取用户id
      GetMacAddress() {
        let userId = JSON.parse(window.localStorage.getItem('userInfo')).userenv.$USER_ID$;
        // return "userid" + LG.UserInfo.CurrentUserID;
        return `userid${userId}`;
      },
      // 获取本地打印机列表
      GetPrinter() {
        this.LODOP = getLodop(); // 创建一个LODOP对象
        if (this.LODOP) {
          let count = this.LODOP.GET_PRINTER_COUNT();
          let printerArray = [];
          for (let i = 0; i < count; i++) {
              let printerobj = {};
              printerobj.id = i;
              printerobj.text = this.LODOP.GET_PRINTER_NAME(i);
              printerArray[i] = printerobj;
          }
          return printerArray;
        }
      },
      // 获取配置的打印机,参数是物流公司id和面单类型PayType
      GetPrintName(logistId, PayType) {
        let fiter = { OMSLogisticsCompanyId: [`=${logistId}`], MacNo: [`=${this.userId}`], PayType: [`=${PayType}`] };
        let virtual = {
          fixedcolumns: fiter,
          range: 100,
          startindex: 0,
          table: 'T_OMSPRINTCONFIG'
        };
        network.post('/p/cs/list/query', virtual).then((res) => {
          this.printName = res.data.rows[0].PRINTERNAME.val;
          this.OMSPRINTTEMPLATEID = res.data.rows[0].OMSPRINTTEMPLATEID.val;
          this.GetOrderTemp(logistId,PayType);
          // 验证打印机是否存在本地
          let containArray = this.localPrinterList.filter(l=>l.text == this.printName);
          if (containArray == null || containArray.length <= 0) {
            errorMsg.push(`本机未连接当前【设置打印配置】中设置的打印机${this.printName}，请确认打印机连接情况或打印配置设置。`);
          }
        })
      },
      //获得物流单模板
      GetOrderTemp(logistId,PayType) {
        var templatedesc;
        let fiter = { OMSLOGISTICSCOMPANYID: [`=${logistId}`], MacNo: [`=${this.userId}`], PayType: [`=${PayType}`] };
        let virtual ={
          fixedcolumns: fiter,
          range: 100,
          startindex: 0,
          table:"T_V_LOGISTICSTEMPVIEW",
        }
        network.post('/p/cs/list/query', virtual).then((res) => {
          this.TEMPLATEDESC = res.data.rows[0].TEMPLATEDESC.val;
          this.PrintDataNew(this.OrderDetailMsg, this.TEMPLATEDESC, 4, this.printName);
        })
      },
      // 扫描商品SKU获取信息
      getSKUByCode(val) {
        this.localPrinterList = this.GetPrinter(); // 获取当前打印机
        if (val.target.value == '') {
          return this.$Message.warning('商品条码（国标码）不能为空！');
        }
        this.sureClick('scanoutok');
        let sku = val.target.value.trim();
        network.get('/p/cs/order/item/sku?sku='+sku).then(res => {
          if (res.data.code == 0) {
            if(res.data.code == 0){
              let data = res.data.data;
              if(data){
                this.oldOrderMsg = {
                  orderCode: data.id, // 订单编号
                  platform: data.platformName, // 平台
                  sourceCode: data.sourcecode, // 平台单号
                  shop: data.orderShopName, // 下单店铺
                  shipper_name: data.shipperName, // 物流公司
                  delivery_warehouse: data.wareHouseName, // 发货仓库
                  goodName: data.productName, // 商品名称
                  SKU: data.sku,  // 商品SKU
                  SKUSpec: data.normsDetailName,  // 规格
                  goodImgUrl: data.productImage, // 商品图片
                }
                this.getOrderDetail(data.id);
              }
            }
          }
        });
      },
      // 获取匹配到的订单的详情
      getOrderDetail(id){
        this.OrderDetailMsg = [];
        let virtual = {
          fixedcolumns: { ID: id },
          fkdrplist: {
            searchcols: ['ALLNUM', 'ALLSKU', 'ALLSTORESITE', 'AUDITTIME', 'CODAMOUNT', 'ENCRYPTEDDATA', 'ID', 'IESWAREHOUSEID', 'ISDIRECTCONNECT', 'ISHAVEBUYERMESSAGE', 'ISHAVESELLERMEMO', 'ISPRINTLOGISTIC', 'ISPRINTOUT', 'IS_PRINTPICKORDER', 'LOGISTICSNUMBER', 'ORDERDATE', 'ORDERNO', 'ORDERSHOPID', 'ORDERSTATUS', 'ORDERTYPE', 'PAYTIME', 'PAYTYPE', 'PICKINGCODE', 'PLATFORM', 'RECEIVADDRESS', 'RECEIVAREANAME', 'RECEIVCITYNAME', 'RECEIVMOBILE', 'RECEIVNAME', 'RECEIVPHONE', 'RECEIVPROVINCENAME', 'SELLADDRESS', 'SELLAREANAME', 'SELLCITYNAME', 'SELLERMEMO', 'SELLERNAME', 'SELLERPHONE', 'SELLPROVINCENAME', 'SELLZIP', 'SHIPPERID', 'SOURCECODE', 'USERNICK', 'VER', 'WEIGHT']
          },
          isdroplistsearch: true,
          range: 1000,
          startindex: 0,
          table: 'T_V_OMSPRINTORDER'
        };
        network.post('/p/cs/list/query', virtual).then((res) => {
          let obj = {};
          virtual.fkdrplist.searchcols.forEach(key => {
            obj[key] = res.data.rows[0][key].val;
          })
          this.OrderDetailMsg.push(obj);
          this.getOrderApply(id);
          this.OrderDetailMsg[0].PRINTTIME = this.GeneratePrintCode();
          this.GetPrintName(res.data.rows[0].SHIPPERID.refobjid, res.data.rows[0].PAYTYPE.val);
        })
      },
      getOrderApply(id){
        let params = {
          orderid: id
        }
        network.post('/p/cs/waybill/apply',params).then(res => {
          console.log(res)
        })
      },
      //打印物流单通用方法printingUpdateRowMsg
      PrintDataNew(data, template, type, strPrinterName) {
          let dataNew = [];
          var htmlhead = "";
          var htmlfoot = "LODOP.NewPageA();";
          var bol = true;
          var array = template.toString().split(';');
          var arrayitem = "LODOP.PRINT_INITA(0,0,2500,1400,'');";
          if (array[0].indexOf("PRINT_INITA") == -1) {
              arrayitem = arrayitem.replace(/\s/g, '').replace("'", '"').replace("'", '"');
              htmlhead = arrayitem + array[0];
              for (var i = 1; i < array.length; i++) {
                  htmlfoot += array[i] + ";";
              }
          }
          else {
              htmlhead = array[0] + ";" + array[1];
              for (var i = 2; i < array.length; i++) {
                  htmlfoot += array[i] + ";";
              }
          }
          let CreatePrintHead = new Function(htmlhead.toString());
          let CreatePrintPage = new Function(htmlfoot.toString());
          var select = 0;
          let printcode = this.GeneratePrintCode();
          CreatePrintHead();
          CreatePrintPage(data[0]);
          this.LODOP.SET_PRINT_MODE("CUSTOM_TASK_NAME", "物流打印" + printcode + "_" + select);//为每个打印单独设置任务名
          this.LODOP.SET_PRINT_MODE("CATCH_PRINT_STATUS", true);//设置打印状态
              //判断打印是否成功
              if (this.LODOP.CVERSION) {
                  if (strPrinterName) {
                      if (this.LODOP.SET_PRINTER_INDEXA(strPrinterName)) {
                          this.LODOP.PRINT();
                      }
                  } else {
                      this.LODOP.PRINT();
                  }
                  this.LODOP.On_Return = function (TaskID, Value) {
                      if (Value) {
                          //判断打印是否完成,没有完成继续判断
                          // self.isTrue(data, Value, type, printcode);
                      }
                      else {
                          bol = false;
                      }
                  }
              }
          return bol;
      },
      GeneratePrintCode() {
        var date = new Date();
        let year = date.getFullYear().toString();
        let mouth = (date.getMonth()+ 1)<10?'0'+(date.getMonth()+ 1).toString():(date.getMonth()+ 1).toString();
        let day = date.getDate()<10?'0'+(date.getDate()).toString():(date.getDate()).toString();
        let hh = date.getHours()<10?'0'+(date.getHours()).toString():(date.getHours()).toString();
        let mm = date.getMinutes()<10?'0'+(date.getMinutes()).toString():(date.getMinutes()).toString();
        let ss = date.getSeconds()<10?'0'+(date.getSeconds()).toString():(date.getSeconds()).toString();
        var PrintTime = year+'-'+mouth+'-'+day+' '+hh+':'+mm+':'+ss;
        return PrintTime.replace(/[^0-9]/g, "");
      },
      sureEnterGood() {
        this.isShowSureEnterGood = false;
      },
      cancelEnterGood() {
        this.formInline.SKUCode = '';
        this.isShowSureEnterGood = false;
      },
      // hover商品图片放大图片
      mouseenterImg(e){
        var txt3=document.createElement("img");
        txt3.id='enlargeImg'
        txt3.src=this.oldOrderMsg.goodImgUrl
        txt3.style.height='120px'
        txt3.style.width='120px'
        txt3.style.position='fixed'
        txt3.style.top=(e.target.offsetTop - $('#content')[0].scrollTop + 215)+'px';
        txt3.style.left=(e.target.offsetLeft - $('#content')[0].scrollLeft + 160)+'px';
        $(".imgBox")[0].append(txt3)
      },
      mouseleaveImg(e){
        $("#enlargeImg").remove();
      },

      // 去重
      unique(arr) {
        const res = new Map();
        return arr.filter((arr) => !res.has(arr) && res.set(arr, 1));
      },
      // 提示音
      aplayAudio(type) {
        let audio = '';
        if (type == 'sacnOk') { // 单纯提示
          audio = document.getElementById('audiosacnOk');
        } else if (type == 'scanExpress') { // 扫描物流单
          audio = document.getElementById('audioscanExpress');
        } else if (type == 'success') { // 成功
          audio = document.getElementById('audiosuccess');
        } else if (type == 'error') { // 失败
          audio = document.getElementById('audioerror');
        } else if (type == 'scanoutok') { // 扫描商品
          audio = document.getElementById('audioscanoutok');
        }
        // 从头播放
        audio.currentTime = 0;
        audio.load();
        audio.play();
      },
      sureClick(type) {
        this.aplayAudio(type);
      }
    },
  };
</script>
<style lang='less'>
  .squreBottom .ark-form .ark-form-item-label {
    color: #333333;
    font-size: 14px;
    height: 38px;
    line-height: 18px;
    padding-right: 6px;
  }
  .squreBottom .ark-input {
    width: 260px;
    height: 38px;
    border: 1px solid #DADADA;
  }
  .squreBottom .ark-form-item:first-child {
    margin-right: 40px;
  }
  .squreBottom .SKUEnter.ark-input-wrapper {
    width: unset;
  }
  .itemContent .ark-input:not(textarea) {
    height: 32px;
  }
  .showTipModel .fcWarning {
    color:#f7b901;
    font-size: 24px;
    margin-right: 10px;
    vertical-align: middle;
  }
  .showTipModel p {
    height: 50px;
    line-height: 50px;
  }
  .showTipModel .ark-modal-footer .ark-btn {
    border: 1px solid var(--primary-color);
    background: #fff;
    color: var(--primary-color);
  }
  .linkGoods .ark-collapse-content {
    padding-left: 0px;
    padding-right: 0px;
    .ark-collapse-content-box {
      padding-bottom: 0px;
    }
  }
  .OrderMsg .ark-form-inline .ark-form-item {
    width: 300px;
  }
  .OrderMsg .ark-checkbox-large .ark-checkbox-inner {
    width: 24px;
    height: 24px;
  }
  .OrderMsg .ark-checkbox-large .ark-checkbox-checked .ark-checkbox-inner:after {
    width: 7px;
    height: 12px;
    top: 3px;
    left: 7px;
  }
  .OrderMsg .ark-collapse-content > .ark-collapse-content-box {
    padding-bottom: 0px;
  }
</style>
<style lang='less' scoped>
    .PostDelivery {
      min-width: 1240px;
      height: 100%;
    }
    .PostDeliveryContent {
      width: 100%;
      min-height: calc(100% - 70px);
      background: #fff;
      // margin-top:-50px;
      padding: 24px;
      .scanInWarning {
        padding: 16px;
        background: #D5E7FF;
        .warningTitle {
          display: flex;
          align-items: center;
          span {
            color: #0046B9;
          }
          img {
            width: 14px;
            height: 14px;
            margin-right: 6px;
          }
        }
        .warningText {
          padding-left: 16px;
          margin-top: 6px;
          color: #0046B9;
          p {
            line-height: 18px;
          }
        }
      }
      .squreBottom {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px auto 30px;
        .scanIcon {
          display: inline-block;
          width: 24px;
          height: 30px;
          padding-top: 8px;
        }
        span {
          font-size: 14px;
        }
        img {
          width: 24px;
          height: 24px;
          margin-right: 6px;
        }
      }
      .squreMsgBox {
        padding: 30px 16px 0px;
        margin-top: 8px;
        background: #F7F8FA;
        .orderMsgTitle {
          font-size: 14px;
          margin-bottom: 10px;
        }
      }
      .OrderMsg {
        .orderMsgBox {
          display: flex;
          .orderMsgItem {
            display: flex;
            font-size: 12px;
            line-height: 17px;
            color: #444444;
            margin-right: 190px;
            max-width: 500px;
            img {
              width: 48px;
              height: 48px;
              margin-right: 16px;
            }
            .MsgValue {
              font-size: 14px;
              line-height: 20px;
              color: #4C4C4C;
              margin-top: 8px;
            }
          }
        }
      }
    }
    .linkGoods {
      position: relative;
      margin-top: 24px;
      margin-bottom: 40px;
      border: 1px solid #DADADA;
    }
    .conditionContent {
      width: 100%;
      display: flex;
      max-height: 3000px;
      overflow: hidden;
      flex-wrap: wrap;
      padding-top: 8px;
      .itemContent {
        width: calc(100%  / 3);
        display: flex;
        align-items: center;
        padding-bottom: 16px;
        // margin: 0 0px 16px;
        border-right: 1px solid #DADADA;
        .itemLabel {
          // min-width: 80px;
          min-width: 80px;
          font-size: 12px;
          font-weight: 500;
          color: #4C4C4C;
          line-height: 17px;
          margin-right: 8px;
          text-align: right;
          .itemContentImg {
            width: 46px;
            height: 46px;
          }
        }
      }
      .imgBox {
          img {
            width: 50px;
            height: 50px;
          }
      }
    }
    .oldOrderContent {
      .itemContent {
        .itemLabel {
          color: #909399;
        }
        span {
          word-wrap: break-word;
          word-break: break-all;
        }
      }
    }
</style>