<template>
  <div v-loading="loading">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="时间类型" prop="type">
        <el-radio-group v-model="ruleForm.type" size="medium">
          <el-radio border label="1">天</el-radio>
          <el-radio border label="2">小时</el-radio>
          <el-radio border label="3">分钟</el-radio>
          <el-radio border label="4">永久</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="拉黑时长" prop="num">
        <el-slider v-model="ruleForm.num" :step="1" show-input/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addBlack } from '@/api/callScreen/callScreen'

export default {
  name: 'AddOrCelBlack',
  props: {
    rowid: {
      type: String,
      default: ''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ruleForm: {
        phone: '', //	是	string	电话号码
        type: '2', //	是	int	类型：1为按天拉黑，2为按时长拉黑，3为按分钟拉黑，4永远拉黑
        num: 1 // 是	int	拉黑数值
      },
      rules: {
        num: [{
          required: true,
          message: '请设置拉黑时长!',
          trigger: 'blur'
        }]
      },
      loading: false
    }
  },
  created() {
    if (this.rowid) {
      this.ruleForm.phone = this.rowid
    }
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          // 拉黑
          addBlack(this.ruleForm).then(response => {
            this.loading = false
            if (response.state.toLowerCase() === 'success') {
              this.$parent.$layer.close(this.layerid)
              this.$parent.isBlack = true
              this.$message.success('恭喜你，拉黑成功!')
            }
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.$message.error('请输入有效的必填项信息!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
