<template>
  <a-modal
    v-model="opened"
    title="查看累计产品（正价产品）"
    centered
    class="view-total-product-modal"
    :maskClosable="false"
    width="860px"
    :footer="null"
    @cancel="cancel"
  >
    <a-spin :spinning="spinning" tip="Loading...">
      <!-- 筛选条件 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" id="view-total-product-form" @keyup.enter.native="$refs.table.refresh(true)">
          <a-row :gutter="15">
            <a-col :md="6" :sm="24">
              <a-form-item label="产品编码">
                <a-input id="totalProduct-productCode" v-model.trim="queryParam.productCode" placeholder="请输入产品编码" allowClear />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="销售单号">
                <a-input id="totalProduct-salesBillNo" v-model.trim="queryParam.salesBillNo" allowClear placeholder="请输入销售单号"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="客户名称">
                <a-input
                  id="totalProduct-targetName"
                  v-model.trim="queryParam.targetName"
                  allowClear
                  placeholder="请输入客户名称" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24" style="margin-bottom: 10px;">
              <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="viewTotalProduct-search">查询</a-button>
              <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="viewTotalProduct-reset">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="totalProduct-delMore-btn">
        <a-button
          type="primary"
          id="viewTotalProduct-allbtn"
          style="margin-right:10px;"
          @click="handleDel()"
        > 批量删除</a-button>
        <span>已选{{ selectTotalInfo.selectNum }}项，数量合计{{ selectTotalInfo.selProductNum }}个，售价合计{{ selectTotalInfo.selTotalPrice }}元</span>
      </div>
      <!-- 已选累计产品列表 -->
      <s-table
        class="sTable"
        ref="table"
        size="small"
        :scroll="{ y: 200 }"
        :rowKey="(record) => record.id"
        :columns="columns"
        :data="loadData"
        :row-selection="{ columnWidth: 40 }"
        @rowSelection="rowSelectionFun"
        :pageSize="10"
        :defaultLoadData="false"
        bordered>
        <!-- 操作 -->
        <template slot="action" slot-scope="text, record">
          <a-button
            size="small"
            type="link"
            :loading="delLoading"
            class="button-error"
            :id="'viewTotalProduct-del-'+record.id"
            @click="handleDel(record)"
          >删除</a-button>
        </template>
      </s-table>
    </a-spin>
  </a-modal>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import { STable, VSelect } from '@/components'
import { accumulatedProductsList, deleteBatchBorrow } from '@/api/salesDetailNew'
export default {
  name: 'TotalProductDetailModal',
  mixins: [commonMixin],
  components: { STable, VSelect },
  props: {
    show: [Boolean]
  },
  data () {
    const _this = this
    return {
      opened: _this.show, // 是否打开累计产品弹窗
      spinning: false, // 页面加载动画
      disabled: false, // 阻止查询重置按钮多次点击事件
      // 查询参数
      queryParam: {
        productCode: '',
        salesBillNo: '',
        targetName: undefined
      },
      rowSelectionInfo: null,
      loadData: parameter => {
        this.disabled = true
        this.spinning = true
        return accumulatedProductsList(Object.assign(parameter, this.queryParam)).then(res => {
          let data
          if (res.status == 200) {
            data = res.data
            const no = (data.pageNo - 1) * data.pageSize
            for (var i = 0; i < data.list.length; i++) {
              data.list[i].no = no + i + 1
            }
          }
          this.disabled = false
          this.spinning = false
          return data
        })
      },
      columns: [
        { title: '序号', dataIndex: 'no', width: '8%', align: 'center' },
        { title: '销售单号', dataIndex: 'salesBillNo', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '客户名称', dataIndex: 'buyerName', width: '12%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '产品编码', dataIndex: 'productCode', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '产品名称', dataIndex: 'productName', width: '12%', align: 'center', ccustomRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '售价', dataIndex: 'qty', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
        { title: '价格级别', dataIndex: 'priceLevelDictValue', width: '10%', align: 'center', ccustomRender: function (text) { return text || '--' } },
        { title: '销售数量', dataIndex: 'buyerName1', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '销售小计', dataIndex: 'warehouseName', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: '6%', align: 'center' }
      ]
    }
  },
  computed: {
    // 计算所选条数
    selectTotalInfo () {
      const selectNum = this.rowSelectionInfo && this.rowSelectionInfo.selectedRowKeys.length || 0
      let selProductNum = 0
      let selTotalPrice = 0
      if (this.rowSelectionInfo && this.rowSelectionInfo.selectedRows) {
        this.rowSelectionInfo.selectedRows.forEach(item => {
          selProductNum += item.num
          selTotalPrice += item.price
        })
      }
      return { selectNum, selProductNum, selTotalPrice }
    }
  },
  methods: {
    cancel () {
      this.opened = false
    },
    // 表格选中项
    rowSelectionFun (obj) {
      this.rowSelectionInfo = obj || null
    },
    // 页面数据初始化
    pageInit (objInfo) {
      this.parameter = { ...objInfo, ...this.parameter }
      setTimeout(() => {
        this.$refs.table.refresh(true)
      }, 200)
    },
    // 重置
    resetSearchForm () {
      this.queryParam.productCode = ''
      this.queryParam.salesBillNo = ''
      this.queryParam.targetName = undefined
      this.$refs.table.refresh(true)
      this.$refs.table.clearSelected() // 清空表格选中项
    },
    // 删除  批量删除
    handleDel (row) {
      const ajaxData = {
        salesBillSn: this.parameter.salesBillSn,
        salesBillDetailSnList: []
      }
      if (row) {
        ajaxData.salesBillDetailSnList = [row.salesPromoSn]
      } else {
        if (!(this.rowSelectionInfo && this.rowSelectionInfo.selectedRowKeys && this.rowSelectionInfo.selectedRowKeys.length)) {
          this.$message.warning('请在列表勾选后再进行批量操作！')
          return
        }
        ajaxData.salesBillDetailSnList = this.rowSelectionInfo.selectedRowKeys
      }
      this.confirmDel(ajaxData)
    },
    // 确定删除
    confirmDel (ajaxData) {
      this.spinning = true
      deleteBatchBorrow(ajaxData).then(res => {
        if (res.status == 200) {
          this.$message.success('删除成功')
          this.$refs.table.refresh(true)
        }
        this.spinning = false
      })
    }
  },
  watch: {
    opened (newValue, oldValue) {
      if (!newValue) {
        this.$emit('cancel')
      }
    },
    show (newValue, oldValue) {
      this.opened = newValue
    }
  }
}
</script>
<style lang="less" scope>
  .view-total-product-modal{
    .totalProduct-delMore-btn {
      display: flex;
      align-items: center;
      margin-bottom:10px;
    }
  }
</style>
