<template>
  <div class="home" v-loading="loading">
    <div class="second">
      <div class="topPanel">
        <!-- 原始数据 -->
        <div class="tPanel">
          <el-table size="mini" :data="[initFileData]">
            <el-table-column prop="fileName" label="数据" align="center">
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row"
                  placement="top">
                  <span class="file" @click="handleDialogOpen(scope.row)">{{ scope.row.fileName }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 去噪 -->
        <div class="tPanel">
          <el-table size="mini">
            <el-table-column
              prop="processedDataName"
              label="处理前数据"
              align="center"
            >
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row"
                  placement="top"
                >
                  <span class="beforeFile">{{
                      scope.row
                    }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="resultDataName"
              label="处理后数据"
              align="center"
            >
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row"
                  placement="top"
                >
                  <span class="file" >{{
                      scope.row
                    }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="processStatus"
              label="状态"
              align="center"
              width="60"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.biz_process_status"
                  :value="scope.row.processStatus"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 特征提取 -->
        <div class="tPanel">
          <el-table size="mini">
            <el-table-column
              prop="processedDataName"
              label="处理前数据"
              align="center"
            >
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row"
                  placement="top"
                >
                  <span class="beforeFile">{{
                      scope.row
                    }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="resultDataName"
              label="处理后数据"
              align="center"
            >
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row"
                  placement="top"
                >
                  <span class="file">{{
                      scope.row
                    }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="processStatus"
              label="状态"
              align="center"
              width="60"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.biz_process_status"
                  :value="scope.row.processStatus"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 故障预测 -->
        <div class="tPanel">
          <el-table size="mini">
            <el-table-column
              prop="processedDataName"
              label="处理前数据"
              align="center"
            >
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row"
                  placement="top"
                >
                  <span class="beforeFile">{{
                      scope.row
                    }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="resultDataName"
              label="处理后数据"
              align="center"
            >
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row"
                  placement="top"
                >
                  <span class="file" >{{
                      scope.row
                    }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="processStatus"
              label="状态"
              align="center"
              width="60"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.biz_process_status"
                  :value="scope.row.processStatus"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="step">
        <div class="yuan">
          <div class="img yuanBg odd" @click="handleProcess(0)">
            <div class="tag">原始数据</div>
          </div>
        </div>
        <div class="one">
          <div class="img oneBg even" >
            <div class="tag2">数据生成</div>
            <div class="tag">物理模型</div>

          </div>
        </div>
        <div class="two">
          <div class="img twoBg odd">
            <div class="tag">去噪</div>
          </div>
        </div>
        <div class="three">
          <div class="img threeBg even">
            <div class="tag">扩充</div>
          </div>
        </div>
        <div class="four">
          <div class="img fourBg odd">
            <div class="tag">特征提取</div>
            <div class="tag2">故障诊断</div>
          </div>
        </div>
        <div class="five">
          <div class="img fiveBg even" >
            <div class="tag">退化评估</div>
          </div>
        </div>
        <div class="six">
          <div
            class="img sixBg odd noAfter"
            style="content: none"
            @click="handleProcess(5)"
          >
            <div class="tag">故障预测</div>
          </div>
        </div>
      </div>
      <div class="bottomPanel">
        <!-- 补全 -->
        <div class="bPanel">
          <el-table size="mini">
            <el-table-column
              prop="processedDataName"
              label="处理前数据"
              align="center"
            >
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row"
                  placement="top"
                >
                  <span class="beforeFile">{{
                      scope.row
                    }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="resultDataName"
              label="处理后数据"
              align="center"
            >
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row"
                  placement="top"
                >
                  <span class="file" >{{
                      scope.row
                    }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="processStatus"
              label="状态"
              align="center"
              width="60"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.biz_process_status"
                  :value="scope.row.processStatus"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 扩充 -->
        <div class="bPanel">
          <el-table size="mini">
            <el-table-column
              prop="processedDataName"
              label="处理前数据"
              align="center"
            >
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row"
                  placement="top"
                >
                  <span class="beforeFile">{{
                      scope.row
                    }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="resultDataName"
              label="处理后数据"
              align="center"
            >
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row"
                  placement="top"
                >
                  <span class="file">{{
                      scope.row
                    }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="processStatus"
              label="状态"
              align="center"
              width="60"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.biz_process_status"
                  :value="scope.row.processStatus"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 退化评估 -->
        <div class="bPanel">
          <el-table size="mini">
            <el-table-column
              prop="processedDataName"
              label="处理前数据"
              align="center"
            >
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row"
                  placement="top"
                >
                  <span class="beforeFile">{{
                      scope.row
                    }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="resultDataName"
              label="处理后数据"
              align="center"
            >
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row"
                  placement="top"
                >
                  <span class="file">{{
                      scope.row
                    }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="processStatus"
              label="状态"
              align="center"
              width="60"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.biz_process_status"
                  :value="scope.row.processStatus"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div></div>
      </div>
    </div>
    <form-model-view v-model="dialogVisible"  @callback="handleRowData"/>
  </div>
</template>

<script>
import CountTo from "vue-count-to";
import RingChart from "@/views/homePage/ringChart";
import PreCharts from "@/views/homePage/preCharts";
import CurveCharts from "@/views/homePage/curveCharts";
import BarChart from "@/views/dashboard/BarChart";
import { getDataOptions } from '@/api/data/data'
import FormModelView from './form.vue'
import FileTable from '@/views/fileTable.vue'

export default {
  name: "Index",
  dicts: ["biz_alg_type", "biz_process_status"],
  components: {
    FileTable,
    CountTo,
    RingChart,
    BarChart,
    PreCharts,
    CurveCharts,
    FormModelView
  },
  data() {
    return {
      dialogVisible: false,
      loading: false, // 补充可能存在的loading状态
      initFileData:{}
      // 保留原有数据属性...
    };
  },
  mounted() {},
  created() {
    // 保留原有生命周期钩子...
  },
  watch: {
    // 保留原有watchers...
  },
  methods: {
    // 新增对话框打开方法
    handleDialogOpen(rowData) {
      this.dialogVisible = true;
      // 可根据需求传递rowData到子组件，例如通过props或Vuex
      // 假设FormModelView需要接收数据，可添加props: { dialogData: Object }，并传递rowData
    },
    handleRowData(row){
      console.log('接收到文件管理的行数据:', row);
      this.initFileData= row;
    },

    handleProcess(type) {
      this.dialogVisible = true;
      this.dialogType = type;
      let match;
      if (type === 3) {
        const relation = [
          [3, 2],
          [3, 3],
        ];
        match = relation.find((item) => item[0] === type)[1];
      } else if (type === 5) {
        match = type - 1;
      } else {
        match = type;
      }
    },
    switchHandle(content, head, dataType) {
      switch (dataType) {
        case "0":
          this.fileShowVisible = true;
          this.handleResultChartOption(content, head, true);
          // this.loading = false;
          break;
        case "1":
          this.fileShowVisible = true;
          this.handleResultChartOption(content, head, false);
          // this.loading = false;
          break;
        case "2":
          this.fileShowVisible = true;
          this.$nextTick(() => {
            this.handleResultChartOption(content, head, false);
            // this.loading = false;
          });
          break;
        case "3":
          this.fileShowVisible = true;
          this.$nextTick(() => {
            this.handleResultChartOption(content, head, false);
            // this.loading = false;
          });
          break;
        case "4":
          this.fileShowVisible = true;
          this.$nextTick(() => {
            this.handleResultChartOption(content, head, false);
            // this.loading = false;
          });
          break;
        case "5":
          break;
        case "6":
          break;
        default:
          break;
      }
    },
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
