<template>
  <div class="status">
    <div class="descript">{{ words }}</div>
    <div class="frame" :class="[isline?'isborder':'']">
      <span :class="[Isblue?'frameText':flag?'':'isflag']">{{value}}</span>
      <div class="shinning" :class="[isline?'isshow':'']"></div>
      <div class="btn" v-if="handle" :class="[isline?'isleft':'']">
          <el-button @click="HandlerDownLock">解锁</el-button>
          <el-button @click="HandleOnLock">上锁</el-button>
      </div>
      <div v-if="words=='车牌号'" @click="ShowEditCar(value)" class="editCar"><img src="../assets/edit.png"></div>
      <div v-if="words=='车牌号'" @click="RefreshCar" class="editCar carfresh"><img src="../assets/refresh.png"></div>
    </div>
  </div>
</template>

<script>
import { Updateunlock,Updatelock } from '@/api/powerCharge'
export default {
  name: 'PannelTitle',
  props:['words','value','handle','Isblue','flag','isline'],
  methods:{
    //刷新车辆
    RefreshCar(){
      this.$emit('refreshCar');
    },
    //修改车牌号
    ShowEditCar(plate){
        this.$emit('HandleEditPlate',plate);
    },
    //车辆上锁
    HandleOnLock(){
      this.loading=true
      this.$confirm('请确认对车辆上锁？', '车辆上锁', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await Updatelock()
          if(res.code === 0){
              this.$message({
              type: 'success',
              message: '上锁成功!',
            })
          }else{
              this.$message({
              type: 'warning',
              message: '上锁失败!',
            })
          }
          this.loading=false
        })
        .catch(err => { console.error(err) })
    },
    //车辆解锁
    HandlerDownLock(){
      this.loading=true
      this.$confirm('请确认对车辆解锁?', '车辆解锁', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await Updateunlock()
          if(res.code === 0){
              this.$message({
              type: 'success',
              message: '解锁成功!',
            })
          }else{
              this.$message({
              type: 'warning',
              message: '解锁失败!',
            })
          }
          this.loading=false
        })
        .catch(err => { console.error(err) })
    },
  },
}
</script>
<style lang="scss" scoped>
  .isshow{
    display: none;
  }
  .isborder{
    border:0 !important;
  }
  .isleft{
    right: 75px !important;
  }
</style>