<template>
  <el-dialog title="详情" :visible.sync="detailOpen" width="1000px" append-to-body :close-on-click-modal="false">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="设备详情" name="deviceInfo">
        <DeviceInfo v-if="'deviceInfo' == activeName" :deviceId="deviceId"/>
      </el-tab-pane>
      <el-tab-pane label="图纸信息" name="draw">
        <DrawInfo v-if="'draw' == activeName" :deviceId="deviceId"/>
      </el-tab-pane>
      <el-tab-pane label="配件信息" name="store">
        <StoreInfo v-if="'store' == activeName" :deviceId="deviceId"/>
      </el-tab-pane>
      <el-tab-pane label="模版信息" name="mark">
        <MarkInfo v-if="'mark' == activeName" :inspectId="inspectId"/>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
  import DeviceInfo from "./DeviceInfo";
  import DrawInfo from "./DrawInfo";
  import StoreInfo from "./StoreInfo";
  import MarkInfo from "./MarkInfo";
  export default {
    name: "detail-info",
    components:{
      DeviceInfo,
      DrawInfo,
      StoreInfo,
      MarkInfo
    },
    data(){
        return{
          detailOpen: false,
          activeName: 'deviceInfo',
          deviceId: null,
          inspectId: null
        }
    },
    methods:{
      handleClick(tab, event) {
        console.log(tab, event);
      },
      getDetailInfo(row){
        this.deviceId = row.id;
        this.inspectId = row.inspectId;
        this.activeName = "deviceInfo";
        this.detailOpen = true;
      }
    }
  }
</script>

<style scoped>

</style>
