<!--
  @description: 发票信息
  @Modifier: wy
  @routerPath:
  @date:2021-12-31 14:31
-->
<template>
  <div class="invoice_info">
    <el-table :data="tableData">
      <el-table-column prop="code" align="center" label="发票代码" />
      <el-table-column prop="code" align="center" label="发票号码" />
      <el-table-column prop="code" align="center" label="微信扫码获取电子普通发票">
        <template slot-scope="scope">
          <img :src="scope.row.url" width="100px" height="100px">
        </template>
      </el-table-column>
      <el-table-column prop="code" align="center" label="获取电子发票">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="readInvoicePdf">
            <i class="iconfont icon-xiazai" />
            查看发票
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- pdf查看 -->
    <pdf :pdf-url="pdfUrl" />
  </div>
</template>

<script>
import pdf from '../../../../components/common/pdf/pdf'
export default {
  name: 'InvoiceInfo',
  components: {
    pdf
  },
  data: function() {
    return {
      tableData: [
        {
          code: '10009877',
          url: 'https://img2.baidu.com/it/u=2728761102,3032608893&fm=26&fmt=auto',
          pdfUrl: 'http://www.china-pharmacy.com/231?file_id=30279'
        }
      ],
      pdfUrl: ''
    }
  },
  methods: {
    readInvoicePdf() {
      this.pdfUrl = '/invoicePdf'
    }
  }
}
</script>

<style scoped lang="less"></style>
