<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>
      <template #right>
        <van-icon name="replay" size="18" color="#ffffff" />
      </template>
    </van-nav-bar>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="已显示所有数据"
      @load="GetvehicleList"
    >
      <van-cell
          v-for="item in info"
          :key="item.vehicleid"
          border
        >
          <template #default>
            <van-row class="borderTop">
              <van-col span="24">
                <van-row>
                  <van-col span="5" class="title1">车牌信息</van-col>
                  <van-col span="19" >{{ item.vcarcode }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="24"><van-button type="info" @click="del(item.vehicleid)" >删除</van-button></van-col>
                </van-row>
              </van-col>
            </van-row>
                      </template>
        </van-cell>
    </van-list>
     <van-icon class="footer" size="30"  @click="addcar" name="add" />
  </div>
</template>

<script>
// eslint-disable-next-line camelcase
import { GetvehicleList, Deletefdc_pm_vehicle } from '@/common/api/loginApi.js'

export default {
  name: 'login',
  data () {
    return {
      info: [], // 车辆信息
      loading: false,
      finished: false

    }
  },
  created: function () {
    console.info('created')
    // console.info(this.$util);
    this.$util.persistLogin(this)
    this.GetvehicleList()
  },
  methods: {
    GetvehicleList: function () { // 获取车辆信息
      var that = this
      let phone = that.$store.state.data.tel
      if (that.$util.isEmpty(phone)) {
        that.$router.push('/')
        return
      }
      GetvehicleList(phone).then((res) => {
        console.info('GetvehicleList', res)
        if (!res.isSuccess) {
          that.$toast(res.errMsg)
          return
        }
        res.data.forEach(function (item, index, arr) {
          that.$set(that.info, index, item)
        })

        that.loading = false
        that.finished = true
      })
    },
    // 单选按钮点击事件
    addcar: function () {
      let that = this
      that.$router.push('Insertfdc_pm_vehicle')
    },
    // 单选按钮点击事件
    del: function (vehicleid) {
      let that = this

      that.$dialog.alert({
        message: '确定要删除该车辆信息吗？', // 改变弹出框的内容
        showCancelButton: true // 展示取水按钮
      }).then(() => {
        console.info('删除点击事件 vehicleid', vehicleid)

        let data = {
          vehicleid: vehicleid,
          ownerid: that.$store.state.data.ownerid
        }
        Deletefdc_pm_vehicle(data).then((res) => {
          console.info('Deletefdc_pm_vehicle', res)
          if (res.isSuccess) {
            // eslint-disable-next-line eqeqeq
            if (res.data == 'success') {
              that.$dialog
                .alert({
                  message: '车辆删除成功'
                })
              this.$router.go(0)
            } else {
              that.$dialog
                .alert({
                  message: res.errMsg
                })
            }
          } else {
            that.$dialog.alert({
              message: res.msg
            })
          }
        })
      }).catch(() => {

      })
    },
    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: #999;
}
.value1 {
  color: #999;
  font-size: 15px;
}
.borderTop{
    margin-top:50px;
}
.paddingLeft15{
    padding-left: 15px;
    text-align: left;
    height: 50px;
    line-height: 50px;
    font-size: 28px;
}
</style>
