<template>
  <div class="status">
    <div class="circle"><img :src="[flag?require('../assets/green.png'):require('../assets/yellow.png')]"></div>
    <div class="descript">{{ words }}</div>
    <div class="frame">
      <span :class="[flag?'':'isflag']">{{status || '—'}}</span>
      <div class="shinning"></div>
      <div class="btn" v-if="handle">
          <el-button @click="HandleSwapplc(4)">暂停</el-button>
          <el-button @click="HandleSwapplc(5)">恢复</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { EditSwapplc } from '@/api/powerCharge'
export default {
  name: 'PannelItem',
  props:['words','status','handle','flag'],
  methods:{
    //暂停恢复
    HandleSwapplc(isPause){
      this.loading=true
      let swaptext=''
      if(isPause===4){
        swaptext='暂停机器人'
      }
      if(isPause===5){
        swaptext='恢复机器人'
      }
      this.$confirm(`请确认${swaptext}?`, swaptext, {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await EditSwapplc(isPause)
          if(res.code === 0){
              this.$message({
              type: 'success',
              message: isPause===4?'暂停成功!':'恢复成功!',
            })
          }else{
              this.$message({
              type: 'warning',
              message: isPause===4?'暂停失败!':'恢复失败!',
            })
          }
          this.loading=false
        })
        .catch(err => { console.error(err) })
    },
  }
}
</script>
