<template>
  <div class="invoice-simple-content" :style = "{'border-bottom': isLast?'none':''}" @click="onItemClick">
<!--    <div class="invoice-company">-->
<!--      {{item.company}}-->
<!--    </div>-->
<!--    <div class="invoice-info"><span class="info-key">发票号:</span><span class="info-value">{{item.invoiceNo}}</span></div>-->
<!--    <div class="invoice-info"><span class="info-key">发票日期:</span><span class="info-value">{{item.invoiceDate}}</span></div>-->
<!--    <div class="invoice-info"><span class="info-key">发票金额:</span><span class="info-value">¥<span>{{moneyFormat(item.totalTaxAmount)}}</span></span></div>-->
    <div class="invoice-info">发票号:<span>{{item.invoiceNo}}</span></div>
    <div class="invoice-info">发票日期:<span>{{item.invoiceDate}}</span></div>
    <div class="invoice-info">发票金额:<span class="inv-money">¥{{moneyFormat(item.totalTaxAmount)}}</span></div>
  </div>
</template>

<script>
import { AmountNumFormat } from '@/utils/common'
export default {
  name: 'invoiceSimpleItem',
  props: {
    item: {
      type: Object,
      default: () => {
        return {
          company: '',
          totalTaxAmount: '',
          invoiceNo: '',
          invoiceDate: ''
        }
      }
    },
    isLast: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    moneyFormat(num) {
      return AmountNumFormat(num)
    },
    onItemClick(item) {
      this.$emit('itemClick', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.invoice-simple-content {
  border-bottom: 1px solid #eeeeee;
  padding:0 10px 5px;
  .invoice-company {
    font-size: 12px;
    font-weight:650;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 70%;
    display: inline-block;
  }
  .invoice-info {
    margin: 4px 0;
    span {
      margin-left: 8px;
    }
    .inv-money {
      font-size:15px;
      font-weight:bold
    }
    //margin-top: 5px;
    //.info-key {
    //  font-weight: 400;
    //  font-style: normal;
    //  font-size: 12px;
    //  color: #555555;
    //  text-align: right;
    //  width: 53px;
    //  display: inline-block;
    //}
    //.info-value {
    //  margin-left:20px;
    //  font-size: 12px;
    //  color: #555555;
    //  span {
    //    color:#D9001B;
    //    font-size: 14px;
    //    margin-left:6px;
    //  }
    //}
  }
}
</style>
