<template>
    <div class="risk-detail-all">
      <div v-if="riskList.length > 0">
        <el-collapse accordion v-model="riskPointDetail.cIndex1">
          <el-collapse-item v-for="(item,index) in riskList" :key="index" :name="index.toString()">
            <template slot="title">
              危险源：<span>{{item.rootName}}</span>
            </template>
            <div class="risk-detail-table">
              <el-table
                :data="item.list"
                min-height="300"
                style="width: 100%">
                <el-table-column
                  type="index"
                  width="80px">
                </el-table-column>
                <el-table-column
                  prop="riskLevel"
                  label="等级"
                  min-width="100">
                  <template slot-scope="scope">
                    <div v-if="scope.row.riskLevel==1 ">
                      <div  class='riskLevel1'></div> <span>  重大</span>
                    </div>
                    <div v-if="scope.row.riskLevel==2 ">
                      <div  class='riskLevel2'></div><span> 较大</span>
                    </div>
                    <div v-if="scope.row.riskLevel==3 ">
                      <div  class='riskLevel3'></div><span> 一般</span>
                    </div>
                    <div v-if="scope.row.riskLevel==4 ">
                      <div  class='riskLevel4'></div><span> 较低</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="riskCode"
                  label="风险编号"
                  min-width="150">
                </el-table-column>
                <el-table-column
                  prop="riskReason"
                  label="危险因素"
                  min-width="150">
                </el-table-column>
                <el-table-column
                  prop="riskConsequence"
                  min-width="200"
                  label="未达标的情况后果">
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div v-else style="text-align: center">暂无数据</div>
    </div>
</template>

<script>
  import {mapState, mapGetters} from 'vuex'
  export default {
    data(){
      return{
        riskList: []
      }
    },
    name: "RiskDetailAll",
    created(){
    },
    computed:{
      ...mapGetters([
        'getRiskPointId'
      ]),
      ...mapState(['riskPointDetail', 'riskPointId'])
    },
    watch:{
      getRiskPointId(val) {
        console.log('riskPointId', val)
        this.getRiskRecord()
      }
    },
    mounted() {
      console.log('riskPointId', this.$store.state.riskPointId)
      this.getRiskRecord()
    },
    methods: {
      getRiskRecord(){
        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.getRiskRecord,obj,function (res) {
          console.log(res);
          _this.riskList = res.data
        })
      }
    }
  }
</script>

<style scoped>
.riskLevel1,.riskLevel2,.riskLevel3,.riskLevel4{
	width: 15px;
	height: 15px;
	border-radius: 50%;
	display: inline-block;
}
  .riskLevel1{
    background: #FF4B28;
  }
  .riskLevel2{
    background: #FD7423;
  }
  .riskLevel3{
    background: #FFDF10;
  }
  .riskLevel4{
    background: #00C0FF;
  }
</style>
