<template>
  <div>
    <template slot="footer">
      <a-button type="dashed" @click="close"> 关闭 </a-button>
    </template>
    <a-card :bordered="false">
      <!-- 操作 -->
      <!-- <div class="table-operations">
        <table-setting
          :style="{ float: 'right' }"
          :table-size.sync="tableSize"
          v-model="columns"
          :refresh-loading="loading"
        />
      </div> -->
      <!-- 数据展示 -->
      <a-table
        :loading="loading"
        :size="tableSize"
        rowKey="id"
        :columns="calcColumns"
        :data-source="list"
        :pagination="false"
        :bordered="tableBordered"
      >
        <span slot="invoiceUrl" slot-scope="text, record">    
            <!-- <a-input v-model="form.invoiceUrl" placeholder="暂无信息" :disabled="true" />  -->
            <img
              class="invoice-url"
              :src="record.invoiceUrl"
              alt=""
              @click="bigImgs(record.invoiceUrl)"
            /> 
        </span>
      </a-table>
    </a-card>
  </div>
  <!-- <a-modal ref="subTableModel" :title="'保险登记详情'" width="80%" :visible="visible" @cancel="close">
   
  </a-modal> -->
</template>

<script>
import { tableMixin } from '@/store/table-mixin'

export default {
  dicts: ['insurance_type'],
  name: 'SubTable',
  props: {
    list: {
      type: Array,
      required: true,
    },
    formType: Number,
  },
  mixins: [tableMixin],
  data() {
    return {
      visible: true,
      selectedRowKeys: [],
      selectedRows: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      ids: [],
      loading: false,
      showNum: null,
      columns: [
        {
          title: '加油日期',
          dataIndex: 'tradingHour',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '加油金额（元）',
          dataIndex: 'amount',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '加油升数（升）',
          dataIndex: 'litres',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '油品',
          dataIndex: 'gasType',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '小票',
          dataIndex: 'invoiceUrl',
          scopedSlots: { customRender: 'invoiceUrl' },
          ellipsis: true,
          align: 'center',
        },
      ],
    }
  },
  filters: {},
  created() {},
  computed: {},
  computed: {
    calcColumns() {
      // if (this.showNum != 3) {
      //   return [
      //     ...this.columns,
      //     {
      //       title: '操作',
      //       dataIndex: 'operation',
      //       width: '18%',
      //       scopedSlots: { customRender: 'operation' },
      //       align: 'center',
      //     },
      //   ]
      // }
      return [...this.columns]
    },
  },
  watch: {
    formType: {
      handler(val) {
        this.showNum = val
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 关闭模态框
    close() {
      this.visible = false
      this.selectedRowKeys = []
      this.selectedRows = []
    },
    bigImgs(src){
      window.open(src)
    },
    // 打开抽屉(由外面的组件调用)
    show() {
      this.visible = true
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.ids = selectedRowKeys.map((item) => item - 1)
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    handleAddLjclwInsuranceRegisterDetail(row) {
      this.$emit('add', row)
    },
  },
}
</script>
<style lang="less" scoped>
.invoice-url{
  display: inline-block;
  width: 50px;
  height: 50px;
}
</style>
