
<template>
    <div>
      <div class='left_title_box'>{{left_title}}</div>
      <ul class='left_ul_box'>
        <li @click='check_left_title(item , index)' :class='item.class'  v-for="(item , index) in left_title_list" :key='index'>{{item.title}}</li>
      </ul>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'base-title_list',
  props: {
    url_module: {},
    left_title: {}
  },
  data() {
    return {
      left_title_list: [{
        title: '一工组',
        class: ''
      }, {
        title: '二工组',
        class: ''
      }, {
        title: '三工组',
        class: ''
      }]
    }
  },

  mounted() {
    this.get_data()
  },
  actived() {},
  methods: {
    get_data() {
      axios.get(this.url_module).then(res => {
        this.left_title_list = res.data
      })
    },
    check_left_title(item, index) {
      const jtem = this.left_title_list.find((jtem, jindex) => {
        return jtem.class === 'active_left'
      })
      if (jtem) {
        jtem.class = ''
      }
      item.class = 'active_left'
      this.$emit('menu_check', item)
    }
  }
}
</script>

<style scoped>

.left_ul_box{
  padding: 10px 5px 0 10px;
}
.left_ul_box > li{
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  padding: 10px;
  border-bottom: .5px solid #f5f0f0;
}
.left_title_box{
    height: 55px;
    line-height: 55px;
    font-size: 18px;
    padding-left: 15px;
    border-bottom: 1px solid #efefef;
}
.active_left{
  color: #409EEF;
  background: #fdfcfa;
  border-radius: 10px;
}
.left_ul_box>li:hover{
  background: #bcd8f1;
}
</style>
