<template>
  <div class="app-container" 
    v-loading="loading">
    <!-- 添加或修改设备模型信息对话框 -->
    <div class="marginbottom50px">
      <el-steps :active="currentStep">
          <el-step title="选择设备" description="告警设备" />
          <el-step title="选择参数" description="该设备告警参数选择" />
          <el-step title="选择策略" description="参数告警的策略配置" />
          <el-step title="选择通知方式" description="告警的提醒方式配置" />
      </el-steps>
    </div>
    <div class="overflowscroll">
      <el-form ref="devicemodelRef" :model="form" :rules="rules" label-width="100px" class="textaligncenter">
        <el-carousel ref="carousel" :autoplay="false" :arrow="never" pause-on-hover="false" class="customCarousel" :style="{ height: windowHeight + 'px' }">
          <el-carousel-item :key="1"  name="1" class="textaligncenter overflowscroll height300">
            <div class="width80percent textaligncenter displayinlineblock">
              <noalertdevices ref="devicealert"/>
            </div>
          </el-carousel-item>
          <el-carousel-item :key="2" name="2" class="textaligncenter overflowscroll height300">
            <div class="width80percent textaligncenter displayinlineblock">
              <noalertparams ref="paramalert"/>
            </div>
          </el-carousel-item>
          <el-carousel-item :key="3" name="3" class="textaligncenter overflowscroll height300">
            <div class="width80percent textaligncenter">
              </div>
          </el-carousel-item>
          <el-carousel-item :key="4" name="4" class="textaligncenter overflowscroll height300">
            <div class="width80percent textaligncenter">
            </div>
          </el-carousel-item>
        </el-carousel> 
        <el-form-item class="displayinlineblock divsonmarginleft0 margintop20">
          <el-button type="primary" v-if="prevStepButtonShow" @click="prevStep" style="display: inline-block !important" >上一步</el-button>
          <el-button type="primary" v-if="submitButtonShow" @click="submitForm" style="display: inline-block !important">提交</el-button>
          <el-button @click="cancel" style="display: inline-block !important">取 消</el-button>
          <el-button type="primary" v-if="nextStepButtonShow" @click="nextStep" style="display: inline-block !important">下一步</el-button>
        </el-form-item>
      </el-form>
      <el-dialog :title="title" v-model="addParamModelShow" width="800px" append-to-body :dc_device_partion="dc_device_partion" :dc_class_type="dc_class_type">
        
      </el-dialog> 
    </div>
  </div>
</template>
<style lang="scss">
  @import "@/assets/styles/self-defined.scss";
  .customCarousel {
    >div{
      >button {
          display: none !important;
      }
    } 
    ul{
      display: none !important;
    }          
  } 
</style>
<script setup name="addalert">
import { required } from "@vee-validate/rules";
import noalertdevices from "./noalertdevices";
import noalertparams from "./noalertparams";
import { onMounted } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
const { proxy } = getCurrentInstance();
const {dc_class_type, dc_device_partion, dc_model_type} = proxy.useDict('dc_class_type', 'dc_device_partion','dc_model_type');
const router = useRouter();
const open = ref(false);
const loading = ref(false);
const currentStep = ref(1);
const nextStepButtonShow = ref(true);
const prevStepButtonShow = ref(false);
const submitButtonShow = ref(false);
const addParamModelShow = ref(false);
const navber = ref(0);
const tagsViewContainer = ref(0);
const marginbottom50px = ref(0);
const windowHeight = ref(0);
const selectDeviceId = ref("");
const data = reactive({
  form: {
  },
  queryParams: {
    modelName: null,
    modelCode: null,
    sort: null,
    modelTypeId: null,
    pid: null,
    note: null
  },
  rules: {
    
  },
  validations: {
    inputValue: { required }
  }
});

const { queryParams, form, rules } = toRefs(data);

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    tentantId: null,
    version: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    deptId: null,
    userId: null,
    deleteBy: null,
    deleteTime: null,
    id: null,
    modelName: null,
    modelCode: null,
    sort: null,
    modelTypeId: null,
    pid: null,
    note: null
  };
  proxy.resetForm("devicemodelRef");
}

  /** 提交按钮 */
  function submitForm() {
    
  }

 
  function nextStep(){
    this.$nextTick(() => {
      if(currentStep.value==1){
        const selectDevice = proxy.$refs["devicealert"].$refs.addAlertTable.getSelectionRows();
      
        debugger
        if(!valideToAddDevice(selectDevice)){
          return;
        }else{
          debugger
          proxy.$refs["paramalert"].deviceUuid = selectDevice.uuid;
          proxy.$refs["paramalert"].getParamsNoAlertData();
        }
        currentStep.value = currentStep.value + 1;
        proxy.$refs.carousel.next(); 
        submitButtonShow.value = true;
        nextStepButtonShow.value = true;
        prevStepButtonShow.value = true;
      }else if(currentStep.value == 2){
        currentStep.value = currentStep.value + 1;
        proxy.$refs.carousel.next(); 
        submitButtonShow.value = true;
        nextStepButtonShow.value = true;
        prevStepButtonShow.value = true;
      }else{
        currentStep.value = currentStep.value + 1;
        proxy.$refs.carousel.next(); 
        submitButtonShow.value = true;
        nextStepButtonShow.value = false;
        prevStepButtonShow.value = true;
      }
    });
    
  }
  function prevStep(){
    if(currentStep.value==4){
      currentStep.value = currentStep.value - 1;
      proxy.$refs.carousel.prev(); 
      submitButtonShow.value = true;
      nextStepButtonShow.value = true;
      prevStepButtonShow.value = true;
    }else if(currentStep.value == 3){
      currentStep.value = currentStep.value - 1;
      proxy.$refs.carousel.prev(); 
      submitButtonShow.value = true;
      nextStepButtonShow.value = true;
      prevStepButtonShow.value = true;
    }else if(currentStep.value == 2){
      currentStep.value = currentStep.value - 1;
      proxy.$refs.carousel.prev(); 
      submitButtonShow.value = false;
      nextStepButtonShow.value = true;
      prevStepButtonShow.value = false;
    }
  }


  function submit(){
    
  }

  function updateWindowHeight(){
    navber.value=document.querySelector('.navbar').clientHeight;
    tagsViewContainer.value=document.querySelector('.tags-view-container').clientHeight;
    marginbottom50px.value=document.querySelector('.marginbottom50px').clientHeight;
    windowHeight.value = window.innerHeight - navber.value - tagsViewContainer.value - marginbottom50px.value - 160;
  };

  onMounted(() => {
    updateWindowHeight();
    window.addEventListener('resize', updateWindowHeight);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', updateWindowHeight);
  });

  function valideToAddDevice(selectDevice){
    console.log("---------------");
    
    if(selectDevice.length==1){
      selectDeviceId.value = selectDevice.uuid;
      return true;
    }else if(selectDevice.length > 1){
      ElMessageBox.alert('请确保只选择一条设备', '提示', {
        confirmButtonText: '确定',
        center: true,
      })
      return false;
    }else if(selectDevice.length < 1){
      ElMessageBox.alert('请选择设备', '提示', {
        confirmButtonText: '确定',
      })
      return false;
    }
  }

  function valideToAddParams(){
    console.log("---------------");
    // let selectDevice = proxy.$refs["paramalert"].$refs.addAlertTable.getSelectionRows();
    // if(selectDevice.length==1){
    //   selectDeviceId.value = selectDevice.uuid;
    //   return true;
    // }else if(selectDevice.length > 1){
    //   ElMessageBox.alert('请确保只选择一条设备', '提示', {
    //     confirmButtonText: '确定',
    //     center: true,
    //   })
    //   return false;
    // }else if(selectDevice.length < 1){
    //   ElMessageBox.alert('请选择设备', '提示', {
    //     confirmButtonText: '确定',
    //   })
    //   return false;
    // }
  }
  
</script>


