<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :lg="24" :xs="24">
        <el-card shadow="never" class="right">
          <template #header>
            <div class="flex" style="justify-content: space-around">
              <el-form :model="selectData" :inline="true" label-width="auto">
                <el-form-item label="轴承">
                  <el-select
                    style="width: 200px"
                    v-model="selectData.bearing"
                    placeholder="请选择轴承"
                  >
                    <el-option label="UCPH205" value="1" />
                  </el-select>
                </el-form-item>
                <el-form-item label="诊断模型">
                  <el-select
                    style="width: 200px"
                    v-model="selectData.model"
                    placeholder="请选择诊断模型"
                  >
                    <el-option label="UCPH205" value="1" />
                  </el-select>
                </el-form-item>
              </el-form>
              <div>
                <el-button type="warning">开始诊断</el-button>
              </div>
            </div>
          </template>
          <div class="flex content">
            <div class="circular" style="background-color: red">
              <span>内环</span>
            </div>
            <div class="circular" style="background-color: #c00000">
              <span>外环</span>
            </div>
            <div class="circular" style="background-color: #ffab40">
              <span>滚珠</span>
            </div>
          </div>
          <div class="result">
            <p class="font-700" style="font-size: 20px">
              诊断结果：内环磨损0.3mm + 外环磨损0.5mm
            </p>
            <el-button class="mt-10" color="#626aef">保存结果</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "FaultDiagnosis",
  inherititems: false,
});

const selectData = {
  bearing: "UCPH205",
  model: "DIGNN",
};
</script>

<style lang="scss" scoped>
.right {
  height: calc(100vh - 100px);
}

.content {
  justify-content: space-around;
  margin: 100px 0 200px;
}

.circular {
  width: 100px;
  height: 100px;
  font-size: 24px;
  line-height: 100px;
  color: #fff;
  text-align: center;
  border: 1px solid #000;
  border-radius: 50%;
}

.result {
  display: flex;
  justify-content: space-between;
  width: 800px;
  height: 200px;
  margin-left: 400px;
}
</style>
