<template>
    <div>
        <select-one @check="typeCheck" :renderData="typeArr" infosKey="EquipmentType" name="原始点位描述中的对象类型关键字"></select-one>
        <select-one @check="paramCheck" :renderData="identifyArr" infosKey="ownMess" name="原始点位描述中对象参数关键字"></select-one>
        <div class="handson-view saga-border">
            <div v-if="hotData.length" class="h100">
                <div class="title-view">
                    <el-input v-model="inputValue" placeholder="批量填充空白的值/单位说明" style="width:200px;"></el-input>
                    <span class="w10"></span>
                    <el-button @click="fullValue">批量填充值/单位说明</el-button>
                </div>
                <div class="handson-main">
                    <handsontable-component ref="handsontable"></handsontable-component>
                </div>
                <div class="center">
                    <el-button @click="saveData">保存</el-button>
                </div>
            </div>
            <div v-else class="center">
                <i class="icon-wushuju iconfont"></i>
                暂无数据
            </div>
        </div>
    </div>
</template>
<script>
    import {
        mapGetters,
        mapActions
    } from "vuex";
    import {
        queryAllEqTypeList,
        queryAllEqParamList,
        queryPoint,
        updatePoint
    } from "@/fetch/point_http"
    import selectOne from "@/components/config_point/select_one"
    import handsontableComponent from "@/components/common/handsontable"
    export default {
        components: {
            selectOne,
            handsontableComponent
        },
        computed: {
            ...mapGetters("project", [
                "datasourceId",
                "protocolType"
            ]),
            projectId () {
                return this.$store.getters['layout/projectId']
            }
        },
        data() {
            return {
                typeArr: [],
                identifyArr: [],
                EquipmentType: "",
                EquipmentParameter: "",
                inputValue: "",
                header: ['原始点位描述', '值/单位说明', '*识别的对象类型关键字', '*识别的对象参数关键字'],
                type: [{
                        data: 'Description',
                        readOnly: true
                    },
                    {
                        data: 'ValueDescription'
                    },
                    {
                        data: 'KeyEquipmentType'
                    },
                    {
                        data: 'KeyEquipmentParameter'
                    }
                ],
                hot: "",
                hotData: []
            }
        },
        created() {
            this.getTypes()
        },
        mounted() {},
        methods: {
            //保存数据
            saveData(){
                let param = this.hot.getSourceData().map(item => {
                    return {
                        ValueDescription: item.ValueDescription || null,
                        KeyEquipmentType: item.KeyEquipmentType || null,
                        KeyEquipmentParameter: item.KeyEquipmentParameter || null,
                        Id: item.Id,
                        DatasourceId: item.DatasourceId
                    }
                })
                console.log(param)
                updatePoint({
                    data: {Content: param},
                    type: this.protocolType
                },res => {
                    console.log(res)
                    this.$message.success("保存成功!")
                    this.typeCheck()
                })
            },
            //填充值被点击
            fullValue(){
                if(!this.inputValue){
                    return false
                }
                this.hotData.map(item => {
                    //如果没有值
                    if(!item.ValueDescription){
                        item.ValueDescription = this.inputValue
                    }
                })
            },
            //设备类型被点击
            typeCheck(item) {
                this.EquipmentType = item.EquipmentType == "空" ? "" : item.EquipmentType
                this.getParam()
            },
            //设备参数被点击
            paramCheck(item) {
                console.log(item, "对象参数")
                this.inputValue = ""
                if (!!item) {
                    this.EquipmentParameter = (item.EquipmentParameter == "空" || !item.EquipmentParameter) ? null : item.EquipmentParameter
                    this.queryPoint()
                } else {
                    this.hotData = []
                    return false
                }
            },
            //获取点位列表
            queryPoint() {
                console.log(this.EquipmentType, this.EquipmentParameter, "EquipmentParameter")
                let param = {
                        data: {
                            Filters: {
                                DataSourceId: this.datasourceId,
                                KeyEquipmentParameter: this.EquipmentParameter,
                                KeyEquipmentType: this.EquipmentType,
                                Used: true
                            }
                        },
                        PageNumber: 1,
                        PageSize: 1000,
                        type: this.protocolType
                    },
                    width, settings
                console.log(param.data)
                queryPoint(param, res => {
                    this.hotData = res.Content
                    settings = {
                        data: this.hotData,
                        colHeaders: this.header,
                        columns: this.type,
                        rowHeights: 30,
                        maxRows: res.Content.length
                    }
                    this.$nextTick(() => {
                        this.hot = this.$refs.handsontable.init(settings)
                    })
                    console.log(this.hot)
                })
            },
            //获取原始点位描述中设备参数关键字
            getParam() {
                queryAllEqParamList({
                    type: this.protocolType,
                    data: {
                        DataSourceId: this.datasourceId,
                        KeyEquipmentType: this.EquipmentType
                    }
                }, res => {
                    this.identifyArr = res.Content.map(item => {
                        if (!!item.EquipmentParameter) {
                            item.ownMess = item.EquipmentParameter + "(涉及原始点位:" + item.PointCount + ")"
                        } else {
                            item.ownMess = "空" + "(涉及原始点位:" + item.PointCount + ")"
                        }
                        return item
                    })
                    console.log(this.identifyArr, "res")
                })
            },
            //获取原始点位描述中的设备类型关键字
            getTypes() {
                queryAllEqTypeList({
                    type: this.protocolType,
                    data: {
                        DataSourceId: this.datasourceId,
                        ProjectId: this.projectId
                    }
                }, res => {
                    // res.Content.unshift({EquipmentType: "空"})
                    this.typeArr = res.Content
                    console.log(this.typeArr)
                })
            },
        }
    }
</script>
<style lang="scss" scoped>
    .handson-view {
        height: 340px;
        width: 680px;
        float: right;
        overflow-y: auto;
    }
    .title-view {
        height: 50px;
        line-height: 50px;
        padding-left: 10px;
    }
    .w10 {
        width: 10px;
        display: inline-block;
    }
    .handson-main {
        height: calc(100% - 90px);
        width: 100%;
    }
</style>
