<template>
  <div class="table-box">
    <div class="user-info">
      <p class="info-item">
        <span class="info-label">
          售票员:
        </span>
        {{ userInfo.nickName }}
      </p>
      <p class="info-item">
        <span class="info-label">
          售票点:
        </span>
        {{ userInfo.ticketSpotName }}
      </p>
      <p class="info-item">
        <span class="info-label">
          上班时间:
        </span>
        {{ userInfo.hand_over_start_time | formatTime }}
      </p>
      <p class="info-item">
        <span class="info-label">
          交班时间:
        </span>
        {{ userInfo.hand_over_time | formatTime }}
      </p>
    </div>
    <el-tabs>
      <el-tab-pane
        label="售票统计">
        <el-table
          border
          stripe
          :data="ticketData"
          :row-class-name="totalRowClassName">
          <el-table-column
            prop="ticketTypeName"
            label="票种"
          >
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格"
          >
          </el-table-column>
          <el-table-column
            prop="sum_count"
            label="售票张数"
          >
          </el-table-column>
          <el-table-column
            prop="sum_people"
            label="售票人数"
          >
          </el-table-column>
          <el-table-column
            prop="sum_price"
            label="售票金额"
          >
          </el-table-column>
          <el-table-column
            prop="sum_cancel"
            label="退票数量"
          >
          </el-table-column>
          <el-table-column
            prop="cancel_people"
            label="退票人数"
          >
          </el-table-column>
          <el-table-column
            prop="cancelPrice"
            label="退票金额"
          >
          </el-table-column>
          <el-table-column
            prop="actual_count"
            label="实售张数"
          >
          </el-table-column>
          <el-table-column
            prop="actual_people"
            label="实售人数"
          >
          </el-table-column>
          <el-table-column
            prop="actual_price"
            label="实售金额"
          >
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane
        label="收款统计">
        <el-table
          border
          :data="cashData"
          :row-class-name="totalRowClassName">
          <el-table-column
            prop="payChannel"
            label="付款方式"
          >
          </el-table-column>
          <el-table-column
            prop="sum_price"
            label="收款"
          >
          </el-table-column>
          <el-table-column
            prop="cancelPrice"
            label="退款"
          >
          </el-table-column>
          <el-table-column
            prop="actual_price"
            label="实收"
          >
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane
        label="会员销售">
        <el-table
          border
          stripe
          :data="memberData"
          :row-class-name="totalRowClassName">
          <el-table-column
            prop="memberTypeName"
            label="会员类型"
          >
          </el-table-column>
          <el-table-column
            prop="sum_count"
            label="销售数量"
          >
          </el-table-column>
          <el-table-column
            prop="sum_price"
            label="销售金额"
          >
          </el-table-column>
          <el-table-column
            prop="recharge_count"
            label="充值数量"
          >
          </el-table-column>
          <el-table-column
            prop="recharge_price"
            label="充值金额"
          >
          </el-table-column>
          <el-table-column
            prop="cancel_count"
            label="结算数量"
          >
          </el-table-column>
          <el-table-column
            prop="cancelPrice"
            label="结算金额"
          >
          </el-table-column>
          <el-table-column
            prop="actual_price"
            label="实收金额"
          >
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { totalRowClassName } from '@/utils'

export default {
  props: {
    userInfo: {
      type: Object,
      default: () => {}
    },
    ticketData: {
      type: Array,
      default: () => []
    },
    cashData: {
      type: Array,
      default: () => []
    },
    memberData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    totalRowClassName,
    handleClose () {
      this.$parent.handleClose()
    }
  }
}
</script>
<style lang="scss" scoped>
.user-info {
  display: flex;
  .info-item {
    margin-right: 40px;
    .info-label {
      padding-right: 12px;
      color: #64667B;
    }
  }
}
</style>
