<template>
  <div class="whiteBox custom-scroll">
    <div class="whiteBox-inner">
      <div class="block-wrap">
        <h3 class="shift-title">
          售票统计表
        </h3>
        <el-form
          inline
          class="form-wrap user-info"
          label-width="100px"
        >
          <el-form-item
            label="售票员"
          >
            <span>{{ nickname }}</span>
          </el-form-item>
          <el-form-item
            label="上班时间"
          >
            <span>{{ hand_over_start_time | formatTime }}</span>
          </el-form-item>
          <el-form-item
            label="登录IP"
          >
            <span>{{ sellerDevice&&sellerDevice.ip4 }}</span>
          </el-form-item>
        </el-form>
        <el-tabs v-loading="loading">
          <el-tab-pane
            label="售票统计">
            <el-table
              border
              stripe
              :data="salesData"
              :row-class-name="totalRowClassName">
              <el-table-column
                prop="ticketTypeName"
                label="票种"
                width="160"
              >
              </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
              stripe
              :data="printData"
              :row-class-name="totalRowClassName">
              <el-table-column
                prop="ticketTypeName"
                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>
          </el-tab-pane>
          <el-tab-pane
            label="收款统计">
            <el-table
              stripe
              border
              :data="moneyData"
              :row-class-name="totalRowClassName">
              <el-table-column
                prop="payChannel"
                label="收款渠道"
                width="160"
              >
              </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
              stripe
              border
              :data="memberData"
              :row-class-name="totalRowClassName">
              <el-table-column
                prop="memberTypeName"
                label="会员类型"
                width="160"
              >
              </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>
        <br>
        <div class="btn-wrap">
          <el-form
            ref="form"
            :model="form"
            inline>
            <el-form-item
              verify
              prop="ticketSpot"
              label="选择售票点">
              <el-select v-model="form.ticketSpot">
                <el-option
                  v-for="item in ticketSpotList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-button
              type="primary"
              @click="handover"
              :disabled="disableJobSwitchFlag"
            >
              确认交班
            </el-button>

            <el-button
              type="primary"
              @click="showPosMenu">
              POS结账功能菜单
            </el-button>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { handOver, getHandOverStatistics } from '@/api/systemSetting/manager.js'
import { getTicketSpotList } from '@/api/ticketSpot'
import { totalRowClassName } from '@/utils'

import softPos from '@/utils/posUtils/softPos'
import posMixin from '@/pages/common/posMixin'

export default {
  mixins: [posMixin],
  data () {
    return {
      hand_over_start_time: '',
      ticketSpotList: [],
      salesData: [],
      moneyData: [],
      memberData: [],
      printData: [],
      form: {
        ticketSpot: ''
      },
      ipdata: {
        cip: '',
        cid: '',
        cname: ''
      },
      loading: false,
      disableJobSwitchFlag: false
    }
  },
  computed: {
    nickname () {
      return this.$store.getters.name
    }
  },
  created () {
    this.getTicketSpotList()
    this.getList()
  },
  methods: {
    totalRowClassName,
    showPosMenu () {
      softPos('0', { price: 0 }, this)
    },
    getTicketSpotList () {
      getTicketSpotList({
        pageNum: 1,
        pageSize: 10000
      }).then(res => {
        this.ticketSpotList = res.list
        this.form.ticketSpot = this.$localStore.get('ticketSpot')
      })
    },
    getList () {
      this.loading = true
      getHandOverStatistics().then(res => {
        this.salesData = res.data
        this.moneyData = res.cash_data
        this.memberData = res.member_data
        this.printData = res.ticket_print_data.data
        this.hand_over_start_time = res.hand_over_start_time
      }).finally(() => {
        this.loading = false
      })
    },
    handover () {
      this.$refs.form.validate((valid) => {
        this.disableJobSwitchFlag = true
        if (valid) {
          this.$confirm('确定交班?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
            closeOnClickModal: false
          }).then(() => {
            this.$localStore.set('ticketSpot', this.form.ticketSpot)
            handOver({
              ticket_spot_id: this.form.ticketSpot
            }).then(res => {
              this.$message({
                type: 'success',
                message: '交班成功'
              })
              this.getList()
              this.disableJobSwitchFlag = false
            })
          }).catch(cancel => { this.disableJobSwitchFlag = false })
        }
      })
    }
  },
  beforeDestroy () {
    this.killAllPosProcess()
  }
}
</script>
<style lang="scss" scoped>
.user-info {
  padding: 10px 0; color: $blue; text-align: center;
}
.shift-title {
  font-weight: normal;  text-align: center;
}

</style>
