<template>
  <section class="layout-order-item jCenter">
    <header class="layout-order-header rowACenter">
      <div>订单号：{{item.order_sn}}</div>
      <div class="layout-order-margin">下单时间：{{item.add_time_format}}</div>
      <div class="flex-1"></div>
      <div class="layout-order-status">{{item.statusName}}</div>
    </header>
    <footer class="rowACenter layout-order-footer">
      <v-image radius="50%" :src="item.player_head_pic" class="layout-order-avatar"></v-image>
      <section class="flex-1">
        <div class="line-1 layout-order-label">{{item.player_nick_name}}</div>
        <aside class="rowACenter">
          <div>服务：{{item.game_name}}</div>
          <div class="layout-order-margin rowACenter">
            <span>{{item.price}}巧鱼币/局</span>
            <icon type="close" class="layout-order-close"></icon>
            <span>{{ item.num }}</span>
          </div>
          <div class="layout-order-margin rowACenter">
            <div>总：</div>
            <div class="layout-order-price">{{item.total_amount}}</div>
            <img src="@/assets/images/currency.png" class="layout-order-currency" />
          </div>
        </aside>
      </section>
      <aside class="layout-order-group flex rowACenter">
        <div class="layout-order-button cursor-pointer center"
          v-for="(item,index) in item.buttonGroup"
             :key="'order-button-'+index"
             :style="{
               background: item.color
             }"
             @click="triggerPayButton(item)"
        >{{item.label}}</div>
      </aside>
    </footer>
  </section>
</template>

<script>
import {
  vImage,
  icon
} from '$components';
import props from '../props';
import mixins from '../mixins';
export default {
  name: "layout-order-item",
  components:{
    icon,
    vImage
  },
  mixins,
  props
}
</script>

<style scoped lang="scss" src="../style.scss"></style>