<template>
    <el-dialog
  title="风机详情"
  width="80%"
  top="11vh"
  >
  <div style="background-color:black;">
    <!-- <div class="titeldiv">
      <div class="chunkdiv" width="15%">
        <img src="../../../assets/img/WindturbineDetailPages/pic_01.png"/>
        <div>MA B401</div>
      </div>
      <div class="chunkdiv" width="15%">
        <div>所属线路&emsp;</div>
        <div>某某某1线</div>
      </div>
      <div class="chunkdiv" width="15%">
        <div>机型&emsp;</div>
        <div>GW1000</div>
      </div>
      <div class="chunkdiv" width="15%">
        <div>告警时间：</div>
        <div>2021年5月10日&emsp;12：23：31</div>
      </div>
      <div class="chunkdiv" width="15%">
        <div>告警内容：</div>
        <div>通讯中断</div>
      </div> -->
      <table width="99.8%">
        <tr>
          <td>
        <div class="chunkdiv">
        <img src="../../../assets/img/WindturbineDetailPages/pic_01.png"/>
        <div>{{windturbineId}}</div>
      </div>
      </td>
      <td>
      <div class="chunkdiv">
        <div>所属线路&emsp;</div>
        <div>某某某1线</div>
      </div>
      </td>
      <td>
      <div class="chunkdiv">
        <div>机型&emsp;</div>
        <div>GW1000</div>
      </div>
      </td>
      <td>
      <div class="chunkdiv">
        <div>告警时间：</div>
        <div>2021年5月10日&ensp;12:23:31</div>
      </div>
      </td>
      <td>
      <div class="chunkdiv">
        <div>告警内容：</div>
        <div>通讯中断</div>
      </div>
      </td>
      </tr>
      </table>
    
    <el-tabs type="border-card" tab-position="bottom" stretch=true>
    <el-tab-pane label="基本信息">
      <BasicInformationDetail></BasicInformationDetail>
    </el-tab-pane>
    <el-tab-pane label="机舱信息">
      <BasicInformationDetail></BasicInformationDetail>
    </el-tab-pane>
    <el-tab-pane label="故障信息">
      <BasicInformationDetail></BasicInformationDetail>
    </el-tab-pane>
    <el-tab-pane label="齿轮箱">
      <BasicInformationDetail></BasicInformationDetail>
    </el-tab-pane>
    <el-tab-pane label="变桨">
      <BasicInformationDetail></BasicInformationDetail>
    </el-tab-pane>
    <el-tab-pane label="偏航">
      <YawDetail></YawDetail>
    </el-tab-pane>
    <el-tab-pane label="液压">
      <BasicInformationDetail></BasicInformationDetail>
    </el-tab-pane>
    <el-tab-pane label="发电机">
      <BasicInformationDetail></BasicInformationDetail>
    </el-tab-pane>
  </el-tabs>
  </div>
</el-dialog>
</template>

<script>
import YawDetail from './YawDetail.vue'
import BasicInformationDetail from './BasicInformationDetail.vue'

export default{
  components: { 
    YawDetail,
    BasicInformationDetail
    },
    props:{
      windturbineId:String,
    }
}
</script>
<style scoped>
/*   .titeldiv{
    display: flex;
    justify-content: space-around;
  } */
  .chunkdiv{
    display: flex;
    justify-content: center;
    background-color:#363636;
    margin: 1px;
    padding: 2px;
    color:rgb(220,220,220);
  }
  table{
    margin-left: 2px;
    margin-right: 2px;
  }
  td{
    width:20%;
  }
  el-tabs{
    background-color: black;
  }
</style>
