<template>
    <div class="workInstruction">
        <div v-if="workInstructionList.length > 0">
          <el-tabs v-model="activeName" @tab-click="handleClick"   >
            <el-tab-pane v-for="(item,index) in workInstructionList"  :key="index" :label= item.postTitle :name="index.toString()" >

              <span>作者：{{item.postAuthor}}</span>
              <span class="time">时间：{{item.createdTime}}</span>
              <div v-html="item.postContent" class="content"></div>

            </el-tab-pane>

            <!-- <el-tab-pane label="作业指导书2" name="2">222222222</el-tab-pane>
            <el-tab-pane label="作业指导书3" name="3">333333333</el-tab-pane>
            <el-tab-pane label="作业指导书4" name="4">444444444</el-tab-pane> -->
          </el-tabs>
        </div>
        <div v-else style="text-align: center">
          暂无数据
        </div>



    </div>
</template>
<script>
  import {mapState, mapGetters} from 'vuex'
  export default {
    name: "WorkInstruction",
    data(){
      return{
        activeName: '0',
        // riskPointDetail: this.$store.state.riskPointDetail,
        workInstructionList: [],
      }
    },
    computed:{
      ...mapGetters([
        'getRiskPointId'
      ]),
      ...mapState(['riskPointDetail', 'riskPointId'])
    },
    watch:{
      getRiskPointId(val) {
        console.log('riskPointId', val)
        this.getRiskPointMeasureList()
      }
    },
    mounted(){
      console.log('riskPointId', this.$store.state.riskPointId)
      this.getRiskPointMeasureList()
    },
    methods:{
        handleClick(tab, event) {
            // console.log(tab, event);
        },
        getRiskPointMeasureList(){
          let _this = this
          let obj = {
            gId:this.$route.query.gId,
            cId:this.$route.query.cId,
            // riskPointId: 7759,
            riskPointId: this.$store.state.riskPointId
          };
          this.$axios.AxiosMethods("get",this.$api.getRiskPointMeasureList,obj,function (res) {
            console.log(res);
            _this.workInstructionList = res.data
          })
        }
    },
  }
</script>

<style scoped>
.workInstruction{
    width: 100%;
    /* height: 200px; */
    /* background-color: aqua; */
}
.content{
    margin-top: 20px;
}
.time{
    margin-left: 50px;
}
</style>
<style>
.workInstruction .el-tabs__nav .el-tabs__item{
    font-size: 16px ;
}
.workInstruction .el-tabs__active-bar{
    height: 0px;
}
.workInstruction .el-tabs__header{
    border-bottom: 0;
}
</style>
