<template>
    <div class="identify-steps3">
        <div class="collapse-view">
            <el-collapse v-model="activeName" @change="handleChange" accordion>
                <el-collapse-item v-for="(item,index) in renderData" :key="index" :name="index+1">
                    <template slot="title">
                        <span style="padding-left:10px;box-sizing:border-box;">
                            {{item.Group}}
                        </span>
                    </template>
                    <div class="collapse-item">
                        <div style="display: flex;justify-content: space-between; height: 40px; line-height: 40px;padding:0 5px;box-sizing:border-box;">
                            <p>
                                <el-input  v-model="fillData" placeholder="批量填充空白的设备标识" style="width: 180px; margin-right: 10px;"></el-input>
                                <el-button @click="fillClick">填充</el-button>
                            </p>
                            <p style="display: flex">
                                <span style="margin-right: 10px; color: #909399;" >AI建议的设备标识</span>
                                <span class='ai-eq' :title="item.EquipmentMark" @click="aiHandle(item.EquipmentMark)">{{item.EquipmentMark || '--'}}</span>
                            </p>
                        </div>
                        <div style="flex: 1">                    
                            <handsontable-component ref="handsontable"></handsontable-component>
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <div class="center">
            <el-button @click="save">保存</el-button>
        </div>
    </div>
</template>
<script>
    import handsontableComponent from "@/components/common/handsontable"
    import {
        mapGetters,
        mapActions
    } from "vuex";
    import {
        updatePoint
    } from "@/fetch/point_http"
    export default {
        name: "nullIdentify",
        props: {
            renderData: {
                type: Array,
                default: function() {
                    return []
                }
            }
        },
        data() {
            return {
                activeName: "1",
                hotArr: [],
                fillData: "",//填充的数据
            }
        },
        computed: {
            ...mapGetters("project", [
                "projectId",
                "datasourceId",
                "protocolType"
            ])
        },
        methods: {
            aiHandle(value) {
                if(value == '--') {
                    return false;
                }  else {
                    this.fillData = value;
                }
            },
            save() {
                console.log(this.renderData,'renderData')
                // let data = this.hotArr[this.activeName - 1].getSourceData()
                let data = []
                this.renderData.map(item => {
                    if(!!item.PointList){
                        item.PointList.map(child => {
                            data.push(child)
                        })
                    }
                })
                console.log(data)
                data = data.map(item => {
                    return {
                        EquipmentMark: item.own || null,
                        Id: item.Id,
                    }
                })
                updatePoint({
                    data: {
                        Content: data
                    },
                    type: this.protocolType
                }, res => {
                    this.$emit("saved")
                    this.$message.success("保存成功")
                })
            },
            fillClick(){
                // let data = this.hotArr[this.activeName - 1].getSourceData()
                // data.own = this.fillData
                // data.map(item => {
                //     item.own = this.fillData
                // })
                this.renderData[this.activeName - 1].PointList.map(item => {
                    item.own = item.own || this.fillData
                })
                console.log(this.renderData[this.activeName - 1].PointList)
                this.handleChange(true)
                // console.log(data,'data')
            },
            handleChange(val) {
                if (!val) {
                    return false
                }
                if (this.renderData.length < this.activeName) {
                    return false
                }
                this.fillData = ""
                let headers = {
                    "modbus-tcp": [{
                            InfoPointName: "*slave_id",
                            InfoPointCode: "SlaveId",
                            InputMode: "B1",
                            Visible: true,
                            FirstTag: ""
                        },
                        {
                            InfoPointName: "*registers_address ",
                            InfoPointCode: "RegistersAddress",
                            InputMode: "B1",
                            Visible: true,
                            FirstTag: ""
                        },
                        {
                            InfoPointName: "*registers_quality",
                            InfoPointCode: "RegistersQuality",
                            InputMode: "B1",
                            Visible: true,
                            FirstTag: ""
                        },
                        {
                            InfoPointName: "*convert_type",
                            InfoPointCode: "ConvertType",
                            InputMode: "select",
                            DataSource: [{
                                    Code: "1",
                                    Name: "位"
                                },
                                {
                                    Code: "2",
                                    Name: "单字"
                                }, {
                                    Code: "3",
                                    Name: "双字"
                                }, {
                                    Code: "4",
                                    Name: "四字"
                                }
                            ],
                            Visible: true,
                            FirstTag: ""
                        },
                        {
                            InfoPointName: "*翻转规则",
                            InfoPointCode: "RevertRule",
                            InputMode: "B1",
                            Visible: true,
                            FirstTag: ""
                        }
                    ],
                    "bacnet-ip": [{
                            InfoPointName: "*device_id",
                            InfoPointCode: "DeviceId",
                            InputMode: "B1",
                            Visible: true,
                            FirstTag: ""
                        },
                        {
                            InfoPointName: "*instance_number",
                            InfoPointCode: "InstanceNumber",
                            InputMode: "B1",
                            Visible: true,
                            FirstTag: ""
                        },
                        {
                            InfoPointName: "*data_type",
                            InfoPointCode: "DataType",
                            DataSource: [{
                                    Code: "analogInput",
                                    Name: "analogInput"
                                },
                                {
                                    Code: "analogOutput",
                                    Name: "analogOutput"
                                },
                                {
                                    Code: "analogValue",
                                    Name: "analogValue"
                                },
                                {
                                    Code: "binaryInput",
                                    Name: "binaryInput"
                                },
                                {
                                    Code: "binaryOutput",
                                    Name: "binaryOutput"
                                },
                                {
                                    Code: "binaryValue",
                                    Name: "binaryValue"
                                },
                                {
                                    Code: "multiStateInput",
                                    Name: "multiStateInput"
                                },
                                {
                                    Code: "multiStateOutput",
                                    Name: "multiStateOutput"
                                },
                                {
                                    Code: "multiStateValue",
                                    Name: "multiStateValue"
                                }
                            ],
                            InputMode: "select",
                            Visible: true,
                            FirstTag: ""
                        }
                    ],
                    "opc": [{
                        InfoPointName: "*item",
                        InfoPointCode: "Item",
                        InputMode: "B1",
                        Visible: true,
                        FirstTag: ""
                    }],
                    "knx": [{
                        InfoPointName: "*group_address",
                        InfoPointCode: "GroupAddress",
                        InputMode: "B1",
                        Visible: true,
                        FirstTag: ""
                    }],
                    "mqtt": [{
                        InfoPointName: "*topic",
                        InfoPointCode: "Topic",
                        InputMode: "B1",
                        Visible: true,
                        FirstTag: ""
                    }],
                    "amqp": [{
                            InfoPointName: "*exchange",
                            InfoPointCode: "Exchange",
                            InputMode: "B1",
                            Visible: true,
                            FirstTag: ""
                        },
                        {
                            InfoPointName: "*type",
                            InfoPointCode: "Type",
                            InputMode: "B1",
                            Visible: true,
                            FirstTag: ""
                        },
                        {
                            InfoPointName: "*routing_key ",
                            InfoPointCode: "RoutingKey",
                            InputMode: "B1",
                            Visible: true,
                            FirstTag: ""
                        }
                    ]
                }
                let allData = this.renderData[this.activeName - 1].PointList,
                    data = {
                        data: allData,
                        colHeaders: [],
                        columns: [],
                        maxRows: allData.length,
                    }
                headers[this.protocolType].map(item => {
                    data.columns.push({
                        data: item.InfoPointCode,
                        readOnly: true,
                    })
                    data.colHeaders.push(item.InfoPointName)
                })
                data.columns.splice(0, 0, {
                    data: 'Description',
                    readOnly: true
                })
                data.columns.splice(0, 0, {
                    data: 'own'
                })
                data.colHeaders.splice(0, 0,'原始点位描述')
                data.colHeaders.splice(0, 0,'设备标识')
                data.columns.push({
                    data: 'LocationFlag',
                    readOnly: true
                })
                data.columns.push({
                    data: 'Remarks',
                    readOnly: true
                })
                data.colHeaders.push('位置标签')
                data.colHeaders.push('备注')
                this.$nextTick(_ => {
                    this.hotArr[this.activeName - 1] = this.$refs.handsontable[this.activeName - 1].init(data)
                })
            }
        },
        watch: {
            renderData: {
                deep: true,
                handler: function() {
                    this.handleChange(this.activeName)
                }
            }
        },
        components: {
            handsontableComponent
        }
    }
</script>
<style lang="scss">
    .identify-steps3 {
        height: 100%;
        display: flex;
        flex-direction: column;
        .collapse-view{
            flex: 1;
            overflow-y: auto;
        }
        .center{
            height: 35px;
            line-height: 35px;
        }
        .el-collapse-item__header.is-active {
            border-bottom-color: #ccc;
        }
        .collapse-item {
            height: 230px;
            display: flex;
            flex-direction: column;
            .ai-eq {
                cursor: pointer;
                width: 60px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
</style>
