<template>
  <div class="config-manager">
    <el-form :model="form" :rules="rules" ref="formEl" label-width="auto">
      <el-form-item label="发货地范围（米）" prop="originCicle">
        <el-input-number v-model="form.originCicle"></el-input-number>
      </el-form-item>

      <el-form-item label="收货地范围" prop="destinationCicle">
        <el-input-number v-model="form.destinationCicle"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button style="width: 120px" @click="submit(formEl)" type="primary">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { tms } from '@/request/api'

import { useRoute } from 'vue-router'
import { Message } from 'view-ui-plus'
const route = useRoute()
const formEl = ref(null)
const form = ref({
  name: '',
  type: '',
  destinationCicle: '',
})

const getConfig = async () => {
  const res = await tms.queryBaseConfig()
  if (res.code === 101) {
    console.log(res.data, '基础配置')

    form.value = res.data
  }
}
const rules = {
  originCicle: [
    { required: true, message: '请输入发货地范围', trigger: 'blur' },
    { type: 'number', message: '请输入数字', trigger: 'blur' },
  ],
  destinationCicle: [
    { required: true, message: '请输入收货地范围', trigger: 'blur' },
    { type: 'number', message: '请输入数字', trigger: 'blur' },
  ],
}

const submit = async formEl => {
  // 校验表单
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log('submit!')
      await tms
        .updateBaseConfig(form.value)
        .then(res => {
          if (res.code === 101) {
            console.log('提交成功')
            Message.success('提交成功')
            getConfig()
          } else {
            Message.error('提交失败')
            console.log('提交失败')
          }
        })
        .catch(err => {
          console.log('请求失败', err)
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}

onMounted(() => {
  getConfig()
})
</script>

<style lang="scss" scoped>
.config-manager {
  padding: 20px;
  width: 50%;
}
</style>
