<template>
  <el-dialog
    title="加入黑名单"
    width="500px"
    :visible.sync="visible"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-form
      ref="blackForm"
      :model="blackForm"
      label-width="100px"
    >
      <el-form-item label="身份证号">
        <el-input v-model="blackForm.idcard" disabled></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="blackForm.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="blackForm.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="限制购票">
        <el-switch
          v-model="blackForm.restrictSale"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </el-form-item>
      <el-form-item label="限制检票">
        <el-switch
          v-model="blackForm.restrictCheck"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </el-form-item>
      <el-form-item label="原因">
        <el-input
          v-model="blackForm.reason"
          type="textarea"
          :rows="3"
          placeholder="请输入加入黑名单原因"
        ></el-input>
      </el-form-item>
      <el-form-item label="生效时间">
        <el-date-picker
          v-model="blackForm.expireTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="请选择生效时间"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button
        type="primary"
        :loading="submitting"
        @click="submit"
      >
        确认加入
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import moment from 'moment'
import { addCustomerBlack } from '@/api/customerBlack'

export default {
  name: 'BlacklistDialog',
  data () {
    return {
      visible: false,
      submitting: false,
      blackForm: {
        idcard: '',
        name: '',
        phone: '',
        restrictSale: 1,
        restrictCheck: 1,
        reason: '',
        expireTime: '',
        status: 1
      }
    }
  },
  methods: {
    /**
     * 打开弹框
     * @param {string} idcard 身份证号（自动带入）
     * @param {object} extra 可选，{ name, phone } 自动带入姓名和手机号
     */
    show (idcard, extra = {}) {
      this.blackForm = {
        idcard: idcard || '',
        name: extra.name || '',
        phone: extra.phone || '',
        restrictSale: 1,
        restrictCheck: 1,
        reason: '',
        expireTime: moment().add(10, 'years').format('YYYY-MM-DD HH:mm:ss'),
        status: 1
      }
      this.visible = true
    },
    submit () {
      this.submitting = true
      addCustomerBlack(this.blackForm).then(() => {
        this.$message.success('加入黑名单成功')
        this.visible = false
      }).finally(() => {
        this.submitting = false
      })
    }
  }
}
</script>
