<template>
  <div>
    <el-form
      class="search-box"
      inline>
      <div class="block-title">
        查询条件
      </div>
      <el-form-item
        label="售票员"
        prop="keyList7">
        <el-select
          multiple
          filterable
          v-model="form.keyList7">
          <el-option
            v-for="item in salesList"
            :key="item.id"
            :label="item.nickName"
            :value="item.nickName">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="景点选择"
        prop="keyWords4"
      >
        <el-select
          v-model="form.keyWords4"
          placeholder="请选择">
          <el-option
            value=""
            label="全部">
          </el-option>
          <el-option
            v-for="item in userScenic"
            :key="item.id"
            :value="item.id"
            :label="item.name">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="售票时间">
        <el-date-picker
          type="datetime"
          v-model="form.startDate"
          placeholder="选择日期时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="至">
        <el-date-picker
          default-time="23:59:59"
          type="datetime"
          v-model="form.endDate"
          placeholder="选择日期时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="交班时间">
        <el-date-picker
          type="datetime"
          v-model="form.startDate1"
          placeholder="选择日期时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="至">
        <el-date-picker
          default-time="23:59:59"
          type="datetime"
          v-model="form.endDate1"
          placeholder="选择日期时间"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="添加取票统计">
        <el-switch
          v-model="form.keyWords13"
          :active-value="1"
          :inactive-value="0">
        </el-switch>
      </el-form-item>

      <div class="btn-wrap">
        <el-button
          :disabled="app.loading"
          type="primary"
          @click="getData"
        >
          查询
        </el-button>
        <el-button
          :disabled="app.loading"
          type="primary"
          @click="reportExport">
          导出
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import moment from 'moment'
import VueScrollTo from 'vue-scrollto'
import { exportSaleStatisticsByTicketSpot } from '@/api/queryReport'
import { getHandOverBySpotTicketType } from '@/api/systemSetting/manager'
import groupBy from 'lodash/groupBy'
export default {
  created () {
    this.getData()
  },
  computed: {
    salesList () {
      return this.$store.state.user.salesList
    },
    allScenicList () {
      return this.$store.state.app.scenicList
    },
    userScenic () {
      return this.$store.state.app.account.managerScenicMatrix ? this.$store.state.app.account.managerScenicMatrix : this.$store.state.app.scenicList
    }
  },
  inject: ['app'],
  data () {
    return {
      form: {
        startDate: new Date(moment().format('YYYY-MM-DD') + ' 00:00:00'),
        endDate: new Date(moment().format('YYYY-MM-DD') + ' 23:59:59'),
        startDate1: '',
        endDate1: '',
        keyWords2: '', // 售票员名称
        keyWords3: '', //
        keyWords4: '', // 景点选择
        keyWords13: 0, // 是否添加取票统计
        keyList7: [] // 售票员列表
      },
      tableData: [],
      financialData: [],
      ticketSpotData: [],
      cashData: []
    }
  },
  methods: {
    reportExport () {
      exportSaleStatisticsByTicketSpot(this.form).then(() => {
        this.$message.success('导出成功。')
        this.goToDownload()
      }, () => {
        this.$message.success('导出失败。')
      })
    },
    getData () {
      this.app.loading = true
      this.colunmSpan0 = null

      getHandOverBySpotTicketType(this.form).then(res => {
        this.app.tableData = res.data.filter((item) => item.ticket_spot_name !== '总计')
        this.app.financialData = res.total_data
        this.app.ticketSpotData = res.ticket_spot_data

        this.app.cashData = this.getCashData(res.cash_data, res.pay_channel_list)
        this.app.channelList = res.pay_channel_list

        // 第一次进入页面不滚动
        if (this.firstTimeIn) {
          this.firstTimeIn = false
          return
        }
        this.$nextTick(() => {
          VueScrollTo.scrollTo('#table-box', 1000, { container: '.app-main .el-scrollbar__wrap' })
        })
      }).finally(() => {
        this.app.loading = false
      })
    },
    getCashData (data, payChannel) {
      const groupData = groupBy(data.filter((item) => item.ticket_spot_name && item.ticket_spot_name !== '小计' && item.manager_name !== '小计'), data => {
        return data.ticket_spot_id + '_' + data.managerId
      })

      const keys = Object.keys(groupData)

      const tableData = []
      keys.forEach(key => {
        const item = { id: key, ...groupData[key][0] }

        payChannel.forEach(payName => {
          item[payName] = 0
        })
        groupData[key].forEach(i => {
          item[i.payChannel] = i.actual_price
        })

        tableData.push(item)
      })

      const totalRow = data[data.length - 1]
      totalRow.ticket_spot_name = '总计'

      payChannel.forEach(payName => {
        const payTotal = data.find(i => i.ticket_spot_name === '小计' && i.payChannel === payName)
        totalRow[payName] = payTotal?.actual_price || 0
      })

      tableData.push(totalRow)

      return tableData
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
