<template>
  <el-dialog title="数据查询" :model-value='visible' @close="close" v-bind="dialogBig" draggable style="height: 100%;">
    <div class="data-check-dialog">
      <div class="data-check-head">
        <el-form :model='formContent' label-width="auto" class="form-three ">
          <el-form-item label="检测脚本">
            <el-input v-model='formContent.testScriptName' :disabled="true"/>
          </el-form-item>
          <el-form-item label="误差体系">
            <el-input v-model='formContent.errorSysName' :disabled="true"/>
          </el-form-item>
          <el-form-item label="数据原则">
            <el-input v-model='formContent.dataRule' :disabled="true"/>
          </el-form-item>
          <el-form-item label="设备名称">
            <el-input v-model='formContent.deviceName' :disabled="true"/>
          </el-form-item>
          <el-form-item label='通道号'>
            <el-select v-model="formContent.monitorIdx">
              <el-option v-for="item in monitorIdxList" :key="item.value" :label="item.value"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <div class="data-check-body">
        <div class="content-left-tree">
          <div class="content-left-tree-switch">
            <el-radio-group v-model="scriptSwitch">
              <el-radio-button label="不合格测试项" value="0"/>
              <el-radio-button label="全部测试项" value="1"/>
            </el-radio-group>
          </div>
          <div class="content-tree">
            <el-tree :default-expanded-keys="['0', '0-1', '0-2', '0-3', '1']" node-key="id" :data="treeData"
                     :props="defaultProps" @node-click="handleNodeClick"/>
          </div>
        </div>

        <div class="content-right">
          <div class="content-right-title">
            <el-divider>当前检测项目</el-divider>
            <span>{{ currentScriptDsc }}</span>
          </div>
          <div class="content-right-Tabs">
            <el-tabs type="border-card" v-model="activeName">
              <el-tab-pane label="检测结果" name="resultTab">
                <DataCheckResultTable :tableData="checkResultTableData" ref="resultTableRef"/>
              </el-tab-pane>
              <el-tab-pane label="原始数据" name="rawDataTab">
                <DataCheckRawDataTable :tableData="rawTableData" ref="rawDataTableRef"/>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>

</template>
<script setup lang='ts'>
import {dialogBig} from '@/utils/elementBind'
import {reactive, ref} from 'vue'
import DataCheckResultTable from './dataCheckResultTable.vue'
import DataCheckRawDataTable from './dataCheckRawDataTable.vue'
import type {CheckResult, DataCheck, RawData} from "@/api/check/interface";
import {data as treeData} from "@/api/plan/autoTest.json";

const formContent = reactive<DataCheck>({
  testScriptName: 'Q/GDW 10650.4-2021 模拟式',
  errorSysName: 'Q/GDW 10650.2-2021',
  dataRule: '所有值',
  deviceName: '被检设备1',
  monitorIdx: '1',
})

const activeName = ref('resultTab')

const scriptSwitch = ref('0');

const currentScriptDsc = ref('电压准确度检测：频率：42.5Hz Ua=46.192V 0° Ub=46.192V -120° Uc=46.192V 120° Ia=1A 0° Ib=1A -120° Ic=1A 120°');

const defaultProps = {
  children: "children",
  label: "name",
  pid: "pid",
};

const monitorIdxList = [
  {
    value: '1',
  },
  {
    value: '2 （不合格）',
  },
  {
    value: '3',
  },
  {
    value: '4 （不合格）',
  },
]


// 点击左侧树节点触发事件
const handleNodeClick = (data) => {
  console.log(data);
};

const checkResultTableData = reactive<CheckResult[]>([
  {
    chnNum: '1',
    standardValue: 57.74,
    L1: 57.73,
    L1_errValue: 0.01,
    L2: 57.73,
    L2_errValue: 0.01,
    L3: 57.73,
    L3_errValue: 0.01,
    maxErrVaule: 0.05774,
    result: '合格',
  },
  {
    chnNum: '2',
    standardValue: 57.74,
    L1: 57.73,
    L1_errValue: 0.01,
    L2: 57.73,
    L2_errValue: 0.01,
    L3: 57.73,
    L3_errValue: 0.01,
    maxErrVaule: 0.05774,
    result: '合格',
  }
])

const rawTableData = reactive<RawData[]>([
  {
    chnNum: '1',
    rawDataItems: [
      {
        updateTime: "2024-10-10 09:30:00",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:03",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:06",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:09",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:12",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:15",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:18",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:21",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:24",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:27",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:30",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:33",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:36",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:39",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:42",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:45",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:48",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:51",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:54",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:57",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      }
    ]
  },
  {
    chnNum: '2',
    rawDataItems: [
      {
        updateTime: "2024-10-10 09:30:00",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:03",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:06",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:09",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:12",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:15",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:18",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:21",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:24",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:27",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:30",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:33",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:36",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:39",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:42",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:45",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:48",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:51",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:54",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:57",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      }
    ]
  },
  {
    chnNum: '3',
    rawDataItems: [
      {
        updateTime: "2024-10-10 09:30:00",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:03",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:06",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:09",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:12",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:15",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:18",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:21",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:24",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:27",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:30",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:33",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:36",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:39",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:42",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:45",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:48",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:51",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:54",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:57",
        L1: 57.73,
        L2: 57.73,
        L3: 57.73,
      }
    ]
  }
])

const resultTableRef = ref()
const rawDataTableRef = ref()

const visible = ref(false)

const close = () => {
  //数据清空

  activeName.value = 'rawDataTab'
  rawDataTableRef.value?.clear()

  visible.value = false;
};

const open = (deviceItem: any, chnNum: number) => {
  // 发起后端请求，查询详细信息
  // const deviceItem = await getDetail(planId,checkItemId,deviceItem.id, chnNum)

  // 数据处理
  // checkResultTableData=[];
  //formContent.value = ...

  visible.value = true;
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>

.data-check-dialog {
  display: flex;
  flex-direction: column;
  width: 100%;

  .data-check-head {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
  }

  .data-check-body {
    display: flex;
    flex-direction: row;
    width: 100%;

    .content-left-tree {
      width: 240px;
      max-height: 445px;
      padding: 10px 0;
      border: 1px solid #ccc;

      .content-left-tree-switch {
        text-align: right;
        margin-right: 10px;
      }
    }

    .content-right {
      margin-left: 10px;
      flex: 1;

      .content-right-title {
        /*margin-bottom: 10px;*/
        div {
          font-size: 16px;
          font-weight: 600;
        }
      }

      .content-right-Tabs {
        box-sizing: border-box;
        margin-top: 20px;
        margin-bottom: 10px;
        max-height: 400px;
      }

    }
  }
}
</style>