<template>
  <div v-if="isShow">
    <a-modal
      centered
      class="salesRecord-price-modal"
      :footer="null"
      :maskClosable="false"
      v-drag
      :title="modalTit"
      v-model="isShow"
      @cancle="isShow=false"
      :width="960">
      <div>
        <div v-if="baseData" style="line-height: 28px;margin-bottom: 10px;display:flex;">
          <div style="flex:1">产品编码：{{ baseData.code }}</div>
          <div style="flex:1">产品名称：{{ baseData.name }}</div>
        </div>
        <div style="display: flex;padding-bottom: 15px;align-items: center;">
          <span>选择客户：</span>
          <div style="width: 40%;"><custList ref="custList" @change="custChange" placeholder="输入客户名称搜索"></custList></div>
          <div style="padding: 0 15px;color: #999;">
            <a-button type="primary" @click="handelSearch(1)">查询</a-button>
            <a-button type="default" style="margin-left: 5px" @click="reset">重置</a-button>
          </div>
        </div>
        <!-- 表格 -->
        <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 { commonMixin } from '@/utils/mixin'
import { salesRecordlList } from '@/api/salesDetail.js'
import { STable } from '@/components'
import tablePagination from '@/views/common/tablePagination.vue'
import custList from '@/views/common/custList.vue'
export default {
  name: 'SalesRecordModal',
  components: { STable, tablePagination, custList },
  mixins: [commonMixin],
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    itemId: {
      type: [Number, String],
      default: ''
    }
  },
  computed: {
    modalTit () {
      return '销售记录'
    }
  },
  data () {
    const _this = this
    return {
      isShow: this.openModal, //  是否打开弹框
      queryParam: {
        productSn: null,
        buyerSn: undefined,
        buyerName: undefined
      },
      // 表头
      columns: [
        { title: '销售时间', dataIndex: 'salesBillEntity.createDate', width: 250, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '销售价', dataIndex: 'price', width: 150, align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(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,
      paginationProps: {
        total: 0, //  分页总条数
        current: 1,
        pageSize: 20
      },
      baseData: null
    }
  },
  methods: {
    reset () {
      this.queryParam.buyerSn = undefined
      this.queryParam.buyerName = undefined
      this.$refs.custList.setData(undefined)
      this.getDetail(this.baseData)
    },
    // 客户 change
    custChange (obj, row) {
      if (row) {
        this.queryParam.buyerSn = row && row.customerSn || undefined
        this.queryParam.buyerName = undefined
      } else {
        this.queryParam.buyerName = obj || undefined
        this.queryParam.buyerSn = undefined
      }
    },
    //  获取详情
    getDetail (row) {
      this.queryParam.productSn = row.productSn
      this.handelSearch(1)
      this.baseData = row
    },
    // 查询列表
    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()
    }
  },
  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 = []
        this.queryParam.buyerSn = undefined
        this.queryParam.buyerName = undefined
        this.$refs.custList.setData(undefined)
      }
    }
  }
}
</script>

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