<template>
  <el-dialog
    :title="title"
    top="10px"
    :visible.sync="dialogFormVisible"
    width="80%"
    @close="close"
  >
    <el-tabs type="border-card">
      <el-tab-pane :label="__('订单详情')">
        <el-row>
          <h4 class="item-title-font" style="color: red">{{ state }}</h4>
        </el-row>
        <el-row class="item-span-group">
          <label>{{ __('订单号：') }}</label>
          <span>{{ orderBase.order_id }}</span>
          <label>{{ __('客户名称：') }}</label>
          <span>{{ orderBase.buyer_user_name }}</span>
          <label>{{ __('留言：') }}</label>
          <span>{{ orderBase.order_message }}</span>
          <label>{{ __('送货时间：') }}</label>
          <span>{{ orderBase.delivery_time_text }}</span>
        </el-row>
        <el-row>
          <el-table
            border
            :data="items"
            height="300"
            show-summary
            style="width: 100%; margin-top: 20px"
            :summary-method="getSummaries"
          >
            <el-table-column :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"
            />
            <el-table-column align="center" :label="__('单位')" prop="" />
            <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="" />
          </el-table>
        </el-row>
        <el-row />
        <el-row class="item-count">
          <el-row>
            <el-col :span="20">
              <label>{{ __('活动优惠：￥') }}</label>
            </el-col>
            <el-col :span="4"><span>2</span></el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <label>{{ __('优惠券抵扣：￥') }}</label>
            </el-col>
            <el-col :span="4"><span>3</span></el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <label>{{__('运费：￥</label>
              ')}}
            </el-col>
            <el-col :span="4"><span>2</span></el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <label>{{ __('应付金额：￥') }}</label>
            </el-col>
            <el-col :span="4"><span>2</span></el-col>
          </el-row>
        </el-row>
        <el-row>
          <h4 class="item-title-font" style="color: #20222a">
            {{ __('收货信息') }}
          </h4>
          <el-divider />
        </el-row>
        <el-row class="item-span-group">
          <label>{{ __('收货人：') }}</label>
          <span>{{ address.da_name }}</span>
          <label>{{ __('联系方式：') }}</label>
          <span>{{ address.da_mobile }}</span>
          <label>{{ __('收货地址：') }}</label>
          <span>{{ address.da_address }}</span>
        </el-row>
        <el-row>
          <h4 class="item-title-font" style="color: #20222a">
            {{ __('操作日志') }}
          </h4>
          <el-divider />
        </el-row>
        <el-row>
          <el-table :data="logs" height="300">
            <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>
        </el-row>
      </el-tab-pane>
      <el-tab-pane :label="__('出库发货记录')">
        {{ __('出库发货记录') }}
      </el-tab-pane>
      <el-tab-pane :label="__('收款记录')">{{ __('收款记录') }}</el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { orderInfo } from '@/api/order/base'
  import { renderTime } from '@/utils/date'

  export default {
    name: 'PurchaseOrderItem',
    data() {
      return {
        tableConfig: {
          height: window.innerHeight - 220 - 90,
        },
        items: [],
        logs: [],
        address: {},
        orderBase: {},
        form: {},
        rules: {},
        title: '',
        dialogFormVisible: false,
        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.__('已取消/已作废'),
          },
        ],
      }
    },
    computed: {
      // eslint-disable-next-line vue/return-in-computed-property
      state() {
        let obj = this.stateOption.find(
          (item) => item.value === this.orderBase.order_state_id
        )
        if (obj) return obj.label
        return ''
      },
    },
    created() {},
    methods: {
      formatTime(row) {
        return renderTime(row.order_state_time)
      },
      // 统计
      getSummaries(param) {
        const { columns, data } = param
        const 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
      },
      __,
      showEdit(row) {
        console.log(row)
        this.orderBase = Object.assign({}, row)
        this.orderInfo(row.order_id)
        this.dialogFormVisible = true
      },
      close() {
        this.dialogFormVisible = false
      },
      save() {},
      async orderInfo(order_id) {
        if (!order_id) return
        const { data } = await orderInfo({ order_id: order_id })
        let { items, address, logs } = data
        this.items = items ? items : []
        this.logs = logs ? logs : []
        this.address = address ? address : {}
      },
    },
  }
</script>
<style>
  .item-title-font {
    font-size: 18px;
    margin-top: 10px;
    line-height: 1.1;
    font-weight: 400;
    margin-bottom: 10px;
  }
  .item-span-group span {
    margin-right: 8px;
  }
  .item-count .el-col {
    text-align: right;
  }
</style>
