<template>
  <div>
    <div class="con-box">
      <template v-for="(item, index) in tapParam">
        <ul :key="index+'^-^'" class="tabs-list">
          <li class="tabs-hd">{{item.name}}</li>
          <template v-for="(item1, index1) in item.arrItem">
            <li v-bind:key="index1">
              <div :class="['tab', (item.selectIndex == index1 ? 'on' : '')]" @click="selFindSelect" :data-index='index1' :data-i="index" :data-key='item.key' :data-val='item1.val'>{{item1.name}}</div>
            </li>
          </template>
        </ul>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // find: [{
      //   name: '分类',
      //   isShow: false,
      //   selectIndex: 0,
      //   key: 'cc',
      //   arrItem: [ // 从后台请求
      //     { val: '1', name: '学术活动' },
      //     { val: '2', name: '乐分享' },
      //     { val: '3', name: '重修' }
      //   ]
      // }]
    }
  },
  props: {
    tapParam: {
      type: Array,
      default: {}
    }
  },
  methods: {
    selFindSelect (e) {
      let _data = e.currentTarget.dataset
      console.log(_data)
      let index = _data.index
      let json = this.tapParam
      let i = _data.i
      json[i].selectIndex = index
      // json[i].isShow = false
      let param = {
        index: index,
        id: _data.val
      }
      this.$emit('tapParam', param)
    }
  }
}
</script>

<style lang="scss" scoped>
.live-msg {
  position: relative;
  padding: 15px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  .txt {
    padding-right: 100px;
  }
  .in-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
}
/* 列表 筛选 */
ul.tabs-list {
  float: left;
  width: 100%;
  margin: 0 0 0.15rem 0;
  padding: 0;
  font-size: 0.16rem;
  line-height: 1.5;
  border-top: 1px solid #e8e8e8;
  &:last-child {
    margin-bottom: 0;
  }
  .tabs-hd {
    display: inline-block;
    color: #fff;
    padding: 5px 0 9px;
    margin-top: -5px;
    width: 94px;
    text-align: center;
    background: url(https://zws-imgs-pub.ezijing.com/754005be709bf2295bc55923c2b91fd8.png) no-repeat 0 0;
  }
  li {
    float: left;
    list-style: none;
    padding: 0.1rem 0;
    margin-right: 0.2rem;
    .tab {
      padding: 0 0.1rem;
      cursor: pointer;
      &.on {
        background: #b49441;
        color: #ffffff;
      }
      &:focus, &:hover {
        color: #b49441;
        background: #eeeeee;
      }
    }
  }
}
/* 筛选按钮 */
.switch-box {
  margin: 0 0.3rem;
  .icon {
    margin-left: 0.1rem;
  }
  .rbtn {
    float: right;
  }
}
/* 课程列表 */
ul.course-list {
  margin: 0;
  padding: 0;
  font-size: 0.18rem;
  color: #313131;
  .no-data {
    text-align: center;
    line-height: 2rem;
  }
  li.item {
    padding: 0.1rem 0;
    list-style: none;
    border-bottom: 1px solid #dcdcdc;
    overflow: hidden;
    &:first-child {
      padding-top: 0;
    }
    &:last-child {
      margin-bottom: 0.2rem;
    }
    .left-pic {
      position: relative;
      float: left;
      width: 1.8rem;
      // min-height: 1rem;
      overflow: hidden;
      .no-img {
        width: 100%;
        height: 1rem;
        text-align: center;
        line-height: 1.1rem;
        border: 1px solid #e2e2e2;
        i {
          font-size: 0.4rem;
          color: #e2e2e2;
        }
      }
      img {
        // position: absolute;
        // top: 50%;
        // left: 50%;
        display: block;
        width: 100%;
        // height: 100%;
        // transform: translate(-50%, -50%);
        cursor: pointer;
      }
    }
    .right-bd {
      position: relative;
      display: block;
      margin-left: 2rem;
      .title {
        width: 80%;
        line-height: 1.5;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
      }
      .tags {
        margin: 0.05rem 0;
        font-size: 0.14rem;
        span {
          padding: 0 0.1rem;
          margin: 0;
          border-right: 1px solid #313131;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            border: none;
          }
        }
      }
      .time {
        font-size: 0.12rem;
        em {
          font-style: normal;
          color: #898989;
        }
      }
      .progress {
        margin-top: 0.05rem;
        font-size: 14px;
        .el-progress {
          width: 50%;
          display: inline-block;
          vertical-align: text-bottom;
        }
      }
      .right-sel {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 14px;
        padding: 0 0.1rem;
      }
      .in-btn {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }
}
.con-box {
  margin: 0.3rem;
  padding: 0.3rem 0.3rem 0.15rem 0.3rem;
  background: #ffffff;
  overflow: hidden;
  position: relative;
}
@media (max-width: 767px) {
  .switch-box {
    margin: 0;
  }
}
</style>