<template>
  <div class="ticket-storage">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
    >
      <div class="block-title">
        查询条件
      </div>
      <el-form-item
        label="票号前缀"
        prop="ticketNoPrefix"
      >
        <QRReader v-model="form.ticketNoPrefix"></QRReader>
      </el-form-item>
      <el-form-item
        label="票种"
        prop="ticketTypeId"
      >
        <el-select v-model="form.ticketTypeId">
          <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="isUse"
      >
        <el-select v-model="form.isUse">
          <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="remark">
        <el-input v-model="form.remark"></el-input>
      </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>
    <div class="table-box">
      <el-table
        stripe
        border
        v-loading="loading"
        :data="tableData"
      >
        <el-table-column
          prop="ticketTypeName"
          label="票种名称"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="批次名称"
        >
        </el-table-column>
        <el-table-column
          prop="ticketNoPrefix"
          label="票号前缀"
        >
        </el-table-column>
        <el-table-column
          prop="ticketNoLength"
          label="门票票号的长度限制"
        >
        </el-table-column>
        <el-table-column
          prop="ticketNoStartIndex"
          label="起始序号"
        >
        </el-table-column>
        <el-table-column
          prop="ticketNoEndIndex"
          label="截止序号"
        >
        </el-table-column>
        <el-table-column
          prop="isUse"
          label="是否启用"
        >
          <template slot-scope="scope">
            {{ scope.row.isUse ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
        >
          <template slot-scope="scope">
            {{ scope.row.createTime | formatTime }}
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          prop="remark"></el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="editStorage(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="deleteStorage(scope.row)"
            >
              删除
            </el-button>
            <br>
            <el-button
              type="text"
              size="small"
              @click="viewTicket(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-sizes="[10, 20, 50, 100]"
        :page-size="form.pageSize"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="getData()"
        :total="total">
      </el-pagination>
    </div>
    <ElDialog
      :title="currentLog.id ? '修改登记' : '登记门票'"
      width="800px"
      v-model="addStorageVisible">
      <AddStorage
        ref="addStorage"
        :current-log="currentLog"
        :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, deleteTicketInStock } from '@/api/ticketType'
import ElDialog from '@/components/Dialog'
import { cloneDeep } from 'lodash'
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: {
        ticketNoPrefix: '',
        ticketTypeId: '',
        isUse: '', // 是否激活
        remark: '', // 批次备注
        pageNum: 1,
        pageSize: 10,
        startDate: '',
        endDate: ''
      },
      loading: false,
      total: 0,
      tableData: [],
      addStorageVisible: false,
      currentLog: {},
      activateTicketVisible: false,
      printTicketVisible: false
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    reset () {
      this.$refs.form.resetFields()
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getData()
    },
    getData () {
      this.loading = true
      getTicketInStockLog(this.form).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      }).finally(() => {
        this.loading = false
      })
    },
    addStorage () {
      this.addStorageVisible = true
    },
    editStorage (item) {
      this.currentLog = cloneDeep(item)
      this.addStorageVisible = true
    },
    deleteStorage (item) {
      this.$confirm('是否删除该记录?', '提示', {
        type: 'warning'
      }).then(() => {
        deleteTicketInStock([item.id]).then((res) => {
          if (res.code !== '200') {
            return this.$message.error(res.msg)
          }
          this.$message.success('删除成功')
          this.getData()
        })
      })
    },
    activateTicket (item) {
      this.currentLog = cloneDeep(item || {})
      this.$refs.ticketAction.show('active') // 激活
    },
    printTicket (item) {
      this.currentLog = cloneDeep(item || {})
      this.printTicketVisible = true
    },
    viewTicket (item) {
      this.currentLog = cloneDeep(item || {})
      this.$refs.ticketsDetail.show(item)
    },
    handleClose () {
      this.addStorageVisible = false
      this.activateTicketVisible = false
      this.printTicketVisible = false
      this.currentLog = {}
    }
  }
}
</script>
