<template>
    <div>
        <!-- <bread></bread> -->
        <div class="margin-view"></div>
        <div class="btn-view" >
            <el-button class="btn" @click="btnClick">{{ id? '保存修改': '新建'}}</el-button>
        </div>
        <div class="content-view">
            <el-form label-width="10px" style="width:400px;" :model="formData" class="dcenter">
                <el-form-item label="">
                    <el-input v-model="formData.Name" placeholder="请输入数据源名称"></el-input>
                </el-form-item>
            </el-form>
            <el-input type="textarea" class="edit-textarea dcenter block" v-model="formData.Description" placeholder="请维护数据源说明"></el-input>
            <el-form label-width="120px" style="width:400px;" :model="formData" class="dcenter">
                <el-form-item label="协议类型">
                    <el-select v-model="formData.ProtocolType" filterable @change="handleChangeProtocolType" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主机IP地址" v-if="formData.ProtocolType != 'common'">
                    <ip-input :ip="formData.ProtocolInfo.Ip" :port="formData.ProtocolInfo.Port" :ProtocolType="formData.ProtocolType" @change="changeItem" @deletePort="deletePort"></ip-input>
                </el-form-item>
                <el-form-item label="用户名/密码" v-if="(passWordArr.indexOf(formData.ProtocolType) > -1)">
                    <el-input v-model="formData.ProtocolInfo.User" style="display:inline-block;width:100px;"></el-input>/
                    <el-input v-model="formData.ProtocolInfo.Password" style="display:inline-block;width:100px;"></el-input>
                </el-form-item>
                <el-form-item label="ProgId" v-if="formData.ProtocolType == 'opc'">
                    <el-input v-model="formData.ProtocolInfo.ProgId" style="display:inline-block;width:100px;"></el-input>
                </el-form-item>
                <el-form-item label="属性详情" v-if="formData.ProtocolType == 'common'">
                    <el-input type="textarea" :autosize="{ minRows: 8, maxRows: 8}" v-model="ProtocolInfo"  placeholder="请输入json格式数据" style="display:inline-block;width:400px;"> </el-input>
                </el-form-item>
                <el-form-item label="采集间隔时间">
                    <el-input-number v-model="formData.CollectInterval" controls-position="right" @change="handleChange" :min="10"></el-input-number>&nbsp;&nbsp;s
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    import ipInput from "@/components/config_point/ip_input"
    // import bread from "components/common/bread_crumb"
    import tools from "@/utils/tools"
    import {
        queryDataSource,
        updateDataSource,
        createDataSource
    } from "@/fetch/point_http"
    import {
        mapGetters,
        mapActions
    } from "vuex";
    export default {
        computed: {
            ...mapGetters("layout", [
                "projectId"
            ])
        },
        data() {
            return {
                passWordArr: ['mqtt', 'amqp', 'opc'],
                formData: {
                    ProtocolType: "", //协议类型
                    ProtocolStandarded: true,
                    Name: "",
                    ProtocolInfo: {
                        Ip: "", //ip
                        Port: "", //端口号，有些协议类型没有该信息
                        User: "", //用户名
                        Password: "", //密码
                        ProgId: "", //progId
                    },
                    Description: "",
                    CollectInterval: 10
                },
                ProtocolInfo:"",//自定义协议信息
                options: [{
                    value: 'modbus-tcp',
                    label: 'Modbus TCP'
                }, {
                    value: 'bacnet-ip',
                    label: 'BACNet IP'
                }, {
                    value: 'opc',
                    label: 'OPC'
                }, {
                    value: 'knx',
                    label: 'KNX'
                }, {
                    value: 'mqtt',
                    label: 'MQTT'
                }, {
                    value: 'amqp',
                    label: 'AMQP'
                }, {
                    value: 'common',
                    label: '其他'
                }],
                id: this.$route.query.key
            }
        },
        components: {
            ipInput,
            // bread
        },
        created() {
            this.$store.dispatch('setBreadcrumb', [{
                label: '系统集成',
                path: '/point/pointsetting'
            }, {
                label: '子系统点位接入',
                path: '/point/pointsetting'
            }, {
                label: this.id ? '编辑数据源' : '添加数据源'
            }])
        },
        mounted() {
            if (!!this.id) {
                this.getDataSouse()
            }
        },
        methods: {
            changeItem(ip, port) {
                this.formData.ProtocolInfo.Ip = ip
                this.formData.ProtocolInfo.Port = port
            },
            handleChangeProtocolType(val){//切换协议类型
                if(val == 'common'){
                    this.formData.ProtocolStandarded = false
                } else {
                    this.formData.ProtocolStandarded = true
                }
            },
            getDataSouse() {
                let param = {
                    Filters: {
                        Id: this.id
                    },
                    "PageNumber": 1,
                    "PageSize": 50,
                    "Projection": []
                }
                queryDataSource(param, res => {
                    let data = res.Content[0]
                    if (!data.ProtocolInfo) {
                        //信息点为空时
                        data.ProtocolInfo = {
                            "Ip": "", //ip
                            "Port": "",
                            "User": "", //用户名
                            "Password": "", //密码
                            "ProgId": "", //progId
                        }
                    } else {
                        //有信息点时
                        this.ProtocolInfo = JSON.stringify(data.ProtocolInfo)
                    }
                    this.formData = data
                    console.log(this.formData, "formData")
                })
            },
            btnClick() {
                console.log(this.formData, "form")
                let param = tools.deepCopy(this.formData)
                tools.delObjKey(param, "CreateTime")
                tools.delObjKey(param, "LastUpdate")
                if(param.ProtocolType == 'common'){
                    try{
                        let ProtocolInfo = JSON.parse(this.ProtocolInfo)
                        param.ProtocolInfo = ProtocolInfo
                    } catch (err) {
                        this.$message.error("属性详情格式错误！")
                        return false
                    }
                }
                if (!!this.id) {
                    console.log(param.ProtocolInfo.Port)
                    if (param.ProtocolInfo.hasOwnProperty("Port") && param.ProtocolInfo.Port == "") {
                        delete param.ProtocolType.Port
                    }
                    updateDataSource({
                        Content: [param],
                        Projection: []
                    }, res => {
                        console.log(res, 'res')
                        this.$router.push({
                            path: '/point/pointsetting'
                        })
                        this.$message.success("更新成功！")
                    })
                } else {
                    // param.ProjectId = this.projectId
                    console.log(param, "param")
                    createDataSource(param, res => {
                        console.log(res)
                        this.$router.push({
                            path: '/point/pointsetting'
                        })
                        this.$message.success("创建成功！")
                    })
                }
            },
            deletePort() {
                this.formData.ProtocolInfo.Port = ""
            }
        },
        watch: {
            projectId(){
                this.$router.push({
                    path: '/point/pointsetting'
                })
            }
        }
    }
</script>
<style lang="scss">
    .margin-view {
        height: 60px;
    }
    .btn-view {
        overflow: hidden;
        .btn {
            float: right;
            margin-right: 40px;
        }
    }
    .content-view {
        width: 928px;
        margin: auto;
        .edit-textarea {
            margin: 8px 0 22px 0;
            height: 117px;
            textarea {
                height: 100%;
                background-color: #EEFAFF;
            }
        }
    }
</style>
