<template>
  <div class="form-wrap">
    <div style="padding: 10px">
      <div class="opt-area">
        <div class="info">
          <div class="name">
            售票员：{{ adminName }}
          </div>
          <div style="margin-left: 20px">
            时间：{{ handOverTime }}
          </div>
        </div>
        <el-button
          v-if="!id"
          type="primary"
          @click="confirmHandOver"
        >
          确认交班
        </el-button>
      </div>
      <el-tabs
        v-model="activeName">
        <el-tab-pane
          name="saleStat"
          label="售票统计">
          <div class="table-box">
            <el-table
              stripe
              border
              :data="saleList">
              <el-table-column
                prop="ticketTypeName"
                label="票种"
              >
                <template slot-scope="scope">
                  {{ scope.row.ticketTypeName === '小计' ? '总计' : scope.row.ticketTypeName }}
                </template>
              </el-table-column>
              <el-table-column
                prop="unitPrice"
                label="单价">
              </el-table-column>
              <el-table-column
                prop="salePrice"
                label="售票金额">
              </el-table-column>

              <el-table-column
                prop="saleNum">
                <template
                  slot="header">
                  售票张数
                  <Tip msg="一码多人时算一张"></Tip>
                </template>
              </el-table-column>

              <el-table-column
                prop="saleCheckNum"
                label="售票人数">
                <template
                  slot="header">
                  售票人数
                  <Tip msg="一码多人时算多张"></Tip>
                </template>
              </el-table-column>

              <!-- <el-table-column
                prop="actualCheckNum"
                label="售票总人次">
                <template
                  slot="header">
                  售票总人次
                  <Tip msg="售票人数 × 票种人数"></Tip>
                </template>
              </el-table-column> -->

              <el-table-column
                prop="cancelPrice"
                label="退票金额">
              </el-table-column>

              <el-table-column
                width="100"
                prop="cancelNum"
                label="退票张数">
                <template
                  slot="header">
                  退票张数
                  <Tip msg="一码多人时算一张"></Tip>
                </template>
              </el-table-column>

              <el-table-column
                prop="cancelCheckNum"
                label="退票人数">
                <template
                  slot="header">
                  退票人数
                  <Tip msg="一码多人时算多张"></Tip>
                </template>
              </el-table-column>

              <el-table-column
                prop="actualPrice"
                label="实售金额">
              </el-table-column>
              <el-table-column
                prop="actualNum"
                label="实售张数">
              </el-table-column>
              <el-table-column
                prop="actualCheckNum"
                label="实售人数">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane
          name="printStat"
          label="收款统计">
          <div class="table-box">
            <el-table
              stripe
              border
              :data="printList">
              <el-table-column
                prop="payChannel"
                label="支付方式">
              </el-table-column>
              <el-table-column
                prop="salePrice"
                label="售票金额">
              </el-table-column>

              <el-table-column
                prop="saleNum">
                <template
                  slot="header">
                  售票张数
                  <Tip msg="一码多人时算一张"></Tip>
                </template>
              </el-table-column>

              <el-table-column
                prop="saleCheckNum"
                label="售票人数">
                <template
                  slot="header">
                  售票人数
                  <Tip msg="一码多人时算多张"></Tip>
                </template>
              </el-table-column>

              <el-table-column
                prop="actualCheckNum"
                label="售票总人次">
                <template
                  slot="header">
                  售票总人次
                  <Tip msg="售票人数 × 票种人数"></Tip>
                </template>
              </el-table-column>

              <el-table-column
                prop="cancelPrice"
                label="退票金额">
              </el-table-column>

              <el-table-column
                width="100"
                prop="cancelNum"
                label="退票张数">
                <template
                  slot="header">
                  退票张数
                  <Tip msg="一码多人时算一张"></Tip>
                </template>
              </el-table-column>

              <el-table-column
                prop="cancelCheckNum"
                label="退票人数">
                <template
                  slot="header">
                  退票人数
                  <Tip msg="一码多人时算多张"></Tip>
                </template>
              </el-table-column>

              <el-table-column
                prop="actualPrice"
                label="实售金额">
              </el-table-column>
              <el-table-column
                prop="actualNum"
                label="实售张数">
              </el-table-column>
              <el-table-column
                prop="actualCheckNum"
                label="实售人数">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { apiHandOverCurrent, apiHandOverAdd, apiHandOverDetail } from '@/api/handOver'
import { getPayStatus } from '@/utils/index'
// import ReaderInput from '@/components/ReaderInput'

export default {
  name: 'handOverReport',
  computed: {
    salesList () {
      return this.$store.state.user.salesList
    },
    saleChannel () {
      return this.$store.state.app.saleChannel
    },
    payChannelOptions () {
      return this.$store.getters.payChannelOptions
    },
    ticketTypeList () {
      return this.$store.state.app.ticketTypeList
    },
    scenicList () {
      return this.$store.state.app.scenicList
    }
  },
  components: {
    // ReaderInput
  },
  data () {
    return {
      activeName: 'saleStat',
      loading: false,
      id: '',
      adminName: '',
      handOverTime: '',
      saleList: [],
      printList: []
    }
  },
  created () {
  },
  activated () {
    const { id } = this.$route.params
    this.id = id || ''
    this.queryList()
  },
  methods: {
    getPayStatus,
    reset () {
    },
    async queryList () {
      this.loading = true
      const { id } = this
      const handler = id ? apiHandOverDetail : apiHandOverCurrent
      const params = id ? {
        id: this.id,
        pageSize: -1,
        pageNum: 1
      } : {}
      const res = await handler(params)
      if (res.data) {
        const { adminName, handOverStartTime, handOverEndTime, handOverStatistics } = res.data
        this.adminName = adminName
        this.handOverTime = `${handOverStartTime} - ${handOverEndTime}`

        try {
          const stat = JSON.parse(handOverStatistics) || {}
          console.log('handOverStatistics', stat)
          this.saleList = stat.order_sale || []
          this.printList = stat.payChannel_sale || []
        } catch (error) {
          console.error(error)
        }
      }

      this.loading = false
    },
    confirmHandOver () {
      this.$confirm('确认交班？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        apiHandOverAdd().then(res => {
          if (res.code === '200') {
            this.$message.success('操作成功')
          }

          setTimeout(() => {
            window.location.reload()
          }, 1000)
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-wrap {
  .opt-area {
    display: flex;
    justify-content: space-between;

    .info {
      display: flex;
    }
  }
}
</style>
