<template>
  <div class="my-invoice">
    <div class="my-invoice__header">
      <el-button type="primary" @click="apply">申请发票</el-button>
    </div>
    <div class="my-invoice__body">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          align="center"
          header-align="center"
          type="index"
          label="序号"
        />
        <el-table-column align="center" header-align="center" label="发票抬头"
          >中正教育
        </el-table-column>
        <el-table-column align="center" header-align="center" label="开票金额"
          >1000
        </el-table-column>
        <el-table-column align="center" header-align="center" label="发票类型">
          普通发票</el-table-column
        >
        <el-table-column align="center" header-align="center" label="开票状态"
          >已开票
        </el-table-column>
        <el-table-column
          align="center"
          header-align="center"
          prop="date"
          label="申请时间"
        >
        </el-table-column>
        <el-table-column align="center" header-align="center" label="开票订单">
          999</el-table-column
        >
        <el-table-column align="center" header-align="center" label="审核状态">
          审核状态</el-table-column
        >
        <el-table-column align="center" header-align="center" label="发票状态"
          >通过
        </el-table-column>
        <el-table-column align="center" header-align="center" label="操作">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small"
          >
            查看
          </el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small"
          >
            下载
          </el-button>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyInvoice",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    apply() {
      this.$router.push({
        path: "/person-center/my-invoice/add",
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.my-invoice {
  overflow: hidden;
  &__header {
    margin-top: 24px;
  }
  &__body {
    margin-top: 20px;

    /deep/ .el-table {
      border: 1px solid #eeeeee;
      box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.04);
      border-radius: 8px;
    }
  }
}
</style>
