<template>
    <div id="handsonStep1">
        <div class="btns-view">
            <el-button>获取原始点位当前值</el-button>
            <el-button>导出Excel模板</el-button>
            <el-button>导入Excel</el-button>
            <el-button @click="addRow">新增行</el-button>
            <el-button @click="saveData">保存</el-button>
            <el-checkbox v-model="checked">只显示使用的原始点位</el-checkbox>
        </div>
        <div id="handsontableSteps1">
            <handsontable-component ref="handsontable" @change="changeHand"></handsontable-component>
        </div>
    </div>
</template>
<script>
    import handsontableComponent from "components/common/handsontable"
    import getHeaderSetting from "utils/point_edit/handson_header"
    import {
        mapGetters,
        mapActions
    } from "vuex";
    import {
        changeHeader,
        showTypes
    } from "utils/handsontable/delType"
    import {
        queryPoint,
        updatePoint,
        createPoint
    } from "fetch/point_http"
    export default {
        data() {
            return {
                checked: false,
                settings: {},
                hot: null,
                changeFlag: true, //是否发生修改
            }
        },
        computed: {
            ...mapGetters("project", [
                "projectId",
                "datasourceId",
                "protocolType"
            ])
        },
        created() {
            if (!this.protocolType) {
                this.$router.push({
                    path: "/configPoint"
                })
            }
        },
        mounted() {
            console.log(this.datasourceId, this.protocolType)
            this.getData()
        },
        methods: {
            addRow(){
                let data = this.hot.getSourceData()
                data.unshift({})
                this.hot.loadData(data)
                this.hot.updateSettings({
                    maxRows: data.length
                })
                console.log(data,this.hot,"data")
            },
            getData() {
                let header, width, param, settings
                header = getHeaderSetting(this.protocolType)
                width = (document.getElementById("app").clientWidth - 50) / header.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(header),
                        columns: showTypes(header),
                        colWidths: width,
                        rowHeights: 30,
                        maxRows: res.Content.length
                    }
                    this.hot = this.$refs.handsontable.init(settings)
                    console.log(this.hot)
                })
            },
            //修改提示
            changeHand(changeData, source) {
                if(!!changeData){
                    this.changeFlag = false
                }
                return false
            },
            //保存
            saveData() {
                if (!!this.hot) {
                    console.log(this.hot.getSourceData())
                    let data = this.hot.getSourceData(),updateList = [],createList = [];
                    data.map(item => {
                        if(!!item.Id){
                            delete item.CreateTime
                            delete item.LastUpdate
                            updateList.push(item)
                        }else{
                            createList.push(item)
                        }
                    })
                    console.log(updateList,"updateList")
                    if(updateList.length){
                        this.update(updateList)
                    }

                    if(createList.length){
                        this.createList(createList)
                    }
                } else {
                    this.$message.error("请确保存在数据")
                }
            },
            async createList(createList){
                console.log(createList)
                let i = 0;
                for(i;i < createList.length;i++){
                    if(createList[i].hasOwnProperty("Description")){
                        await this.create(createList[i])
                    }
                }
                this.changeFlag = true
            },

            async create(obj){
                console.log(obj)
                obj.DatasourceId = this.datasourceId
                obj.ProjectId = this.projectId
                await createPoint({
                    data:obj,
                    type: this.protocolType
                    },res => {
                    console.log(res)
                    obj.Id = res.Id
                })
            },
            /**
             * @param {更新list} updateList
             * 
             * 更新点位
             */
            update(updateList){
                updatePoint({
                    data:{Content:updateList},
                    type: this.protocolType
                },res => {
                    console.log(res)
                })
            },
            //没有保存的时候弹窗
            noSaveData() {
                return this.changeFlag
            }
        },
        components: {
            handsontableComponent
        },
    }
</script>
<style lang="scss" scoped>
    #handsonStep1 {
        height: 100%;
        .btns-view {
            height: 50px;
            vertical-align: middle;
        }
        #handsontableSteps1 {
            height: calc(100% - 50px);
            overflow: hidden;
            position: relative;
        }
    }
</style>
