<template>
    <el-dialog  :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogBig" width="1200px" height="900px">
       
        <!-- simple -->
        <!-- :style="{color:node.label=='未检测'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}" -->
        <el-steps class="test-head-steps"    :space="200"    :active="stepsActiveIndex"  process-status="finish" finish-status="success"  >
        <el-step title="预检测" :icon="stepsActiveIndex > 0 ? SuccessFilled : Edit" style="height:100px" />
        <el-step title="守时检测" :icon="stepsActiveIndex > 1 ? SuccessFilled :UploadFilled"/>
        <el-step title="系数校准" :icon="stepsActiveIndex > 2 ? SuccessFilled :Picture" />
        <el-step title="正式检测" :icon="stepsActiveIndex > 3 ? SuccessFilled :Picture" />
        <el-step title="检测完成" :icon="stepsActiveIndex > 4 ? SuccessFilled :Picture" />
        </el-steps>

        <preTest v-if="stepsActiveIndex === 0" v-model:testStatus="preTestStatus"></preTest>
        <timeTest v-if="stepsActiveIndex === 1" v-model:testStatus="timeTestStatus"></timeTest>
        <channelsTest v-if="stepsActiveIndex === 2" v-model:testStatus="channelsTestStatus"></channelsTest>
        <test v-if="stepsActiveIndex === 3" v-model:testStatus="TestStatus"></test>
        
        <!-- <el-tabs type="border-card">
            <el-tab-pane label="预检测项目：">
                <div class="form-grid">
                    <el-checkbox
                            v-for="(item, index) in detectionOptions"
                            v-model="item.selected"
                            :key="index"
                            :label="item.name"
                            ></el-checkbox
                        >
                    
                </div>
            </el-tab-pane>
        </el-tabs>

        <div class = "test-dialog">
            <div class="dialog-left">
            <el-steps direction="vertical" :active="0">
            <el-step title="源通讯校验" />
            <el-step title="设备通讯校验" />
            <el-step title="协议校验" />
            <el-step title="相序校验" />
            <el-step title="检测完成" />
            </el-steps>
            </div>
            <div class="dialog-right">
                <el-collapse :v-model="1" accordion>
                    <el-collapse-item title="源通讯校验" name="1">
                        <div>
                            暂无数据，等待检测开始
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="设备通讯校验" name="2">
                        <div>
                        Operation feedback: enable the users to clearly perceive their
                        operations by style updates and interactive effects;
                        </div>
                        <div>
                        Visual feedback: reflect current state by updating or rearranging
                        elements of the page.
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="协议校验" name="3">
                        <div>
                        Simplify the process: keep operating process simple and intuitive;
                        </div>
                        <div>
                        Definite and clear: enunciate your intentions clearly so that the
                        users can quickly understand and make decisions;
                        </div>
                        <div>
                        Easy to identify: the interface should be straightforward, which helps
                        the users to identify and frees them from memorizing and recalling.
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="相序校验" name="4">
                        <div>
                        Decision making: giving advices about operations is acceptable, but do
                        not make decisions for the users;
                        </div>
                        <div>
                        Controlled consequences: users should be granted the freedom to
                        operate, including canceling, aborting or terminating current
                        operation.
                        </div>
                    </el-collapse-item>
                    </el-collapse>
            </div>
        </div> -->

        <!-- <div class="dialog-footer">
                <el-button :icon='CirclePlus' type="primary" @click="openAddDialog">新增</el-button>
                <el-button :icon='Delete' type="danger"  plain :disabled='!multipleSelection.length' @click="deleteSelectedRows">批量删除</el-button>
        </div>

        
        <div class="table-container">
            <el-table :data="tableData" :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%"  @selection-change="handleSelectionChange" >
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="id" label="序号" width="60" />
                    <el-table-column prop="type" label="电能质量检测指标类型" width="181">
                        <template #default="{ row }">
                            <el-select v-model="row.type" placeholder="选择指标类型">
                                <el-option v-for="option in typeList" :key="option.value" :label="option.label" :value="option.value"/>
                            </el-select>
                            </template>
                    </el-table-column>
                    <el-table-column label="起止范围" >
                        <el-table-column label="起始">
                            <template #default="{ row }">
                                <el-row type="flex">
                                    <el-col :span="14">
                                        <el-select v-model="row.startSelect" placeholder="选择起始值" style="width: 70px;">
                                            <el-option v-for="option in errorStartOptions" :key="option.value" :label="option.label" :value="option.value"/>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="10">
                                        <el-input v-model= "row.startRange" style="width: 70px;"
                                        />
                                    </el-col>
                                </el-row>
                            </template>
                        </el-table-column>
                        <el-table-column label="结束">
                            <template #default="{ row }">
                                <el-row type="flex" >
                                    <el-col :span="14">
                                        <el-select v-model="row.endSelect" placeholder="选择结束值" style="width: 70px;">
                                            <el-option v-for="option in errorEndOptions" :key="option.value" :label="option.label" :value="option.value"/>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="10">
                                        <el-input v-model= "row.endRange" style="width: 70px;"/>
                                    </el-col>
                                </el-row>
                            </template>
                        </el-table-column>
                        <el-table-column label="单位" width="115">
                            <template #default="{ row }">
                            <el-select v-model="row.unit" placeholder="选择单位">
                                <el-option
                                v-for="option in errorUnitOptions"
                                :key="option.value"
                                :label="option.label"
                                :value="option.value"
                                />
                            </el-select>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column  label="最大误差">
                        <el-table-column prop="maxErrorValue" label="最大误差值" width="100">
                            <template #default="{ row }">
                                <el-input v-model= "row.startRange" style="width: 70px;"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="误差类型">
                            <template #default="{ row }">
                            <el-select v-model="row.errorType" placeholder="选择误差类型">
                                <el-option
                                v-for="option in errorTypeOptions"
                                :key="option.value"
                                :label="option.label"
                                :value="option.value"
                                />
                            </el-select>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                    <template  #default="{ row }">
                        <el-button type="primary" link :icon='CopyDocument' @click="copyRow(row)">复制</el-button>
                        <el-button  type='primary' link :icon='Delete'  @click="deleteRow(row)">删除</el-button>
                    </template>
                    </el-table-column>
            </el-table>
        </div> -->
        
        <template #footer>
            <div>
                <!-- <el-button @click="handleCancel">取 消</el-button> -->
                <el-button type="primary" :icon="VideoPlay" v-if="ActiveStatue === 'waiting'" @click="handleSubmit">开始检测</el-button>
                <el-button type="danger" :icon="Close" v-if="ActiveStatue === 'process'" @click="handleSubmit">停止检测</el-button>
                <el-button type="primary" :icon="Refresh" v-if="ActiveStatue === 'error'" @click="handleSubmit">重新检测</el-button>
                <el-button type="primary" :icon="Right" v-if="ActiveStatue === 'success'" @click="nextStep">{{nextStepText}}</el-button>
            </div>
        </template>
    </el-dialog>


</template>
  
  <script lang="ts" setup name="testPopup">
  import{ElMessage, ElSelectV2, FormInstance,FormItemRule}from'element-plus'
  import { defineProps, defineEmits, reactive,watch,ref, Ref } from 'vue';
  import { dialogBig,dialogMiddle} from '@/utils/elementBind'
  //import IndicatorTypeDialog from "@/views/machine/errorSystem/components/IndicatorTypeDialog.vue"; // 导入子组件
  import {CirclePlus, Delete, EditPen,FolderOpened,CopyDocument,Edit, Picture, UploadFilled, SuccessFilled,VideoPlay,Right,Refresh,Close} from '@element-plus/icons-vue'
  import { useDictStore } from '@/stores/modules/dict'
  import preTest from './preTest.vue'
  import timeTest from './timeTest.vue'
  import channelsTest from './channelsTest.vue'

  const props = defineProps<{
    visible: boolean;
    dialogTitle: string;
    
    formData: {
        id: string;//误差体系表Id
        name: string;//误差体系名称
        standard_Name:string;//参照标准名称
        standard_Time:string;//标准推行时间
        dev_Level:string;//使用设备等级
        enable:number;//状态：0-不启用 1-启用
        state:number;//0-删除 1-正常
    };
  }>();

  const emit = defineEmits<{
    (e: 'update:visible', value: boolean): void;
    (e: 'submit', data: any): void;
  }>();

  const nextStepText = ref('下一步');
//定义与预检测配置数组
const detectionOptions = ref([
  {
    id: 0,
    name: "源通讯检测",//判断源通讯是否正常
    selected: true,
  },
  {
    id: 1,
    name: "设备通讯检测",//判断设备的IP、Port、识别码、秘钥是否正常
    selected: true,
  },
  {
    id: 2,
    name: "协议校验",//ICD报告触发测试
    selected: true,
  },
  {
    id: 3,
    name: "相序校验",//判断装置的接线是否正确
    selected: true,
  },
//   {
//     id: 4,
//     name: "守时校验",//判断装置24小时内的守时误差是否小于1s
//     selected: true,
//   },
//   {
//     id: 5,
//     name: "通道系数校准",//通过私有协议与装置进行通讯，校准三相电压电流的通道系数
//     selected: true,
//   },
  // {
  //   id: 6,
  //   name: "实时数据比对",
  // },
  // {
  //   id: 7,
  //   name: "录波数据比对",
  // },
]);

  const stepsTotalNum = ref(4);//步骤总数
  const stepsActiveIndex = ref(0); //当前正在执行的步骤索引
  const ActiveStatue = ref('waiting');//当前步骤状态
  const preTestStatus = ref('waiting');//预检测执行状态
  const timeTestStatus = ref('waiting');//守时校验执行状态
  const channelsTestStatus = ref('waiting');//通道系数校准执行状态
  const TestStatus = ref('waiting');//正式检测执行状态

  watch(preTestStatus,function(newValue,oldValue){
    console.log(newValue,oldValue);

    ActiveStatue.value = newValue
  })
  watch(timeTestStatus,function(newValue,oldValue){
    console.log(newValue,oldValue);

    ActiveStatue.value = newValue
  })
  watch(channelsTestStatus,function(newValue,oldValue){
    console.log(newValue,oldValue);

    ActiveStatue.value = newValue
  })
  watch(TestStatus,function(newValue,oldValue){
    console.log(newValue,oldValue);

    ActiveStatue.value = newValue
  })

  const nextStep = () => {
    if(stepsActiveIndex.value < stepsTotalNum.value )
        stepsActiveIndex.value++
    else if(stepsActiveIndex.value === stepsTotalNum.value)
    {
        stepsActiveIndex.value++
        nextStepText.value = '检测完成'
    }
    else
    {
        emit('update:visible', false); // 关闭对话框
        clearData()
    }
  };
  
  function clearData(){
    stepsActiveIndex.value = 0;
    preTestStatus.value = "waiting"
    timeTestStatus.value = "waiting"
    channelsTestStatus.value = "waiting"
    TestStatus.value = "waiting"
    nextStepText.value = "下一步"
  }
  const handleCancel = () => {
    clearData()
    emit('update:visible', false); // 关闭对话框
  };
  
  const handleSubmit = () => {
    switch (stepsActiveIndex.value) {
      case 0:
            preTestStatus.value = 'start'
        break;
      case 1:
            timeTestStatus.value = 'start'
        break;
      case 2:
            channelsTestStatus.value = 'start'
        break;
      case 3:
            TestStatus.value = 'start'
        break;
      default:
        break;
    }


  };
  
  // 当 props.visible 改变时，更新 formData
  watch(() => props.visible, (newVal) => {
    if (!newVal) {
      // 这里可以重置表单数据，如果需要的话
     
    }
  });



//选中
 // 处理选择变化
 const handleSelectionChange = (selection: any[]) => {
    multipleSelection.value = selection.map(row => row.id); // 更新选中的行
    
  };
  const openAddDialog = () => {
    tableData.value.push({
        id: tableData.value.length + 1,
        type: '',
        startSelect: '',
        startRange: '',
        endSelect: '',
        endRange: '',
        unit:'',
        maxErrorValue:'',
        errorType:''
  });
};



  </script>
  
  <style scoped>
.test-head-steps{
    height: 200px;
    margin-bottom: 20px;
} 

.test-head-steps .el-step__line{
  height:50px !important;
}

.test-head-steps .el-step__icon-inner{
  width: 40px !important;
  height:40px !important;
}

.test-head-steps .el-step__icon{
  width: 80px !important;
  height:80px !important;
  font-size: 40px !important; /* 调整图标大小 */
  line-height: 80px !important; /* 使图标居中 */
}

.test-head-steps .el-step__title {
  font-size: 20px !important; /* 设置标题字体大小 */
  margin-top: 10px !important; /* 调整标题与图标的间距 */
}
 
.test-head-steps .el-step__description {
  font-size: 20px !important; /* 设置描述字体大小 */
}
</style>