<template>
  <div class="list-cell b-b" @click="handlerClick">
    <span class="cell-tit">{{ title }}</span>
    <span v-if="isShowArrow" class="cell-more iconfont icon-arrow" />
  </div>
</template>

<script>
export default {
  name: 'Item',
  props: {
    title: {
      type: String,
      required: true
    },
    isShowArrow: {
      type: Boolean,
      default: true
    },
    item: {
      type: Object
    }
  },
  methods: {
    handlerClick() {
      this.$emit('handlerClick', this.item);
    }
  }
};
</script>
<style lang="less" scoped>
.list-cell {
  display: flex;
  align-items: baseline;
  padding: 10px @page-row-spacing;
  line-height: 30px;
  position: relative;
  background: #fff;
  justify-content: center;
  border-bottom: 1px solid #f8f8f8;
  &.cell-hover {
    background: #fafafa;
  }
  &.b-b:after {
    left: 15px;
  }
  &.m-t {
    margin-top: 8px;
  }
  .cell-more {
    align-self: baseline;
    .text-size(16);
    color: @font-color-light;
    margin-left: 5px;
  }
  .cell-tit {
    flex: 1;
    .text-size(14);
    color: @font-color-dark;
    margin-right: 5px;
  }
  .cell-tip {
    .text-size(14);
    color: @font-color-light;
  }
  switch {
    transform: translateX(8px) scale(0.84);
  }
}
</style>
