<template>
    <el-drawer size="65%" :modal-append-to-body="false" :destroy-on-close="true" :before-close="closeDialog"
        v-model="visible" title="点位管理">
        <el-card class="top-title">
            <span>模板名称：{{ formData.template_name }}</span>
            <span>点位数量：{{ propertiesData.length }}</span>
        </el-card>
        <div class="top-btn">
            <el-button type="primary" @click="manageData">
                新增点位
            </el-button>
            <div>
                <el-button type="primary" @click="importData"> 导入 </el-button>
                <el-button type="primary" @click="exportData"> 导出 </el-button>
            </div>
        </div>
        <el-table :data="propertiesData" height="640" style="width: 100%" border stripe
            :header-cell-style="{ background: '#F6F7FC' }" size="large">
            <el-table-column type="index" label="序号" width="80" align="center" />
            <el-table-column prop="point_name" label="点位名称" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="address" label="点位地址" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="point_type" label="点位类型" align="center" show-overflow-tooltip>
                <template #default="scope">
                    <span>{{ pointTypeOptions[scope.row.point_type] }}</span>
                </template>
            </el-table-column>

            <el-table-column prop="register" label="寄存器" align="center" show-overflow-tooltip>
                <template #default="scope">
                    <span>{{ registerData[scope.row.register] }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="point_description" label="点位描述" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="multiplier" label="缩放系数" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="point_unit" label="点位单位" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="point_permissions" label="读写权限" align="center" show-overflow-tooltip>
                <template #default="scope">
                    <span>{{ scope.row.point_permissions == 1 ? '可读' : '可写' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200" show-overflow-tooltip>
                <template #default="scope">
                    <el-button size="large" @click="editData(scope.row)">
                        编辑
                    </el-button>
                    <el-button type="danger" size="large" @click="delData(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <AddPoint :type="type" :pointTypeOptions="pointTypeOptions" :formData="formData1" :pointData="pointData" :dialogVisible="dialogVisible1"
            v-if="dialogVisible1" @dialogClose="dialogVisible1 = false" @dialogSuccess="dialogSuccess1">
        </AddPoint>
        <ExportPoint :formData="formData1" :dialogVisible="dialogVisible2" v-if="dialogVisible2"
            @dialogClose="dialogVisible2 = false" @dialogSuccess="dialogSuccess2"></ExportPoint>
    </el-drawer>
</template>
<script>
import axios from "axios";
import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
import AddPoint from "@/components/AddPoint.vue";
import ExportPoint from "@/components/ExportPoint.vue";
export default {
    components: {
        AddPoint,
        ExportPoint
    },
    props: ["formData", "dialogVisible", "templateData"],
    emits: ["dialogClose", "dialogSuccess"],
    setup(props, ctx) {
        const state = reactive({
            pointData: {},
            formData1: {},
            dialogVisible1: false,
            dialogVisible2: false,
            propertiesData: [],
            byteData: {
                1: 'null',
                2: '12',
                3: '21',
                4: '4321',
                5: '2143',
                6: '1234',
                7: '3412',
                8: '4312',
                9: '3421',
                10: '2134',
                11: '1243',
                12: 'BIG',
                13: 'LIT'
            },
            registerData: {
                1: 'coil_status',
                2: 'input_status',
                3: 'input_register',
                4: 'holding_register'
            },
            type: 'I',
            pointTypeOptions:{}
        });
        const visible = computed(() => {
            return props.dialogVisible;
        });

        onMounted(() => {
            getPointType();
            getPointList();
        });

        const getPointType = async () => {
            const parm = {};
            const res = await infoApi.getPointType(parm);

            if (res.code == 0) {
                state.pointTypeOptions = res.data;
            }
        }

        const getPointList = async () => {
            const parm = {
                template_name: props.formData.template_name
            }
            const res = await infoApi.getP(parm);
            if (res.code == 0) {
                state.propertiesData = [];
                const pointData = res.data.points;
                for (let i in pointData) {
                    state.propertiesData.push(pointData[i]);
                }
                state.propertiesData = state.propertiesData.sort((a, b) => {
                    return (a.point_name > b.point_name ? 1 : -1)
                });
            } else {
                ElMessage.error(res.data || res.message);
            }
        };
        const closeDialog = () => {
            ctx.emit("dialogClose");
        };

        const delData = (item) => {
            ElMessageBox.confirm("确定删除该数据?", "删除点位", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    let param = {
                        template_name: props.formData.template_name,
                        point_name: item.point_name
                    }
                    const res = await infoApi.detP(param);
                    if (res.code == 0) {
                        ElMessage.success(res.message || "删除成功");
                        getPointList();
                    } else {
                        ElMessage.error(res.message | "删除失败");
                    }
                })
                .catch(() => {
                    ElMessage.info("已取消删除");
                });
        }

        const manageData = () => {
            state.dialogVisible1 = true;
            state.formData1 = props.formData;
            state.type = 'I';
            state.pointData = {
                point_name: '',
                address: null,
                point_type: 1,
                point_permissions: 1,
                multiplier: 1,
                point_unit: '',
                register: 4
            }
        }

        const editData = (item) => {
            state.dialogVisible1 = true;
            state.formData1 = props.formData;
            state.type = 'U';
            state.pointData = JSON.parse(JSON.stringify(item));
        }

        const dialogSuccess1 = () => {
            state.dialogVisible1 = false;
            getPointList();
        };

        const dialogSuccess2 = () => {
            state.dialogVisible2 = false;
            getPointList();
        }

        const importData = () => {
            state.formData1 = props.formData;
            state.dialogVisible2 = true;
        }

        const exportData = async () => {

            axios({
                method: "post",
                url: '/template',
                headers: {
                    "action": 53211,
                    'template_name': props.formData.template_name
                },
                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();
        }

        return {
            ...toRefs(state),
            visible,
            closeDialog,
            delData,
            manageData,
            dialogSuccess1,
            dialogSuccess2,
            importData,
            exportData,
            editData
        };
    },
};
</script>
<style lang="scss" scoped>
.top-title {
    width: 100%;

    ::v-deep .el-card__body {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-weight: 800;
        font-size: 16px;
    }
}

.top-btn {
    width: 100%;
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
}

.btns {
    padding: 15px 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.flex-center {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    cursor: pointer;
}
</style>
  