<template>
  <el-form
    inline
    label-width="130px"
    :model="form"
    class="form-wrap"
    ref="form">
    <div class="dialog-info">
      <el-form-item
        verify
        style="width:100%"
        key="name"
        label="批次名称"
        prop="name">
        <el-input
          v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item
        verify
        label="票种"
        style="width:100%"
        prop="ticketTypeId">
        <el-select v-model="form.ticketTypeId">
          <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
        verify
        style="width:100%"
        key="ticketNoPrefix"
        label="票号的前缀名称"
        prop="ticketNoPrefix">
        <el-input
          v-model="form.ticketNoPrefix"
          :disabled="!isAdd"
          placeholder="只支持字母加数字"></el-input>
      </el-form-item>

      <el-form-item
        verify
        style="width:100%"
        key="ticketNoLength"
        label="票号的长度限制"
        prop="ticketNoLength">
        <el-input-number
          v-model="form.ticketNoLength"
          :disabled="!isAdd">
        </el-input-number>
      </el-form-item>

      <el-form-item
        verify
        key="ticketNoStartIndex"
        label="票号开始的字符"
        :disabled="!isAdd"
        prop="ticketNoStartIndex">
        <el-input-number
          v-model="form.ticketNoStartIndex"
          :disabled="!isAdd"
          :precision="0"
          :min="0">
        </el-input-number>
      </el-form-item>
      <el-form-item
        verify
        style="width:100%"
        key="ticketNoEndIndex"
        label="票号结束的字符"
        prop="ticketNoEndIndex">
        <el-input-number
          v-model="form.ticketNoEndIndex"
          :disabled="!isAdd"
          :precision="0"
          :min="0">
        </el-input-number>
      </el-form-item>
      <el-form-item
        style="width:100%"
        label="是否启用"
        prop="isUse">
        <el-radio-group
          v-model="form.isUse">
          <el-radio :label="1">
            正常
          </el-radio>
          <el-radio :label="0">
            禁用
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        style="width:100%"
        label="备注"
        prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"></el-input>
      </el-form-item>
      <el-form-item
        label="总数">
        {{ Math.abs(form.ticketNoEndIndex - form.ticketNoStartIndex + 1) }}
      </el-form-item>
    </div>
    <div class="dialog-btn-wrap">
      <el-button
        @click="handleClose">
        取消
      </el-button>
      <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, updateTicketInStock } from '@/api/ticketType'

export default {
  props: {
    ticketTypeList: {
      type: Array,
      default: () => []
    },
    currentLog: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      visible: false,
      qrCode: '',
      isAdd: true,
      form: {
        name: '',
        ticketTypeId: '',
        ticketNoPrefix: '',
        ticketNoLength: 10,
        ticketNoStartIndex: 1,
        ticketNoEndIndex: 999,
        isUse: 1,
        remark: ''
      }
    }
  },
  watch: {
    currentLog (val) {
      this.reset()
      if (val) {
        this.form = val
        this.isAdd = false
      }
    }
  },
  methods: {
    reset () {
      this.form = {
        name: '',
        ticketTypeId: '',
        ticketNoPrefix: '',
        ticketNoLength: 10,
        ticketNoStartIndex: 1,
        ticketNoEndIndex: 999,
        isUse: 1,
        remark: ''
      }
      this.isAdd = true
      this.$refs.form.clearValidate()
      this.$refs.form.resetFields()
    },
    handleClose () {
      this.reset()
      this.visible = false
      this.$parent.handleClose()
    },
    setItem (item) {
      this.form = item
      this.isAdd = false
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const { name, ticketNoPrefix, ticketNoLength, ticketNoStartIndex, ticketNoEndIndex } = this.form
          if (!name) {
            return this.$message.error('请填写批次名称')
          }

          if (!/^[a-zA-Z0-9]+$/.test(ticketNoPrefix)) {
            return this.$message.error('票号前缀只能是字母和数字')
          }

          if (ticketNoEndIndex < ticketNoStartIndex) {
            return this.$message.error('票号结束的字符不能小于票号开始的字符')
          }

          if (ticketNoLength < 1) {
            return this.$message.error('票号的长度限制不能小于1')
          }

          if (ticketNoStartIndex < 1) {
            return this.$message.error('票号开始的字符不能小于1')
          }

          if (`${ticketNoPrefix}${ticketNoEndIndex}` > ticketNoLength) {
            return this.$message.error('票号的长度限制不能小于票号前缀长度 + 票号截至长度')
          }

          const handler = this.form.id ? updateTicketInStock : createTicketInStock
          handler(this.form).then(res => {
            if (res.code !== '200') {
              return this.$message.error(res.msg)
            }
            this.$message.success('操作成功')
            this.handleClose()
            this.$emit('update')
          })
        }
      })
    }
  }
}
</script>
