<template>
  <div v-loading="loading">
    <div class="base-dialog-body" style="height:380px;overflow-y: auto;">
      <el-form ref="otherForm" :model="form">
        <el-form-item
          label="是否自动切换到下一任务"
          prop="AutoCutNextTask"
          :rules="[
            { required: true, message: $t('common:ruleMessage:select')}
          ]"
        >
          <el-switch v-model="form.AutoCutNextTask" />
        </el-form-item>
      </el-form>
    </div>
    <div class="base-dialog-footer" style="text-align:right;margin-top:10px;">
      <el-button size="small" type="primary" @click="handleSave"> {{ $t('common:button:save') }}</el-button>

    </div>
  </div>
</template>
<script>
import { setAutoCutNextTask, getAutoCutNextTask } from '@/api/user'
export default {
  name: 'Others',
  data() {
    return {
      form: {
        AutoCutNextTask: false
      },
      loading: false
    }
  },
  mounted() {
    this.initForm()
  },
  methods: {
    initForm() {
      this.loading = true
      getAutoCutNextTask().then(async res => {
        this.form.AutoCutNextTask = res.Result.AutoCutNextTask
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleSave() {
      this.$refs.otherForm.validate((valid) => {
        if (valid) {
          this.loading = true
          setAutoCutNextTask(this.form).then((res) => {
            this.loading = false
            this.$message.success(this.$t('common:message:savedSuccessfully'))
          }).catch(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">

</style>
