<template>
  <ul class="hae-list">
    <template v-if="type == 'text'">
      <li @click="navigateTo(item.url,item)" class="hae-list-item" v-for="(item, index) in list" :key="index">
        <p class="list-content">
          <template v-if="item.icon">
            <icon :name="item.icon" :color="item.color"></icon>
          </template>
          <template v-else-if="item.img">
            <span class="list-icon" :style="{'background-image':'url('+item.img+')'}"></span>
          </template>
          {{item.name}}
        </p>
        <template v-if="item.url || url">
          <icon name="arrow-right"></icon>
        </template>
      </li>
    </template>
    <template v-else>
      <li @click="navigateTo(item.url,item)" class="hae-list-item" v-for="(item, index) in list" v-html="item.name" :key="index"></li>
    </template>
  </ul>
</template>
<script>
import Icon from '../icon'
export default {
  name: 'list',
  components: {
    Icon
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      // 'text'、'html'
      default: 'text'
    },
    url: {
      type: String,
      default: ''
    }
  },
  methods: {
    navigateTo (link, item) {
      this.$emit('click-item', item);
      if (link) {
        this.$router.push(link);
        return;
      }
      if (this.url) {
        this.$router.push(this.url);
      }
    }
  }
};
</script>
<style lang="less">
.hae-list-item {
  padding:10px 15px;
  list-style: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hae-list-item:active {
  background-color: #dbdbdb;
}
.hae-list-item:after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: #D9D9D9;
  left: 0;
  transform: scaleY(0.3);
}
.list-content {
  display: flex;
  align-items: center;
}
.list-content span {
  margin-right: 10px;
}
.list-icon {
  width: 20px;
  display: inline-block;
  height: 20px;
  background-position: center;
}
</style>