<template>
  <el-drawer v-model="visible" direction="rtl" :before-close="closeDialog">
    
      <fieldset class="box2">
        <legend class="box-ht">驱动名称</legend>
        <el-form label-width="130px">
          <el-form-item>
            {{ name  }}
          </el-form-item>
        </el-form>
      </fieldset>

      <fieldset class="box2">
          <legend class="box-ht">通讯状态</legend>
          <el-form label-width="130px">
            <el-form-item label="健康状态">
              <el-input disabled v-model="health[healthObj.status]"></el-input>
            </el-form-item>
            <el-form-item label="最后一次成功时间">
              <el-input disabled v-model="healthObj.last_success_time"></el-input>
            </el-form-item>
            <el-form-item label="最后一次失败时间">
              <el-input disabled v-model="healthObj.last_failure_ctime"></el-input>
            </el-form-item>
            <el-form-item label="最后一次失败原因">
              <el-input disabled v-model="healthObj.last_failure_cause"></el-input>
            </el-form-item>
          </el-form>
      </fieldset>
      <fieldset class="box2">
        <legend class="box-ht">通讯计数</legend>
        <el-form label-width="130px">
          <el-form-item label="总计数">
            <el-input disabled v-model="countObj.total_count"></el-input>
          </el-form-item>
          <el-form-item label="失败计数">
            <el-input disabled v-model="countObj.failure_count"></el-input>
          </el-form-item>
          <el-form-item label="成功计数">
            <el-input disabled v-model="countObj.success_count"></el-input>
          </el-form-item>
        </el-form>
        <div class="btns">
          <el-button type="primary" size="large" @click="resetCount">重置计数</el-button>
          <!-- <el-button @click="closeDialog">取消</el-button> -->
        </div>
      </fieldset>
  </el-drawer>
</template>
<script>
import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  props: ["dialogVisible", "formData"],
  emits: ["dialogClose", "dialogSuccess"],
  setup(props, ctx) {
    const ruleFormRef = ref(null);
    const state = reactive({
      health: {
        0: 'null',
        1: 'ok',
        2: 'error',
      },
      name: '',
      healthObj: {},
      countObj: {}
    })

    const visible = computed(() => {
      return props.dialogVisible;
    });

    onMounted(() => {
      getD();
    });
    const getD = async () => {
    const parm = {
          name: props.formData.driver_name
      }
      const res = await infoApi.getD(parm);
      if (res.code == 0) {
        state.name = res.data.name
        state.healthObj = res.data.health;
        state.countObj = res.data.count; 
      }
    };
    const resetCount = async () => {
      const parm = {
          name: props.formData.name
      }
      const res = await infoApi.resetCount(parm);
      if (res.code == 0) {
        getD();
      }
    }
    const closeDialog = () => {
      ctx.emit("dialogClose");
    };
  

    return {
      ...toRefs(state),
      visible,
      closeDialog,
      getD,
      resetCount
    };
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
  display: flex;
  flex-wrap: nowrap;
  >span {
    margin-left: 10px;
  }
}
</style>
