<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="color: #027db4;">新增路线</span>
      </div>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" class="detail-form">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="路线名称" prop="routeName">
              <el-input v-model="form.routeName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="景区名称" prop="scenicArea">
              <el-select v-model="form.scenicArea" placeholder="请选择景区">
                <el-option label="白云山" value="白云山" />
                <el-option label="丹霞山" value="丹霞山" />
                <el-option label="西樵山" value="西樵山" />
                <el-option label="罗浮山" value="罗浮山" />
                <el-option label="鼎湖山" value="鼎湖山" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="起飞点" prop="takeoffPoint">
              <el-input v-model="form.takeoffPoint" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="降落点" prop="landingPoint">
              <el-input v-model="form.landingPoint" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item label="路线描述" prop="routeDesc">
              <el-input type="textarea" v-model="form.routeDesc" :rows="4" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <div class="btn-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-ui'
import routeApi from '@/api/system/route'

export default {
  name: 'AddRoute',
  data() {
    return {
      form: {
        routeName: '',
        scenicArea: '',
        takeoffPoint: '',
        landingPoint: '',
        routeDesc: '',
        routeType: 'normal'
      },
      rules: {
        routeName: [
          { required: true, message: '请输入路线名称', trigger: 'blur' }
        ],
        scenicArea: [
          { required: true, message: '请选择景区', trigger: 'change' }
        ],
        takeoffPoint: [
          { required: true, message: '请输入起飞点', trigger: 'blur' }
        ],
        landingPoint: [
          { required: true, message: '请输入降落点', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleCancel() {
      this.$router.go(-1)
    },
    handleSubmit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.submitForm()
        } else {
          return false
        }
      })
    },
    async submitForm() {
      try {
        await routeApi.createRoute(this.form)
        ElMessage.success('新增成功')
        this.$router.push({ path: '/route/manageroute' })
      } catch (error) {
        ElMessage.error('新增失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.detail-form {
  .el-form-item {
    margin-bottom: 20px;
  }
  ::v-deep .el-input {
    width: 240px;
  }
  ::v-deep .el-select {
    width: 240px;
  }
  ::v-deep .el-input.is-disabled .el-input__inner {
    background-color: white;
    color: #686868;
  }
  ::v-deep .el-textarea.is-disabled .el-textarea__inner {
    background-color: white;
    color: #686868;
  }
}

.btn-container {
  margin-top: 20px;
  text-align: right;
  padding-right: 40px;
}
</style>