<template>
  <div class="taskConfig">
    <div class="taskConfig__h">
      <h2 class="taskConfig__h--p">{{$t('add_task')}}</h2>
    </div>
     <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="130" class="taskConfig__form">
        <FormItem class="formitem" :label="$t('task_title')+'：'" prop="title">
            <Input clearable v-model="formValidate.title" :placeholder="$t('input_please')" style="width: 627px;" />
        </FormItem>
        <div class="scheduledtask__api">
          <FormItem :label="$t('task_API')+'：'" prop="nameSpace" >
          <Input style="width:200px" v-model="formValidate.nameSpace" :placeholder="$t('namespace')">
          </Input>
          </FormItem>
          <p style="margin: 0 5px;line-height: 32px;">.</p>
          <Input style="width:200px" v-model="formValidate.className" :placeholder="$t('class_name')">
          </Input>
          </FormItem>
          <p style="margin: 0 5px;line-height: 32px;">.</p>
          <FormItem prop="functionName" :label-width="0">
            <Input clearable style="width:200px" v-model="formValidate.functionName" :placeholder="$t('action_name')"></Input>
          </FormItem>
        </div>
        <FormItem class="formitem" :label="$t('API_parameters')+': '">
          <div style="display:flex">
            <Input clearable v-model="formValidate.param" type="textarea" placeholder="" style="width: 627px" />
            <p>{{$t('json_format')}}</p>
          </div>
        </FormItem>
        <FormItem class="formitem" :label="$t('excute_interval_second') + ': '" prop="time">
          <div style="display: flex">
            <Input clearable v-model="formValidate.time" placeholder=""  style="width: 627px" />
            <p>{{$t('unit_second')}}</p>
          </div>
        </FormItem>
        <FormItem class="formitem" :label="$t('switch') + '：'">
          <Checkbox-group v-model='formValidate.checkbox' @on-change="changeCheck">
            <Checkbox label="1">{{$t('enable')}}</Checkbox>
          </Checkbox-group>
        </FormItem>
        <div class="taskConfig__btn">
            <Button type="primary" @click="addConfigFun">{{$t('submit')}}</Button>
        </div>
    </Form>
  </div>
</template>

<script>
import { AddTaskConfig } from '@/api/taskconfig'
import { getToken } from '@/libs/util'
export default {
  data () {
    return {
      token: getToken(),
      formValidate: {
        title: '',
        nameSpace: 'Task',
        className: '',
        functionName: '',
        apiname: '',
        param: '',
        time: '60',
        checkbox: ['1']
      },
      ruleValidate: {
        title: [
          { required: true, message: this.$t('wrong_task_title'), trigger: 'blur' }
        ],
        nameSpace: [
          { required: true, message: this.$t('wrong_namespace'), trigger: 'blur', pattern: /^[a-zA-Z][a-zA-Z0-9]*$/ }
        ],
        className: [
          { required: true, message: this.$t('wrong_class_name'), trigger: 'blur', pattern: /^[a-zA-Z][a-zA-Z0-9]*$/ }
        ],
        functionName: [
          { required: true, message: this.$t('wrong_action_name'), trigger: 'blur', pattern: /^[A-Za-z0-9_]+$/ }
        ],
        apiname: [
          { required: true, message: this.$t('wrong_task_API'), trigger: 'blur' }
        ],
        time: [
          { required: true, message: this.$t('wrong_task_interval') },
          { message: this.$t('wrong_task_interval_2'), pattern: /^\d{2,}$/ }
        ]
      }
    }
  },
  created () {
  },
  methods: {
    addConfigFun () {
      this.$refs['formValidate'].validate((val) => {
        if (val) {
          if (this.formValidate.time < 10) {
            this.$Message.warning(this.$t('wrong_task_interval_3'))
          } else {
            const data = new FormData()
            data.append('access_token', this.token)
            data.append('title', this.formValidate.title)
            if (this.formValidate.checkbox) {
              data.append('enable', true)
            } else {
              data.append('enable', false)
            }
            data.append('task_service', this.formValidate.nameSpace + '.' + this.formValidate.className + '.' + this.formValidate.functionName)
            if (this.formValidate.param) {
              data.append('api_params', this.formValidate.param)
            }
            data.append('interval_time', this.formValidate.time)
            AddTaskConfig(data).then(res => {
              if (res.ret === 200 && res.data.id) {
                this.$Message.success(this.$t('add_successfully'))
                this.$router.push({ name: 'scheduledtasklist' })
              } else {
                if (res.msg) {
                  this.$Message.warning(res.msg)
                } else {
                  this.$Message.warning(res.data.msg)
                }
              }
            })
          }
        }
      })
    },
    changeCheck (data) {
      this.formValidate.checkbox = data
    }
  }
}
</script>

<style  lang="scss" scoped>
.taskConfig {
  &__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 130px;
  }
  >>>.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/ .scheduledtask__api .ivu-input-inner-container{
  width: 200px!important;
}
/deep/.ivu-form-item-content{
  margin-left: 0!important;
}
.scheduledtask{
  &__api{
    display: flex;
    /deep/ .ivu-form-item{
      display: flex!important;
    }
  }
}
</style>
