<template>
  <view class="invoice">
    <view class="invoice-container">
      <view class="invoice-item" v-for="(item, index) in invoiceList" :key="index">
        <view class="title">{{ item.invoice_type == 1 ? '个人发票' : '企业发票' }}</view>
        <view class="code">{{ item.invoice_title }}</view>
        <view class="tool">
          <view class="tool-item" @click="edit(0, item.invoice_id)">
            <image src="../static/mine/24.png"></image>
            <text>编辑</text>
          </view>
          <view class="tool-item" @click="delInvoice(item.invoice_id)">
            <image src="../static/mine/25.png"></image>
            <text>删除</text>
          </view>
        </view>
      </view>
    </view>
    <view class="invoice-btn" @click="edit(1)">添加发票抬头</view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      invoiceList: [],
    }
  },
  onShow() {
    this.getInvoiceList();
  },
  methods: {
    getInvoiceList() {
      this.$u.api.getInvoiceList().then(res => {
        this.invoiceList = res.data;
      })
    },
    delInvoice(id) {
      this.$u.api.invoiceDel({ invoice_id: id }).then(res => {
        if(res.errCode == 0) this.getInvoiceList();
        else this.$u.toast(res.message);
      })
    },
    edit(action, invoice_id) {
      this.$u.route('/pageE/more/EditInvoice', {
        action: action, // 0 编辑 1 添加
        invoice_id: invoice_id,
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.invoice {
	min-height: calc(100vh - var(--window-top));
	background: #ECECEC;
  padding-top: 20rpx;
  .invoice-container {
    width: 690rpx;
    margin: 0 auto;
    .invoice-item {
      margin-bottom: 20rpx;
      background-color: #ffffff;
      padding: 16rpx 20rpx;
      border-radius: 10rpx;
      .title {
        font-size: 26rpx;
        color: #666666;
        margin-bottom: 16rpx;
      }
      .code {
        font-size: 28rpx;
        color: #333333;
        position: relative;
        padding: 30rpx 0;
        &::after {
          position: absolute;
          content: '';
          width: 100%;
          height: 2rpx;
          background-color: #ECECEC;
          bottom: 0;
          left: 0;
        }
      }
      .tool {
        padding-top: 18rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .tool-item {
          &:not(:last-child) {
            margin-right: 30rpx;
          }
          > image {
            width: 23rpx;
            height: 23rpx;
            margin-right: 14rpx;
          }
          > text {
            font-size: 24rpx;
            color: #999999;
          }
        }
      }
    }
  }
  .invoice-btn {
    width: 690rpx;
    height: 98rpx;
    background: #FF780F;
    border-radius: 49rpx;
    font-size: 36rpx;
    color: #FFFFFF;
    line-height: 98rpx;
    text-align: center;
    position: absolute;
    bottom: 40rpx;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
</style>