<template>
  <div class="">
    <div class="list-item" v-for="(item, index) in list" :key="index">
      <img class="icon" :src="item.icon" />
      <div
        @click="
          () => {
            $emit('select', item, index);
          }
        "
        class="list-item-container"
      >
        <span class="list-item-row1">{{ item.title || item.titile }}</span>
        <span class="list-item-row2">{{ item.operation }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      defalut: [
        {
          createTime: "2022-03-21 16:40:22",
          updateTime: "2022-03-21 16:51:11",
          id: 18,
          title: "新灯光01",
          operation:
            "开始-远近光交替-远近光交替-远光灯-近光灯-示廓灯/危险警示灯-结束",
          icon: "https://t1-1305573081.file.myqcloud.com/lighting/icon/6.png",
          itemId: "3,10,12,5,7,15,17",
        },
      ],
    },
  },
};
</script>

<style lang="scss" scoped>
.list-item {
  display: flex;
  padding-top: 14px;
  margin-left: 10px;
  border-bottom: 1px solid #d8d8d8;
  padding-bottom: 10px;

  .icon {
    width: 35px;
    height: 35px;
  }
  .list-item-container {
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    margin-left: 10px;
    flex-wrap: wrap;
    width: 80%;

    .list-item-row1 {
      font-size: 16px;
      line-height: 20px;
    }
    .list-item-row2 {
      display: inline-block;
      width: 100%;
      font-size: 12px;
      line-height: 20px;
      color: #a0a0a0;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
</style>