<template>
    <!-- 已选配件列表 -->
    <a-spin :spinning="spinning" tip="Loading...">
        <ve-table
              border-y
              :border-around="false"
              :max-height="tableHeight+'px'"
              :row-style-option="{clickHighlight: true}"
              :cellSelectionOption="{enable: false}"
              :virtual-scroll-option="{enable: true}"
              :columns="columns"
              :table-data="dataSource"
              row-key-field-name="id"
              :cell-style-option="cellStyleOption"
            />
        <div v-show="showEmpty" class="empty-data">暂无数据</div>
    </a-spin>
  </template>
  
  <script>
    import { commonMixin } from '@/utils/mixin'
    import { salesDetailAllList } from '@/api/salesDetailNew'
    export default {
      name: 'DetailProductList',
      mixins: [commonMixin],
      components: { },
      props: {
        newLoading: Boolean,
        detailData: {
          type: Object,
          default: function(){return null}
        },
        promo: {
          type: Object,
          default: function(){return null}
        },
        id: {
          type: String,
          default: ''
        },
        warehouseSn: {
          type: String,
          default: ''
        },
        salesBillSn: {
          type: String,
          default: ''
        },
        showCityPrice: {
            type: Boolean,
            default: false
        },
        authCode: {
          type: String,
          default: ''
        }
      },
      data () {
        return {
          spinning: false,
          dataSource: [],
          tableHeight: 200,
          cellStyleOption: {},
          isCityPrice: false,
          outStockStr: '',
          showEmpty: false
        }
      },
      computed: {
        columns () {
          const _this = this
          const priceFormat = function(data){
            return _this.toThousands(data) || '--'
          }
          const numsFormat = function(data){
            return data || data == 0 ? data : '--'
          }
          const codeFormat = function(record,data,h){
            if(record.promotionFlag=='GIFT'){
                return (
                    <div>
                        <span style="padding-right: 15px;">{data}</span>
                        <a-badge count="促" number-style={{ backgroundColor: '#52c41a', zoom:'80%' }}></a-badge>
                    </div>
                )
            }
            if(record.promotionFlag=='REGULAR'){
                return (
                    <div>
                        <span style="padding-right: 15px;">{data}</span>
                        <a-badge count="正" number-style={{ backgroundColor: '#108ee9', zoom:'80%' }}></a-badge>
                    </div>
                )
            }
            if(record.promotionFlag=='DISCOUNT'){
                return (
                    <div>
                        <span style="padding-right: 15px;">{data}</span>
                        <a-badge count="特" number-style={{ backgroundColor: '#faad14', zoom:'80%' }}></a-badge>
                    </div>
                )
            }
            if(Number(record.stockQty||0) < Number(record.unpushedQty||0)){
                return (
                    <div>
                        <span style="padding-right: 15px;">{data}</span>
                        <a-badge count="缺" number-style={{ zoom:'80%' }}></a-badge>
                    </div>
                )
            }
          }

          let arr= [
                { title: '序号', field: 'no',key: "a", width: 60, align: 'center', fixed: 'left',operationColumn: false },
                { title: '产品编码', field: 'productCode',key: "b", width: 100, align: 'center',operationColumn: false,renderBodyCell: ({ row, column, rowIndex }, h) => { return codeFormat(row,row[column.field],h)} },
                { title: '产品名称', field: 'productName',key: "c", width: 250, align: 'center',operationColumn: false , ellipsis: { showTitle: true },renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--'}},
                { title: '原厂编码', field: 'productOrigCode',key: "d", width: 100, align: 'center',operationColumn: false,ellipsis: { showTitle: true },renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--'} },
                { title: '出库仓库', field: 'warehouseName',key: "e", width: 120, align: 'center',operationColumn: false,renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--'}}
            ]

            if (this.$hasPermissions(this.authCode + '_costPrice')) { //  成本价权限
                arr.push({ title: '成本价', field: 'showCost', width: 100,key: "f", align: 'center',operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return priceFormat(row[column.field])} })
            }
            arr = arr.concat([
                { title: '单位', field: 'productOrigUnit',key: "g", width: 80, align: 'center',operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--'}},
                { title: '销售数量', field: 'qty', width: 80,key: "h", align: 'center',operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return numsFormat(row[column.field])} }
            ])

            if (this.$hasPermissions(this.authCode + '_provincePrice')) {
                arr.push({ title: '省级价', field: 'provincePrice', width: 100,key: "i", align: 'center',operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return priceFormat(row[column.field])} })
            }
            // 是否勾选市级价格
            if (this.isCityPrice) {
                arr.push({ title: '市级价', field: 'cityPrice', width: 100,key: "j", align: 'center',operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return priceFormat(row[column.field])} })
                if (this.$hasPermissions(this.authCode + '_salesPrice')) { //  售价权限
                    arr.push({ title: '销售价', field: 'price', width: 100,key: "k", align: 'center',operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return priceFormat(row[column.field])} })
                }
            } else {
                if (this.$hasPermissions(this.authCode + '_salesPrice')) { //  售价权限
                    arr.push({ title: '销售价', field: 'price', width: 100,key: "l", align: 'center',operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return priceFormat(row[column.field])} })
                }
            }

            if (this.showStock) { //  审核，需用到库存
                arr.push({ title: '库存', field: 'stockQty', width: 100,key: "m", align: 'center',operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return numsFormat(row[column.field])} })
            }
            arr = arr.concat([
                { title: '待下推数', field: 'unpushedQty', width: 100,key: "o", align: 'center',operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return numsFormat(row[column.field])} },
                { title: '已下推数', field: 'pushedQty', width: 100,key: "p", align: 'center',operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return numsFormat(row[column.field])} },
                { title: '已取消数', field: 'cancelQty', width: 100,key: "q", align: 'center',operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return numsFormat(row[column.field])} }
            ])
          return arr
        },
        showStock(){
            return this.detailData && (this.detailData.billStatus == 'WAIT_AUDIT' || this.detailData.billStatus == 'HQ_CHANGE') && this.$hasPermissions('B_salesAudit')
        }
      },
      watch: {
        showCityPrice(newValue, oldValue){
            this.isCityPrice = newValue
        },
        salesBillSn(newValue, oldValue){
             
        }
      },
      methods: {
         // 获取表格数据
         getTableData(){
            this.spinning = true
            const params = {
                salesBillSn: this.salesBillSn,
                showStock: this.showStock,
                warehouseSn: this.warehouseSn
            }
            // 活动列表
            if(this.promo){
                params.promoRuleSn = this.promo.promoRuleSn
                params.promoSn = this.promo.promoSn
                params.salesPromoSn = this.promo.salesPromoSn
            }
            salesDetailAllList(params).then(res => {
              let data
              if (res.status == 200) {
                data = res.data
                const no = 0
                this.outStockStr = ''
                let str = ''
                for (var i = 0; i < data.length; i++) {
                    data[i].no = no + i + 1
                    const productCode = (data[i].productEntity && data[i].productEntity.code) || (data[i].dealerProductEntity && data[i].dealerProductEntity.code)
                    const productName = (data[i].productEntity && data[i].productEntity.name) || (data[i].dealerProductEntity && data[i].dealerProductEntity.name)
                    const productOrigCode = (data[i].productEntity && data[i].productEntity.origCode) || (data[i].dealerProductEntity && data[i].dealerProductEntity.origCode)
                    const productOrigUnit = (data[i].productEntity && data[i].productEntity.unit) || (data[i].dealerProductEntity && data[i].dealerProductEntity.unit)
                    data[i].productCode = productCode || '--'
                    data[i].productName = productName || '--'
                    data[i].productOrigCode = productOrigCode == ' ' ? '--' : productOrigCode
                    data[i].productOrigUnit = productOrigUnit || '--'
                    if (data[i].unpushedQty && (Number(data[i].stockQty) < Number(data[i].unpushedQty))) {
                        str += data[i].productCode + '、'
                    }
                }
                if (str.length > 0) {
                    str = str.substr(0, str.length - 1)
                    this.outStockStr = '产品编号为：' + str + '的产品库存不足；'
                }
                this.showEmpty = data.length <= 0
                this.tableHeight = this.showEmpty ? 30 : 200
                this.spinning = false
                this.dataSource = data
              }
            })
         }
      }
    }
  </script>
  
  <style lang="less">
    .empty-data{
        color: #999;
        text-align: center;
        padding: 20px;
    }
  </style>