<template>
    <el-drawer v-model="visible" direction="rtl" :before-close="closeDialog">
        <div class="count-status">
            <el-tag v-if="formData.history && formData.history.enable">最大计数: {{ formData.history && formData.history.max
            }}</el-tag>
            <el-tag>状态: {{ formData.history && formData.history.enable ? "启用" : "禁用" }}</el-tag>
        </div>

        <div>
            <el-table :data="tableData" height="600" border :header-cell-style="{ background: '#F6F7FC' }" size="large"
                :sort-method="sortDates">
                <el-table-column type="index" label="序号" width="80" align="center" />
                <el-table-column prop="timestamp" label="时间戳" align="center" />
                <el-table-column prop="value" label="点位值" align="center" />
            </el-table>
        </div>
        <div class="btns">
            <el-button type="primary" size="large" @click="setHis">设定</el-button>
            <el-button type="primary" size="large" @click="startHis" v-if="formData.history &&
                !formData.history.enable">启用</el-button>
            <el-button type="danger" size="large" v-else @click="startHis">禁用</el-button>
            <el-button type="primary" size="large" @click="exportHis">导出</el-button>
            <el-button type="primary" size="large" @click="clearHis">清空</el-button>
        </div>
        <SetHis :dialogVisible="dialogVisible1" :formData="formData" v-if="dialogVisible1"
            @dialogClose="dialogVisible1 = false" @dialogSuccess="dialogSuccess1">
        </SetHis>
    </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";
import SetHis from '@/components/SetHis.vue'
import axios from "axios";
export default {
    components: {
        SetHis
    },
    props: ["dialogVisible", "formData"],
    emits: ["dialogClose", "dialogSuccess"],
    setup(props, ctx) {
        const state = reactive({
            tableData: [],
            dialogVisible1: false,
        })
        const ruleFormRef = ref(null);

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

        onMounted(() => {
            console.log(props.formData)
            state.tableData = props.formData.history.history_value
        });

        const dialogSuccess1 = () => {
            state.dialogVisible1 = false;
            ctx.emit("dialogClose");
        };

        const setHis = async () => {
            state.dialogVisible1 = true;
        }
        const startHis = async () => {
            const parm = {
                driver_name: props.formData.driver_name,
                device_name: props.formData.device_name,
                point_name: props.formData.point_name,
            }
            const res = props.formData.history && !props.formData.history.enable ? await infoApi.startHis(parm) : await infoApi.endHis(parm);
            if (res.code == 0) {
                ElMessage.success(res.data || "请求成功");
                ctx.emit("dialogClose");
            }
        }
        const exportHis = async () => {
            const params = {
                driver_name: props.formData.driver_name,
                device_name: props.formData.device_name,
                point_name: props.formData.point_name,
            };
            axios({
                method: "post",
                url: '/data',
                headers: {
                    "action": 56006,
                },
                data: params,
                responseType: 'blob',
            }).then((response) => {
                let fileName = response.headers['content-disposition'].split('filename=')[1];
                const url = window.URL.createObjectURL(new Blob([response.data]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', `${decodeURI(fileName.split('"')[1])}`);
                document.body.appendChild(link);
                link.click();
            }).catch();
        }
        const clearHis = 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.clearHis(parm);
            if (res.code == 0) {
                ElMessage.success(res.data || "请求成功");
                ctx.emit("dialogClose");
            }
        }
        const closeDialog = () => {
            ctx.emit("dialogClose");
        };

        const sortDates = (a, b) => {
            const dateA = new Date(a.timestamp);
            const dateB = new Date(b.timestamp);
            return dateA - dateB;
        }


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

    >span {
        margin-left: 10px;
    }
}

.count-status {
    display: flex;
    justify-content: space-around;
}
</style>
