<template>
  <div class="configuration">
    <div class="configuration__h">
      <h2 class="configuration__h--p">{{$t('add_config')}}</h2>
    </div>
     <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100" class="configuration__form">
      <FormItem class="formitem" :label="$t('config_name') + '：'" prop="name">
          <Input clearable v-model="formValidate.name" placeholder="" style="width: 300px;" />
      </FormItem>
      <FormItem class="formitem" :label="$t('config_value') + '：'" prop="key">
          <Input clearable v-model="formValidate.key" type="textarea" placeholder="" style="width: 300px" />
      </FormItem>
      <FormItem class="formitem" :label="$t('config_desc') + '：'" prop="desc">
          <Input clearable v-model="formValidate.desc"  placeholder=""  style="width: 300px" />
      </FormItem>
      <div class="configuration__btn">
          <Button type="primary" @click="addConfigFun">{{$t('submit')}}</Button>
      </div>
    </Form>
  </div>
</template>

<script>
import { AddConfig } from '@/api/configuration'
import { getToken } from '@/libs/util'
export default {
  data () {
    return {
      token: getToken(),
      formValidate: {
        name: '',
        key: '',
        desc: ''
      },
      ruleValidate: {
        name: [
          { required: true, message: this.$t('config_name') + ' ' + this.$t('required'), trigger: 'blur' },
          { message: this.$t('consist_and_start_with_letter'), pattern: '^[A-Za-z0-9_]+$' }
        ],
        key: [
          { required: true, message: this.$t('config_value') + ' ' + this.$t('required'), trigger: 'blur' }
        ],
        desc: [
          { required: true, message: this.$t('config_desc') + ' ' + this.$t('required'), trigger: 'blur' }
        ]
      }
    }
  },
  created () {
  },
  methods: {
    addConfigFun () {
      this.$refs['formValidate'].validate((val) => {
        if (!val) {
          this.$Message.error(this.$t('wrong_form_and_fill_again'))
          return
        }
        this.doAddConfig()
      })
    },
    doAddConfig () {
      const formdata = new FormData()
      formdata.append('access_token', this.token)
      formdata.append('config_name', this.formValidate.name)
      formdata.append('config_value', this.formValidate.key)
      if (this.formValidate.desc) {
        formdata.append('config_desc', this.formValidate.desc)
      }
      AddConfig(formdata).then(res => {
        if (res.ret === 200 && res.data.is_add) {
          this.$Message.success(this.$t('add_successfully'))
          this.$router.push({ name: 'configList' })
        } else {
          this.$Message.warning(res.msg)
        }
      })
    }
  }
}
</script>

<style  lang="scss" scoped>
.configuration {
  &__h{
    height:72px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 30px 0px rgba(0,0,0,0.05);
    border-radius:10px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    &--p{
      font-size:16px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      margin-left: 30px;
      color:rgba(35,35,42,1);
    }
  }
  &__form{
    display: flex;
    text-align: left;
    flex-direction: column;
    box-shadow:0px 0px 30px 0px rgba(0,0,0,0.05);
    border-radius:10px;
    background: #fff;
    padding-top: 20px;
  }
  &__btn{
    margin: 20px 100px;
  }
  >>>.formitem .ivu-form-item .ivu-form-item-required{
    display: flex;
    flex-direction: column;
  }
  >>> .ivu-form-item-content{
    margin-left: 0;
  }
  .formitem{
    display: flex;
  }
  .ivu-form-item-label{
    width:100vh;
  }
}
/deep/.ivu-form-item-content{
  margin-left: 0!important;
}
</style>
