<template>
  <div>
    <!-- 头部导航栏 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>小工具</el-breadcrumb-item>
      <el-breadcrumb-item>登录白名单</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-input v-model="whiteListParam.key" placeholder="请输入设备id或手机号"></el-input>
      <el-select v-model="whiteListParam.keyType" placeholder="请选择白名单类型">
        <el-option v-for="item in whiteListType" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-circle-plus" @click="addToWhiteList">添加到白名单</el-button>
    </el-card>
  </div>
</template>

<script>
import { addWhiteList } from '@/api/effect'
export default {
  data() {
    return {
      whiteListParam: {
        namespace: window.sessionStorage.getItem('env'),
        key: '',
        keyType: ''
      },
      whiteListType: [
        {
          label: '设备维度',
          value: 1
        },
        {
          label: '手机号维度',
          value: 0
        }
      ]
    }
  },
  methods: {
    addToWhiteList() {
      addWhiteList(this.whiteListParam).then((resp) => {
        if (resp.data.data === true) {
          this.$message.success('白名单添加成功！')
        } else {
          this.$message.error('已存在白名单中！')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-input {
  width: 400px;
  margin-right: 20px;
}
.el-select {
  margin-right: 20px;
}
</style>
