<template>
  <div v-if="isShow">
    <a-modal
      centered
      class="salesRecord-modal"
      :footer="null"
      :maskClosable="false"
      :title="modalTit"
      v-model="isShow"
      @cancle="isShow=false"
      :width="960">
      <div>
        <a-tabs size="small" type="card" v-model="curTab" @change="callback">
          <a-tab-pane key="1" tab="当前客户">
          </a-tab-pane>
          <a-tab-pane key="2" tab="全部客户">
          </a-tab-pane>
        </a-tabs>
        <!-- 表格 -->
        <a-table
          class="sTable"
          ref="table"
          size="small"
          :rowKey="(record) => record.id"
          :columns="columns"
          :dataSource="list"
          :loading="loading"
          :pagination="false"
          bordered>
        </a-table>
        <!-- 分页 -->
        <tablePagination
          ref="tablePagination"
          :total="paginationProps.total"
          :current="paginationProps.current"
          :pageSize="paginationProps.pageSize"
          @changePageSize="changePageSize"
          @changePage="changePage" />
      </div>
    </a-modal>
  </div>
</template>

<script>
import { salesRecordlList } from '@/api/salesDetail.js'
import { STable } from '@/components'
import tablePagination from '@/views/common/tablePagination.vue'
export default {
  name: 'SalesRecordModal',
  components: { STable, tablePagination },
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    itemId: {
      type: [Number, String],
      default: ''
    }
  },
  computed: {
    modalTit () {
      return '销售记录'
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      buyerSn: null,
      queryParam: {
        productSn: null
      },
      // 表头
      columns: [
        { title: '销售时间', dataIndex: 'salesBillEntity.createDate', width: 250, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '销售价(￥)', dataIndex: 'price', width: 150, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '销售数量', dataIndex: 'qty', width: 150, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '客户名称', dataIndex: 'salesBillEntity.buyerName', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true }
      ],
      list: [],
      loading: false,
      curTab: '1',
      paginationProps: {
        total: 0, //  分页总条数
        current: 1,
        pageSize: 20
      }
    }
  },
  methods: {
    //  获取详情
    getDetail (buyerSn, productSn) {
      this.buyerSn = buyerSn
      if (this.curTab == 1) {
        this.queryParam.buyerSn = buyerSn
      } else {
        delete this.queryParam.buyerSn
      }
      this.queryParam.productSn = productSn
      this.handelSearch(1)
    },
    // 查询列表
    handelSearch (pageNo) {
      this.paginationProps.current = pageNo || this.paginationProps.current
      const params = {
        pageNo: this.paginationProps.current,
        pageSize: this.paginationProps.pageSize
      }
      // 开始查询
      this.loading = true
      salesRecordlList({ ...params, ...this.queryParam }).then(res => {
        this.loading = false
        if (res.status == 200) {
          const data = res.data
          this.paginationProps.total = Number(res.data.count) || 0
          this.paginationProps.current = data.pageNo
          this.list = data.list
        } else {
          this.paginationProps.total = 0
          this.paginationProps.current = 1
          this.paginationProps.pageSize = 20
          this.list = []
        }
      })
    },
    //  分页  一页多少条change
    changePageSize (current, pageSize) {
      this.paginationProps.current = current
      this.paginationProps.pageSize = pageSize
      this.handelSearch()
    },
    //  分页 页码change
    changePage (current) {
      this.paginationProps.current = current
      this.handelSearch()
    },
    callback (key) {
      this.curTab = key
      this.getDetail(this.buyerSn, this.queryParam.productSn)
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
        this.paginationProps.total = 0
        this.paginationProps.current = 1
        this.paginationProps.pageSize = 20
        this.curTab = '1'
        this.list = []
      }
    }
  }
}
</script>

<style lang="less">
  .salesRecord-modal{
    .ant-modal-body {
      padding: 10px;
    }
  }
</style>
