<template>
  <div class="tabs-box" v-if=" JSON.stringify(riskPointDetail) != '{}' && riskPointDetail != null">
    <el-tabs  v-model="riskPointDetail.tabActive" @tab-click="tabsClick">
      <el-tab-pane label="基本信息" name="baseInfo">
        <BaseInfo :riskPointDetail="pointDetailData"/>
      </el-tab-pane>
      <el-tab-pane label="作业指导书" name="workInstruction">
        <WorkInstruction/>
      </el-tab-pane>
      <el-tab-pane label="风险" name="riskInfos">
        <RiskDetailAll />
      </el-tab-pane>
      <el-tab-pane label="安全检查表" name="checkSafeList">
        <CheckSafeList/>
      </el-tab-pane>
      <el-tab-pane label="检查记录" name="checkList">
        <CheckList :listData="pointDetailData.checkListRecord"/>
      </el-tab-pane>
      <el-tab-pane label="隐患" name="hidangerList">
        <HiDangerList :listData="pointDetailData.hiList"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import RiskDetailAll from './RiskDetailAll'
  import BaseInfo from './BaseInfo'
  import CheckSafeList from './CheckSafeList'
  import CheckList from './CheckList'
  import HiDangerList from './HiDangerList'
  import WorkInstruction from './WorkInstruction'

  import {mapState} from 'vuex'
  export default {
    name: "Tabs",
    data() {
      return {
        riskPointDetail: this.$store.state.riskPointDetail
      }
    },
    props: ["pointDetailData"],
    mounted(){
      // this.getRiskPointDetail()
      // this.riskPointDetail = this.$store.state.riskPointDetail
      console.log(this.riskPointDetail)
      console.log('pointDetailData', this.pointDetailData)
    },
    computed:{
      // ...mapState(['riskPointDetail'])
    },
    components:{
      BaseInfo,
      CheckSafeList,
      CheckList,
      HiDangerList,
      RiskDetailAll,
      WorkInstruction
    },
    methods: {
      tabsClick(tab, event) {
        // console.log(tab, event);
      },
      getRiskPointDetail(){

      }
    }
  }
</script>

<style scoped>

</style>
