<template>
  <el-dialog :visible.sync="dialogTableVisible" :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false" destroy-on-close lock-scroll append-to-body width="400px"  class="ems-dialog" :title="mode === 'add'?'新增配置':`编辑配置` " >
    <el-form v-loading="loading>0" ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="140px">
      <el-form-item label="订阅topic" prop="deviceName">
        <el-input v-model="formData.mqttTopic" placeholder="请输入" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="topic描述" prop="description">
        <el-input v-model="formData.topicName" type="textarea" placeholder="请输入" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="saveDialog">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {editMqtt,addMqtt,getMqttDetail} from "@/api/ems/site";
export default {
  data() {
    return {
      loading:0,
      dialogTableVisible:false,
      mode:'',
      formData: {
        id:'',//设备唯一标识
        topicName:'',
        mqttTopic:''
      },
      rules: {
        mqttTopic:[
          { required: true, message: '请输入订阅topic', trigger: 'blur'},
        ],
        topicName:[
          { required: true, message: '请输入topic描述', trigger: 'blur'},
        ],
      },
    }
  },
  methods: {
    showDialog(id){
      this.dialogTableVisible = true
      if(id){
        this.mode = 'edit'
        this.formData.id = id
        this.getDetail(id)
      }else{
        this.mode = 'add'
      }
    },
    getDetail(id){
      getMqttDetail(id).then(response => {
        const {topicName='',mqttTopic=''} = JSON.parse(JSON.stringify(response?.data || {}));
        this.formData.mqttTopic=mqttTopic;
        this.formData.topicName=topicName;
      })
    },
    saveDialog() {
      this.$refs.addTempForm.validate(valid => {
        if (!valid) return
        this.loading+=1
        const {
          id='',
          mqttTopic='',//站点ID
          topicName='',//设备id
        }= this.formData;
        if(this.mode === 'add'){
          addMqtt( {mqttTopic,topicName}).then(response => {
            if(response.code === 200){
              //新增成功
              // 关闭弹窗 更新表格
              this.$emit('update')
              this.closeDialog()
            }
          }).finally(() => {
            this.loading-=1
          })
        }else{
          editMqtt({mqttTopic,topicName,id}).then(response => {
            if(response.code === 200){
              //新增成功
              // 关闭弹窗 更新表格
              this.$emit('update')
              this.closeDialog()
            }
          }).finally(() => {
            this.loading-=1
          })
        }

      })
    },
    closeDialog(){
      this.$emit('clear')
      // 清空所有数据
      this.formData= {
        id:'',//设备唯一标识
        mqttTopic:'',
        topicName:''
      }
      this.$refs.addTempForm.resetFields()
      this.dialogTableVisible=false
    }
  }
}

</script>
<style scoped>
</style>
