<template>
    <el-drawer v-model="visible" direction="rtl" :before-close="closeDialog">
 
        <fieldset class="box2 title_box2">
            <legend class="box-ht">点位名称</legend>
             <span>{{ formData.point_name }}</span>
             <el-button type="primary" size="large" @click="resetHealth">重置</el-button>
        </fieldset>
        <fieldset class="box2">
            <legend class="box-ht">读计数</legend>
            <el-form label-width="130px">
                <el-form-item label="总计数">
                    <el-input disabled v-model="formData.read_health.total_count"></el-input>
                </el-form-item>
                <el-form-item label="成功计数">
                    <el-input disabled v-model="formData.read_health.success_count"></el-input>
                </el-form-item>
                <el-form-item label="最后一次成功时间">
                    <el-input disabled v-model="formData.read_health.last_success_time"></el-input>
                </el-form-item>
                <el-form-item label="失败计数">
                    <el-input disabled v-model="formData.read_health.failure_count"></el-input>
                </el-form-item>
                <el-form-item label="最后一次失败时间">
                    <el-input disabled v-model="formData.read_health.last_failure_ctime"></el-input>
                </el-form-item>
                <el-form-item label="最后一次失败原因">
                    <el-input disabled v-model="formData.read_health.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="formData.write_health.total_count"></el-input>
                </el-form-item>
                <el-form-item label="成功计数">
                    <el-input disabled v-model="formData.write_health.success_count"></el-input>
                </el-form-item>
                <el-form-item label="最后一次成功时间">
                    <el-input disabled v-model="formData.write_health.last_success_time"></el-input>
                </el-form-item>
                <el-form-item label="失败计数">
                    <el-input disabled v-model="formData.write_health.failure_count"></el-input>
                </el-form-item>
                <el-form-item label="最后一次失败时间">
                    <el-input disabled v-model="formData.write_health.last_failure_ctime"></el-input>
                </el-form-item>
                <el-form-item label="最后一次失败原因">
                    <el-input disabled v-model="formData.write_health.last_failure_cause"></el-input>
                </el-form-item>
            </el-form>
        </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',
        },
    })

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

    onMounted(() => {
    });
    const resetHealth = async () => {
      const parm = {
        driver_name: props.formData.driver_name, 
        device_name: props.formData.device_name, 
        point_name: props.formData.point_name 
      }
      const res = await infoApi.resetHealth(parm);
      if (res.code == 0) {
        ElMessage.success(res.message || "请求成功");
      }
    }
    const closeDialog = () => {
      ctx.emit("dialogClose");
    };


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

        >span {
            margin-left: 10px;
        }
    }
   
    .title_box2 {
        display: flex;
        justify-content: space-between;
    }
</style>
