<template>
  <div class="order-base-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="14">
        <el-form ref="form" :inline="true" :model="form">
          <el-form-item :label="__('可结算金额')" prop="withdraw_amount">
            <el-input
              v-model="form.withdraw_amount"
              clearable
              disabled
              style="width: 100px"
            />
          </el-form-item>
          <el-form-item :label="__('= 待结算订单总额')" prop="settle_amount">
            <el-input
              v-model="form.settle_amount"
              clearable
              disabled
              style="width: 100px"
            />
          </el-form-item>
          <el-form-item :label="__('- 待结算退款总额')" prop="refund_amount">
            <el-input
              v-model="form.refund_amount"
              clearable
              disabled
              style="width: 100px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="showType">
              {{ __('申请结算') }}
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="10">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <div class="block">
              <el-date-picker
                v-model="queryForm.order_time_range"
                align="right"
                clearable
                editable
                :end-placeholder="__('下单时间结束')"
                format="yyyy-MM-dd HH:mm:ss"
                :range-separator="__('至')"
                :start-placeholder="__('下单时间开始')"
                type="datetimerange"
              />
            </div>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              {{ __('查询') }}
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>
    <el-table
      v-loading="listLoading"
      border
      :data="list"
      :height="tableConfig.height"
    >
      <el-table-column
        align="center"
        :label="__('订单编号')"
        prop="order_id"
        show-overflow-tooltip
        width="180"
      />
      <el-table-column
        align="center"
        :formatter="formatTime"
        :label="__('下单时间')"
        prop="order_time"
        show-overflow-tooltip
        width="180"
      />

      <el-table-column
        align="center"
        :label="__('付款方式')"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <span v-if="row.payment_type_id === 1301">{{ __('货到付款') }}</span>
          <span v-if="row.payment_type_id === 1302">{{ __('在线支付') }}</span>
          <span v-if="row.payment_type_id === 1303">{{ __('白条支付') }}</span>
          <span v-if="row.payment_type_id === 1304">{{ __('现金支付') }}</span>
          <span v-if="row.payment_type_id === 1305" style="color: red">
            {{ __('线下支付') }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        :label="__('客户名称')"
        prop="buyer_user_name"
        show-overflow-tooltip
        width="100px"
      />
      <el-table-column
        align="center"
        :label="__('供应商成本')"
        prop="cost_price_total"
        show-overflow-tooltip
        width="100px"
      />
      <el-table-column
        align="center"
        :label="__('应付金额')"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          {{ row.currency_symbol_left }}{{ row.order_payment_amount }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :formatter="formatReview"
        :label="__('订单审核')"
        prop="order_is_review"
        show-overflow-tooltip
      />

      <el-table-column
        align="center"
        :formatter="formatStateId"
        :label="__('订单状态')"
        prop="order_state_id"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="__('状态时间')"
        prop="order_deal_time"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :formatter="formatPaid"
        :label="__('付款状态')"
        prop="order_is_paid"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :formatter="formatReceived"
        :label="__('收货状态')"
        prop="order_is_received"
        show-overflow-tooltip
      />
    </el-table>

    <el-pagination
      background
      :current-page="queryForm.pageNum"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <type ref="type" @fetch-data="fetchData" />
  </div>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { renderTime } from '@/utils/date'
  import { getBaseList } from '@/api/order/base'
  import type from './components/WithdrawdepositEdit'

  export default {
    name: 'OrderBase',
    components: { type },
    data() {
      return {
        tableConfig: {
          height: window.innerHeight - 220 - 90,
        },
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        form: {},
        queryForm: {
          pageNum: 1,
          pageSize: 20,
          get_settlemented: 1,
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      formatTime(row) {
        return renderTime(row.order_time)
      },
      showType() {
        this.$refs['type'].showType()
      },
      formatPaid(row) {
        return row.order_is_paid === 3010
          ? this.__('未付款')
          : row.order_is_paid === 3011
          ? this.__('付款待审核')
          : row.order_is_paid === 3012
          ? this.__('部分付款')
          : this.__('已付款')
      },
      formatReceived(row) {
        return row.order_is_received === 0
          ? this.__('未收货')
          : this.__('已收货')
      },
      formatReview(row) {
        return row.order_is_review === 0 ? this.__('未审核') : this.__('已审核')
      },
      formatStateId(row) {
        return row.order_state_id === 2011
          ? this.__('待订单审核')
          : row.order_state_id === 2013
          ? this.__('待财务审核')
          : row.order_state_id === 2020
          ? this.__('待配货/待出库审核')
          : row.order_state_id === 2030
          ? this.__('待发货')
          : row.order_state_id === 2040
          ? this.__('已发货/待收货确认')
          : row.order_state_id === 2060
          ? this.__('已完成/已签收;')
          : this.__('已取消/已作废')
      },
      __,
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNum = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNum = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        if (this.queryForm.order_time_range) {
          this.queryForm.order_time_start = this.queryForm.order_time_range[0]
          this.queryForm.order_time_end = this.queryForm.order_time_range[1]
          this.queryForm.order_time_range = undefined
        }
        const { data } = await getBaseList(this.queryForm)
        this.list = data.items
        this.form.refund_amount = data.refund_amount
        this.form.settle_amount = data.settle_amount
        this.form.withdraw_amount = data.withdraw_amount
        this.total = data.records
        this.listLoading = false
      },
    },
  }
</script>
