<template>
  <div class="container">
    <div class="textBox">
      <el-tooltip class="box-item" effect="dark" :content="processInfo.materialName" placement="left" trigger="click">
        <div class="titleText blackColor">
          {{ processInfo.materialName }}
        </div>
      </el-tooltip>
      <el-tooltip class="box-item" effect="dark" :content="processInfo.materialModel" placement="left" trigger="click">
        <div class="simpleText greyColor">
          {{ processInfo.materialModel }}
        </div>
      </el-tooltip>
    </div>
    <div class="textBox" style="margin: 10px 0">
      <div class="simpleText greyColor">序列号</div>
      <el-tooltip class="box-item" effect="dark" :content="processInfo.operationCode" placement="left" trigger="click">
        <div class="simpleText blackColor">
          {{ processInfo.operationCode }}
        </div>
      </el-tooltip>
    </div>
    <div class="textBox">
      <div class="simpleText greyColor">当前工序</div>
      <el-tooltip class="box-item" effect="dark" :content="processInfo.operationName" placement="left" trigger="click">
        <div class="simpleText blackColor">
          {{ processInfo.operationName }}
        </div>
      </el-tooltip>
    </div>
    <svg-icon icon-class="jiaobiao" size="25" class="svgStyle" />
  </div>
</template>

<script lang="ts" setup>
import { useProcessStore } from "@/store";
const store = useProcessStore();
const processInfo = ref({ materialName: "...", materialModel: "..." });
onMounted(() => {
  processInfo.value = store.processInfo;
});
</script>

<style lang="scss" scoped>
.svgStyle {
  position: absolute;
  bottom: 0;
  right: 0;
}

.container {
  width: 100%;
  height: 200px;
  border-radius: 16px;
  background-color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;

  .textBox {
    .titleText {
      font-size: $f24;
      line-height: 24px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }

    .simpleText {
      font-size: $f20;
      line-height: 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      max-width: 100%;
    }
  }
}

.blackColor {
  font-weight: $Medium;
}

.greyColor {
  color: $font-default-60;
}
</style>
