<template>
  <a-modal
    v-drag
    centered
    :footer="null"
    :maskClosable="false"
    :title="title"
    v-model="isShow"
    @cancel="cancel"
    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 id="viewChoose-modal-cancel" type="primary" v-if="submitType=='noMearge'" class="button-info" @click="cancel">关闭</a-button>
        <a-button id="viewChoose-modal-submit" type="primary" v-else @click="submit">提交</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 () {
    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: [], // 列表数据
      title: '已选待转费用报销单',
      submitType: 'noMearge', // 默认是，直接勾选的数据，不是合并后的数据
      otherData: null // 其它参数
    }
  },
  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: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
        { title: '客户名称', field: 'buyerName', key: 'c', width: 150, align: 'center', 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: 'expense', key: 'e', width: 80, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
        { title: '促销名称', field: 'promotionTitle', key: 'f', width: 150, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
        { title: '促销简称', field: 'promotionDescription', key: 'g', width: 150, align: 'center', 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, data) {
      this.otherData = data
      this.dataSource = JSON.parse(JSON.stringify(list))
      this.dataSource.map((item, index) => {
        item.no = index + 1
        // 合并列表字段不一样
        if (this.submitType == 'mearge') {
          item.convertExpenseAccountTypeDictValue = item.expenseTypeName
          item.promotionRuleTypeDictValue = item.promotionRuleTypeName
        }
        item.expense = this.toThousands(item.expense, 2)
      })
    },
    // 继续提交
    submit () {
      this.spinning = true
      this.$emit('submit', this.submitType == 'noMearge' ? this.dataSource : this.otherData)
    },
    // 关闭弹框
    cancel () {
      this.isShow = false
    }
  },
  watch: {
    openModal (nVal, oVal) {
      this.isShow = nVal
    },
    isShow (nVal, oVal) {
      if (!nVal) {
        this.$emit('close')
        this.dataSource = []
      }
    }
  }
}
</script>

<style>
</style>
