<template>
  <el-form
    inline
    label-width="100px"
    :model="form"
    class="form-wrap"
    ref="form">
    <div class="dialog-info">
      <el-form-item
        style="width:100%"
        verify
        label="创建方式"
        prop="type">
        <el-radio-group
          v-model="form.type">
          <el-radio label="SYSTEM_TICKET_NO">
            系统生成票号
          </el-radio>
          <el-radio label="INPUT_TICKET_NO">
            手动输入票号
          </el-radio>
          <el-radio label="PREFIX_AND_SEQ">
            标识顺序码
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        verify
        label="票种"
        prop="ticket_type_id">
        <el-select v-model="form.ticket_type_id">
          <el-option
            v-for="item in ticketTypeList"
            :key="item.id"
            :value="item.id"
            :label="item.name"></el-option>
        </el-select>
      </el-form-item>

      <template v-if="form.type==='SYSTEM_TICKET_NO'">
        <el-form-item
          verify
          key="create_number"
          label="生成数量"
          prop="create_number">
          <el-input-number
            v-model="form.create_number"
            :min="1"
            :step="1"
            :precision="0"></el-input-number>
        </el-form-item>
      </template>

      <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
              :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>
    </div>
    <div class="dialog-btn-wrap">
      <el-button
        type="primary"
        @click="$refs.form.resetFields()">
        重置
      </el-button>
      <el-button
        type="primary"
        @click="submit">
        确定
      </el-button>
    </div>
  </el-form>
</template>
<script>
import { createTicketInStock } from '@/api/ticketType'
export default {
  props: {
    ticketTypeList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      visible: false,
      qrCode: '',
      form: {
        ticket_type_id: '',
        type: 'SYSTEM_TICKET_NO',
        create_number: 1,
        prefix: '',
        seq: {
          left: '',
          right: ''
        },
        ticket_nos: []
      }
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.reset()
      }
    }
  },
  methods: {
    reset () {
      this.$refs.form.resetFields()
    },
    handleClose () {
      this.$parent.handleClose()
    },
    handleCodeAdd () {
      if (this.qrCode && this.form.ticket_nos.findIndex(v => v === this.qrCode) < 0) {
        this.form.ticket_nos.push(this.qrCode)
        this.qrCode = ''
      }
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.type === 'PREFIX_AND_SEQ' && this.form.seq.right < this.form.seq.left) {
            return this.$message.error('顺序码首末位大小请由小到大')
          }

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