<template>
  <div class="div_break_rule_content" @click="onClickItem">
    <span class="span_break_rule_title">{{data.content}}</span>
    <div style="margin-top: 10px">
      <span class="text_light">{{data.operators}}</span>
      <span class="text_light" style="margin: 0 10px">|</span>
      <span class="text_light">{{data.operateDate}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "breakRulesItem",
    props:{
      clickable:{
        type:Boolean,
        default:true
      },
      data:{
        type:Object,
      }
    },
    methods:{
      onClickItem(){
        if (!this.clickable)
          return;
        this.$router.push({
          path:'breakRulesDetail',
          query:{
            value:this.data
          }
        })
      }
    }
  }
</script>

<style scoped>

  .div_break_rule_content{
    padding: 15px;
    background-color: white;
    margin-bottom: 10px;
  }
  .span_break_rule_title{
    font-size: 15px;
    color: #333333;
  }
  .div_break_rule_name{
    display: flex;
  }
</style>
