<template>
  <div class="camera">
    <section class="flex ">
      <div class="form">
        <div class="label-wrapper">
          <p></p>
          <label>设置</label>
        </div>
        <el-form label-width="120px" label-position="left" :model="formData">
          <el-form-item label="名称" >
            <el-input class="input-wrapper" v-model="formData.text" disabled></el-input>
          </el-form-item>
          <el-form-item label="设备类型" >
            <el-input class="input-wrapper" v-model="formData.deviceType" disabled></el-input>
          </el-form-item>
          <el-form-item label="ip">
            <el-input class="input-wrapper" v-model="formData.ip"></el-input>
          </el-form-item>
          <el-form-item label="端口">
            <el-input v-model="formData.port"></el-input>
          </el-form-item>
          <el-form-item label="通信协议">
            <el-input class="input-wrapper" v-model="formData.protocol"></el-input>
          </el-form-item>
          <el-form-item label="驱动">
            <el-input class="input-wrapper" v-model="formData.drive"></el-input>
          </el-form-item>
          <el-form-item label="触发模式">
            <el-select class="input-wrapper" v-model="formData.trigger" placeholder="请选择触发模式" >
              <el-option :label="item.dictValue" :value="item.dictValue" v-for="(item,index) in triggerTypeList" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文件保存路径">
            <el-input class="input-wrapper" v-model="formData.imgPath"></el-input>
          </el-form-item>
          <el-form-item label="图片格式">
            <el-select class="input-wrapper" v-model="formData.imgFormat" placeholder="请选择图片格式" >
              <el-option :label="item.dictValue" :value="item.dictValue" v-for="(item,index) in imgTypeList" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="drawboard">
        <div class="help">
          <span>帮 助</span>
        </div>
        <div class="img">
          <drawboard  
            :width="550"
            :height="500" 
            v-if="socketResponse.content" :url="`http://${NGINX_IMG}/saveImage/${splitContent(socketResponse.content)}`" @updateData="updateData"></drawboard>
        </div>
      </div>
    </section>
    <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="onHandleSave" plain>
        <i class="el-icon-s-order el-icon--left"></i>
        <span>关闭</span>
      </el-button> -->
    </div>    
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    nodeData: Object,
    lf: Object,
    socketResponse: Object
  },
  mounted() {
    const { properties, text } = this.$props.nodeData
    if (properties) {
      this.$data.formData = Object.assign({}, this.$data.formData, properties)
      this.$data.formData.text = properties.deviceName
    }
    if (text && text.value) {
      this.$data.formData.text = text.value
      this.$data.text = text.value
    }
  },
  data () {
    return {
      url:"https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
      labelDataOrigin:[],
      loadingData:false,
      text: '',
      formData: {
        text: '',
        name: '',
        region: '',
        type: '',
        isTest: false,  //true运行一次false保存
      },
      NGINX_IMG: process.env.VUE_APP_NGINX_IMG
    }
  }, 
  computed: {
    imgTypeList() {
      return JSON.parse(window.sessionStorage.getItem('imgType'))
    },
    triggerTypeList() {
      return JSON.parse(window.sessionStorage.getItem('triggerType'))
    }
  },
  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.formData.imageUrl = `http://${this.NGINX_IMG}/saveImage/${this.splitContent(res.content)}`
        this.formData.img = 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 lang="scss">
  
</style>
<style scoped lang="scss">
.camera{
  .label-wrapper{
    display: flex;
    align-items: center;
    padding-bottom: 37px;
    p{
      width: 4px;
      height: 20px;
      margin: 0;
      background: #0201BF;
    }
    label{
      font-size: 18px;
      font-weight: bold;
      color: #363636;
      margin-left: 10px;
    }
  }
  
  .footer{
    display: flex;
    justify-content: center;
    margin-top: 30px;
    .el-icon--left{
      font-size: 18px;
    }
  }
}
.flex {
  display: flex;
  .form {
    padding: 0 30px;
    .input-wrapper{
      width: 361px;
    }
  }
  .drawboard{
    flex: 1;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    .help{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 40vw;
      max-width: 100%;
      padding-bottom: 23px;
      span{
        width: 80px;
        padding: 5px 0;
        font-size: 18px;
        color: #0201BF;
        border: 2px solid #0F56AF;
        border-radius: 8px;
        text-align: center;
      }
    }
    .img{
      max-width: 100%;
      width: 40vw;
      img{
        width: 100%;
      }
    }
  }
}
</style>
