<template>
  <div id="left-1">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="left_one">
          <el-input placeholder="请输入名称" :disabled="true" size="medium">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="24" class="left_two">
          <el-col :span="24" v-for="item in roomList" :key="item._id" @click.native="toView(item)" style="cursor: pointer">
            <el-col :span="24" class="left_two_1">
              <el-col :span="4" class="left_image">
                <el-image :src="item.customer.icon[0].url" class="left_icon"> </el-image>
              </el-col>
              <el-col :span="20">
                <el-col :span="24" class="left_time">
                  <el-col :span="10" style="text-align: left">{{ item.customer.name }}</el-col>
                  <el-col :span="14" style="text-align: right">{{ item.last_chat.time }}</el-col>
                </el-col>
                <el-col :span="20" class="left_content">
                  <p class="left_content_test" v-if="item.last_chat.msg_type == '0'">{{ item.last_chat.content }}</p>
                  <p class="left_content_test" v-else>[图片]</p>
                </el-col>
                <el-col :span="4" class="left_badge" v-if="item.not_read != 0">
                  <el-badge :value="item.not_read" :max="99" class="left_item"> </el-badge>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'left-1',
  props: {
    roomList: { type: Array },
  },
  components: {},
  data: function () {
    return {};
  },
  created() {},
  methods: {
    toView(data) {
      this.$emit('toView', data);
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.left_one {
  margin: 5px 0;
}
.left_two {
  overflow-y: auto;
  height: 75vh;
  .left_two_1 {
    border-bottom: 1px solid #ccc;
    padding: 7px 0 5px 0;
    .left_image {
      width: 70px;
      .left_icon {
        border-radius: 5px;
        width: 60px;
        height: 60px;
      }
    }
    .left_content {
      margin: 4px 0 0 0;
    }
    .left_content_test {
      margin: 4px 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      color: #666;
    }

    .left_badge {
      margin: 8px 0 0 0;
      text-align: right;
    }
  }
}
</style>
