<template>
    <div id="handsonStep2">
        <div class="btns-view">
            <el-button @click="dialogShow(1)">根据关键内容批量标准化设备标识</el-button>
            <el-button @click="dialogShow(2)">根据关键内容批量对应数据字典</el-button>
            <el-checkbox v-model="checked">只显示未标准化得的原始点位</el-checkbox>
        </div>
        <div id="handsontableSteps1">
            <handsontable-component ref="handsontable"></handsontable-component>
        </div>
        <own-dialog :width="'1000px'" :dialogVisible="isDialogShow" @cancel="close">
            <dialog-main></dialog-main>
        </own-dialog>
    </div>
</template>
<script>
    import handsontableComponent from "components/common/handsontable"
    import headerArr from "utils/point_edit/steps3.js"
     import {
        changeHeader,
        showTypes
    } from "utils/handsontable/delType"
    import {
        mapGetters,
        mapActions
    } from "vuex";
    import ownDialog from "components/el_pack/dialog"
    import dialogMain from "components/config_point/dialog_main"
    import {
        queryPoint
    } from "fetch/point_http"
    export default {
        data() {
            return {
                checked: false,
                settings: {},
                isDialogShow: false,
                hot: null
            }
        },
        computed: {
            ...mapGetters("project", [
                "projectId",
                "datasourceId",
                "protocolType"
            ])
        },
        created() {
            if (!this.protocolType) {
                this.$router.push({
                    path: "/configPoint"
                })
            }
        },
        mounted() {
            this.getData()
        },
        methods: {
            //页面关闭
            close() {
                this.isDialogShow = false
            },
            //页面显示num1为标准化设备标识，2为对应数据字典
            dialogShow(num) {
                if (num == 1) {
                } else if (num == 2) {
                }
                this.isDialogShow = true
            },
            //初始化表格实例
            getData() {
                let width, param, settings
                width = (document.getElementById("app").clientWidth - 50) / headerArr.length
                param = {
                    type: this.protocolType,
                    data: {
                        Filters: {
                            Id: this.datasourceId,
                        },
                        "PageNumber": 1,
                        "PageSize": 50,
                    }
                }
                queryPoint(param, res => {
                    console.log(res)
                    settings = {
                        data: res.Content,
                        colHeaders: changeHeader(headerArr),
                        columns: showTypes(headerArr),
                        colWidths: width,
                        rowHeights: 30,
                        maxRows: res.Content.length
                    }
                    this.hot = this.$refs.handsontable.init(settings)
                    console.log(this.hot)
                })
            }
        },
        components: {
            handsontableComponent,
            ownDialog,
            dialogMain
        }
    }
</script>
<style lang="scss" scoped>
    #handsonStep2 {
        height: 100%;
        .btns-view {
            height: 50px;
            vertical-align: middle;
        }
        #handsontableSteps1 {
            height: calc(100% - 50px);
            overflow: hidden;
            position: relative;
        }
    }
</style>