<template>
  <a-modal centered :footer="null" :maskClosable="false" title="已选待转费用报销单" v-model="isShow" @cancel="isShow=false"
    width="70%">
    <div style="padding:10px;">共{{dataSource&&dataSource.length}}条</div>
    <a-spin :spinning="spinning" tip="Loading...">
      <div>
        <ve-table
            border-y
            v-show="!showEmpty"
            :scroll-width="0"
            :max-height="tableHeight"
            :row-style-option="{clickHighlight: true}"
            :cellSelectionOption="{enable: false}"
            :virtual-scroll-option="{enable: true}"
            :columns="columns"
            :table-data="dataSource"
            row-key-field-name="no"
            :column-width-resize-option="columnWidthResizeOption"
          />
        <div v-show="showEmpty" class="empty-data"><a-empty description="暂无数据" :image="simpleImage"/></div>
      </div>
      <div class="btn-cont" style="padding:20px 20px 0;text-align: center;">
        <a-button style="margin-left: 10px" @click="isShow=false">关闭</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
  import {
    commonMixin
  } from '@/utils/mixin'
  import { Empty } from 'ant-design-vue';
  export default {
    name: 'ViewSelectModal',
    mixins: [commonMixin],
    props: {
      openModal: {
        type: Boolean,
        default: false
      },
    },
    data() {
      const _this = this
      return {
        spinning: false,
        isShow: this.openModal,
        simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
        columnWidthResizeOption: {
            // default false
            enable: true,
            // column resize min width
            minWidth: 50
        },
        showEmpty: false,
        tableHeight: 450,
        dataSource: []
      }
    },
    computed: {
      columns() {
        const arr =  [
                { title: '序号', field: 'no',key: "a", width: 50, align: 'center',operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
                { title: '销售单号', field: 'salesBillNo',key: "b", width: 100, align: 'left',operationColumn: false,renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--'} },
                { title: '客户名称', field: 'buyerName',key: "c", width: 150, align: 'left',operationColumn: false , ellipsis: { showTitle: true },renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--'}},
                { title: '费用类型', field: 'convertExpenseAccountTypeDictValue',key: "d", width: 100, align: 'center',operationColumn: false,ellipsis: { showTitle: true },renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--'} },
                { title: '待转金额', field: 'totalAmount',key: "e", width: 80, align: 'right',operationColumn: false,renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--'}},
                { title: '促销名称', field: 'promotionTitle',key: "f", width: 150, align: 'left',operationColumn: false,renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--'}},
                { title: '促销简称', field: 'promotionDescription',key: "g", width: 150, align: 'left',operationColumn: false,renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--'}},
                { title: '规则简称', field: 'promotionRuleDescription',key: "h", width: 150, align: 'center',operationColumn: false,renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--'}},
                { title: '规则类型', field: 'promotionRuleTypeDictValue',key: "l", width: 100, align: 'center',operationColumn: false,renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--'}}
            ]
        return arr
      }
    },
    methods: {
       setData(list){
         this.dataSource = JSON.parse(JSON.stringify(list))
         this.dataSource.map((item,index) => {
           item.no = index + 1
         })
       }
    },
    watch: {
      openModal(nVal, oVal) {
        this.isShow = nVal
      },
      isShow(nVal, oVal) {
        if (!nVal) {
          this.$emit('close')
          this.dataSource = []
        }
      }
    }
  }
</script>

<style>
</style>