<template>
  <el-dialog
    append-to-body
    custom-class="center-dialog"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="80%"
    @close="close"
  >
    <el-scrollbar style="height: 600px">
      <el-tabs
        v-model="activeName"
        v-loading="loading"
        type="border-card"
        @tab-click="handleClick"
      >
        <el-tab-pane :label="__('订单详情')" name="1">
          <div>
            <div style="color: red; font-weight: 400; font-size: 18px">
              {{ detail.order_state_name }}
            </div>
            <div>
              <span>{{ __('订单号：') }}</span>
              <span v-if="detail">{{ detail.order_id }}</span>
              <span>{{ __('客户名称：') }}</span>
              <span v-if="detail">{{ detail.buyer_user_name }}</span>
              <span>{{ __('留言：') }}</span>
              <span v-if="detail">{{ detail.order_message }}</span>
              <span>{{ __('送货时间：') }}</span>
              <span v-if="detail">{{ detail.delivery_time_name }}</span>
            </div>
          </div>
          <el-table
            border
            :data="itemData"
            height="300"
            show-summary
            style="width: 100%; margin-top: 20px"
            :summary-method="getSummaries"
          >
            <el-table-column
              height="250"
              :label="__('商品图片')"
              prop="order_item_image"
            >
              <template slot-scope="scope">
                <el-image
                  fit="fit"
                  :src="scope.row.order_item_image"
                  style="width: 35px; height: 35px"
                />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              :label="__('商品名称')"
              prop="item_name"
              show-overflow-tooltip
              width="160"
            />
            <el-table-column
              align="center"
              :label="__('单位')"
              prop="order_detail_unit_name"
            />
            <el-table-column
              align="center"
              :label="__('单价')"
              prop="order_item_unit_price"
            />
            <el-table-column
              align="center"
              :label="__('数量')"
              prop="order_item_quantity"
            />
            <el-table-column
              align="center"
              :label="__('金额小计')"
              prop="order_item_amount"
            />
            <el-table-column
              align="center"
              :label="__('活动类型')"
              prop="activity_type_id"
            />
            <el-table-column
              align="center"
              :label="__('用户是否确认')"
              prop="order_item_confirm_status"
            />
            <el-table-column
              align="center"
              :label="__('确认设计稿')"
              prop="order_detail_activity_type_name"
            />
            <el-table-column
              align="center"
              :formatter="formatSync"
              :label="__('是否转单')"
              prop="order_item_supplier_sync"
            />
          </el-table>
          <div>
            <el-row>
              <el-col :offset="18" :span="3">
                <span>{{ __('活动优惠：￥') }}</span>
              </el-col>
              <el-col :span="3"><span>{{ detail.order_discount_amount }}</span></el-col>
            </el-row>
            <el-row>
              <el-col :offset="18" :span="3">
                <span>{{ __('优惠券抵扣：￥') }}</span>
              </el-col>
              <el-col :span="3"><span>{{ detail.voucher_price }}</span></el-col>
            </el-row>
            <el-row>
              <el-col :offset="18" :span="3">
                <span>{{ __('积分抵扣：￥') }}</span>
              </el-col>
              <el-col :span="3"><span>{{ detail.order_points_fee }}</span></el-col>
            </el-row>
            <el-row>
              <el-col :offset="18" :span="3">
                <span>{{ __('运费：￥') }}</span>
              </el-col>
              <el-col :span="3"><span>{{ detail.order_shipping_fee }}</span></el-col>
            </el-row>
            <el-row>
              <el-col :offset="18" :span="3">
                <span>{{ __('应付金额：￥') }}</span>
              </el-col>
              <el-col :span="3" style="color: red">
                {{ detail.order_payment_amount }}
                <span></span>
              </el-col>
            </el-row>
          </div>
          <div>
            <div style="font-weight: 400; font-size: 18px; padding-top: 50px">
              {{ __('收货信息') }}
            </div>
            <el-divider />
            <div>
              <span>{{ __('收货人 ：') }}</span>
              <span v-if="detail.delivery">{{ detail.delivery.da_name }}</span>
              &nbsp;&nbsp;
              <span>{{ __('联系方式 ：') }}</span>
              <span v-if="detail.delivery">
                +{{ detail.currency_id }}{{ detail.delivery.da_mobile }}
              </span>
              &nbsp;&nbsp;
              <span>{{ __('收货地址') }}:</span>
              <span>{{ shippingAddress }}</span>
            </div>
          </div>
          <div>
            <div style="font-weight: 400; font-size: 18px; padding-top: 50px">
              {{ __('操作日志') }}
            </div>
            <el-divider />
            <el-table border :data="state_log_items" height="250">
              <el-table-column :label="__('操作人')" prop="user_nickname" />
              <el-table-column
                :formatter="formatTime"
                :label="__('时间')"
                prop="order_state_time"
              />
              <el-table-column
                :label="__('操作类别')"
                prop="order_state_type"
              />
              <el-table-column
                :label="__('操作日志')"
                prop="order_state_note"
              />
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="__('出库发货记录')" name="2">
          <div>
            <div
              v-if="order_detail"
              style="color: red; font-weight: 400; font-size: 18px"
            >
              {{ order_detail.order_state_name }}
            </div>
            <div>
              <span>{{ __('订单号：') }}</span>
              <span v-if="order_detail">{{ order_detail.order_id }}</span>
              <span>{{ __('客户名称：') }}</span>
              <span v-if="order_detail.delivery">
                {{ order_detail.delivery.da_name }}
              </span>
              <span>{{ __('业务员：') }}</span>
              <span v-if="order_detail">{{ data.buyer_user_name }}</span>
              <br />
              <span>{{ __('收货信息：') }}</span>
              <span>{{ deliveryInfo }}</span>
            </div>
          </div>
          <div>
            <div style="font-weight: 400; font-size: 18px; padding-top: 50px">
              {{ __('待出库商品清单') }}
            </div>
            <el-divider />
            <vab-query-form>
              <vab-query-form-right-panel :span="24">
                <el-button
                  v-show="order_detail.order_state_id === 2020"
                  :disabled="isdisabled"
                  icon="el-icon-check"
                  type="primary"
                  @click="picking()"
                >
                  {{ __('出库') }}
                </el-button>
              </vab-query-form-right-panel>
            </vab-query-form>
            <el-table border :data="stockData">
              <el-table-column type="index" width="50" />
              <el-table-column
                :label="__('主图')"
                prop="order_item_image"
                width="70"
              >
                <template slot-scope="scope">
                  <el-image
                    fit="fit"
                    :src="scope.row.order_item_image"
                    style="width: 35px; height: 35px"
                  />
                </template>
              </el-table-column>
              <el-table-column
                :label="__('商品名称')"
                prop="item_name"
                show-overflow-tooltip
                width="500"
              />
              <el-table-column
                :label="__('单位')"
                prop="unit_name"
                width="100"
              />
              <el-table-column
                :label="__('库存数量（默认仓库）')"
                prop="warehouse_item_quantity"
                width="200"
              />
              <el-table-column
                :label="__('订购数')"
                prop="order_item_quantity"
                width="100"
              />
              <el-table-column
                :label="__('已出库数')"
                prop="out_of_warehouse_num"
                width="100"
              />
              <el-table-column
                :label="__('本次出库数')"
                prop="not_out_of_warehouse_num"
                width="200"
              >
                <template slot-scope="scope">
                  <el-input-number
                    :key="tablekey"
                    v-model="scope.row.not_out_of_warehouse_num"
                    controls-position="right"
                    :max="
                      scope.row.order_item_quantity -
                      scope.row.out_of_warehouse_num -
                      scope.row.order_item_return_agree_num
                    "
                    :min="0"
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="height: 600px">
            <el-scrollbar style="height: 100%">
              <div v-for="(stock, i) in stock_bill" :key="i">
                <div
                  style="font-weight: 400; font-size: 18px; padding-top: 50px"
                >
                  {{ getTitleName(stock) }}
                </div>
                <el-divider />
                <vab-query-form>
                  <vab-query-form-right-panel :span="24">
                    <el-button
                      v-if="
                        !(
                          stock.logistics.order_logistics_id &&
                          stock.logistics.logistics_enable
                        )
                      "
                      type="primary"
                      @click="showExpressEdit(stock)"
                    >
                      {{ __('快递发货') }}
                    </el-button>
                    <el-button
                      v-if="
                        false &&
                        !(
                          stock.logistics.order_logistics_id &&
                          stock.logistics.logistics_enable
                        )
                      "
                      type="primary"
                      @click="picking()"
                    >
                      {{ __('骑手派送') }}
                    </el-button>
                    <el-button
                      v-if="
                        stock.logistics.order_logistics_id &&
                        stock.logistics.logistics_enable
                      "
                      type="primary"
                      @click="showExpressEdit(stock)"
                    >
                      {{ __('修改物流') }}
                    </el-button>
                  </vab-query-form-right-panel>
                </vab-query-form>
                <el-table border :data="stock.items">
                  <el-table-column type="index" width="50" />
                  <el-table-column
                    :label="__('主图')"
                    prop="order_item_image"
                    width="70"
                  >
                    <template slot-scope="scope">
                      <el-image
                        fit="fit"
                        :src="scope.row.order_item_image"
                        style="width: 35px; height: 35px"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    :label="__('商品名称')"
                    prop="item_name"
                    show-overflow-tooltip
                    width="500"
                  />
                  <el-table-column
                    :label="__('单位')"
                    prop="unit_name"
                    width="100"
                  />
                  <el-table-column
                    :label="__('本次出库数')"
                    prop="bill_item_quantity"
                    width="100"
                  />
                  <el-table-column
                    :label="__('出库小计')"
                    prop="bill_item_quantity"
                    width="100"
                  />
                </el-table>
                <div v-if="isRetrieval(stock)">
                  <el-row style="margin-top: 20px">
                    <el-col :span="4">{{ __('出库信息') }}</el-col>
                    <el-col :span="4">
                      {{ __('出库编号') }}:{{ stock.stock_bill_id }}
                    </el-col>
                    <el-col :span="6">
                      出库时间:{{ stock.stock_bill_time }}
                    </el-col>
                    <el-col :span="2">
                      {{ __('出库数量') }}:{{ stock.item_quantity }}
                    </el-col>
                    <el-col :span="4">
                      {{ __('出库仓库') }}:{{ stock.warehouse_name }}
                    </el-col>
                  </el-row>
                </div>
                <div v-else>
                  <el-row v-if="false" style="margin-top: 20px">
                    <el-col :span="4">{{ __('状态') }}</el-col>
                    <el-col :span="20">
                      <div v-if="stock.logistics.logistics_enable">
                        {{ __('待签收') }}
                      </div>
                      <div v-else>
                        {{ __('已作废') }}
                      </div>
                    </el-col>
                  </el-row>
                  <el-row v-if="false" style="margin-top: 20px">
                    <el-col :span="4">{{ __('备注') }}</el-col>
                    <el-col :span="20">
                      <div v-text="stock.logistics.logistics_explain"></div>
                    </el-col>
                  </el-row>
                  <el-row style="margin-top: 20px">
                    <el-col :span="4">{{ __('出库信息') }}</el-col>
                    <el-col :span="4">
                      {{ __('出库编号') }}:{{ stock.stock_bill_id }}
                    </el-col>
                    <el-col :span="6">
                      出库时间:{{ stock.stock_bill_time }}
                    </el-col>
                    <el-col :span="2">
                      {{ __('出库数量') }}:{{ stock.item_quantity }}
                    </el-col>
                    <el-col :span="4">
                      {{ __('出库仓库') }}:{{ stock.warehouse_name }}
                    </el-col>
                  </el-row>
                  <el-row style="margin-top: 20px">
                    <el-col :span="4">{{ __('物流信息') }}</el-col>
                    <el-col :span="6">
                      {{ __('发货日期') }}:{{ stock.logistics.logistics_time }}
                    </el-col>
                    <el-col :span="4">
                      {{ __('物流公司') }}:{{ stock.logistics.logistics_name }}
                    </el-col>
                    <el-col :span="4">
                      {{ __('物流单号') }}:{{
                        stock.logistics.order_tracking_number
                      }}
                    </el-col>
                    <el-col :span="6">
                      {{ __('物流备注') }}:{{
                        stock.logistics.logistics_explain
                      }}
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="__('收款记录')" name="3">
          <div>
            <span style="font-weight: 400; font-size: 18px">
              {{ data.order_id }}
            </span>
            <br />
            <span>{{ __('订单金额：') }}</span>

            <span
              v-if="
                recordData.order_payment_amount ||
                recordData.order_payment_amount === 0
              "
            >
              {{ recordData.order_payment_amount }}
            </span>
            <span v-if="recordData.currency_symbol_left">
              {{ recordData.currency_symbol_left }}
            </span>
            <span>{{ __('已付款：') }}</span>
            <span>{{ payment }}</span>
            <span v-if="recordData.currency_symbol_left">
              {{ recordData.currency_symbol_left }}
            </span>
            <span>{{ __('待确认：') }}</span>

            <span
              v-if="
                recordData.payment_waiting_review ||
                recordData.payment_waiting_review === 0
              "
            >
              {{ recordData.payment_waiting_review }}
            </span>
            <span v-if="recordData.currency_symbol_left">
              {{ recordData.currency_symbol_left }}
            </span>
            <span>{{ __('待支付：') }}</span>

            <span
              v-if="
                recordData.trade_payment_amount ||
                recordData.trade_payment_amount === 0
              "
            >
              {{ recordData.trade_payment_amount }}
            </span>
            <span v-if="recordData.currency_symbol_left">
              {{ recordData.currency_symbol_left }}
            </span>
            <div style="float: right">
              <el-button icon="el-icon-plus" @click="paymentEdit">
                {{ __('添加付款记录') }}
              </el-button>
            </div>
          </div>
          <el-table border :data="recordItemData" style="width: 100%">
            <el-table-column
              :label="__('支付流水号')"
              prop="consume_record_id"
            />
            <el-table-column :label="__('时间')" prop="record_time" />
            <el-table-column :label="__('金额')" prop="record_money" />
            <el-table-column :label="__('佣金')" prop="record_commission_fee" />
            <el-table-column
              :formatter="formatPaymentMet"
              :label="__('支付方式')"
              prop="payment_met_id"
            />
            <el-table-column
              :label="__('收款账户')"
              prop="payment_channel_name"
            />
            <el-table-column :label="__('状态')" prop="record_enable" />
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <div style="position: absolute; right: 10px; top: 7px">
        <el-button size="small" type="primary" @click="Print('itemTable')">
          {{ __('打印') }}
        </el-button>
      </div>
    </el-scrollbar>

    <div v-show="child" ref="itemTable">
      <div>
        <div
          class="order-summary"
          style="margin-top: 10px"
        >
          <table class="t1">
            <colgroup>
              <col width="74" />
              <col width="160" />
              <col width="152" />
              <col width="212" />
              <col width="85" />
              <col width="62" />
              <col width="64" />
              <col width="75" />
              <col width="87" />
              <col width="56" />
            </colgroup>
            <tbody>
              <tr class="r1">
                <td class="c1" colspan="10">{{ __('订单') }}</td>
              </tr>
              <tr class="r2">
                <td class="c2">{{ __('订单编号') }}</td>
                <td class="c2">{{ detail.order_id }}</td>
                <td class="c2">{{ __('下单日期') }}</td>
                <td class="c2">{{ ordertime }}</td>
                <td class="c2" colspan="2">{{ __('预交货日期') }}</td>
                <td class="c2" colspan="4">{{ detail.delivery_time_name }}</td>
              </tr>
              <tr class="r2">
                <td class="c2">{{ __('客户名称') }}</td>
                <td class="c2" colspan="3">{{ detail.buyer_user_name }}</td>
                <td class="c2" colspan="2">{{ __('联系人') }}</td>
                <td class="c2" colspan="4">{{ detail.delivery.da_name }}</td>
              </tr>
              <tr class="r2">
                <td class="c2">{{ __('收货地址') }}</td>
                <td class="c2" colspan="3">{{ shippingAddress }}</td>
                <td class="c2" colspan="2">{{ __('联系电话') }}</td>
                <td class="c2" colspan="4">{{ detail.delivery.da_mobile }}</td>
              </tr>
              <tr class="r3">
                <td class="c3" colspan="10">{{ __('商品明细') }}</td>
              </tr>
              <tr class="r2">
                <td class="c2">{{ __('序号') }}</td>
                <td class="c2">{{ __('属性编号') }}</td>
                <td class="c2" colspan="3">{{ __('商品名称') }}</td>
                <td class="c2">{{ __('单价') }}</td>
                <td class="c2">{{ __('数量') }}</td>
                <td class="c2">{{ __('计量单位') }}</td>
                <td class="c2">{{ __('金额小计') }}</td>
                <td class="c2">{{ __('备注') }}</td>
              </tr>
              <tr v-for="(item, index) in itemData" :key="index" class="r2">
                <td class="c4">{{ index + 1 }}</td>
                <td class="c2"></td>
                <td class="c2" colspan="3">{{ item.item_name }}</td>
                <td class="c4">{{ item.item_unit_price }}</td>
                <td class="c4">{{ item.order_item_quantity }}</td>
                <td class="c2"></td>
                <td class="c4">{{ item.bill_item_subtotal }}</td>
                <td class="c2">&nbsp;</td>
              </tr>

              <tr class="r2">
                <td class="c5" colspan="5">{{ __('活动优惠：') }}{{detail.order_discount_amount}}</td>
                <td class="c2">&nbsp;</td>
                <td class="c2">&nbsp;</td>
                <td class="c2">&nbsp;</td>
                <td class="c4">&nbsp;</td>
                <td class="c4">&nbsp;</td>
              </tr>

              <tr class="r2">
                <td class="c5" colspan="5">{{ __('订单运费：') }}{{detail.order_shipping_fee}}</td>
                <td class="c2">&nbsp;</td>
                <td class="c2">&nbsp;</td>
                <td class="c2">&nbsp;</td>
                <td class="c4"></td>
                <td class="c4">&nbsp;</td>
              </tr>
              <tr class="r2">
                <td class="c5" colspan="5">{{ __('优惠券抵扣：') }}{{ detail.voucher_price }}</td>
                <td class="c2">&nbsp;</td>
                <td class="c2">&nbsp;</td>
                <td class="c2">&nbsp;</td>
                <td class="c4"></td>
                <td class="c4">&nbsp;</td>
              </tr>
              <tr class="r2">
                <td class="c5" colspan="5">{{ __('积分抵扣：') }}{{ detail.order_points_fee }}</td>
                <td class="c2">&nbsp;</td>
                <td class="c2">&nbsp;</td>
                <td class="c2">&nbsp;</td>
                <td class="c4">&nbsp;</td>
                <td class="c4">&nbsp;</td>
              </tr>
              <tr class="r2">
                <td class="c5" colspan="5">
                  {{ __('合计:')
                  }}{{ detail.order_payment_amount }}
                </td>
                <td class="c2">&nbsp;</td>
                <td class="c4"></td>
                <td class="c4"></td>
                <td class="c4"></td>
                <td class="c2">&nbsp;</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <Edit ref="Edit" @fetch-data="orderRecord" />
    <Express ref="express" @fetch-data="getOrderStock" />
  </el-dialog>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { getOrderDetail, getOrderStock, picking } from '@/api/order/base'
  import { orderRecord } from '@/api/consume/record'
  import { renderTime } from '@/utils/date'
  import Edit from './PaymentEdit'
  import Express from './ExpressEdit'
  import VabPrint from '@/extra/VabPrint'
  import { mapActions } from 'vuex'
  import { thirteenBitTimestamp } from '@/utils/index'

  export default {
    name: 'OnlineOrderItem',
    // eslint-disable-next-line vue/no-unused-components
    components: { Edit, Express },
    data() {
      return {
        tableConfig: {
          height: window.innerHeight - 220 - 90,
        },
        isdisabled: false,
        loading: false,
        activeName: '1',
        state_log_items: [],
        itemData: [],
        detail: {},
        order_detail: {},
        data: {}, // 订单详情数据
        stockData: [], // 发货出库数据
        stock_bill: [], // 出库记录
        recordData: {}, // 收款数据
        recordItemData: [],
        dialogFormVisible: false,
        child: false,
        title: '',
        stateOption: [
          {
            value: 2011,
            label: this.__('待订单审核'),
          },
          {
            value: 2013,
            label: this.__('待财务审核'),
          },
          {
            value: 2020,
            label: this.__('待配货/待出库审核'),
          },
          {
            value: 2030,
            label: this.__('待发货'),
          },
          {
            value: 2040,
            label: this.__('已发货/待收货确认'),
          },
          {
            value: 2060,
            label: this.__('已完成/已签收'),
          },
          {
            value: 2070,
            label: this.__('已取消/已作废'),
          },
        ],
        paymentMets: [
          {
            value: 1,
            label: this.__('余额支付'),
          },
          {
            value: 2,
            label: this.__('充值卡支付'),
          },
          {
            value: 3,
            label: this.__('积分支付'),
          },
          {
            value: 4,
            label: this.__('信用支付'),
          },
          {
            value: 5,
            label: this.__('红包支付'),
          },
          {
            value: 6,
            label: this.__('线下支付'),
          },
          {
            value: 7,
            label: this.__('众宝支付'),
          },
        ],
      }
    },
    computed: {
      orderState() {
        const obj = this.stateOption.find(
          (item) => item.value === this.data.order_state_id
        )
        return obj ? obj.label : ''
      },
      shippingAddress() {
        const delivery = this.detail.delivery
        if (!delivery) return ''

        let daProvince = delivery.da_province
        let daCity = delivery.da_city
        let daCounty = delivery.da_county
        let daAddress = delivery.da_address
        return daProvince + '/' + daCity + '/' + daCounty + ' ' + daAddress
      },
      ordertime() {
        return thirteenBitTimestamp(this.detail.order_time)
      },
      deliveryInfo() {
        const delivery = this.order_detail.delivery
        if (!delivery) return ''

        let daName = delivery.da_name
        let daIntl = delivery.da_intl
        let da_mobile = delivery.da_mobile
        let daProvince = delivery.da_province
        let daCity = delivery.da_city
        let daCounty = delivery.da_county
        let daAddress = delivery.da_address
        return (
          daName +
          ', ' +
          daIntl +
          da_mobile +
          ', ' +
          daProvince +
          '/' +
          daCity +
          '/' +
          daCounty +
          ' ' +
          daAddress
        )
      },
      payment() {
        let recordData = this.recordData
        if (!recordData) return 0
        let tradePaymentMoney = recordData.trade_payment_money
        let trade_payment_recharge_card = recordData.trade_payment_recharge_card
        let trade_payment_points = recordData.trade_payment_points
        let trade_payment_credit = recordData.trade_payment_credit
        let trade_payment_redpack = recordData.trade_payment_redpack
        return (
          tradePaymentMoney +
          trade_payment_recharge_card +
          trade_payment_points +
          trade_payment_credit +
          trade_payment_redpack
        )
      },
    },
    created() {},
    methods: {
      ...mapActions({
        openSideBar: 'settings/openSideBar',
        foldSideBar: 'settings/foldSideBar',
      }),
      async Print(val) {
        this.child = true
        await this.foldSideBar()
        await VabPrint(this.$refs[val], { noPrintParent: true })
        await this.openSideBar()
        this.child = false
      },

      isRetrieval(data) {
        return !(
          data.logistics.order_logistics_id && data.logistics.logistics_enable
        )
      },
      getTitleName(data) {
        if (data.logistics.logistics_enable === 1) {
          return '发货记录'
        } else if (
          data.logistics.order_logistics_id &&
          data.logistics.logistics_enable === 0
        ) {
          return '已作废记录'
        } else {
          return '出库记录'
        }
      },
      formatPaymentMet(row) {
        let payment_met_id = row.payment_met_id
        const obj = this.paymentMets.find(
          (item) => item.value === payment_met_id
        )
        return obj ? obj.label : ''
      },
      paymentEdit() {
        let obj = {
          order_id: this.recordData.order_id,
          deposit_total_fee: this.recordData.trade_payment_amount,
        }
        this.$refs['Edit'].showEdit(obj)
      },
      async updateState() {
        this.activeName = '3'
        await this.orderRecord()
      },
      formatTime(row) {
        return renderTime(row.order_state_time)
      },
      formatSync(row) {
        return row.order_item_supplier_sync === 0
          ? this.__('否')
          : this.__('是')
      },
      // 统计
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        if (!data) return sums

        columns.forEach((column, index) => {
          if (index === 1) {
            sums[index] = '合计'
            return
          }
          if (index === 6 || index === 5) {
            const values = data.map((item) => Number(item[column.property]))
            if (!values.every((value) => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr)
                if (!isNaN(value)) {
                  return prev + curr
                } else {
                  return prev
                }
              }, 0)
            }
          }
        })
        return sums
      },
      __,
      async showEdit(row) {
        this.dialogFormVisible = true
        this.clearData()
        this.data = row
        await this.getOrderDetail()
      },
      close() {
        this.dialogFormVisible = false
        this.activeName = '1'
      },
      showExpressEdit(row) {
        if (row && Object.keys(row.logistics).length > 0) {
          this.$refs['express'].showEdit(row.logistics)
        } else {
          let obj = {
            order_id: row.order_id,
            stock_bill_id: row.stock_bill_id,
          }
          this.$refs['express'].showEdit(obj)
        }
      },
      // tab 切换事件
      async handleClick(tab, event) {
        let index = tab.index
        switch (index) {
          case '0':
            await this.getOrderDetail()
            break
          case '1':
            await this.getOrderStock()
            break
          case '2':
            await this.orderRecord()
            break
        }
      },
      // 订单详情
      async getOrderDetail() {
        this.loading = true
        const order_id = this.data.order_id
        if (order_id) {
          const { data } = await getOrderDetail({ order_id: order_id })
          if (data) {
            this.detail = data
            this.itemData = data.items
            this.state_log_items = data.state_log_items

          }
        }
        this.loading = false
      },
      // 出库发货
      async getOrderStock() {
        this.loading = true
        const order_id = this.data.order_id
        if (order_id) {
          const { data } = await getOrderStock({ order_id: order_id })
          if (data && data.order_detail) {
            this.order_detail = data.order_detail
            this.initBillItemQuantity(data.order_detail.items)
          }
          if (data && data.stock_bill) {
            this.stock_bill = data.stock_bill
          }
        }
        this.loading = false
      },
      initBillItemQuantity(items) {
        if (items.length > 0) {
          items.forEach((item) => {
            item.bill_item_quantity =
              item.order_item_quantity - item.out_of_warehouse_num
          })
          this.stockData = items
        }
      },
      // 收款记录
      async orderRecord() {
        this.loading = true
        const order_id = this.data.order_id
        if (order_id) {
          const { data } = await orderRecord({ order_id: order_id })
          if (data) {
            this.recordData = data
            if (data.items) {
              this.recordItemData = data.items
            }
          }
        }
        this.loading = false
      },
      clearData() {
        this.itemData = []
        this.detail = {}
        this.data = {} // 订单详情数据
        this.stockData = [] // 发货出库数据
        this.recordData = {} // 收款数据
        this.state_log_items = []
        this.recordItemData = []
        this.stock_bill = []
      },
      async picking() {
        this.isdisabled = true
        const { msg, status } = await picking(this.getPickingParams())
        if (200 == status) {
          this.$baseMessage(msg, 'success')
        } else {
          this.$baseMessage(msg, 'error')
        }
        this.isdisabled = false
        await this.getOrderStock()
      },
      getPickingParams() {
        let items = []
        this.stockData.forEach((stock) => {
          let item = {
            item_id: stock.item_id,
            order_item_id: stock.order_item_id,
            bill_item_quantity: stock.not_out_of_warehouse_num,
            order_item_unit_price: stock.order_item_unit_price,
          }
          items.push(item)
        })
        let obj = {
          bill_type_id: 2700,
          warehouse_id: 0,
          stock_transport_type_id: 2751,
          order_id: this.data.order_id,
          all_item_is_out: this.allItemIsOut(),
          items: JSON.stringify(items),
        }
        return obj
      },
      allItemIsOut() {},
    },
  }
</script>

<style lang="scss" scoped>
  .order-summary {
    span {
      margin-right: 20px;
    }
  }

  .b1 {
    text-align: center;
    white-space-collapsing: preserve;
  }

  .t1 {
    border-collapse: collapse;
    border-spacing: 0;
  }

  .r1 {
    height: 37.5pt;
  }

  .r2 {
    height: 25.5pt;
  }

  .r3 {
    height: 40.5pt;
  }

  .c1 {
    white-space: pre-wrap;
    text-align: center;
    background-color: silver;
    border-top: thin solid;
    border-right: thin solid;
    border-bottom: thin solid;
    border-left: thin solid;
    font-weight: bold;
    color: black;
    font-size: 20pt;
  }

  .c2 {
    white-space: pre-wrap;
    text-align: center;
    border-top: thin solid;
    border-right: thin solid;
    border-bottom: thin solid;
    border-left: thin solid;
    color: black;
    font-size: 11pt;
  }

  .c3 {
    white-space: pre-wrap;
    text-align: center;
    background-color: silver;
    border-top: thin solid;
    border-right: thin solid;
    border-bottom: thin solid;
    border-left: thin solid;
    color: black;
    font-size: 18pt;
    right: 0;
  }

  .c4 {
    white-space: pre-wrap;
    border-top: thin solid;
    border-right: thin solid;
    border-bottom: thin solid;
    border-left: thin solid;
    color: black;
    background-color: white;
    font-size: 11pt;
  }

  .c5 {
    white-space: pre-wrap;
    text-align: left;
    border-top: thin solid;
    border-right: thin solid;
    border-bottom: thin solid;
    border-left: thin solid;
    color: black;
    font-size: 11pt;
  }
</style>
