<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="1000px"
    @close="handleClose">
    <el-form
      inline
      label-width="140px"
      :model="form"
      class="form-wrap"
      ref="form">
      <div class="dialog-info">
        <el-form-item
          label="票种名称"
          v-if="currentLog.ticket_type_name">
          {{ currentLog.ticket_type_name }}
        </el-form-item>
        <el-form-item
          label="创建时间"
          v-if="currentLog.create_time">
          {{ currentLog.create_time | formatTime }}
        </el-form-item>

        <el-form-item
          style="width:100%"
          verify
          label="创建方式"
          prop="type">
          <el-radio-group
            v-model="form.type">
            <el-radio label="INPUT_TICKET_NO">
              手动输入票号
            </el-radio>
            <el-radio label="PREFIX_AND_SEQ">
              标识顺序码
            </el-radio>
            <el-radio label="BATCH_TICKET_NO">
              批量导入
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          verify
          v-if="type === 'active'"
          label="游玩日期"
          prop="play_date">
          <el-date-picker
            v-model="form.play_date"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <template v-if="form.type==='INPUT_TICKET_NO'">
          <el-form-item
            key="ticket_nos"
            style="width:100%"
            verify
            label="票号"
            prop="ticket_nos">
            <div style="display:flex">
              <QRReader v-model="qrCode"></QRReader>
              <el-button
                style="margin-left:10px"
                type="primary"
                @click="handleCodeAdd">
                新增
              </el-button>
            </div>

            <div style="margin-top:5px">
              <el-tag
                style="margin-right:5px"
                :key="index"
                v-for="(item,index) in form.ticket_nos"
                closable
                @close="form.ticket_nos.splice(index,1)">
                {{ item }}
              </el-tag>
            </div>
          </el-form-item>
        </template>

        <template v-if="form.type==='PREFIX_AND_SEQ'">
          <el-form-item
            verify
            key="prefix"
            label="标识码"
            prop="prefix">
            <el-input v-model="form.prefix">
            </el-input>
          </el-form-item>

          <el-form-item
            verify
            key="seq.left"
            label="顺序码首位"
            prop="seq.left">
            <el-input-number
              v-model="form.seq.left"
              :precision="0"
              :min="0">
            </el-input-number>
          </el-form-item>
          <el-form-item
            verify
            key="seq.right"
            label="顺序码末位"
            prop="seq.right">
            <el-input-number
              v-model="form.seq.right"
              :precision="0"
              :min="0">
            </el-input-number>
          </el-form-item>
          <el-form-item
            label="总数">
            {{ Math.abs(form.seq.right-form.seq.left+1) }}
          </el-form-item>
        </template>

        <template v-if="form.type==='BATCH_TICKET_NO'">
          <el-form-item label="批量导入起始票号">
            <QRReader
              v-model="ticketRange.keyWords1"
              ref="firstCode"></QRReader>
          </el-form-item>
          <el-form-item label="批量导入截止票号">
            <QRReader
              @keyup.enter.native="handleEnter"
              v-model="ticketRange.keyWords2"
              ref="nextCode"></QRReader>
          </el-form-item>
          <el-form-item
            label=" "
            style="width:100%">
            <el-button @click="getTicketRange">
              批量导入
            </el-button>
          </el-form-item>
          <el-form-item
            label=" "
            style="width:100%">
            共{{ tableData.length }}条
            <el-table
              stripe
              border
              :data="tableData"
            >
              <el-table-column
                v-for="(col,idx) in columns"
                :key="idx"
                :prop="col.key"
                :label="col.title"
              >
                <template slot-scope="scope">
                  <span v-if="col.key==='is_active'">{{ scope.row.is_active?'已激活':'未激活' }}</span>
                  <span v-else-if="col.key==='activation_time'">{{ scope.row.activation_time | formatTime }}</span>
                  <span v-else-if="col.key==='status'">
                    <OrderStatusTag
                      :value="scope.row.status"
                      v-if="scope.row.status"></OrderStatusTag>
                  </span>
                  <span v-else>{{ scope.row[col.key] }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button @click="delItem(scope.row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </template>
      </div>
      <div class="dialog-btn-wrap">
        <el-button
          type="primary"
          @click="submit">
          确定
        </el-button>
      </div>
    </el-form>
  </el-dialog>
</template>
<script>
import { getMissionDetail, ticketInStockActivate, ticketBackToStock, getTicketInStockBySeq } from '@/api/ticketType'
import columns from './recordOfStorage/columns'
// import moment from 'moment'
import { debounce } from 'throttle-debounce'

export default {
  props: {
    currentLog: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    title () {
      return this.type === 'active' ? '门票激活' : '退 库'
    }
  },
  data () {
    return {
      visible: false,
      type: 'active',
      qrCode: '',
      ticketRange: {
        keyWords1: '',
        keyWords2: ''
      },
      tableData: [],
      columns,
      form: {
        type: 'INPUT_TICKET_NO',
        ticket_type_name: '',
        create_time: '',
        play_date: '',
        prefix: '',
        seq: {
          left: '',
          right: ''
        },
        ticket_nos: []
      }
    }
  },
  methods: {
    show (type) {
      this.type = type
      this.visible = true

      this.$nextTick(() => {
        const record = this.currentLog
        switch (record.type) {
          case 'PREFIX_AND_SEQ':
            this.form.type = 'PREFIX_AND_SEQ'
            this.form.prefix = record.prefix
            this.form.seq = {
              left: record.seq_min,
              right: record.seq_max
            }
            return console.log('标识顺序码')

          case 'INPUT_TICKET_NO':
            this.form.type = 'INPUT_TICKET_NO'
            getMissionDetail({ keyWords1: record.mission_id, pageSize: 0 }).then(res => {
              res.list.filter(i => !i.is_active).forEach(v => this.form.ticket_nos.push(v.ticket_no))
            // defaultTicketList.value = form.value.ticket_nos
            })
            return console.log('手动输入票号')

          case 'SYSTEM_TICKET_NO':
            return console.log('系统生成票号')
        }
      })
    },
    reset () {
      this.$refs.form.resetFields()
    },
    handleClose () {
      this.reset()
    },
    handleCodeAdd () {
      if (this.qrCode && this.form.ticket_nos.findIndex(v => v === this.qrCode) < 0) {
        this.form.ticket_nos.push(this.qrCode)
        this.qrCode = ''
      }
    },
    handleEnter () {
      if (!this.tableData.length) {
        this.getTicketRange()
      } else {
        this.submit()
      }
    },
    openNextCode: debounce(1000, false, function (arg) {
      if (this.ticketRange.keyWords2) return
      this.$refs.nextCode.$refs.QRReader.focus()
    }),
    async getTicketRange () {
      if (!(this.ticketRange.keyWords1 && this.ticketRange.keyWords2)) return this.$message.error('请补充查询条件')
      const { extraInfo } = await getTicketInStockBySeq(this.ticketRange)
      if (!extraInfo.length) return this.$message.error('未查询到符合的门票')
      this.tableData = extraInfo
    },
    delItem (item) {
      this.tableData = this.tableData.filter(v => v.ticket_no !== item.ticket_no)
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.type === 'BATCH_TICKET_NO') {
            if (!this.tableData.length) return this.$message.error('请补充票号')
            this.form.type = 'INPUT_TICKET_NO'
            this.form.ticket_nos = this.tableData.map(v => v.ticket_no)
          }

          const action = this.type === 'active' ? ticketInStockActivate : ticketBackToStock

          action(this.form).then(res => {
            this.$message.success('操作成功')
            this.handleClose()
            this.$emit('update')
            this.$nextTick(() => {
              this.form.ticket_nos = []
            })
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tag + .el-tag{
  margin:0
}
</style>
