<template>
    <div id="handsonStep2">
        <div class="btns-view">
            <el-button>AI自动识别</el-button>
            <el-button @click="discern(1)">批量识别设备类型关键字</el-button>
            <el-button @click="discern(2)">批量识别设备参数关键字</el-button>
            <el-button @click="examine">检查&微调</el-button>
            <el-button>刷新</el-button>
            <el-button @click="saveData">保存</el-button>
        </div>
        <div id="handsontableSteps1">
            <handsontable-component ref="handsontable"></handsontable-component>
        </div>
        <own-dialog :width="'60%'" :title="title" :dialogVisible="isDialogShow" @cancel="close">
            <find-keyword ref="findKeyword" :type="type" @change="changeHand"></find-keyword>
        </own-dialog>
        <own-dialog :width="'1000px'" :index="true" title="关键内容设别——检查&微调" :dialogVisible="examineDialog" @cancel="close">
            <!-- <find-keyword ref="findKeyword" :type="type"></find-keyword> -->
            <examine-main></examine-main>
        </own-dialog>
    </div>
</template>
<script>
    import handsontableComponent from "components/common/handsontable"
    import examineMain from "components/config_point/examine_main"
    import headerArr from "utils/point_edit/steps2.js"
    import {
        changeHeader,
        showTypes
    } from "utils/handsontable/delType"
    import ownDialog from "components/el_pack/dialog"
    import {
        mapGetters,
        mapActions
    } from "vuex";
    import {
        queryPoint,
        updatePoint
    } from "fetch/point_http"
    import findKeyword from "components/config_point/find_keyword"
    export default {
        data() {
            return {
                checked: false,
                settings: {},
                isDialogShow: false,
                msg: "",
                hot: null,
                title: "",
                type: "",
                examineDialog: false,
                changeFlag: true,
            }
        },
        created() {
            if (!this.protocolType) {
                this.$router.push({
                    path: "/configPoint"
                })
            }
        },
        mounted() {
            this.getData()
        },
        computed: {
            ...mapGetters("project", [
                "projectId",
                "datasourceId",
                "protocolType"
            ])
        },
        methods: {
            /**
             *  @param num 代表着1类型2参数
             * 
             */
            discern(num) {
                if (num == 1) {
                    this.title = "关键内同识别——批量识别设备类型关键字"
                    this.type = "type"
                } else if (num == 2) {
                    this.title = "关键内同识别——批量识别设备参数关键字"
                    this.type = "arguments"
                }
                this.isChangeData()
                this.isDialogShow = true
                this.$nextTick(() => {
                    this.$refs.findKeyword.changeType()
                })
            },
            close() {
                this.isDialogShow = false
                this.examineDialog = false
                this.isChangeData()
            },

            //判断是否修改，修改调用修改接口，否则调用获取最新数据
            isChangeData(){
                if (!this.changeFlag) {
                    this.saveData(false)
                } else {
                    this.getData()
                }
            },
            //点击检查按钮
            examine() {
                this.isChangeData()
                this.examineDialog = true
            },
            //保存
            saveData(falg) {
                if (!!this.hot) {
                    console.log(this.hot.getSourceData())
                    let data = this.hot.getSourceData(),
                        changeData;
                    changeData = data.map(item => {
                        return {
                            Id: item.Id,
                            DatasourceId: item.DatasourceId,
                            ProjectId: item.ProjectId,
                            Description: item.Description || null,
                            KeyEquipmentParameter: item.KeyEquipmentParameter || null,
                            Remarks: item.Remarks || null,
                            LocationFlag: item.LocationFlag || null,
                            KeyEquipmentType: item.KeyEquipmentType || null
                        }
                    })
                    console.log(changeData)
                    updatePoint({
                        data: {
                            Content: changeData
                        },
                        type: this.protocolType
                    }, res => {
                        console.log(res)
                        if (!falg) {
                            this.$message.success("保存成功")
                        }
                        this.getData()
                    })
                } else {
                    this.$message.error("请确保存在数据")
                }
            },
            //发生更改
            changeHand(changeData, source) {
                if (!!changeData) {
                    this.changeFlag = false
                }
                return false
            },
            //获取初始数据
            getData() {
                let width, param, settings
                width = (document.getElementById("app").clientWidth - 50) / headerArr.length
                param = {
                    type: this.protocolType,
                    data: {
                        Filters: {
                            DatasourceId: 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)
                })
            },
            noSaveData() {
                return this.changeFlag
            }
        },
        components: {
            handsontableComponent,
            ownDialog,
            findKeyword,
            examineMain
        }
    }
</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>