<template>
  <div style="display: flex;flex-direction: column">
    <div class="device-container">
      <div class="left-container">
        <div class="form">
          <div class="tip-container">
            <div class="tip-line">
            </div>
            <span class="tip-text">设置</span>
          </div>

          <el-form style="margin-top: 37px" label-width="145px" :model="formData" label-position="left">
            <el-form-item label="设备名称:">
              <el-input v-model="formData.text" disabled></el-input>
            </el-form-item>
            <el-form-item label="设备类型:">
              <el-input v-model="formData.deviceType" disabled></el-input>
            </el-form-item>
            <el-form-item label="通信协议:">
              <el-input v-model="formData.protocol"></el-input>
            </el-form-item>
            <el-form-item label="IP:">
              <el-input v-model="formData.ip"></el-input>
            </el-form-item>
            <el-form-item label="IP端口:">
              <el-input v-model="formData.port"></el-input>
            </el-form-item>
            <el-form-item label="寄存器地址:">
              <el-input v-model="formData.commandAddress"></el-input>
            </el-form-item>
            <el-form-item label="读写:">
              <el-select
                  style="width: 100%"
                  v-model="formData.commandType" placeholder="请选择">
                <el-option
                    v-for="item in dataFormatList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="写入值:" v-if="formData.commandType=='write'">
              <el-select
                  style="width: 100%"
                  v-model="formData.commandValue" placeholder="请选择">
                <el-option label="true" value="true"></el-option>
                <el-option label="false" value="false"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>


      <div class="right-container">
        <div class="form">
          <div class="tip-container">
            <div class="tip-line">
            </div>
            <span class="tip-text">返回信息</span>

            <div style="flex: 1"></div>

            <div class="btn-help">
              <span class="btn-text">帮 助</span>
            </div>
          </div>

          <div class="code-text" v-show="formData.isTest">{{algResult==='true'?'成功':'失败'}}</div>

        </div>
      </div>

    </div>

    <div class="footer">
      <el-button style="margin:0 80px" type="primary" @click="onSubmit">
        <i class="el-icon-video-play el-icon--left"></i>
        <span>运行一次</span>
      </el-button>
      <el-button style="margin:0 80px" type="primary" @click="onSubmit" plain>
        <i class="el-icon-s-order el-icon--left"></i>
        <span>保存设置</span>
      </el-button>
      <!-- <el-button style="margin:0 80px" type="primary" @click="onHandleBack">返回</el-button> -->
    </div>

    <div v-if="false" style="display: flex;justify-content: center;margin-top: 312px">
      <el-button style="margin-right: 166px" type="primary" icon="el-icon-video-play" @click="onSubmit">运行一次</el-button>
      <el-button  icon="el-icon-document" @click="onSaveClick">保存设置</el-button>
    </div>

  </div>

</template>
<script>
export default {
  name: '',
  props: {
    nodeData: Object,
    lf: Object || String,
    socketResponse: Object,
  },
  mounted() {
    const {properties, text} = this.$props.nodeData
    if (properties) {
      this.$data.formData = Object.assign({}, this.$data.formData, properties)
    }
    if (text && text.value) {
      this.$data.formData.text = text.value
    }
    if (text && text.value) {
      this.$data.text = text.value
    }
  },
  data() {
    return {
      url: "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
      labelDataOrigin: [],
      loadingData: false,
      text: '',
      formData: {
        isTest: false,
        text: '',
        deviceType: '',
        name: '',
        region: '',
        type: '',
        commandType: 'read',
        isScanCodeTest: false,
      },
      dataFormatList: [
        {
          label: '读',
          value: 'read',
        },
        {
          label: '写',
          value: "write",
        }
      ],
      algResult: false
    }
  },
  methods: {
    splitContent(content) {
      let len = content.split('/')
      let index = len.length-1
      return len[index]
    },
    updateData(data) {
      console.log(data);
    },
    onSubmit() {
      const { id } = this.$props.nodeData
      this.formData.isTest = true
      this.$emit('onClose',{id, formData: this.$data.formData}, (res)=> {
        console.log("父组件的返回结果：", res); //由父组件调用
        this.algResult = res.content
        // 获取结果后再次更新JSON,保证数据正确
        this.lf.setProperties(id, {
          ...this.formData
        });
      })
    },
    onHandleSave() {
      const { id } = this.$props.nodeData
      this.formData.isTest = false
      this.$emit('onClose',{id, formData: this.$data.formData},(res)=> {
        console.log("父组件的返回结果：", res); //由父组件调用
      })
    },
    onHandleBack() {
      window.history.go(-1)
    }
  }
}
</script>
<style scoped lang="scss">
.flex {
  display: flex;

  .form {
    flex: 1
  }
}

.el-button--primary{
  background: #0073E5;
  border-radius: 10px;
}
.el-button--primary:focus, .el-button--primary:hover{
  background: #0201BF;
}
.el-button--primary.is-plain{
  color: #0073E5;
  background: #fff;
  border-color: #0073E5;
  border-radius: 10px;
}
.el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover{
  background: #0201BF;
}

.footer{
  display: flex;
  justify-content: center;
  margin-top: 50px;
  .el-icon--left{
    font-size: 18px;
  }
}

.device-container {
  display: flex;
  margin-top: 33px;
  margin-left: 36px;

  .left-container {
    flex: 1;
    margin-right: 35px;
  }
  .right-container {
    flex: 1;
    margin-left: 35px;
  }
}

.tip-container {
  display: flex;
  align-items: center;

  .tip-line {
    width: 4px;
    height: 19px;
    background: #0073E5;
  }
  .tip-text {
    margin-left: 9px;
    font-size: 18px;
    color: #363636;
    font-weight: bold;
  }
}

.btn-help {
  margin-right: 70px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 37px;
  border: 2px solid #0073E5;
  border-radius: 8px;

  .btn-text {
    color: #0073E5;
    font-size: 18px;
    font-weight: 400;
  }
}

.code-text {
  margin-top: 55px;
  color: #363636;
  font-size: 23px;
  font-weight: bold;
}


</style>
