<template>
  <el-dialog :visible.sync="dialogTableVisible" :close-on-click-modal="false" :show-close="false" destroy-on-close lock-scroll append-to-body width="600px"  class="ems-dialog" :title="mode === 'add'?'新增设备':`编辑设备` " >
    <el-form v-loading="loading>0" ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="站点" prop="siteId">
        <el-select v-model="formData.siteId" placeholder="请选择" :style="{width: '100%'}">
          <el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'siteOptions'"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备id" prop="deviceId" >
        <el-input v-model="formData.deviceId" maxlength="60" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="设备名称" prop="deviceName">
        <el-input v-model="formData.deviceName" placeholder="请输入" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="设备描述" prop="description">
        <el-input v-model="formData.description" type="textarea" placeholder="请输入" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="工作状态" prop="communicationStatus">
        <el-select v-model="formData.communicationStatus" placeholder="请选择" :style="{width: '100%'}">
          <el-option :label="value" :value="key" v-for="(value,key) in communicationStatusOptions" :key="key+'communicationStatusOptions'"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备类型" prop="deviceType">
        <el-select v-model="formData.deviceType" placeholder="请选择" :style="{width: '100%'}">
          <el-option :label="value" :value="key" v-for="(value,key) in deviceTypeOptions" :key="key+'deviceTypeOptions'"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备类别" prop="deviceCategory">
        <el-select v-model="formData.deviceCategory" placeholder="请选择" :style="{width: '100%'}">
          <el-option :label="item" :value="item" v-for="(item,index) in deviceCategoryList" :key="index+'deviceCategoryList'"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上级设备" prop="parentId" v-if="formData.deviceCategory === dccDeviceCategory">
        <el-select v-model="formData.parentId" :placeholder="parentDeviceList.length === 0 && !formData.siteId ? '请先选择站点' : '请选择'" :style="{width: '100%'}">
          <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in parentDeviceList" :key="index+'parentDeviceList'" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="TCP设备的ip地址" prop="ipAddress" v-if="formData.deviceType === 'TCP'">
        <el-input v-model="formData.ipAddress" placeholder="请输入" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="TCP设备的端口号" prop="ipPort" v-if="formData.deviceType === 'TCP'">
        <el-input v-model="formData.ipPort" placeholder="请输入" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>

      <el-form-item label="串口路径" prop="serialPort">
        <el-input v-model="formData.serialPort" placeholder="请输入" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="波特率" prop="baudRate">
        <el-input v-model="formData.baudRate" placeholder="请输入" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="数据位" prop="dataBits">
        <el-input v-model="formData.dataBits" placeholder="请输入" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="停止位" prop="stopBits">
      <el-input v-model="formData.stopBits" placeholder="请输入" clearable :style="{width: '100%'}">
      </el-input>
    </el-form-item>
      <el-form-item label="校验位" prop="parity">
        <el-input v-model="formData.parity" placeholder="请输入" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="图片" prop="pictureUrl">
        <image-upload :limit="1" :drag="false" @input="uploadImage" :value="formData.pictureUrl"/>
      </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 {mapState} from "vuex";
import {getStackNameList} from '@/api/ems/dzjk'
import {getAllSites} from '@/api/ems/zddt'
import {validText} from '@/utils/validate'
import {getDeviceDetailInfo,getDeviceCategory,updateDevice,addDevice} from "@/api/ems/site";
export default {
  props:{
    mode:{
      type:String,
      default:"add"
    },
    id:{
      type:String|Number,
      required:false
    }
  },
  data() {
    const validateText=(rule, value, callback) =>{
      if (value !== '' && !validText(value)) {
        callback(new Error('只能输入中文、英文、数字和特殊字符!'));
      } else {
        callback();
      }
    }
    const validateDeviceId=(rule, value, callback) =>{
      if (value !== '' && !/^[a-zA-Z0-9]+$/.test(value)) {
        callback(new Error('只能输入英文和数字!'));
      } else {
        callback();
      }
    }
    return {
      loading:0,
      dccDeviceCategory:'CLUSTER',
      dialogTableVisible:false,
      parentDeviceList:[],//上级设备列表  从接口获取数据
      siteList:[],//站点列表  从接口获取数据
      deviceCategoryList:[],//设备类别列表 从接口获取数据
      formData: {
        id:'',//设备唯一标识
        siteId:'',//站点ID
        deviceId:'',//设备id
        deviceName:'',//设备名称
        description:'',//设备描述
        communicationStatus:'',//工作状态
        deviceType:'',//设备类型
        deviceCategory:'',//设备类别
        parentId:'',//上级设备id
        ipAddress:'',//TCP设备的ip地址
        ipPort:"",//TCP端口号
        serialPort:'',//串口路径
        baudRate:'',//波特率
        dataBits:'',//数据位
        stopBits:'',//停止位
        parity:'',//校验位
        pictureUrl:'',//设备图片
      },
      rules: {
        siteId:[
          { required: true, message: '请选择站点', trigger: ['blur','change']}
        ],
        deviceId:[
          { required: true, message: '请输入设备id', trigger: 'blur'},
          { validator: validateDeviceId, trigger: 'blur' }
        ],
        deviceName:[
          { required: true, message: '请输入设备名称', trigger: 'blur'},
          { validator: validateText, trigger: 'blur' }
        ],
        description:[
          { required: true, message: '请输入设备描述', trigger: 'blur'},
          { validator: validateText, trigger: 'blur' }
        ],
        communicationStatus:[
          { required: true, message: '请选择工作状态', trigger: ['blur','change']}
        ],
        deviceType:[
          { required: true, message: '请选择设备类型', trigger:['blur','change']}
        ],
        deviceCategory:[
          { required: true, message: '请选择设备类别', trigger: ['blur','change']}
        ],
        ipAddress:[
          { validator: validateText, trigger: 'blur' }
        ],
        ipPort:[
          { validator: validateText, trigger: 'blur' }
        ],
        serialPort:[
          { validator: validateText, trigger: 'blur' }
        ],
        baudRate:[
          { validator: validateText, trigger: 'blur' }
        ],
        dataBits:[
          { validator: validateText, trigger: 'blur' }
        ],
        stopBits:[
          { validator: validateText, trigger: 'blur' }
        ],
        parity:[
          { validator: validateText, trigger: 'blur' }
        ],
        // pictureUrl:[
        //   { required: true, message: '请上传图片', trigger: ['blur', 'change']}
        // ],
      },
    }
  },
  computed: {
    ...mapState({
      communicationStatusOptions: state => state?.ems?.communicationStatusOptions || {},
      deviceTypeOptions:state=>state?.ems?.deviceTypeOptions || {}
    })
  },
  watch:{
    'formData.deviceCategory':{
      handler(newVal){
        // 只有电池簇需要选择上级设备 调用接口获取电池堆列表
        if(newVal && newVal === this.dccDeviceCategory){
          this.getParentDeviceList()
        }
      },
      immediate:true
    },
    'formData.siteId':{
      handler(newVal,oldVal){
        // 只有电池簇需要选择上级设备 调用接口获取电池堆列表
        if(newVal && oldVal!== newVal && this.formData.deviceCategory === this.dccDeviceCategory){
          this.getParentDeviceList()
        }
      },
      immediate:true
    },
    dialogTableVisible:{
      handler(newVal){
        //打开弹窗
        if(newVal){
          this.getZdList()
          this.getDeviceCategoryList()
        }
      },
      immediate: true,
    },
    id:{
      handler(newVal){
        if((newVal || newVal===0) && this.mode !== 'add'){
          this.loading+=1
          getDeviceDetailInfo(newVal).then(response => {
            this.formData = JSON.parse(JSON.stringify(response?.data || {}));
          }).finally(() => {this.loading-=1})
        }
      },
      immediate: true,
    }
  },
  methods: {
    uploadImage(data){
      this.formData.pictureUrl = data
    },
    //获取站点列表
    getZdList(){
      this.loading+=1
      getAllSites().then(response => {
        this.siteList = response?.data || []
      }).finally(() => {this.loading-=1})
    },
    // 获取设备类别
    getDeviceCategoryList(){
      this.loading+=1
      getDeviceCategory().then(response => {
        this.deviceCategoryList = response?.data || []
      }).finally(() => {this.loading-=1})
    },
    //获取上级id列表
    getParentDeviceList(){
      if(!this.formData.siteId){
       return  console.log('请先选择站点')
      }
      this.formData.parentId=''
      this.loading= this.loading+1
      getStackNameList(this.formData.siteId).then(response => {
        this.parentDeviceList = JSON.parse(JSON.stringify(response?.data || []));
      }).finally(() => {
        this.loading=this.loading -1
      })
    },
    saveDialog() {
      this.$refs.addTempForm.validate(valid => {
        if (!valid) return
        this.loading+=1
        const {
          id='',
          siteId='',//站点ID
          deviceId='',//设备id
          deviceName='',//设备名称
          description='',//设备描述
          communicationStatus='',//工作状态
          deviceType='',//设备类型
          deviceCategory='',//设备类别
          parentId='',//上级设备id
          ipAddress='',//TCP设备的ip地址
          ipPort="",//TCP端口号
          serialPort='',//串口路径
          baudRate='',//波特率
          dataBits='',//数据位
          stopBits='',//停止位
          parity='',//校验位
          pictureUrl='',//设备图片
        }= this.formData;
        if(this.mode === 'add'){
          addDevice({siteId,deviceId,deviceName,description,communicationStatus,deviceType,deviceCategory,parentId,ipAddress,ipPort,serialPort,baudRate,dataBits,stopBits,parity,pictureUrl}).then(response => {
            if(response.code === 200){
              //新增成功
              // 关闭弹窗 更新表格
              this.$emit('update')
              this.closeDialog()
            }
          }).finally(() => {
            this.loading-=1
          })
        }else{
          updateDevice({id,siteId,deviceId,deviceName,description,communicationStatus,deviceType,deviceCategory,parentId,ipAddress,ipPort,serialPort,baudRate,dataBits,stopBits,parity,pictureUrl}).then(response => {
            if(response.code === 200){
              //新增成功
              // 关闭弹窗 更新表格
              this.$emit('update')
              this.closeDialog()
            }
          }).finally(() => {
            this.loading-=1
          })
        }

      })
    },
    closeDialog(){
      this.$emit('clear')
      // 清空所有数据
      this.$refs.addTempForm.resetFields()
      this.formData= {
          id:'',//设备唯一标识
          siteId:'',//站点ID
          deviceId:'',//设备id
          deviceName:'',//设备名称
          description:'',//设备描述
          communicationStatus:'',//工作状态
          deviceType:'',//设备类型
          deviceCategory:'',//设备类别
          parentId:'',//上级设备id
          ipAddress:'',//TCP设备的ip地址
          ipPort:"",//TCP端口号
          serialPort:'',//串口路径
          baudRate:'',//波特率
          dataBits:'',//数据位
          stopBits:'',//停止位
          parity:'',//校验位
          pictureUrl:'',//设备图片
      }
      this.dialogTableVisible=false
    }
  }
}

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