<template>
  <el-dialog :visible.sync="dialogVisible" :title="title" class="edit-origin-dialog">
    <el-form style="width:400px;" :model="formData" class="dcenter" label-width="120px">
      <!--                <el-form-item label="">-->
      <!--                    <el-input v-model="formData.Name" placeholder="请输入数据源名称"></el-input>-->
      <!--                </el-form-item>-->
      <el-form-item label="接口名称">
        <el-input v-model="formData.Name" placeholder="请输入接口名称"></el-input>
      </el-form-item>
      <!--            <el-input type="textarea" class="edit-textarea dcenter block" v-model="formData.Description" placeholder="请维护数据源说明"></el-input>-->
      <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="json格式" v-if="formData.ProtocolType == 'common'">
        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" v-model="ProtocolInfo"
                  placeholder="请输入json格式数据"></el-input>
      </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="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>
      <template v-if="formData.ProtocolType =='ems-collect'">
        <el-form-item label="TCP/UDP">
          <el-select placeholder="请选择" v-model="tcpOptions">
            <el-option v-for="item in tcpList" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="线程数">
          <el-select placeholder="请选择" v-model="threadOptions">
            <el-option v-for="item in threadList" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="HBase库名">
          <el-input/>
        </el-form-item>
        <el-form-item label="zookeeper">
          <el-input/>
        </el-form-item>
      </template>
      <template
        v-if="formData.ProtocolType == 'opc' ||formData.ProtocolType == 'mqtt' || formData.ProtocolType == 'amqp'  ">
        <el-form-item label="用户名">
          <el-input v-model="formData.ProtocolInfo.User"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formData.ProtocolInfo.Password"></el-input>
        </el-form-item>
      </template>
      <el-form-item label="ProgId" v-if="formData.ProtocolType == 'opc'">
        <el-input v-model="formData.ProtocolInfo.ProgId"></el-input>
      </el-form-item>

      <el-form-item label="采集间隔(s)" v-if="formData.ProtocolType != 'ems-collect'">
        <el-input-number v-model="formData.CollectInterval" controls-position="right" :min="10"></el-input-number>
      </el-form-item>
      <el-form-item label="通讯模式" v-if="formData.ProtocolType != 'common'  && formData.ProtocolType != 'ems-collect' ">
        <el-select filterable>
          <el-option></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="网络类型">
        <el-select v-model="formData.wangluo" filterable @change="handleChangeNetType" placeholder="请选择">
          <el-option v-for="item in netOptons" :key="item.value" :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="描述">
        <el-input type="textarea" v-model="formData.Description" :autosize="{ minRows: 4, maxRows: 4}"
                  placeholder="请输入描述内容，200个字以内"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="formData.wangluo =='jianjie'?true:false">测试</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary">保存</el-button>
      </el-form-item>
      <el-form-item label="测试日志">
        <el-input type="textarea" v-model="formData.ceshi" :autosize="{ minRows: 4, maxRows: 4}"
                  disabled></el-input>
      </el-form-item>


    </el-form>

  </el-dialog>
</template>

<script>
  import ipInput from "@/components/config_point/ip_input"
  // import bread from "components/common/bread_crumb"
  import tools from "@/utils/tools"
  import {createDataSource, queryDataSource, updateDataSource} from "@/fetch/point_http"
  import {mapGetters} from "vuex";

  export default {
    computed: {
      ...mapGetters("layout", [
        "projectId"
      ])
    },
    data() {
      return {
        dialogVisible: false,
        title: '',
        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: 'lora',
          label: 'LoRa'
        }, {
          value: 'ems-collect',
          label: 'ems-collect'
        }, {
          value: 'common',
          label: '其他'
        }],
        netOptons: [
          {
            value: 'zhilian',
            label: '直连'
          }, {
            value: 'jianjie',
            label: '间接'
          },
        ],
        tcpList: [
          {value: 1, label: 'TCP'},
          {value: 0, label: 'UDP'}
        ],
        threadList: [
          {value: 1, label: 1},
          {value: 2, label: 2},
          {value: 4, label: 4},
          {value: 8, label: 8}
        ],
        threadOptions: '', //临时存储
        tcpOptions: '',//临时存储
      }
    },
    components: {
      ipInput,
    },

    methods: {
      openDialog(obj) {
        this.dialogVisible = true
        this.title = obj ? '编辑数据源' : '添加数据源'
        this.getDataSouse(obj)

      },
      changeItem(ip, port) {
        this.formData.ProtocolInfo.Ip = ip
        this.formData.ProtocolInfo.Port = port
      },
      handleChangeProtocolType(val) {//切换协议类型
        switch (val) {
          case 'modbus-tcp':
          case 'bacnet-ip':
          case 'knx':
          case 'lora':
            break
          case 'opc' :
            break
          case 'mqtt':
          case 'amqp':
            break
          case 'ems-collect':
            break
          case 'common':
            this.formData.ProtocolStandarded = false
            break

        }

      },
      handleChangeNetType(val) { //网络类型
        console.log(val)

      },
      getDataSouse(item) {
        this.formData = {}
        let param = {
          Filters: {
            Id: item.Id
          },
          "PageNumber": 1,
          "PageSize": 50,
          "Projection": []
        }
        queryDataSource(param, res => {

          let data = res.Content[0]
          data.ProtocolType = data.ProtocolType == '其他' ? 'common' : data.ProtocolType
          this.formData = data
          if (!this.formData.ProtocolInfo) {
            //信息点为空时
            this.formData.ProtocolInfo = {
              "Ip": "", //ip
              "Port": "",
              "User": "", //用户名
              "Password": "", //密码
              "ProgId": "", //progId
            }
          } else {
            //有信息点时
            this.ProtocolInfo = JSON.stringify(data.ProtocolInfo)
            debugger
          }
          this.handleChangeProtocolType(data.ProtocolType)
        })
      },
      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 scoped lang="less">
  .edit-origin-dialog {
    /deep/ .el-select > .el-input {
      width: 282px;
    }
  }
</style>
