<template>
  <el-dialog
    custom-class="center-dialog"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="80%"
    @close="close"
  >
    <el-scrollbar style="height: 600px">
    <template slot="title">
      <div style="font-weight: 400; font-size: 18px">{{ __('退单详情') }}</div>
    </template>
    <div class="span_list">
      <span>{{ __('退单号') }}：{{ data.name }}</span>
      <span>{{ __('订单号') }}：{{ data.name }}</span>
      <span>{{ __('客户名称') }}：{{ data.name }}</span>
      <span>{{ __('业务员') }}：{{ data.name }}</span>
    </div>
    <el-table
      border
      :data="tableData"
      height="300"
      show-summary
      style="width: 100%; margin-top: 20px"
      :summary-method="getSummaries"
    >
      <el-table-column :label="__('商品名称')" prop="shopOrderItem.item_name" />
      <el-table-column :label="__('单位')" prop="name" />
      <el-table-column
        :label="__('单价')"
        prop="shopOrderItem.order_item_unit_price"
      />
      <el-table-column
        :label="__('数量')"
        prop="shopOrderItem.order_item_quantity"
      />
      <el-table-column
        :label="__('金额小计')"
        prop="shopOrderItem.order_item_return_subtotal"
      />
    </el-table>
    <div style="font-weight: 400; font-size: 18px; padding-top: 50px">
      {{ __('收货信息') }}
    </div>
    <el-divider />
    <div class="span_list">
      <span>{{ __('收货人') }}：{{ data.name }}</span>
      <span>{{ __('联系方式') }}：{{ data.name }}</span>
      <span>{{ __('收货地址') }}：{{ data.name }}</span>
    </div>
    <div style="font-weight: 400; font-size: 18px; padding-top: 50px">
      {{ __('操作日志') }}
    </div>
    <el-divider />
    <el-table border :data="tableData" height="250" style="width: 100%">
      <el-table-column :label="__('操作人')" prop="date" />
      <el-table-column :label="__('时间')" prop="name" />
      <el-table-column :label="__('操作类别')" prop="address" />
      <el-table-column :label="__('操作日志')" prop="address" />
    </el-table>
    </el-scrollbar>
  </el-dialog>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { getItems } from '@/api/order/return'

  export default {
    name: 'OrderReturnItem',
    data() {
      return {
        tableData: [],
        data: {
          name: this.__('掌声风'),
        },
        rules: {},
        dialogFormVisible: false,
        title: '',
      }
    },
    created() {},
    methods: {
      // 统计申请总额
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        sums[0] = '申请总额'
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '申请总额'
            return
          }
          if (index === 3 || index === 4) {
            let values = 0
            if (index === 3) {
              values = data.map((item) => {
                const shopOrderItem = item['shopOrderItem']
                if (!shopOrderItem) return 0
                return Number(shopOrderItem['order_item_quantity'])
              })
            }
            if (index === 4) {
              values = data.map((item) => {
                const shopOrderItem = item['shopOrderItem']
                if (!shopOrderItem) return 0
                return Number(shopOrderItem['order_item_return_subtotal'])
              })
            }
            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) {
        const { data } = await getItems({ return_id: row.return_id })
        this.tableData = data
        this.data = Object.assign({}, row)
        this.dialogFormVisible = true
      },
      close() {
        this.dialogFormVisible = false
      },
    },
  }
</script>
<style>
  .span_list span {
    margin-left: 10px;
  }
</style>
