<template>
  <div class="form-wrap">
    <el-tabs
      v-model="activeName"
    >
      <el-tab-pane
        label="预制门票管理统计"
        name="first">
        <el-form
          class="search-box"
          ref="form"
          :model="form"
          :inline="true"
          label-width="70px"
        >
          <div class="block-title">
            查询条件
          </div>
          <el-form-item
            label="售票员"
            prop="keyWords1">
            <el-select v-model="form.keyWords1">
              <el-option
                label="全部"
                value=""></el-option>
              <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="startDate"
          >
            <el-date-picker
              v-model="form.startDate"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="截止时间"
            prop="endDate"
          >
            <el-date-picker
              default-time="23:59:59"
              v-model="form.endDate"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>

          <div class="btn-wrap">
            <el-button
              @click="reset"
            >
              重置
            </el-button>
            <el-button
              :disabled="loading"
              type="primary"
              @click="getList()"
            >
              搜索
            </el-button>
          </div>
        </el-form>

        <div class="table-box">
          <div class="block-title">
            预制门票管理统计
          </div>
          <el-table
            border
            stripe
            ref="table"
            :data="tableData"
            v-loading="loading"
          >
            <el-table-column
              prop="creator"
              label="售票员"
            >
            </el-table-column>
            <el-table-column
              prop="total"
              label="总预印数量"
            >
            </el-table-column>
            <el-table-column
              prop="isFreeActiveCount"
              label="免费激活"
            >
            </el-table-column>
            <el-table-column
              prop="isBuyActiveCount"
              label="购买激活"
            >
            </el-table-column>
            <el-table-column
              prop="isPickUpActiveCount"
              label="取票激活"
            >
            </el-table-column>
            <el-table-column
              prop="isPrintActiveCount"
              label="补打印激活"
            >
            </el-table-column>
            <el-table-column
              prop="notActive"
              label="未激活"
            >
            </el-table-column>
            <el-table-column
              prop="isPrintCount"
              label="已打印"
            >
            </el-table-column>
            <el-table-column
              prop="isUsed"
              label="已核销"
            >
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane
        label="预制门票详情"
        name="second">
        <el-form
          class="search-box"
          ref="form2"
          :model="form2"
          :inline="true"
          label-width="70px"
        >
          <div class="block-title">
            查询条件
          </div>
          <el-form-item
            label="售票员"
            prop="keyWords1">
            <el-select
              v-model="form2.keyWords1"
              filterable>
              <el-option
                label="全部"
                value=""></el-option>
              <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="startDate"
          >
            <el-date-picker
              v-model="form2.startDate"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="激活截止时间"
            prop="endDate"
          >
            <el-date-picker
              default-time="23:59:59"
              v-model="form2.endDate"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="检票起始时间"
            prop="startDate1"
          >
            <el-date-picker
              v-model="form2.startDate1"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="检票截止时间"
            prop="endDate1"
          >
            <el-date-picker
              default-time="23:59:59"
              v-model="form2.endDate1"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="票种"
            prop="keyList1"
          >
            <el-select
              v-model="form2.keyList1"
              multiple
              filterable
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in ticketTypeList"
                :key="item.id"
                :value="item.id"
                :label="item.name">
              </el-option>
            </el-select>
          </el-form-item>

          <div class="btn-wrap">
            <el-button
              @click="reset"
            >
              重置
            </el-button>
            <el-button
              :disabled="loading"
              type="primary"
              @click="getList2()"
            >
              搜索
            </el-button>
            <el-button
              type="primary"
              @click="reportExport">
              导出
            </el-button>
          </div>
        </el-form>
        <div class="table-box">
          <div class="block-title">
            预制门票详情
          </div>
          <el-table
            border
            stripe
            ref="table"
            :data="tableData2"
            v-loading="loading2"
          >
            <el-table-column
              prop="ticketTypeName"
              label="票种"
            >
            </el-table-column>
            <el-table-column
              prop="active_count"
              label="激活张数"
            >
            </el-table-column>
            <el-table-column
              prop="cancel_count"
              label="退库张数"
            >
            </el-table-column>
            <el-table-column
              prop="actual_count"
              label="实际激活"
            >
            </el-table-column>
            <el-table-column
              prop="active_price"
              label="实际激活价格"
            >
            </el-table-column>
            <el-table-column
              prop="check_count"
              label="检票张数"
            >
            </el-table-column>
            <el-table-column
              prop="checkNum"
              label="检票人数"
            >
            </el-table-column>
            <el-table-column
              prop="check_price"
              label="检票价格"
            >
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { ticketInStockStatistics, ticketInStockDetailStatistics, getTicketTypeList, exportTicketInStockDetail } from '@/api/ticketType'
import moment from 'moment'

export default {
  name: 'printQuery',
  components: {
  },
  computed: {
    salesList () {
      return this.$store.state.user.salesList
    }
  },
  data () {
    return {
      projectName: process.env.VUE_APP_PROJECT,
      activeName: 'first',
      form: {
        pageNum: 1,
        pageSize: 10,
        keyWords1: '',
        startDate: new Date(moment().startOf('day').valueOf()),
        endDate: new Date(moment().endOf('day').valueOf())
      },
      form2: {
        pageNum: 1,
        pageSize: 10000,
        keyWords1: '',
        startDate: new Date(moment().startOf('day').valueOf()),
        endDate: new Date(moment().endOf('day').valueOf()),
        startDate1: '',
        endDate1: '',
        keyList1: []
      },
      ticketTypeList: [],
      tableData: [],
      tableData2: [],
      loading: false,
      loading2: false
    }
  },
  filters: {
  },
  mounted () {
    const searchParams = JSON.parse(sessionStorage.getItem('统计表-预制门票管理统计-查询条件'))
    if (searchParams) {
    // 如果存在查询条件，则设置到组件的数据中
      this.form = searchParams // 记住上次搜索条件
    }
    this.getList()
    this.getList2()
    this.getTicketTypeList()
  },
  methods: {
    reset () {
      this.$refs.form.resetFields()
      this.$refs.form2.resetFields()
    },
    getList () {
      this.loading = true
      ticketInStockStatistics(this.form).then(res => {
        this.tableData = res?.data
      }).finally(() => {
        this.loading = false
        sessionStorage.setItem('统计表-预制门票管理统计-查询条件', JSON.stringify(this.form)) // 下次记住
      })
    },
    getList2 () {
      this.loading2 = true
      ticketInStockDetailStatistics(this.form2).then(res => {
        this.tableData2 = res?.data
      }).finally(() => {
        this.loading2 = false
      })
    },
    reportExport () {
      exportTicketInStockDetail(this.form2).then(() => {
        this.$message.success('导出成功。')

        this.goToDownload()
      }, () => {
        this.$message.success('导出失败。')
      })
    },
    getTicketTypeList () {
      return getTicketTypeList({
        pageNum: 1,
        pageSize: 999
      }).then(res => {
        this.ticketTypeList = res.list
      })
    }
  }
}
</script>
