<template>
  <div class="app-container">
    <el-card>
        
   <el-descriptions title="子工序详情" :column="2" border>
  <el-descriptions-item label="工序名称"  label-class-name="my-label" content-class-name="my-content">{{step.name}}</el-descriptions-item>
  <el-descriptions-item label="步骤编号" label-class-name="my-label" content-class-name="my-content">{{step.number}}</el-descriptions-item>
  <el-descriptions-item label="相关设备" label-class-name="my-label" :contentStyle="{'text-align': 'left'}">
    <el-tag v-for="item in step.equipments_"
                :key="item.number"
                :label="item.name"
               :value="item.number">{{item.name}}</el-tag>
  </el-descriptions-item>
  <el-descriptions-item label="指导书内容" label-class-name="my-label" :contentStyle="{'text-align': 'left'}">{{step.instruction_content}}</el-descriptions-item>
</el-descriptions>
   
      
    </el-card>
   
  </div>
</template>
<script>
import { getStep} from "@/api/mtm";
import checkPermission from "@/utils/permission";


export default {
  components: {  },
  data() {
    return {
    step:"",
    };
  },
  computed: {},
  watch: {},
  created() {
    
   this.getStepD();
  },
  methods: {
    checkPermission,
     getStepD()
     {
       getStep(this.$route.params.id).then((response) => {
        if (response.data) {
          this.step = response.data;
        }
       
      });
     }
  },
};
</script>
<style>
  .my-label {
    background: #E1F3D8;
  }

  .my-content {
    background: #FDE2E2;
  }
</style>