<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :lg="4" :xs="24" class="mb-[12px]">
        <sideTree />
      </el-col>
      <el-col :lg="20" :xs="24">
        <el-card shadow="never">
          <template #header>
            <div class="flex" style="justify-content: space-around">
              <div>
                <el-button type="success" @click="dialog.visible = true">
                  模型导入
                </el-button>
              </div>
              <div>
                <el-button type="primary">模型编辑</el-button>
              </div>
              <div>
                <el-button type="warning">模型保存</el-button>
              </div>
            </div>
          </template>
          <div class="text-center">
            <el-image
              style="width: 500px; height: 500px; margin: 30px 0"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
            <el-descriptions border :column="4">
              <el-descriptions-item label="重量：">1.5kg</el-descriptions-item>
              <el-descriptions-item label="内环宽度：">
                1cm
              </el-descriptions-item>
              <el-descriptions-item label="节圆直径：">
                1.2cm
              </el-descriptions-item>
              <el-descriptions-item label="经向静态载荷：">
                7.9kN
              </el-descriptions-item>
              <el-descriptions-item label="最高转速：">
                7000rpm
              </el-descriptions-item>
              <el-descriptions-item label="外环宽度：">
                2cm
              </el-descriptions-item>
              <el-descriptions-item label="滚珠个数：">9</el-descriptions-item>
              <el-descriptions-item label="经向动态载荷：">
                14kN
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog v-model="dialog.visible" width="60%" append-to-body>
      <div class="text-center">
        <div class="img flex h-300px" style="justify-content: space-around">
          <el-image
            style="width: 300px; height: 300px"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
          <el-image
            style="width: 300px; height: 300px"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
        </div>
        <el-form
          :inline="true"
          :model="params"
          class="demo-form-inline mt-10"
          label-width="100px"
        >
          <el-form-item label="内环故障">
            <el-input
              v-model="params.innerFault"
              placeholder="请输入内环故障"
              clearable
            />
          </el-form-item>
          <el-form-item label="外环故障">
            <el-input
              v-model="params.innerFault"
              placeholder="请输入外环故障"
              clearable
            />
          </el-form-item>
          <el-form-item label="滚珠故障">
            <el-input
              v-model="params.innerFault"
              placeholder="请输入滚珠故障"
              clearable
            />
          </el-form-item>
          <el-form-item label="转速">
            <el-input
              v-model="params.innerFault"
              placeholder="请输入转速"
              clearable
            />
          </el-form-item>
          <el-form-item label="采样率">
            <el-input
              v-model="params.innerFault"
              placeholder="请输入采样率"
              clearable
            />
          </el-form-item>
          <el-form-item label="采样时间">
            <el-input
              v-model="params.innerFault"
              placeholder="请输入采样时间"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialog.visible = false">
            开始仿真
          </el-button>
          <el-button @click="dialog.visible = false">数据存储</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "BearingManage",
  inherititems: false,
});
import { reactive } from "vue";

const params = reactive({
  outerRingFault: "1cm",
  innerFault: "0.3mm",
  ballFault: "1.2cm",
  speed: "7000rpm",
  samplingRate: "2000Hz",
  samplingTime: "1min",
});

const dialog = reactive({
  visible: false,
  title: "",
});

const onSubmit = () => {
  console.log("submit!");
};
</script>

<style lang="scss" scoped></style>
