<template>
  <el-card>
    <el-form ref="formRef" :model="form" :rules="rules" label-suffix="：" label-width="220">
      <el-form-item label="是否开启越段年限控制" prop="isControl">
        <el-radio-group v-model="form.isControl">
          <el-radio label="0">否</el-radio>
          <el-radio label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="越段年限" prop="year1">
        <el-form-item label="0 段到二段" label-width="100">
          <el-input v-model="form.year1">
            <template #append>年</template>
          </el-input>
        </el-form-item>
      </el-form-item>
      <el-form-item prop="year2">
        <el-form-item label="一段到三段" label-width="100">
          <el-input v-model="form.year2">
            <template #append>年</template>
          </el-input>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="large" style="width: 180px" @click="submitForm">保 存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup>

import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { onMounted, toRefs } from 'vue'
import { editZtxBeyondDuanConfig, getZtxbeyondDuanConfig } from '@/api/system/config'

const { proxy } = getCurrentInstance()

const data = reactive({
  form: {
    isControl: '1',
    year1: 0,
    year2: 3
  },
  rules: {
    isControl: [
      { required: true, message: '必填', trigger: 'change' }
    ],
    year1: [
      { required: true, message: '必填', trigger: 'blur' }
    ],
    year2: [
      { required: true, message: '必填', trigger: 'blur' }
    ]
  }
})
const { form, rules } = toRefs(data)

onMounted(() => {
  getZtxbeyondDuanConfig().then((res) => {
    if (res.data) {
      form.value = JSON.parse(res.data)
    }
  })
})

function submitForm() {
  proxy.$refs['formRef'].validate(valid => {
    if (valid) {
      editZtxBeyondDuanConfig(form.value).then(() => {
        proxy.$modal.msgSuccess('修改成功')
      })
    }
  })
}

</script>

<style scoped>

</style>