<template>
  <basic-container v-loading="details.loadingObj.pageLoading">
    <div class="avue-crud">
      <el-tabs type="border-card" v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="详 情 信 息" name="tab1">
          <el-divider style="font-size: 28px">货物托运单</el-divider>

          <div class="flex-c-sb form_top">
            <div>
              <div class="flex-c-sb" style="font-size: 16px">
                <div class="flex-c-c" style="margin-right: 50px" v-if="query.brand">
                  <el-icon color="#172e60"><User /></el-icon>
                  品牌:
                  <span class="red">{{ query.brand }}</span>
                </div>
                <div class="flex-c-c">
                  <el-icon color="#172e60"><Van /></el-icon>
                  车次号:
                  <span class="red">{{ query.customerTrain }}</span>
                </div>
              </div>
              <div class="mt10">
                <el-form-item class="mt10" label="运单号: " prop="waybillNo" label-width="80px">
                  <div>
                    <el-input v-model="query.waybillNo" readonly placeholder="运单号" clearable />
                  </div>
                </el-form-item>
              </div>
            </div>

            <div>
              <div v-if="details.query.orderCode" class="flex-c-sb mb10">
                <div class="flex-c-c" style="margin-right: 50px">
                  <el-icon color="#172e60"><Shop /></el-icon>
                  商场名称：
                  <span class="red">{{ query.dealerName || '暂无数据' }}</span>
                </div>
                <div class="flex-c-c">
                  <el-icon color="#172e60"><Shop /></el-icon>
                  商场编码：
                  <span class="red">{{ query.dealerCode || '暂无数据' }}</span>
                </div>
              </div>

              <div class="flex-c-c">
                <div style="margin-right: 10px" class="flex-c-c">
                  <el-icon size="1rem"><User /></el-icon>
                  <span style="margin-left: 10px">{{ query.agent }}</span>
                </div>
                <el-date-picker
                  v-model="query.documentMakingTime"
                  prefix-icon="Calendar"
                  readonly
                  type="datetime"
                  placeholder="创建时间"
                />
              </div>
            </div>
          </div>

          <el-form :inline="true" :model="query" class="el-fr-d" label-width="100px">
            <!-- 顶部 -->

            <!-- 第一排 -->
            <div class="table-row mt15 border-top">
              <el-form-item label="发站仓:" prop="departureWarehouseName" class="el-times">
                <el-input
                  readonly
                  v-model="query['departureWarehouseName']"
                  placeholder="发站仓"
                ></el-input>
              </el-form-item>

              <el-form-item label="到站:" prop="destination">
                <el-input readonly v-model="query['destination']" placeholder="到站地址"></el-input>
              </el-form-item>

              <el-form-item label="目的仓:" class="el-times" prop="queryDestinationWarehouseName">
                <el-input
                  readonly
                  v-model="query['queryDestinationWarehouseName']"
                  placeholder="发站仓"
                ></el-input>
              </el-form-item>

              <el-form-item label="货号:" prop="goodsCode">
                <el-input v-model="query.goodsCode" readonly placeholder="货号"></el-input>
              </el-form-item>
            </div>

            <!-- 订单自编号 -->
            <div class="table-row" v-if="details.query.orderCode">
              <el-form-item label="订单自编号:" class="el-times">
                <el-input
                  readonly
                  v-model="details.query.orderCode"
                  type="textarea"
                  placeholder="订单自编号"
                  disabled
                ></el-input>
              </el-form-item>
            </div>

            <!-- 发货方 && 收货方 -->
            <div class="table-row">
              <div style="margin-right: 10px">
                <div class="flex-c table-row-title">发货方</div>
                <div>
                  <el-row>
                    <el-form-item label="发货单位:" prop="shipper">
                      <el-input readonly v-model="query.shipper" placeholder="发货单位"></el-input>
                    </el-form-item>

                    <el-form-item label="发货人:" prop="shipperName">
                      <el-input
                        readonly
                        v-model="query.shipperName"
                        placeholder="发货人"
                      ></el-input>
                    </el-form-item>
                  </el-row>

                  <el-row>
                    <el-form-item label="联系电话:" prop="shipperMobile">
                      <el-input
                        readonly
                        v-model="query.shipperMobile"
                        placeholder="联系电话"
                      ></el-input>
                    </el-form-item>
                  </el-row>

                  <el-row>
                    <el-form-item label="发货地址:">
                      <el-input
                        readonly
                        v-model="query.shipperAddress"
                        placeholder="发货地址"
                      ></el-input>
                    </el-form-item>
                  </el-row>
                </div>
              </div>
              <div class="border-left">
                <div class="flex-c table-row-title">收货方</div>
                <div>
                  <el-row>
                    <el-form-item label="收货单位:" prop="consignee">
                      <el-input
                        readonly
                        v-model="query.consignee"
                        placeholder="收货单位"
                      ></el-input>
                    </el-form-item>

                    <el-form-item label="收货人:" prop="consigneeName">
                      <el-input
                        readonly
                        v-model="query.consigneeName"
                        placeholder="收货人"
                      ></el-input>
                    </el-form-item>
                  </el-row>

                  <el-row>
                    <el-form-item label="联系电话:" prop="consigneeMobile">
                      <el-input
                        readonly
                        v-model="query.consigneeMobile"
                        placeholder="联系电话"
                      ></el-input>
                    </el-form-item>
                  </el-row>

                  <el-row>
                    <el-form-item label="收货地址:">
                      <el-input
                        readonly
                        v-model="query.consigneeAddress"
                        placeholder="发货地址"
                      ></el-input>
                    </el-form-item>
                  </el-row>
                </div>
              </div>
            </div>

            <!-- 计价方式行 -->
            <div
              class="table-row table_row_number"
              style="display: flex"
              v-for="(item, index) in details.goodsList"
              :key="item"
            >
              <div style="width: 230px; flex: none">
                <el-form-item
                  label="计价方式:"
                  label-width="fit-content"
                  prop="chargeType"
                  class="el-times"
                >
                  <el-radio-group
                    disabled
                    v-model="item.chargeType"
                    @change="handleComputed(item)"
                    style="display: flex"
                  >
                    <el-radio :label="1">件</el-radio>
                    <el-radio :label="2">方</el-radio>
                    <el-radio :label="3">公斤</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>

              <el-form-item
                label="货物名称:"
                label-width="fit-content"
                prop="goodsName"
                class="el-times"
              >
                <el-input readonly v-model="item.goodsName" placeholder="货物名称"></el-input>
              </el-form-item>

              <el-form-item label="件数:" label-width="fit-content" prop="num" class="el-times">
                <el-input-number
                  readonly
                  :controls="false"
                  v-model="item.num"
                  controls-position="right"
                  :min="0"
                  :max="info.maxNum + item.num - details.totalObj.totalCount"
                  :precision="0"
                  :step="1"
                  @change="handleComputed(item)"
                />
              </el-form-item>

              <el-form-item label="体积(方):" label-width="fit-content" class="el-times">
                <el-input-number
                  readonly
                  :controls="false"
                  v-model="item.volume"
                  controls-position="right"
                  :min="0"
                  :precision="4"
                  :step="0.1"
                  @change="handleComputed(item)"
                />
              </el-form-item>

              <el-form-item label="重量(kg):" label-width="fit-content" class="el-times">
                <el-input-number
                  readonly
                  :controls="false"
                  v-model="item.weight"
                  controls-position="right"
                  :min="0"
                  :precision="3"
                  :step="0.1"
                  @change="handleComputed(item)"
                />
              </el-form-item>

              <el-form-item label="单价:" label-width="fit-content" class="el-times">
                <el-input-number
                  readonly
                  :controls="false"
                  v-model="item.price"
                  controls-position="right"
                  :min="0"
                  :precision="2"
                  :step="0.1"
                  @change="handleComputed(item)"
                />
              </el-form-item>

              <el-form-item label="运费小计:" label-width="fit-content" class="el-times">
                <el-input-number
                  readonly
                  :controls="false"
                  v-model="item.subtotalFreight"
                  controls-position="right"
                  :precision="2"
                  :min="0"
                  :step="0.1"
                  :disabled="item.price > 0 || Number(item.price) !== Number(item.price)"
                />
              </el-form-item>
            </div>

            <!-- 合计行 -->
            <div class="table-row table_row_number table_row_total">
              <div style="width: 230px; flex: none">合计</div>
              <!-- 货物名称 -->
              <div>{{ details.goodsList.length }}</div>
              <!-- 件数 -->
              <div>
                {{ details.totalObj.totalCount }}(最大数: <span class="red">{{ info.maxNum }}</span
                >)
              </div>
              <!-- 体积 -->
              <div>{{ details.totalObj.totalVolume }}</div>
              <!-- 重量 -->
              <div>{{ details.totalObj.totalWeghit }}</div>
              <div></div>
              <!-- 运费 -->
              <div>{{ details.totalObj.totalFreight }}</div>
            </div>

            <!-- 合计运费 && 支付方式 -->
            <div class="table-row">
              <!-- 定制品 -->
              <template v-if="Number(query.waybillType) === 1 || details.query.orderCode">
                <!-- 合计运费 -->
                <div style="margin-right: 10px; width: 60%; flex: none">
                  <div style="flex: 1">
                    <div class="table-row-title" style="margin-bottom: 10px">
                      <div class="table-row-title-item fwb">
                        合计费用
                        <span class="red ml10">{{ totalCost }}</span>
                      </div>
                    </div>
                    <div>
                      <el-form label-width="fit-content">
                        <el-row>
                          <el-form-item label="运费:">
                            <el-input
                              controls-position="right"
                              v-model="details.query.totalFreight"
                              disabled
                            ></el-input>
                          </el-form-item>

                          <el-form-item label="送货费:">
                            <el-input-number
                              readonly
                              :controls="false"
                              controls-position="right"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              v-model="query.deliveryFee"
                            ></el-input-number>
                          </el-form-item>

                          <el-form-item label="提货费:">
                            <el-input-number
                              readonly
                              :controls="false"
                              controls-position="right"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              v-model="query.pickupFee"
                            ></el-input-number>
                          </el-form-item>

                          <el-form-item label="仓库管理费:">
                            <el-input-number
                              readonly
                              :controls="false"
                              controls-position="right"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              v-model="query.warehouseManagementFee"
                            ></el-input-number>
                          </el-form-item>

                          <el-form-item label="仓储费:">
                            <el-input-number
                              readonly
                              :controls="false"
                              controls-position="right"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              v-model="query.storageFee"
                            ></el-input-number>
                          </el-form-item>
                        </el-row>

                        <el-row>
                          <el-form-item label="装卸费:">
                            <el-input-number
                              readonly
                              :controls="false"
                              controls-position="right"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              v-model="query.handlingFee"
                            ></el-input-number>
                          </el-form-item>
                          <el-form-item label="其它费用:">
                            <el-input-number
                              readonly
                              :controls="false"
                              controls-position="right"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              v-model="query.otherFee"
                            ></el-input-number>
                          </el-form-item>
                          <el-form-item label="保价费:">
                            <el-input-number
                              readonly
                              :controls="false"
                              controls-position="right"
                              v-model="query.insuranceFee"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                            ></el-input-number>
                          </el-form-item>
                          <el-form-item label="申明价值:">
                            <el-input-number
                              readonly
                              :controls="false"
                              controls-position="right"
                              v-model="query.claimingValue"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                            ></el-input-number>
                          </el-form-item>
                        </el-row>

                        <el-row>
                          <el-form-item label="安装费:">
                            <el-input-number
                              readonly
                              :controls="false"
                              controls-position="right"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              v-model="query.installFee"
                            ></el-input-number>
                          </el-form-item>
                        </el-row>
                      </el-form>
                    </div>
                  </div>
                </div>

                <!-- 付款方式 -->
                <div class="border-left">
                  <div style="flex: 1">
                    <div class="table-row-title" style="margin-bottom: 10px">
                      <div class="table-row-title-item fwb">付款方式</div>
                    </div>
                    <div>
                      <el-form label-width="fit-content" :rules="details.rules">
                        <el-row>
                          <el-form-item label="支付方式:">
                            <el-select v-model="query.payType" disabled>
                              <el-option
                                v-for="item in query.payTypeList || []"
                                :key="item.dictValue"
                                :label="item.dictValue"
                                :value="item.dictKey"
                              />
                            </el-select>
                          </el-form-item>

                          <el-form-item label="付款方式:" prop="payWay">
                            <el-select v-model="query.payWay" disabled>
                              <el-option
                                v-for="item in query.payWayList || []"
                                :key="item.dictValue"
                                :label="item.dictValue"
                                :value="item.dictKey"
                              />
                            </el-select>
                          </el-form-item>

                          <el-form-item label="现付:">
                            <el-input-number
                              readonly
                              :controls="false"
                              controls-position="right"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              v-model="query.xianPay"
                            ></el-input-number>
                          </el-form-item>
                        </el-row>

                        <el-row>
                          <el-form-item label="到付:">
                            <el-input-number
                              readonly
                              :controls="false"
                              controls-position="right"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              v-model="query.daoPay"
                            ></el-input-number>
                          </el-form-item>

                          <el-form-item label="月结:">
                            <el-input-number
                              readonly
                              :controls="false"
                              controls-position="right"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              v-model="query.yuePay"
                            ></el-input-number>
                          </el-form-item>

                          <el-form-item label="回付:">
                            <el-input-number
                              readonly
                              :controls="false"
                              controls-position="right"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              v-model="query.huiPay"
                            ></el-input-number>
                          </el-form-item>
                        </el-row>
                      </el-form>
                    </div>
                  </div>
                </div>
              </template>

              <template v-else>
                <!-- 合计运费 -->
                <div style="margin-right: 10px; width: 55%; flex: none; zoom: 0.9">
                  <div style="flex: 1">
                    <div class="table-row-title" style="margin-bottom: 10px">
                      <div class="table-row-title-item fwb">
                        合计费用
                        <span class="red" style="margin-left: 10px">{{ totalCost }}</span>
                      </div>
                    </div>
                    <div>
                      <el-form label-width="fit-content">
                        <el-row>
                          <el-form-item label="运费:">
                            <el-input readonly v-model="query.totalFreight" disabled></el-input>
                          </el-form-item>

                          <el-form-item label="送货费:">
                            <el-input-number
                              readonly
                              :controls="false"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              controls-position="right"
                              v-model="query.deliveryFee"
                            ></el-input-number>
                          </el-form-item>

                          <el-form-item label="提货费:">
                            <el-input-number
                              readonly
                              :controls="false"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              controls-position="right"
                              v-model="query.pickupFee"
                            ></el-input-number>
                          </el-form-item>

                          <el-form-item label="仓库管理费:">
                            <el-input-number
                              readonly
                              :controls="false"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              controls-position="right"
                              v-model="query.warehouseManagementFee"
                            ></el-input-number>
                          </el-form-item>

                          <el-form-item label="仓储费:">
                            <el-input-number
                              readonly
                              :controls="false"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              controls-position="right"
                              v-model="query.storageFee"
                            ></el-input-number>
                          </el-form-item>
                        </el-row>

                        <el-row>
                          <el-form-item label="装卸费:">
                            <el-input-number
                              readonly
                              :controls="false"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              controls-position="right"
                              v-model="query.handlingFee"
                            ></el-input-number>
                          </el-form-item>
                          <el-form-item label="其它费用:">
                            <el-input-number
                              readonly
                              :controls="false"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              controls-position="right"
                              v-model="query.otherFee"
                            ></el-input-number>
                          </el-form-item>
                          <el-form-item label="保价费:">
                            <el-input-number
                              readonly
                              :controls="false"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              controls-position="right"
                              v-model="query.insuranceFee"
                            ></el-input-number>
                          </el-form-item>
                          <el-form-item label="申明价值:">
                            <el-input-number
                              readonly
                              :controls="false"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              controls-position="right"
                              v-model="query.claimingValue"
                            ></el-input-number>
                          </el-form-item>
                          <el-form-item label="回扣:">
                            <el-input-number
                              readonly
                              :controls="false"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              controls-position="right"
                              v-model="query.rebate"
                            ></el-input-number>
                          </el-form-item>
                        </el-row>

                        <el-row>
                          <el-form-item label="安装费:">
                            <el-input-number
                              readonly
                              :controls="false"
                              controls-position="right"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              v-model="query.installFee"
                            ></el-input-number>
                          </el-form-item>
                        </el-row>
                      </el-form>
                    </div>
                  </div>
                </div>

                <!-- 付款方式 -->
                <div style="zoom: 0.9" class="border-left">
                  <div style="flex: 1">
                    <div class="table-row-title" style="margin-bottom: 10px">
                      <div class="table-row-title-item fwb">付款方式</div>
                    </div>
                    <div>
                      <el-row>
                        <el-form-item label-width="fit-content" label="支付方式:">
                          <el-select disabled v-model="query.payType" :teleported="false">
                            <el-option
                              v-for="item in query.payTypeList"
                              :key="item.dictValue"
                              :label="item.dictValue"
                              :value="item.dictKey"
                            />
                          </el-select>
                        </el-form-item>

                        <el-form-item label="付款方式:" label-width="fit-content" prop="payWay">
                          <el-select disabled v-model="query.payWay" :teleported="false">
                            <el-option
                              v-for="item in query.payWayList"
                              :key="item.dictValue"
                              :label="item.dictValue"
                              :value="item.dictKey"
                            />
                          </el-select>
                        </el-form-item>

                        <el-form-item label-width="fit-content" label="现付:">
                          <el-input-number
                            readonly
                            :controls="false"
                            :precision="2"
                            :min="0"
                            :step="0.1"
                            controls-position="right"
                            v-model="query.xianPay"
                          ></el-input-number>
                        </el-form-item>
                      </el-row>

                      <el-row>
                        <el-form-item label-width="fit-content" label="到付:">
                          <el-input-number
                            readonly
                            :controls="false"
                            :precision="2"
                            :min="0"
                            :step="0.1"
                            controls-position="right"
                            v-model="query.daoPay"
                          ></el-input-number>
                        </el-form-item>

                        <el-form-item label-width="fit-content" label="月结:">
                          <el-input-number
                            readonly
                            :controls="false"
                            :precision="2"
                            :min="0"
                            :step="0.1"
                            controls-position="right"
                            v-model="query.yuePay"
                          ></el-input-number>
                        </el-form-item>

                        <el-form-item label-width="fit-content" label="回付:">
                          <el-input-number
                            readonly
                            :controls="false"
                            :precision="2"
                            :min="0"
                            :step="0.1"
                            controls-position="right"
                            v-model="query.huiPay"
                          ></el-input-number>
                        </el-form-item>
                      </el-row>
                    </div>
                  </div>
                </div>

                <!-- 代收款 -->
                <div style="width: 10%; flex: none; zoom: 0.9">
                  <div style="flex: 1">
                    <div class="table-row-title" style="margin-bottom: 10px">
                      <div class="table-row-title-item fwb">代收款</div>
                    </div>
                    <div>
                      <el-form label-width="fit-content" :rules="details.rules">
                        <el-row>
                          <div style="font-size: 14px">代收货款:</div>
                          <el-form-item label-width="0">
                            <el-input-number
                              readonly
                              :controls="false"
                              :precision="2"
                              :min="0"
                              :step="0.1"
                              controls-position="right"
                              v-model="query.replacePrice"
                            ></el-input-number>
                          </el-form-item>
                        </el-row>
                      </el-form>
                    </div>
                  </div>
                </div>
              </template>
            </div>

            <!-- 计价方式行 -->
            <div class="table-row table_row_number">
              <div>
                <el-form-item label="开单人:" label-width="fit-content" class="el-times">
                  <el-input v-model="query.agent" disabled />
                </el-form-item>
              </div>

              <el-form-item label="三方操作费:" label-width="fit-content" class="el-times">
                <el-input-number
                  readonly
                  :controls="false"
                  v-model="query.thirdOperationFee"
                  controls-position="right"
                  :precision="0"
                  :step="0.1"
                />
              </el-form-item>

              <el-form-item
                label="送货方式:"
                prop="deliveryWay"
                label-width="fit-content"
                class="el-times"
              >
                <el-select disabled v-model="query.deliveryWay">
                  <el-option
                    v-for="item in query.deliveryWayList"
                    :key="item.dictValue"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  />
                </el-select>
              </el-form-item>

              <el-form-item
                label="紧急度:"
                prop="urgency"
                label-width="fit-content"
                class="el-times"
              >
                <el-select disabled v-model="query.urgency">
                  <el-option
                    v-for="item in query.urgencyList || []"
                    :key="item.dictValue"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="回单" label-width="fit-content" class="el-times">
                <el-input-number
                  readonly
                  :controls="false"
                  v-model="query.receiptNum"
                  controls-position="right"
                  :precision="0"
                  :step="1"
                  :min="0"
                />
              </el-form-item>

              <el-form-item label="回单要求:" label-width="fit-content" class="el-times">
                <el-select disabled v-model="query.receipt" filterable multiple>
                  <el-option
                    v-for="item in query.receiptList"
                    :key="item.dictValue"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="运输方式:" label-width="fit-content" class="el-times">
                <el-select disabled v-model="query.transportType">
                  <el-option
                    v-for="item in query.transportTypeList"
                    :key="item.dictValue"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  />
                </el-select>
              </el-form-item>
            </div>

            <!-- 备注 -->
            <div class="table-row">
              <el-form-item label="备注:" class="el-times">
                <el-input
                  v-model="query.remark"
                  type="textarea"
                  readonly
                  placeholder="备注"
                ></el-input>
              </el-form-item>
            </div>
          </el-form>

          <el-tabs class="mt10" @tab-click="handleTabItemClick" v-model="activeTabItem">
            <!-- 支出费用 -->
            <el-tab-pane label="支 出 费 用" name="tabItem1"></el-tab-pane>
            <!-- 配载信息 -->
            <el-tab-pane label="配 载 信 息" name="tabItem2">
              <!-- 列表模块 -->
              <WaybillStowage />
            </el-tab-pane>
            <el-tab-pane label="中 转 信 息" name="tabItem3">
              <RelayInformation />
            </el-tab-pane>
          </el-tabs>

          <!-- 提交按钮 -->
          <div class="submitDataContainer">
            <el-button
              type="primary"
              v-if="BookingNote_audit && !query.checkUserId"
              icon="el-icon-position"
              @click="handleShowAudit"
            >
              审 核
            </el-button>
            <el-button
              type="primary"
              v-if="BookingNote_edit && Number(query.checkStatus) === 0"
              icon="el-icon-edit"
              @click="handleEdit"
            >
              修 改</el-button
            >
            <el-button type="primary" icon="el-icon-printer" @click="handlePrint"> 打 印</el-button>
            <el-button type="primary" icon="el-icon-close" @click="back()"> 关 闭</el-button>
          </div>

          <!-- 底部顶位的容器 -->
          <div class="footer"></div>
        </el-tab-pane>

        <el-tab-pane label="运 单 跟 踪" name="tab2">
          <!-- 列表模块 -->
          <tablecmt
            class="StowageInfo"
            :columnList="details.WaybillTrackingColumnList"
            :tableData="data"
            :loading="loadingObj.stowageLoading"
            @inputTxt="inputsc"
            @timeCheck="timesc"
            @btnCheck="btnsc"
          >
          </tablecmt>
        </el-tab-pane>

        <el-tab-pane label="财 务 记 录" name="tab3">
          <!-- 列表模块 -->
          <tablecmt
            class="StowageInfo"
            :columnList="details.FinancialRecordColumnList"
            :tableData="data"
            :loading="loadingObj.stowageLoading"
            @inputTxt="inputsc"
            @timeCheck="timesc"
          >
          </tablecmt>
        </el-tab-pane>

        <el-tab-pane label="改 单 记 录" name="tab4">
          <!-- 列表模块 -->
          <tablecmt
            class="StowageInfo"
            :columnList="details.ChangeOrderColumnList"
            :tableData="data"
            :loading="loadingObj.stowageLoading"
            @inputTxt="inputsc"
            @timeCheck="timesc"
          >
          </tablecmt>
        </el-tab-pane>

        <el-tab-pane label="回 单 跟 踪" name="tab5">
          <div style="min-height: 300px">
            <el-image
              class="mr10 receipt_img"
              v-for="(item, index) in details.receiptImgList"
              style="width: 100px; height: 100px"
              :src="item"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="details.receiptImgList"
              :initial-index="index"
              fit="cover"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane label="异 动 记 录" name="tab6">
          <!-- 列表模块 -->
          <tablecmt
            class="StowageInfo"
            :columnList="details.TransactionColumnList"
            :tableData="data"
            :loading="loadingObj.stowageLoading"
            @inputTxt="inputsc"
            @timeCheck="timesc"
          >
          </tablecmt>
        </el-tab-pane>

        <el-tab-pane label="运单订单记录" name="tab7">
          <!-- 列表模块 -->
          <tablecmt
            class="StowageInfo"
            :columnList="details.columnList"
            :tableData="data"
            :loading="loadingObj.stowageLoading"
            @inputTxt="inputsc"
            @timeCheck="timesc"
          >
          </tablecmt>
        </el-tab-pane>
      </el-tabs>
    </div>
  </basic-container>

  <!-- 审核 -->
  <el-dialog
    class="el-dialog-checkVisted"
    title="审核"
    width="780px"
    :show-close="false"
    v-model="details.popUpShow.checkVisted"
  >
    <div class="title">运单号：{{ details.form.waybillNo }}</div>
    <el-form label-width="100px">
      <el-form-item label="审核意见：">
        <el-input placeholder="请输入审核意见" v-model="details.form.checkReson"></el-input>
      </el-form-item>

      <el-form-item label="审核备注：" class="mt20">
        <el-input placeholder="请输入审核备注" v-model="details.form.checkRemark"></el-input>
      </el-form-item>
    </el-form>

    <div class="flex-c-c mt10">
      <el-button @click="details.popUpShow.checkVisted = false">关 闭</el-button>
      <el-button type="primary" icon="Position" @click="handleAudit">提 交</el-button>
    </div>
  </el-dialog>

  <!-- 运单打印 -->
  <WaybillPrintTemplate
    v-model="details.popUpShow.WaybillPrintTemplate"
    :html="details.html"
    width="fit-content"
  />

  <edittablehead
    @closce="showdrawer"
    :drawerShow="drawerShow"
    :columnList="columnList"
    v-model="columnList"
  >
  </edittablehead>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
  nextTick,
  watch,
  defineAsyncComponent,
} from 'vue';
import functions from '@/utils/functions';
import dayjs from 'dayjs';
import { mapGetters } from 'vuex';
/** 获取字典 */
import { getDictionaryBiz } from '@/api/system/dict';
import {
  downloadXls,
  computeNumber,
  isNumber,
  getObjType,
  handleInputQuery,
  handleSelectQuery,
  deepClone,
  ChecksWhetherTheWarehouseIsSelected,
} from '@/utils/util';
import { columnList } from '@/option/distribution/VehicleStowage';
import {
  WaybillTrackingColumnList,
  FinancialRecordColumnList,
  ChangeOrderColumnList,
  TransactionColumnList,
} from '@/option/distribution/BookingNote';
import { useRouter, useRoute } from 'vue-router';
import { postFindWaybillDetail, postCheckWaybill } from '@/api/distribution/CreateOrder.js';
import { postPrintBatch } from '@/api/waybill/WaybillOrderList.js';
import { getLazyTreeAll } from '@/api/base/region';
import {
  postWarehouseFindWaybillInfo,
  postFindWaybillLog,
  postFindWaybillReturnList,
  postFindWaybillCarsLoadInfo,
  postFindWaybillTransferInfo,
} from '@/api/distribution/BookingNote.js';
import { useStore } from 'vuex';
import { ElMessageBox, ElMessage } from 'element-plus';

const WaybillStowage = defineAsyncComponent(
  () => import('@/views/distribution/inventory/BookingNoteComponent/WaybillStowage.vue')
);

const RelayInformation = defineAsyncComponent(
  () => import('@/views/distribution/inventory/BookingNoteComponent/RelayInformation.vue')
);

// 获取路由实例
const $router = useRouter();
const $route = useRoute();
const $store = useStore();

const details = reactive<any>({
  /** 表格表头 */
  WaybillTrackingColumnList: deepClone(WaybillTrackingColumnList),
  FinancialRecordColumnList: deepClone(FinancialRecordColumnList),
  ChangeOrderColumnList: deepClone(ChangeOrderColumnList),
  TransactionColumnList: deepClone(TransactionColumnList),
  /** 页面表单数据 */
  pageInfo: {},
  info: {
    /** 支付字典 */
    payOption: [
      {
        label: '现金',
        value: 1,
      },
      {
        label: '银行卡',
        value: 2,
      },
      {
        label: '微信',
        value: 3,
      },
      {
        label: '支付宝',
        value: 4,
      },
      {
        label: '支票',
        value: 5,
      },
      {
        label: '账本',
        value: 6,
      },
    ],
    /** 开单付款字典 */
    paymentOption: [
      {
        label: '现付',
        value: 1,
      },
      {
        label: '到付',
        value: 2,
      },
      {
        label: '月结',
        value: 3,
      },
      {
        label: '回付',
        value: 4,
      },
      {
        label: '内部结算',
        value: 5,
      },
      {
        label: '多笔付',
        value: 6,
      },
    ],
    /** 紧急度 */
    emergencyOption: [
      {
        label: '正常',
        value: 1,
      },
      {
        label: '急',
        value: 2,
      },
      {
        label: '特急',
        value: 3,
      },
      {
        label: '加急',
        value: 4,
      },
    ],
    /** 送货方式字典 */
    shippingOption: [
      {
        label: '自提',
        value: 1,
      },
      {
        label: '送货',
        value: 2,
      },
      {
        label: '送货上门',
        value: 3,
      },
      {
        label: '送货上门(有电梯)',
        value: 4,
      },
      {
        label: '送货上门(无电梯)',
        value: 5,
      },
      {
        label: '送货卸货',
        value: 6,
      },
      {
        label: '送货安装',
        value: 7,
      },
    ],
    /**  开单回单方式 */
    receiptOption: [
      {
        label: '签回单',
        value: 1,
      },
      {
        label: '打收条',
        value: 2,
      },
      {
        label: '签信封',
        value: 3,
      },
      {
        label: '签回单盖章',
        value: 4,
      },
      {
        label: '1份回单',
        value: 5,
      },
      {
        label: '2份回单',
        value: 6,
      },
      {
        label: '3份回单',
        value: 7,
      },
      {
        label: '4份回单',
        value: 8,
      },
      {
        label: '5份回单',
        value: 9,
      },
    ],
    /** 运输方式 */
    transportationOption: [
      {
        label: '公路快运',
        value: 1,
      },
      {
        label: '海运',
        value: 2,
      },
      {
        label: '卡车航班',
        value: 3,
      },
      {
        label: '空运',
        value: 4,
      },
      {
        label: '普通汽班',
        value: 5,
      },
      {
        label: '快递',
        value: 6,
      },
    ],
  },
  /** 合计 */
  totalObj: {
    /** 总件数 */
    totalCount: computed(() => {
      return details.goodsList.reduce((curr, item) => {
        if (item.num) return curr + item.num;
        return curr;
      }, 0);
    }),
    /** 总重量 */
    totalWeghit: computed(() => {
      return details.goodsList.reduce((curr, item) => {
        if (item.weight) return computeNumber(curr, '+', item.weight).result;
        return curr;
      }, 0);
    }),
    /** 总体积 */
    totalVolume: computed(() => {
      return details.goodsList.reduce((curr, item) => {
        if (item.volume) return computeNumber(curr, '+', item.volume).result;
        return curr;
      }, 0);
    }),
  },
  /** 是否开启搜索 */
  search: true,
  /** 表格搜索条件 */
  query: {},
  goodsList: [],
  options: [],
  /** 时间快捷选择设置 */
  shortcuts: [
    {
      text: '最近一周',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        return [start, end];
      },
    },
    {
      text: '最近一个月',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        return [start, end];
      },
    },
    {
      text: '最近三个月',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        return [start, end];
      },
    },
  ],
  /** 列表 */
  columnList: deepClone(columnList),
  /** 列表数据 */
  data: [],
  /** 页面loading */
  loadingObj: {
    /** 配载信息loading */
    stowageLoading: false,
    pageLoading: false,
  },
  /** 列表复选框选中的数据 */
  selectionList: [],
  /** 是否显示设置表格 */
  drawerShow: false,
  /** 分页参数 */
  page: {
    currentPage: 1,
    pageSize: 30,
    total: 0,
  },
  /** 弹出层显示 */
  popUpShow: {
    /** 打印弹窗 */
    WaybillPrintTemplate: false,
    /** 运单审核 */
    checkVisted: false,
  },
  /** 列表Dom节点 */
  listNode: '',
  form: {},
  activeTab: 'tab1',
  activeTabItem: 'tabItem1',
  /** 回单列表 */
  receiptImgList: [],
  /** 打印html */
  html: '',
});

const info = ref<any>({});

const {
  search,
  query,
  shortcuts,
  data,
  drawerShow,
  page,
  activeTab,
  activeTabItem,
  loadingObj,
  pageInfo,
} = toRefs(details);

/** vuex */
const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));
console.log('permission :>> ', permission);

// 修改按钮
const BookingNote_edit = computed(() => {
  return $store.getters.permission.BookingNote_edit;
});

// 审核按钮
const BookingNote_audit = computed(() => {
  return $store.getters.permission.BookingNote_audit;
});

// 合计费用
const totalCost = computed(() => {
  console.log('details.pageInfo :>> ', details.pageInfo);
  // let _num = 0;
  const _num = computeNumber(0, '+', details.query.totalFreight || 0)
    .next('+', details.query.deliveryFee || 0)
    .next('+', details.query.pickupFee || 0)
    .next('+', details.query.warehouseManagementFee || 0)
    .next('+', details.query.storageFee || 0)
    .next('+', details.query.handlingFee || 0)
    .next('+', details.query.otherFee || 0)
    .next('+', details.query.insuranceFee || 0)
    .next('+', details.query.claimingValue || 0).result;
  console.log('_num :>> ', _num);
  return _num;
});

/** 计算行合计 */
const handleComputed = (row: any) => {
  // if (!row.price) return;
  if (row.chargeType === 1) row.subtotalFreight = computeNumber(row.num, '*', row.price).result;
  else if (row.chargeType === 2)
    row.subtotalFreight = computeNumber(row.volume, '*', row.price).result;
  else if (row.chargeType === 3)
    row.subtotalFreight = computeNumber(row.weight, '*', row.price).result;
  // row.subtotalFreight = 1;
};

// 获取省市区信息
getLazyTreeAll().then(res => {
  if (res.data.success) {
    details.regionOptione = res.data.data;
  }
});

/** 请求页面数据 */
const onLoad = async () => {
  try {
    details.loadingObj.pageLoading = true;

    details.pageInfo = { ...$route.query };

    const res = await postFindWaybillDetail({ waybillId: details.pageInfo.id, isEdit: 0 });
    const { code, data } = res.data;
    if (code !== 200) return;

    details.query = { ...data, ...data.warehouseWaybill };
    delete details.query.warehouseWaybill;
    details.query.queryDestinationWarehouseName = details.query.destinationWarehouseName;
    console.log('data :>> ', data);
    details.query.openOrderDate = data.warehouseWaybill.createTime;
    details.query.orderCode = data.warehouseWaybill.orderNo;
    details.query.transportType = '1';
    details.query.receipt = data.warehouseWaybill.receipt
      ? data.warehouseWaybill.receipt.split(',')
      : [];

    details.query.xianPay = isNumber(data.warehouseWaybill.xPay)
      ? Number(data.warehouseWaybill.xPay)
      : data.warehouseWaybill.xPay;
    details.query.huiPay = isNumber(data.warehouseWaybill.hPay)
      ? Number(data.warehouseWaybill.hPay)
      : data.warehouseWaybill.hPay;
    details.query.yuePay = isNumber(data.warehouseWaybill.yPay)
      ? Number(data.warehouseWaybill.yPay)
      : data.warehouseWaybill.yPay;
    details.query.daoPay = isNumber(data.warehouseWaybill.dPay)
      ? Number(data.warehouseWaybill.dPay)
      : data.warehouseWaybill.dPay;
    // 转译到站
    console.log('details.query :>> ', details.query);

    // 初始化goodsList
    if (data.warehouseWaybill.detailList.length === 0)
      details.goodsList = [
        {
          index: 0,
          /** 货物名称  */
          goodsName: '',
          /** 品类Id */
          goodsId: '',
          /** 计费方式 */
          chargeType: 1,
          /** 件数 */
          num: 0,
          /** 重量(kg) */
          weight: 0,
          /** 体积(方) */
          volume: 0,
          /** 单价 */
          price: 0,
          /** 运费小计 */
          subtotalFreight: 0,
        },
      ];
    else {
      info.value.maxNum = 0;
      details.deepCloneGoodsList = [];
      details.goodsList = data.warehouseWaybill.detailList.map(val => {
        val.num = Number(val.num);
        val.volume = Number(val.volume);
        val.weight = Number(val.weight);
        val.price = Number(val.price);
        val.subtotalFreight = Number(val.subtotalFreight);

        val.goodsName = val.productName;

        // 计算运费小计
        if (!val.subtotalFreight) handleComputed(val);

        // 计算件数最大值
        info.value.maxNum += val.num;
        details.deepCloneGoodsList.push({ ...val });
        return val;
      });
    }
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.pageLoading = false;
  }
};

/** 查看运单跟踪 */
const handleFindInfo = async type => {
  try {
    details.loadingObj.pageLoading = true;
    details.data = [];
    const submitData = {
      waybillId: $route.query.id,
      infoType: type,
    };
    const response = await postFindWaybillLog(submitData);
    const { code, data } = response.data;
    if (code !== 200) return;

    details.data = data || [];

    // 批次状态
    const _batchStatus = [
      { label: '创建运单', value: 10 },
      { label: '已入库', value: 20 },
      { label: '干线装车', value: 30 },
      { label: '干线发车', value: 40 },
      { label: '干线取消发车', value: 50 },
      { label: '干线到达', value: 60 },
      { label: '干线取消达到', value: 70 },
      { label: '干线卸车', value: 80 },
      { label: '修改运单', value: 888 },
      { label: '审核运单', value: 999 },
    ];

    // 审核状态
    const _checkStatus = [
      { label: '待审核', value: 0 },
      { label: '审核通过', value: 1 },
    ];

    for (let i = 0; i < details.data.length; i++) {
      const value = details.data[i];
      for (let i = 0; i < _batchStatus.length; i++) {
        const item = _batchStatus[i];

        if (item.value !== Number(value.trackType)) continue;
        value.trackTypeName = item.label;
        break;
      }

      for (let i = 0; i < _checkStatus.length; i++) {
        const item = _checkStatus[i];

        if (item.value !== Number(value.checkStatus)) continue;
        value.checkStatusName = item.label;
        break;
      }
    }
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.pageLoading = false;
  }
};

const handleTabClick = e => {
  console.log('e :>> ', e);
  const { name } = e.props;

  switch (name) {
    case 'tab2':
      handleFindInfo(1);
      break;

    case 'tab3':
      handleFindInfo(2);
      break;

    case 'tab4':
      handleFindInfo(3);
      break;

    case 'tab5':
      handleFindContractList();
      break;

    case 'tab6':
      details.data = [];
      break;

    case 'tab7':
      details.data = [];
      break;

    default:
      break;
  }
};

/** 搜索 */
const searchChange = () => {
  onLoad();
};

/** 展开列表控件 */
const showdrawer = (_flag?: boolean) => {
  details.drawerShow = _flag;
};

/** 是否开启搜索区 */
const searchHide = () => {
  function getWinHight() {
    var windowHight = 0;
    if (document.body.clientHeight && document.documentElement.clientHeight) {
      windowHight =
        document.body.clientHeight < document.documentElement.clientHeight
          ? document.body.clientHeight
          : document.documentElement.clientHeight;
    } else {
    }
    return document.documentElement.clientHeight;
  }
  details.search = !details.search;
  const timer = setTimeout(() => {
    details.listNode.style.height =
      getWinHight() - details.listNode.getBoundingClientRect().top - 70 + 'px';
    clearTimeout(timer);
  }, 10);
};

/** 表格表头输入框搜索 */
const inputsc = (index, row) => {
  handleInputQuery(index, row, details.query);
  onLoad();
};

/** 表格表头时间选择 */
const timesc = (index, row) => {
  console.log(index, row);
  if (!!index) {
    index = dayjs(index).format('YYYY-MM-DD');
  }
  details.query[row.prop] = index;
  if (!index) {
    delete details.query[row.prop];
  }
  onLoad();
};

/** 表格表头输入框搜索 */
const btnsc = () => {};

/** 表格表头下拉框选择 */
const selectsc = (index, row) => {
  details.query[row.prop] = index;
  handleSelectQuery(index, row, details.query);
  onLoad();
};

/** 表格表头复选框选择 */
const selectionChange = (list: any) => {
  details.selectionList = list;
};

/** 切换tabber -- 支出费用 */
const getIncurExpenseInfo = () => {};
/** 切换tabber -- 配载信息 */
const getStowageInfo = () => {
  const _node = document.querySelector('.StowageInfo');
  _node.style.height = '400px';
  console.log('_node :>> ', _node);
};
/** 切换tabber -- 中转信息 */
const getTransferInfo = () => {};

/** 详情信息页面tabber切换时执行的回调 */
const handleTabItemClick = tab => {
  console.log('tab :>> ', tab);
  const { name } = tab.props;
  console.log('name :>> ', name);
  switch (name) {
    // 费用支出
    case 'tabItem1':
      getIncurExpenseInfo();
      break;
    // 配载信息
    case 'tabItem2':
      getStowageInfo();
      break;
    // 中转信息
    case 'tabItem3':
      getTransferInfo();
      break;
  }
};

/** 返回页面 */
const back = () => {
  $store.commit('DEL_TAG_CURRENT');
  $router.back();
};

/** 前往修改页面 */
const handleEdit = () => {
  if (!ChecksWhetherTheWarehouseIsSelected())
    return ElMessage.warning('多仓权限无法操作，请选择仓库');

  if (Number(details.query.waybillType) === 1 || details.query.orderCode) {
    // 暂存单转运单的数据

    $store.commit('DEL_ONCE_TAG', '/distribution/inventory/CreateOrder');

    $router.push({
      path: '/distribution/inventory/CreateOrder',
      query: {
        name: '改单',
        id: $route.query.id,
        type: 'edit',
        orderStatus: Number(details.query.waybillType) === 1 ? 'haveData' : 'notHaveData',
      },
    });
  } else if (Number(details.query.waybillType) === 2 && !details.query.orderCode) {
    // 零担开单的数据
    $store.commit('DEL_ONCE_TAG', '/waybill/CreateZeroOrder');

    $router.push({
      path: '/waybill/CreateZeroOrder',
      query: {
        name: '改单',
        id: $route.query.id,
        type: 'edit',
      },
    });
  }
};

/** 开启审核弹窗 */
const handleShowAudit = () => {
  if (!ChecksWhetherTheWarehouseIsSelected())
    return ElMessage.warning('多仓权限无法操作，请选择仓库');
  details.form = { waybillNo: $route.query.waybillNo, checkReson: '', checkRemark: '' };
  details.popUpShow.checkVisted = true;
};

/** 审核 */
const handleAudit = async () => {
  details.popUpShow.checkVisted = false;
  details.loadingObj.pageLoading = true;
  try {
    const res = await postCheckWaybill({
      waybillId: $route.query.id,
      checkReson: details.form.checkReson || '',
      checkRemark: details.form.checkRemark || '',
    });

    const { code, msg } = res.data;
    if (code !== 200) return;
    ElMessage.success({
      message: msg,
    });
    onLoad();
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.pageLoading = false;
  }
};

/** 请求运输合同图片列表 */
const handleFindContractList = async () => {
  try {
    details.loadingObj.pageLoading = true;

    const submitData = { waybillId: $route.query.id };
    const res = await postFindWaybillReturnList(submitData);

    const { code, data } = res.data;
    if (code !== 200) return;

    const _imgArr = [];
    for (let i = 0; i < data.length; i++) {
      const value = data[i];
      _imgArr.push(...value.url.split(','));
    }
    details.receiptImgList = _imgArr;
    console.log('_imgArr :>> ', _imgArr);
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.pageLoading = false;
  }
};

/** 打印 */
const handlePrint = async () => {
  try {
    details.loadingObj.pageLoading = true;

    const res = await postPrintBatch({
      ids: $route.query.id,
      tempId: 16,
    });

    const { code, data } = res.data;

    if (code !== 200 || !data || data.length === 0) return;
    let _html = '';

    if (getObjType(data) !== 'object') return;

    for (const key in data) {
      const element = data[key];

      for (let i = 0; i < element.length; i++) {
        const value = element[i];

        let template = value.templateHtml;

        console.log('value.templateHtml :>> ', value.templateHtml);

        template = template.replace('第n页', `第${i + 1}页`);
        template = template.replace('共n页', `共${element.length}页`);
        // template = template.replaceAll('0.00', ``);

        _html += JSON.parse(JSON.stringify(template));
      }
    }

    console.log('res :>> ', res);

    details.html = _html;

    details.popUpShow.WaybillPrintTemplate = true;
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.pageLoading = false;
  }
};

watch(
  () => $route.query,
  () => {
    onLoad();
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
$borderColor: var(--el-color-primary);
$borderType: 1px solid $borderColor;

:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
  height: 100% !important;
}

:deep(.el-form .el-input__wrapper) {
  box-shadow: none;
  border-bottom: 1px solid $borderColor;
  border-radius: 0;
}

.border-left {
  border-left: $borderType;
}

// 页面字体大小
// .avue-crud {
//   font-size: 12px !important;
// }

.form_top {
  margin-bottom: 10px;
}

.border-top {
  border-top: $borderType;
}

:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
  height: 100% !important;
}

.table-row {
  width: 100%;
  display: flex;
  // border-top: 1px solid $borderColor;
  border-left: $borderType;
  border-bottom: none;
  box-sizing: border-box;

  &:first-child {
    // display: block;
    border-top: $borderType;
    border-left: $borderType;
    margin-top: 10px;

    > div {
      width: 100%;
    }
  }

  &:last-child {
    display: block;
    border-bottom: $borderType;
    border-right: $borderType;
    box-sizing: border-box;

    > div {
      width: 100%;
      border: none;
    }
  }

  > div {
    flex: 1;
    padding: 5px;
    border-bottom: $borderType;
    border-right: $borderType;
    display: inline-flex;
    box-sizing: border-box;
  }
}

.table-row-title {
  background: #f5f7fa;
  margin-right: 10px;
  padding: 10px;

  & + div {
    flex: 1;

    :deep(.el-form-item) {
      flex: 1;
      margin-right: 10px;
    }

    :deep(.el-row) {
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.table_row_number {
  > div {
    flex-grow: 1;
    justify-content: center;
  }
}

.table_row_total {
  line-height: 32px;
  text-align: center;
  background: #efefef;
}

.flex-c {
  display: flex;
  align-items: center;
}

:deep(.el-select.m-2) {
  width: 100%;
}

:deep(.el-form-item) {
  flex: 1;
  margin: 0;
}

:deep(.el-radio) {
  margin: 0;
}

:deep(.el-form-item__error) {
  z-index: 99;
  --el-color-danger: #f00;
}

// :deep(.el-form-item.is-error .el-input__wrapper) {
//   --el-color-danger: #f00;
// }

// :deep(
//     .el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label:before,
//     .el-form-item.is-required:not(.is-no-asterisk).asterisk-left
//       > .el-form-item__label-wrap
//       > .el-form-item__label:before
//   ) {
//   --el-color-danger: #f00;
// }

// 底部
.footer {
  height: 80px;
}

// 提交按钮容器
.submitDataContainer {
  width: 80%;
  position: fixed;
  bottom: 20px;
  z-index: 999;
  text-align: center;
}

.red {
  color: var(--token-simulation-red-base-62);
}

:deep(.el-divider__text.is-center) {
  font-size: 28px;
  color: var(--el-color-danger);
}

:deep(.el-form-item__label) {
  color: var(--el-color-danger) !important;
  font-weight: bold;
}

.fwb {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: var(--el-color-danger) !important;
  position: relative;

  &::before {
    content: '';
    margin-right: 10px;
    display: block;
    width: 2px;
    height: 1rem;
    background: #f00;
  }

  .ml10 {
    margin-left: 10px;
  }
}

.receipt_img {
  border-radius: 5px;
}

// tab样式
:deep(.el-tabs__item.is-active) {
  color: var(--el-color-primary);
  font-weight: bold;
}

:deep(.el-tabs__item:hover) {
  color: var(--el-color-primary);
  font-weight: bold;
}

:deep(.el-tabs__item) {
  color: #959a9e;
  transition: all 0.3s;
}

// 禁止样式
:deep(.el-input.is-disabled .el-input__wrapper) {
  background: #fff;
}

:deep(.el-input.is-disabled .el-input__inner) {
  -webkit-text-fill-color: var(--el-color-primary) !important;
}

// 运单审核
.el-dialog-checkVisted {
  .title {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 1rem;
    color: var(--el-color-primary);

    &::before {
      content: '';
      width: 40px;
      height: 1px;
      background-color: var(--el-color-primary);
      margin-right: 10px;
    }

    &::after {
      content: '';
      flex: 1;
      height: 1px;
      background-color: var(--el-color-primary);
      margin-left: 10px;
    }
  }
}

:deep(.el-form-item) {
  &.mt20 {
    margin-top: 20px !important;
  }
}
</style>
