<template>
  <div class="app-container">
    <el-container>
      <el-main>
        <div class="form-main">
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="白名单名称" prop="whitelistName">
              <el-input v-model="form.whitelistName" placeholder="请输入白名单名称" />
            </el-form-item>
            <el-form-item label="白名单类型" prop="whitelistType">
              <el-select v-model="form.whitelistType" clearable placeholder="请选择白名单类型">
                <el-option v-for="dict in dict.type.whitelist_type" :key="dict.value" :label="dict.label"
                  :value="parseInt(dict.value)" />
              </el-select>
            </el-form-item>
            <el-form-item label="白名单模式" prop="whitelistMode">
              <el-select v-model="form.whitelistMode" clearable placeholder="请选择白名单模式">

                <el-option v-for="dict in dict.type.white_mode" :key="dict.value" :label="dict.label"
                  :value="parseInt(dict.value)" />
              </el-select>
            </el-form-item>

            <el-form-item label="备注">
              <el-input v-model="form.remarks" placeholder="请输入内容" type="textarea" />
            </el-form-item>
          </el-form>
        </div>
        <div class="footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitAddForm()">保 存</el-button>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { addWhitelist } from '@/api/FDS/whiteList'

export default {
  name: 'WhiteAdd',
  dicts: ["white_mode", 'whitelist_type'],
  data () {

    return {
      form: {},
      tokenId: '',
      // 文件存放的路径
      fileList: [],
      rules: {
        whitelistName: [
          { required: true, message: '白名单名称不能为空', trigger: 'blur' }
        ],
        whitelistType: [
          { required: true, message: '白名单类型不能为空', trigger: 'change' }
        ],
        whitelistMode: [
          { required: true, message: '白名单模式不能为空', trigger: 'change' }
        ]
      }
    }
  },
  computed: {},
  mounted () {
    this.reset()
  },
  methods: {
    reset () {
      this.form = {
      }
      console.log(this.form)
    },
    /** 新增按钮 */
    submitAddForm: function () {
      this.$refs['form'].validate(valid => {
        if (valid) {

          addWhitelist(this.form).then(response => {
            this.$modal.msgSuccess('新增成功')
          })
                this.close()
          this.$router.push({ path: '/build/whitelist' })
        }
      })
    },
    cancel () {
      this.close()
      this.$router.push({ path: '/build/whitelist' })
    },
        close () {
      this.$tab.closePage();
    },
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  background: #ffffff;
  height: 100%;
  position: relative;
}

.form-main {
  width: 700px;
  margin: 0 auto;
}

::v-deep .el-input.is-disabled .el-input__inner,
.el-textarea.is-disabled .el-textarea__inner {
  border: 1px solid #E4E7ED !important;
}

.tag-group {
  .el-tag {
    cursor: pointer;

  }
}

.el-tag+.el-tag {
  margin-left: 10px
}

.page-footer {
  margin: 0 auto;
  width: 700px;
  justify-content: center;
  display: flex;
}

::v-deep .el-input,
.el-select,
.el-textarea {
  max-width: 400px;
  width: 400px;
}

.footer {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  bottom: 24px;
  right: 80px
}
</style>
