<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">
      <div style="position: relative">
        <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 class="span_margin_right_10" style="margin-top: 10px">
                <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>
                <span v-if="detail && detail.virtual_service_time">{{ __('预约时间：') }}</span>
                <span v-if="detail">{{ detail.virtual_service_time }}</span>
              </div>
            </div>
            <el-table
              ref="itemTable"
              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="item_unit_points"
              />
              <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"
                :formatter="formatActivityType"
                :label="__('活动类型')"
                prop="activity_type_id"
              />
              <el-table-column
                align="center"
                :formatter="formatSync"
                :label="__('是否转单')"
                prop="order_item_supplier_sync"
              />
            </el-table>
            <div style="margin-top: 10px">
              <el-row>
                <el-col :offset="18" :span="3">
                  <span>{{ __('活动优惠：￥') }}</span>
                </el-col>
                <el-col :span="3">
                  {{ detail.order_discount_amount }}
                </el-col>
              </el-row>
              <el-row>
                <el-col :offset="18" :span="3">
                  <span>{{ __('优惠券抵扣：￥') }}</span>
                </el-col>
                <el-col :span="3">
                  {{ detail.voucher_price }}
                </el-col>
              </el-row>
              <el-row>
                <el-col :offset="18" :span="3">
                  <span>
                    <el-button
                      v-if="order_state_id === 2010"
                      circle
                      icon="el-icon-edit"
                      type="text"
                      @click="showPostageEdit()"
                    />
                    <span>{{ __('运费：￥') }}</span>
                  </span>
                </el-col>
                <el-col :span="3">
                  {{ detail.order_shipping_fee }}
                </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 }}
                </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;
                <span>{{ __('联系方式 ：') }}</span>
                <span v-if="detail.delivery">
                  +{{ detail.currency_id }}{{ detail.delivery.da_mobile }}
                </span>
                &nbsp;
                <span>{{ __('收货地址') }}:</span>
                <span>{{ shippingAddress }}</span>
              </div>
              <div v-if="modelLists.length > 0">
                <div>预约资料：</div>
                <div
                  v-for="modelDetail in modelLists"
                  :key="modelDetail.index"
                  style="display: inline-block; margin-left: 10px"
                >
                  <span>{{ __(modelDetail.key + ' ：') }}</span>
                  <span>{{ modelDetail.value }}</span>
                </div>
              </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>
                <div style="margin-top: 10px">
                  <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>
                </div>
                <div style="margin-top: 10px">
                  <span>{{ __('收货信息：') }}</span>
                  <span>{{ deliveryInfo }}</span>
                </div>
              </div>
            </div>
            <div v-show="order_detail.order_state_id === 2020">
              <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
                    :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"
                      @change="() => (tablekey = !tablekey)"
                    />
                  </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 style="margin-top: 20px" v-if="false">
                      <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 style="margin-top: 20px" v-if="false">
                      <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>
              <div style="margin-top: 10px">
                <span>{{ __('订单金额：') }}</span>
                <span
                  v-if="
                    recordData.order_payment_amount ||
                    recordData.order_payment_amount === 0
                  "
                >
                  {{
                    recordData.currency_symbol_left +
                    recordData.order_payment_amount
                  }}
                </span>
                <span>{{ __('已付款：') }}</span>
                <span>{{ recordData.currency_symbol_left + payment }}</span>
                <span>{{ __('待确认：') }}</span>
                <span
                  v-if="
                    recordData.payment_waiting_review ||
                    recordData.payment_waiting_review === 0
                  "
                >
                  {{
                    recordData.currency_symbol_left +
                    recordData.payment_waiting_review
                  }}
                </span>
                <span>{{ __('待支付：') }}</span>
                <span
                  v-if="
                    recordData.trade_payment_amount ||
                    recordData.trade_payment_amount === 0
                  "
                >
                  {{
                    recordData.currency_symbol_left +
                    recordData.trade_payment_amount
                  }}
                </span>
              </div>
              <div style="float: right">
                <el-button
                  v-if="order_detail.order_is_paid != stateCode.ORDER_PAID_STATE_YES"
                  icon="el-icon-plus"
                  @click="paymentEdit"
                >
                  {{ __('添加付款记录') }}
                </el-button>
              </div>
            </div>
            <div style="margin-top: 10px">
              <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
                  :formatter="formatRecord"
                  :label="__('状态')"
                  prop="record_enable"
                />
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div style="position: absolute; right: 10px; top: 5px">
          <el-button
            v-if="order_state_id === 2013"
            size="mini"
            type="primary"
            @click="reviewFinance"
          >
            财务审核
          </el-button>
          <el-button
            v-else-if="order_state_id === 2020 && activeName !== '2'"
            size="mini"
            type="primary"
            @click="changeTab(2)"
          >
            出库
          </el-button>
          <el-button
            v-else-if="order_state_id === 2030 && activeName !== '2'"
            size="mini"
            type="primary"
            @click="changeTab(2)"
          >
            发货
          </el-button>
          <el-button
            v-else-if="order_state_id === 2011"
            size="mini"
            type="primary"
            @click="review"
          >
            审核
          </el-button>
          <el-button
            v-else-if="order_state_id === 2010 && activeName !== '3'"
            size="mini"
            type="primary"
            @click="changeTab(3)"
          >
            添加收款记录
          </el-button>
        </div>
      </div>
    </el-scrollbar>
    <Edit ref="Edit" @fetch-data="orderRecord" />
    <Postage ref="postage" @fetch-data="getOrderDetail" />
    <Express ref="express" @fetch-data="getOrderStock" />
  </el-dialog>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import {
    getOrderDetail,
    getOrderStock,
    picking,
    review,
    reviewFinance,
  } from '@/api/order/base'
  import { orderRecord } from '@/api/consume/record'
  import { renderTime } from '@/utils/date'
  import Edit from './PaymentEdit'
  import Express from './ExpressEdit'
  import Postage from './PostageEdit'
  import {stateCode} from '@/config'

  export default {
    name: 'OnlineOrderItem',
    // eslint-disable-next-line vue/no-unused-components
    components: { Edit, Express, Postage },
    data() {
      return {
        stateCode:stateCode,
        tableConfig: {
          height: window.innerHeight - 220 - 90,
        },
        order_state_id: undefined,
        isdisabled: false,
        loading: false,
        activeName: '1',
        state_log_items: [],
        itemData: [],
        detail: {},
        order_detail: {},
        data: {}, // 订单详情数据
        modelLists: [],
        tablekey: false,
        stockData: [], // 发货出库数据
        stock_bill: [], // 出库记录
        recordData: {}, // 收款数据
        recordItemData: [],
        dialogFormVisible: 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.__('已取消/已作废'),
          },
        ],
        activityTypes: [
          { value: 1101, label: this.__('加价购') },
          { value: 1102, label: this.__('店铺满赠') },
          { value: 1103, label: this.__('限时折扣') },
          { value: 1104, label: this.__('优惠套装') },
          { value: 1105, label: this.__('店铺优惠券') },
          { value: 1106, label: this.__('砸金蛋') },
          { value: 1107, label: this.__('满减') },
          { value: 1109, label: this.__('积分换购') },
          { value: 1130, label: this.__('礼包活动') },
          { value: 1131, label: this.__('市场活动') },
          { value: 1121, label: this.__('幸运大抽奖') },
          { value: 1122, label: this.__('秒杀') },
          { value: 1123, label: this.__('拼团') },
          { value: 1124, label: this.__('砍价') },
          { value: 1125, label: this.__('一元购') },
          { value: 1126, label: this.__('团购') },
          { value: 1127, label: this.__('批发团购') },
          { value: 1132, label: this.__('组合套餐') },
          { value: 1108, label: this.__('满返') },
          { value: 1135, label: this.__('单件折') },
          { value: 1130, label: this.__('礼包活动') },
          { value: 1133, label: this.__('多件折') },
          { value: 1136, label: this.__('多倍积分') },
          { value: 1140, label: this.__('折上折') },
          { value: 5001, label: this.__('今日爆款') },
          { value: 5002, label: this.__('每日好店') },
          { value: 5003, label: this.__('限时秒杀') },
          { value: 5004, label: this.__('天天秒淘') },
          { value: 5005, label: this.__('零元购') },
          { value: 5006, 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
      },
      deliveryInfo() {
        const delivery = this.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
        )
      },
    },
    updated() {
      this.$nextTick(() => {
        this.$refs['itemTable'].doLayout()
      })
    },
    methods: {
      showPostageEdit() {
        let orderShippingFee = this.detail.order_shipping_fee
        let order_id = this.detail.order_id
        this.$refs['postage'].showEdit(order_id, orderShippingFee)
      },
      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 '出库记录'
        }
      },
      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.__('是')
      },
      formatActivityType(row) {
        let activity_type_id = row.activity_type_id
        const obj = this.activityTypes.find(
          (item) => item.value === activity_type_id
        )
        return obj ? obj.label : '无'
      },
      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 : ''
      },
      formatRecord(row) {
        return row.record_enable === 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.modelLists = []
        this.order_state_id = undefined
        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.order_state_id = data.order_state_id
            this.state_log_items = data.state_log_items
            if (data.shopOrderUserForm) {
              this.modelLists = JSON.parse(data.shopOrderUserForm.form_data)
            }
          }
        }
        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.order_state_id = data.order_detail.order_state_id
            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
            this.order_state_id = data.order_state_id
            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() {},
      async reviewFinance() {
        const { msg, status } = await reviewFinance({
          order_ids: this.data.order_id,
          order_finance_review: 1,
        })
        if (200 == status) {
          this.$baseMessage(msg, 'success')
        } else {
          this.$baseMessage(msg, 'error')
        }
        await this.updateTabData()
        this.$emit('fetch-data')
      },
      async review() {
        const { msg, status } = await review({
          order_ids: this.data.order_id,
          order_is_review: 1,
        })
        if (200 == status) {
          this.$baseMessage(msg, 'success')
        } else {
          this.$baseMessage(msg, 'error')
        }
        await this.updateTabData()
        this.$emit('fetch-data')
      },
      changeTab(activeName) {
        this.activeName = String(activeName)
        this.handleClick({
          index: String(activeName - 1),
        })
      },
      async updateTabData() {
        let activeName = this.activeName
        switch (activeName) {
          case '1':
            await this.getOrderDetail()
            break
          case '2':
            await this.getOrderStock()
            break
          case '3':
            await this.orderRecord()
            break
        }
      },
    },
  }
</script>
<style>
  .span_margin_right_10 span {
    margin-right: 10px;
  }
</style>
