<template>
  <div class="taskConfig">
    <div class="taskConfig__h">
      <h2 class="taskConfig__h--p">{{$t('edit_tast')}}</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: 453px;" />
        </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.api_params" type="textarea" placeholder="" style="width: 453px" />
            <p>{{$t('json_format')}}</p>
          </div>
        </FormItem>
        <FormItem class="formitem" :label="$t('lastest_result') + ': '">
          <div style="display:flex">
            <Input disabled :autosize="true" v-model="formValidate.result" type="textarea" placeholder="" style="width: 453px" />
          </div>
        </FormItem>
        <FormItem class="formitem" :label="$t('excute_interval_second') + ': '" prop="crontab_interval_time">
          <div style="display: flex">
            <Input clearable v-model="formValidate.crontab_interval_time" placeholder=""  style="width: 453px" />
            <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="editConfigFun" style="margin-right:30px;">{{$t('submit')}}</Button>
          <router-link :to="{path: '/scheduledtask/lists'}">
            <Button>{{$t('back')}}</Button>
          </router-link>
        </div>
    </Form>
  </div>
</template>

<script>
import { GetTask, EditTaskConfig } from '@/api/taskconfig'
import { getToken } from '@/libs/util'
export default {
  data () {
    return {
      token: getToken(),
      editId: 0,
      formValidate: {
        title: '',
        className: '',
        nameSpace: '',
        functionName: '',
        fire_params: '',
        result: '',
        api_params: '',
        crontab_interval_time: '',
        checkbox: []
      },
      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' }
        ],
        crontab_interval_time: [
          { required: true, message: this.$t('wrong_task_interval') },
          { message: this.$t('wrong_task_interval_2'), pattern: /^\d{2,}$/ }
        ]
      }
    }
  },
  created () {
    this.editId = this.$route.query.id
    this.getTask()
  },
  methods: {
    /* 获取任务配置 */
    getTask () {
      const data = new FormData()
      data.append('access_token', this.token)
      data.append('id', this.editId)
      GetTask(data).then(res => {
        this.formValidate.title = res.data.title
        let apiName = []
        // this.formValidate.fire_params = res.data.fire_params
        apiName = res.data.fire_params.split('.')
        this.formValidate.nameSpace = apiName[0]
        this.formValidate.className = apiName[1]
        this.formValidate.functionName = apiName[2]
        this.formValidate.api_params = res.data.api_params
        this.formValidate.result = res.data.result
        // this.formValidate.crontab_interval_time = res.data.crontab_interval_timey
        this.formValidate.crontab_interval_time = res.data.crontab_interval_time + ''
        if (res.data.enable === 1) {
          this.formValidate.checkbox = ['1']
        } else {
          this.formValidate.checkbox = []
        }
      })
    },
    /* 修改 */
    editConfigFun () {
      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('id', this.editId)
            data.append('title', this.formValidate.title)
            if (this.formValidate.checkbox.length > 0) {
              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.api_params) {
              data.append('api_params', this.formValidate.api_params)
            }
            data.append('crontab_interval_time', this.formValidate.crontab_interval_time)
            EditTaskConfig(data).then(res => {
              if (res.ret === 200 && res.data.isUpdate) {
                this.$Message.success(this.$t('update_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>
