/* eslint-disable standard/object-curly-even-spacing */
/* eslint-disable camelcase */
<template>
  <div>
    <van-nav-bar
      @click-left="onClickLeft"
      @click-right="onClickRight"
      style="background-color: #1989fa"
    >
      <template #title>
        <van-col style="color: #ffffff">添加车辆</van-col>
      </template>
      <template #left>
        <i
          class="fa fa-arrow-circle-left"
          aria-hidden="true"
          style="color: #ffffff; font-size: 18px"
        ></i>
      </template>
    </van-nav-bar>

    <van-form @submit="save">
      <van-field
        v-model="vcarcode"
        name="车牌信息"
        label="车牌信息"
       placeholder="请输入"
        input-align="right"
        required
         :rules="[{ required: true, message: '请输入车牌信息' }]"
      />

      <van-row class="bottom">
        <van-col span="12" class="bgGrey" @click="cancel">
          <van-icon name="close" />取消
        </van-col>
        <van-col span="12" class="bgRed">
          <van-button square icon="success" style="margin-bottom:5px;" type="danger" native-type="submit">保存</van-button>
        </van-col>
      </van-row>
    </van-form>
  </div>
</template>

<script>

// eslint-disable-next-line camelcase
import { Insertfdc_pm_vehicle } from '@/common/api/loginApi.js'

import '../assets/css/resetvant.css'
export default {
  name: 'login',
  data () {
    return {
      vcarcode: '',
      ownerid: ''

    }
  },
  created: function () {
    console.info('created')
    // console.info(this.$util);
    this.$util.persistLogin(this)

    this.getDefault()
  },
  computed: {
    // 计算属性
    // eslint-disable-next-line vue/return-in-computed-property
    completion: function () {}
  },
  methods: {
    getDefault: function () {
      this.ownerid = this.$store.state.data.ownerid
    },

    cancel: function () {
      this.$router.go(-1)
    },
    // 保存
    save: function () {
      let that = this

      if (this.$util.isEmpty(that.vcarcode)) {
        this.$toast('车牌信息不能为空')
        return
      }
      if (that.vcarcode.length > 20) {
        this.$toast('车牌信息不能为超过20字')
        return
      }
      // return;
      let data = {
        ownerid: that.$store.state.data.ownerid,
        vcarcode: that.vcarcode
      }

      console.info('save', data)
      Insertfdc_pm_vehicle(data).then((res) => {
        console.info('Insertfdc_pm_vehicle', res)
        if (res.isSuccess) {
          // eslint-disable-next-line eqeqeq
          if (res.data == 'success') {
            that.$dialog
              .alert({
                message: '车辆提交成功'
              })
            that.$router.push('GetvehicleList')
          } else {
            that.$dialog
              .alert({
                message: res.errMsg
              })
          }
        } else {
          that.$dialog.alert({
            message: res.msg
          })
        }
      })
    },
    onClickLeft () {
      // this.$toast('返回')
      console.info('left')
      this.$router.go(-1)
    },
    onClickRight () {
      this.$router.go(0)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
.title1 {
  color: #aaa;
  font-size: 15px;
   padding-left:15px;
  text-align: left;

}
.title2 {
  color: #ff0000;
  text-align: left;
  font-size: 13px;
}
.infoTitle {
  color: #aaa;
  text-align: left;
}
.value1 {
  color: #000;
  font-size: 13px;
}
.infoValue {
  color: #0606af;
}
.size {
  font-size: 16px;
}
.header {
  margin-top: 10px;
  height: 70px;
  border-bottom: #cfcfcf solid 3px;
}
.titleClass {
  border-bottom: #000 solid 1px;
}
.van-tab {
  color: #ff0000;
}
.redColor {
  color: #ff0000;
}
.bgBlue {
  background: #a0a0f7;
  height: 30px;
  margin-top: 5px;
  padding-top: 5px;
}
.bgBill {
  height: 30px;
  border-bottom: #aaa solid 1px;
  padding-top: 5px;
}
.bottom {
  /* left:0; */
  bottom: 0px;
  position: fixed;
  width: 100%;
}
.bgGrey {
  background: #999999;
  height: 35px;
  justify-content: center;
  padding-top: 5px;
}
.bgRed {
  background: #ff0000;
  height: 35px;
  justify-content: center;
  color: #ffffff;
  font-weight: 900;
  padding-top: 5px;
}
.remarkBottom {
  margin-bottom: 40px;
}
</style>
