<template>
  <div>
    <el-form
      class="searchBox"
      ref="form"
      :model="form"
      :inline="true"
      label-width="140px"
    >
      <div class="block-title">
        查询条件
      </div>
      <el-form-item
        label="票号"
        prop="keyWords1"
      >
        <QRReader v-model="form.keyWords1"></QRReader>
      </el-form-item>
      <el-form-item
        label="票种"
        prop="keyWords2"
      >
        <el-select v-model="form.keyWords2">
          <el-option
            value=""
            label="全部"
          ></el-option>
          <el-option
            v-for="item in ticketTypeList"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="是否已激活"
        prop="keyWords3"
      >
        <el-select v-model="form.keyWords3">
          <el-option
            value=""
            label="全部"
          ></el-option>
          <el-option
            :value="1"
            label="是"
          ></el-option>
          <el-option
            :value="0"
            label="否"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="是否已导出"
        prop="keyWords4"
      >
        <el-select v-model="form.keyWords4">
          <el-option
            value=""
            label="全部"
          ></el-option>
          <el-option
            :value="1"
            label="是"
          ></el-option>
          <el-option
            :value="0"
            label="否"
          ></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
          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
          type="primary"
          @click="getData"
        >
          搜索
        </el-button>
        <el-button
          type="primary"
          @click="addStorage"
        >
          新增库存
        </el-button>
        <el-button
          type="primary"
          @click="activateTicket()"
        >
          门票激活
        </el-button>
        <el-button
          type="danger"
          @click="currentLog = {},$refs.ticketAction.show('return')"
        >
          退库
        </el-button>
        <el-button
          type="primary"
          @click="printTicket"
        >
          导出序列号
        </el-button>
      </div>
    </el-form>
    <el-table
      stripe
      border
      v-loading="loading"
      :data="tableData"
    >
      <el-table-column
        prop="ticket_type_name"
        label="票种名称"
      >
      </el-table-column>
      <el-table-column
        prop="create_number"
        label="入库数量"
      >
      </el-table-column>
      <el-table-column
        prop="min_id"
        label="起始序号"
      >
      </el-table-column>
      <el-table-column
        prop="max_id"
        label="截止序号"
      >
      </el-table-column>
      <el-table-column
        prop="creator"
        label="创建人"
      >
      </el-table-column>
      <el-table-column
        label="创建时间"
      >
        <template slot-scope="scope">
          {{ scope.row.create_time | formatTime }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="$refs.ticketsDetail.show(scope.row)"
          >
            详情
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="activateTicket(scope.row)"
          >
            激活
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="printTicket(scope.row)"
          >
            导出
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page.sync="form.pageNum"
      :page-size="10"
      layout="total, prev, pager, next"
      @current-change="getData"
      :total="total">
    </el-pagination>
    <ElDialog
      title="新增库存"
      width="800px"
      v-model="addStorageVisible">
      <AddStorage
        :ticket-type-list="ticketTypeList"
        @update="getData"
      ></AddStorage>
    </ElDialog>

    <ActivateTicket
      ref="ticketAction"
      :current-log="currentLog"
      @update="getData"
    ></ActivateTicket>

    <ElDialog
      title="导出门票序列号"
      width="660px"
      v-model="printTicketVisible">
      <PrintTicket
        :current-log="currentLog"
        @update="getData"
      ></PrintTicket>
    </ElDialog>

    <TicketsDetail ref="ticketsDetail"></TicketsDetail>
  </div>
</template>
<script>
import { getTicketInStockLog } from '@/api/ticketType'
import ElDialog from '@/components/Dialog'
import AddStorage from './addStorage'
import ActivateTicket from './activateTicket'
import PrintTicket from './printTicket'
import TicketsDetail from './recordOfStorage/TicketsDetail'

export default {
  props: {
    ticketTypeList: {
      type: Array,
      default: () => []
    }
  },
  components: {
    TicketsDetail,
    ElDialog,
    AddStorage,
    ActivateTicket,
    PrintTicket
  },
  data () {
    return {
      form: {
        keyWords1: '',
        keyWords2: '',
        keyWords3: 0, // 是否激活
        keyWords4: '', // 是否导出
        pageNum: 1,
        pageSize: 10,
        startDate: '',
        endDate: ''
      },
      loading: false,
      total: 0,
      tableData: [],
      addStorageVisible: false,
      currentLog: {},
      activateTicketVisible: false,
      printTicketVisible: false
    }
  },
  methods: {
    reset () {
      this.$refs.form.resetFields()
    },
    getData () {
      this.loading = true
      getTicketInStockLog(this.form).then(res => {
        this.tableData = res.list
        this.total = res.total
      }).finally(() => {
        this.loading = false
      })
    },
    addStorage () {
      this.addStorageVisible = true
    },
    activateTicket (item) {
      this.currentLog = item || {}

      this.$refs.ticketAction.show('active') // 激活
    },
    printTicket (item) {
      if (item.min_id && item.max_id) {
        this.currentLog = item
      } else {
        this.currentLog = {}
      }
      this.printTicketVisible = true
    }
  }
}
</script>
