<template>
  <div class="salesNewEdit-wrap">
    <a-spin :spinning="spinning" tip="Loading...">
      <a-page-header :ghost="false" :backIcon="false" @back="handleBack" >
        <!-- 自定义的二级文字标题 -->
        <template slot="subTitle">
          <a id="salesEdit-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
          <span style="margin: 0 15px;color: #666;font-weight: bold;">单号：{{ detailData&&detailData.salesBillNo }}</span>
          <span v-if="detailData&&detailData.salesBillNoSource">（原：{{ detailData&&detailData.salesBillNoSource || '--' }}）</span>
          <span style="margin: 0 10px;color: #666;">客户名称：{{ detailData&&detailData.buyerName }}</span>
          <a-button type="link" size="small" class="button-default" @click="showDetail=!showDetail">
            <a-icon :type="showDetail ? 'eye-invisible' : 'eye'"/> {{ showDetail?'隐藏':'查看' }}信息
          </a-button>
        </template>
      </a-page-header>
      <!-- 单据详情 -->
      <a-card size="small" :bordered="false" class="salesEdit-cont" v-show="showDetail">
        <div style="padding: 10px;">
          <a-descriptions size="small" :column="3">
            <a-descriptions-item label="客户名称">{{ detailData&&detailData.buyerName || '--' }}</a-descriptions-item>
            <a-descriptions-item label="收货地址" :span="2">{{ shippingAddress||'--' }}</a-descriptions-item>
            <a-descriptions-item label="收货人">{{ detailData&&detailData.salesBillExtEntity&&detailData.salesBillExtEntity.consigneeName || '--' }}</a-descriptions-item>
            <a-descriptions-item label="收货电话">{{ detailData&&detailData.salesBillExtEntity&&detailData.salesBillExtEntity.consigneeTel || '--' }}</a-descriptions-item>
            <a-descriptions-item label="收款方式">{{ detailData&&detailData.settleStyleSnDictValue || '--' }}</a-descriptions-item>
            <a-descriptions-item label="审核时间">{{ detailData&&detailData.auditDate || '--' }}</a-descriptions-item>
            <a-descriptions-item label="业务状态">{{ detailData&&detailData.billStatusDictValue || '--' }}</a-descriptions-item>
            <a-descriptions-item label="财务状态">{{ detailData&&detailData.financialStatusDictValue || '--' }}</a-descriptions-item>
            <a-descriptions-item label="改单时间" v-if="detailData&&detailData.salesBillSource=='PURCHASE'&&detailData.submitDate">{{ detailData.submitDate }}</a-descriptions-item>
            <a-descriptions-item label="最新提交时间" v-if="detailData&&detailData.salesBillSource=='SALES'&&detailData.submitDate">{{ detailData.submitDate }}</a-descriptions-item>
            <a-descriptions-item label="备注" :span="3">{{ detailData&&detailData.remarks || '--' }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </a-card>
      <!-- 正常产品 -->
      <a-card size="small" :bordered="false" class="salesEdit-cont" v-if="salesBillSn">
        <div slot="title" style="display: flex;justify-content: space-between;align-items: center;" v-if="showTotal">
          <strong>产品列表</strong>
          <a-button size="small" @click="showNormalList=!showNormalList" type="link" class="button-info"><a-icon :type="showNormalList?'up':'down'"/> {{ showNormalList?'收起':'展开' }}</a-button>
        </div>
        <div style="padding: 10px;position: relative;">
          <productNormalList
            v-show="showNormalList"
            ref="productNormalList"
            @refash="refashTableData"
            @spinning="e=>spinning=e"
            @openCpModal="openProductModal"
            @allThreeStock="searchAllThreeStock"
            @addActive="upActive"
            @error="tableErrorData"
            @count="setNormalCount"
            :showTotal="showTotal"
            :activeList="activeList"
            :hasActive="hasActive"
            :detailData="detailData"
            :warehouseSn="warehouseSn"
            :salesBillSn="salesBillSn">
          </productNormalList>
        </div>
      </a-card>
      <!-- 活动统计列表 -->
      <a-card
        size="small"
        :bordered="false"
        class="salesEdit-cont"
        v-if="activeList.length"
      >
        <div slot="title">
          <div style="display: flex;justify-content: space-between;align-items: center;">
            <strong>活动产品</strong>
            <div>
              <a-popover placement="bottom">
                <template slot="content">
                  <a-checkbox-group v-model="colsValue">
                    <a-row style="width:100px;padding:0;">
                      <a-col :span="24" style="margin:3px 0;" v-for="(item) in colsOptions" :key="item.value">
                        <a-checkbox :value="item.value">{{ item.label }}</a-checkbox>
                      </a-col>
                    </a-row>
                  </a-checkbox-group>
                </template>
                <a-button size="small" type="link" class="button-info"><a-icon type="eye"/> 显示列</a-button>
              </a-popover>
              <a-button size="small" @click="showActiveList=!showActiveList" type="link" class="button-info"><a-icon :type="showActiveList?'up':'down'"/> {{ showActiveList?'收起':'展开' }}活动</a-button>
              <a-button size="small" @click="getActiveList(false)" type="link" class="button-info"><a-icon type="reload"/> 刷新</a-button>
            </div>
          </div>
        </div>
        <activeStatisticsList
          v-show="showActiveList"
          ref="activeTjList"
          @openCpModal="openProductModal"
          @refash="refashTableData"
          @selected="active => salesPromoSnSet = active"
          :showCols="colsValue"
          :hasNormal="hasNormal"
          :activeList="activeList"
          :warehouseSn="warehouseSn"
          :salesBillSn="salesBillSn"
        ></activeStatisticsList>
        <div v-if="!showActiveList" style="height:10px"></div>
        <div style="padding:0 10px 10px 10px;">
          <productActiveList
            ref="productActiveList"
            :activeList="activeList"
            :detailData="detailData"
            :salesBillSn="salesBillSn"
            :salesPromoSnSet="salesPromoSnSet"
            @showRuleDetail="showRuleDetail"
            @refash="refashTableData"
            @error="tableErrorData"
            @upActive="upActive">
          </productActiveList>
        </div>
      </a-card>
    </a-spin>
    <!-- 底部栏 -->
    <div class="affix-cont">
      <div class="footer-price">
        <div></div>
        <div v-if="detailData">
          <div class="totalPrice">总售价：￥<span>{{ toThousands(detailData.totalAmount) }}</span></div>
          <div>
            产品总款数：<strong style="margin-right: 10px;"> {{ detailData.totalCategory }} </strong>
            总数量：<strong style="margin-right: 10px;"> {{ detailData.totalQty }} </strong>
            <!-- 总售价：￥<strong> {{ toThousands(detailData.totalOrigAmount) }}</strong> -->
            <span style="margin:0 10px;" v-if="detailData.totalDiscountAmount">优惠金额：￥<strong>{{ Number(detailData.totalDiscountAmount).toFixed(2) }}</strong></span>
            <a-popover title="优惠明细" @visibleChange="(visible)=>{visible&&getPromYhDetail()}">
              <a-button shape="round" size="small" v-if="detailData.totalDiscountAmount">优惠明细</a-button>
              <div slot="content">
                <div v-if="yhDetail">
                  <div
                    class="yhdetail"
                    style="min-width:300px;margin-bottom: 10px;"
                    v-for="(item,index) in yhDetail.promoMapList"
                    :key="index">
                    <div class="yhdetail-h" style="font-size:14px;">{{ item.description }}</div>
                    <div
                      style="padding-left:10px;"
                      v-for="(sitem,sindex) in item.promoRuleMapList"
                      :key="sindex"
                      v-if="sitem.lossAmount"
                    >
                      <div style="display: flex;justify-content: space-between;">
                        <div>
                          <span>{{ sitem.promotionRuleTypeDictValue }}：</span>
                          <span style="color:#999;">{{ sitem.description }}</span>
                        </div>
                        <strong>￥{{ toThousands(sitem.lossAmount) }}</strong>
                      </div>
                    </div>
                  </div>
                  <div class="yhdetail" style="display: flex;justify-content: space-between;">
                    <span style="font-weight: bold;font-size:14px;">优惠金额：</span>
                    <span style="font-weight: bold;font-size:18px;">￥{{ Number(yhDetail.totalLossAmount).toFixed(2) }}</span>
                  </div>
                </div>
                <div style="text-align: center;padding: 20px;" v-else>
                  正在加载...
                </div>
              </div>
            </a-popover>
          </div>
        </div>
      </div>
      <div>
        <a-button
          size="large"
          style="padding: 0 40px;"
          :disabled="spinning"
          type="primary"
          class="button-primary"
          @click="submitResult()"
          id="productInfoList-handleSubmit">提交</a-button>
      </div>
    </div>
    <!-- 添加产品 -->
    <chooseProduct
      ref="chooseProduct"
      :openModal="showCpModal"
      @close="closeProductModal"
      @addProduct="insterProduct">
    </chooseProduct>
    <!-- 新活动窗口 -->
    <newPromoModal
      :show="showNewActiveModal"
      :salesBillSn="salesBillSn"
      :newActiveList="newActiveList"
      @ok="showNewActiveOk"
    ></newPromoModal>
    <!-- 特价活动排序弹框 -->
    <discountSortModal
      :show="showDiscountSortModal"
      :salesBillSn="salesBillSn"
      :activeList="discountActiveList"
      @ok="showDiscountSortOk">
    </discountSortModal>
    <!-- 提交时校验销售价低于成本价提示 -->
    <vaildPriceModal
      ref="vaildPriceModal"
      :openModal="openVaildPriceModal"
      :dataObj="tempData"
      @close="closeVaildPrice"
      @ok="vaildPriceOk"></vaildPriceModal>
  </div>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import productActiveList from './comps/productActiveList.vue'
import productNormalList from './comps/productNormalList.vue'
import activeStatisticsList from './comps/activeStatisticsList.vue'
import chooseProduct from './comps/chooseProduct.vue'
import newPromoModal from './newPromoModal.vue'
import discountSortModal from './discountSortModal.vue'
import vaildPriceModal from './vaildPriceModal.vue'
import { salesChangePromo } from '@/api/salesDetailNew'
import {
  salesDetailBySn,
  salesPromoQueryCount,
  salesWriteSubmit,
  salesPromoQueryList,
  salesPromoDiscountSort,
  salesQueryUnPartPromo,
  salesPromoValidaSubmit } from '@/api/salesNew'

export default {
  name: 'SalesNewEdit',
  mixins: [commonMixin],
  components: {
    productActiveList,
    chooseProduct,
    productNormalList,
    newPromoModal,
    activeStatisticsList,
    discountSortModal,
    vaildPriceModal
  },
  data () {
    return {
      spinning: false,
      activeList: [], // 活动列表
      newActiveList: [], // 新活动列表
      showActiveList: true,
      showNormalList: true,
      salesBillSn: null, // 销售单sn
      detailData: { discountAmount: 0, id: null, salesBillSn: '' }, // 订单基础数据
      warehouseSn: undefined, // 仓库sn
      // 有价格变更前后总金额
      updataData: {
        totalRealAmount: '',
        totalAmount: ''
      },
      showDetail: false, // 显示详细基本信息
      showCpModal: false, // 添加产品弹框
      cpCurRefId: 'productList-active-list', // 活动产品列表ref
      disabledActiveOption: null, // 禁用活动选项
      yhDetail: null, // 优惠明细
      showNewActiveModal: false, // 新活动弹框
      salesPromoSnSet: [], // 当前勾选的活动sn
      showDiscountSortModal: false, // 特价活动排序弹框
      discountActiveList: [], // 可叠加的特价活动列表
      openVaildPriceModal: false, // 销售价低于成本价提示弹窗
      tempData: null, // 销售价低于成本价 弹窗列表数据
      colsOptions: [],
      colsValue: [],
      normalCount: null
    }
  },
  computed: {
    // 详细地址
    shippingAddress () {
      const shippingAddrProvinceName = this.detailData && this.detailData.salesBillExtEntity && this.detailData.salesBillExtEntity.shippingAddrProvinceName ? this.detailData.salesBillExtEntity.shippingAddrProvinceName : ''
      const shippingAddrCityName = this.detailData && this.detailData.salesBillExtEntity && this.detailData.salesBillExtEntity.shippingAddrCityName ? this.detailData.salesBillExtEntity.shippingAddrCityName : ''
      const shippingAddrCountyName = this.detailData && this.detailData.salesBillExtEntity && this.detailData.salesBillExtEntity.shippingAddrCountyName ? this.detailData.salesBillExtEntity.shippingAddrCountyName : ''
      const shippingAddr = this.detailData && this.detailData.salesBillExtEntity && this.detailData.salesBillExtEntity.shippingAddr ? this.detailData.salesBillExtEntity.shippingAddr : ''
      if (!shippingAddrProvinceName && !shippingAddrCityName && !shippingAddrCountyName && !shippingAddr) {
        return '--'
      } else {
        return shippingAddrProvinceName + shippingAddrCityName + shippingAddrCountyName + shippingAddr
      }
    },
    // 是否显示活动统计信息
    showTotal () {
      return this.activeList.length > 0
    },
    hasActive () {
      const list = this.activeList.filter(item => item.enabledFlag == 1)
      return list.length > 0
    },
    hasNormal () {
      return this.normalCount && this.normalCount.totalQty > 0
    }
  },
  methods: {
    //  返回
    handleBack () {
      this.$router.push({ name: 'salesQueryNewList', query: { closeLastOldTab: true } })
    },
    getColsOptions () {
      this.colsOptions = [
        { label: '序号', value: '0' },
        { label: '活动类型', value: '1' },
        { label: '规则简称', value: '2' },
        { label: '门槛产品', value: '3' },
        { label: '特价', value: '4' },
        { label: '正价产品', value: '5' },
        { label: '促销品', value: '6' },
        { label: '采购额', value: '7' },
        { label: '款数', value: '8' },
        { label: '数量', value: '9' },
        { label: '总金额', value: '10' },
        { label: '优惠金额', value: '11' }
      ]
      // this.colsValue = this.colsOptions.filter(item => item.value < 8 && item.value != 3 || item.value == 11).map(item => item.value)
      this.colsValue = this.colsOptions.map(item => item.value)
    },
    // 正常产品统计信息
    setNormalCount (val) {
      this.normalCount = val
    },
    // 查看参与规则明细
    showRuleDetail (sn) {
      this.$refs.activeTjList.showDesc({ promoRuleSn: sn })
    },
    // 优惠明细查看
    getPromYhDetail () {
      salesPromoQueryCount({ salesBillSn: this.$route.params.sn }).then(res => {
        if (res.status == 200) {
          this.yhDetail = res.data
        }
      })
    },
    // 刷新所有第三方库存
    searchAllThreeStock () {
      // 刷新正常活动产品列表
      this.$refs.productNormalList.searchThreeStockOk()
      // 刷新所有活动产品列表
      if (this.activeList.length) this.$refs.productActiveList.searchThreeStockOk()
    },
    // 打开选择产品弹框,type:0 正常产品，1活动产品，2累计产品
    openProductModal (type, promo) {
      this.$refs.chooseProduct.pageInit(this.detailData, promo, type)
      this.showCpModal = true
    },
    // 添加产品后，关闭弹框
    closeProductModal (hasRefash, type) {
      this.showCpModal = false
      // 刷新产品列表和活动统计列表
      if (hasRefash) {
        this.getActiveList(false)
        if (type == 0) {
          // 刷新活动产品列表
          if (this.activeList.length) this.$refs.productActiveList.resetSearchForm()
        } else {
          // 刷新正常产品列表
          this.$refs.productNormalList.resetSearchForm()
        }
      }
    },
    // 确定新增产品到列表,
    // row 产品信息，promo 活动规则信息，promoProductClz 规则类型，cptype 1 添加活动产品，2 累计产品
    insterProduct (row, promo, promoProductClz, cptype) {
      this.spinning = true
      // 正常产品
      if (promoProductClz == 0) {
        this.$refs.productNormalList.saveNewProduct(row, promo)
      } else {
        // 活动产品对象
        if (cptype == 1) {
          if (this.activeList.length) this.$refs.productActiveList.saveNewProduct(row, promo, promoProductClz)
        }
        // 累计产品
        if (cptype == 2) {
          if (this.activeList.length) this.$refs.productActiveList.accumulateProduct(row, promo, promoProductClz)
        }
      }
    },
    // type 1 更换活动，0 参与活动
    upActive (params, type) {
      this.spinning = true
      salesChangePromo(params).then(res => {
        if (res.status == 200) {
          // 刷新活动统计
          this.getActiveList(false)
          // 重新获取详情信息
          this.getOrderDetail(false)
          if (type == 1) {
            // 刷新正常产品列表
            this.$refs.productNormalList.resetSearchForm()
            // 关闭活动产品页面弹窗加载状态等
            this.$refs.productActiveList.upAcitveSuccess()
          } else {
            this.$refs.productNormalList.addAcitveSuccess()
            // 刷新活动产品列表
            if (this.activeList.length) this.$refs.productActiveList.resetSearchForm()
          }
        }
        this.spinning = false
      })
    },
    // 提交销售单
    async submitResult () {
      const _this = this
      _this.spinning = true
      // 校验活动规则
      const vaildActive = await salesPromoValidaSubmit({ salesBillSn: this.salesBillSn }).then(res => res.data)
      const a = vaildActive.filter(item => item.type == 1) // 不可提交
      const d = vaildActive.filter(item => item.type == 'price_less_0') // 不可提交
      const b = vaildActive.filter(item => item.type == 0) // 文字提示，可跳过继续提交
      const c = vaildActive.filter(item => item.type == 'price_less_cost' || item.type == 'wait_up_audit_price_less_cost') // 价格校验表格提示,可跳过继续提交
      if (vaildActive && vaildActive.length == 0) {
        this.submitOrder()
        return
      }
      // 不可提交
      // 弹出不符合规则弹框
      if (a.length > 0) {
        this.$info({
          title: '提示',
          centered: true,
          class: 'confirm-center',
          okText: '关闭',
          width: 600,
          content: <div style="padding-top:15px;">
            <ol>
              {a.map(item => (
                <li style="padding:3px 0;">{item.message}</li>
              ))}
            </ol>
            <div style="padding:10px 0;text-align:center"><strong>请按照以上提示修改后再提交</strong></div>
          </div>
        })
        _this.spinning = false
        return
      }
      if (d.length > 0) { // 价格校验弹框提示
        _this.openVaildPrice(d[0])
        return
      }
      // 弹出确认提示信息，可跳过继续提交
      if (b.length > 0) {
        this.$confirm({
          title: '提示',
          centered: true,
          class: 'confirm-center',
          okText: '提交',
          width: 600,
          content: <div style="padding-top:15px;">
            <ol>
              {b.map(item => (
                <li style="padding:3px 0;">{item.message}</li>
              ))}
            </ol>
          </div>,
          onOk () {
            _this.submitOrder()
          },
          onCancel () {
            _this.spinning = false
          }
        })
        return
      }
      // 价格校验弹框
      if (c.length > 0) {
        _this.openVaildPrice(c[0])
      } else {
        _this.submitOrder()
      }
    },
    // 校验销售价低于成本价提示
    openVaildPrice (data) {
      this.tempData = data
      this.openVaildPriceModal = true
    },
    // 关闭校验销售价低于成本价提示
    closeVaildPrice () {
      this.spinning = false
      this.tempData = null
      this.openVaildPriceModal = false
    },
    // 校验销售价低于成本价提示成功，关闭弹窗
    vaildPriceOk (type) {
      if (type == 'AUDIT_UP_PASS') {
        this.submitOrder()
      }
    },
    // 提交销售单
    async submitOrder () {
      this.spinning = true
      const res = await salesWriteSubmit({ salesBillSn: this.salesBillSn })
      if (res.status == 200) {
        this.closeVaildPrice()
        this.handleBack()
        this.$message.success(res.message)
      }
      this.spinning = false
    },
    // 刷新查询列表数据
    getTableListData () {
      this.showCpModal = false
      // 刷新正常产品列表
      this.$refs.productNormalList.resetSearchForm()
      // 刷新活动产品列表
      if (this.activeList.length) {
        this.$refs.productActiveList.resetSearchForm()
      }
    },
    // 添加产品出错时
    tableErrorData (type, action) {
      this.$refs.chooseProduct.spinning = false
    },
    // 添加活动产品成功的回调，刷新产品列表
    // type：normal 正常列表 ，promo 活动列表， borrow 累计产品
    // action：add 添加，del 删除，batchDel 批量删除，update 更新数据, enable 启用禁用，sort 排序，import 导入
    // 如果添加操作，不实时刷新列表，关闭后再刷新
    refashTableData (type, action) {
      this.$refs.chooseProduct.spinning = false
      // 重新获取详情信息
      this.getOrderDetail(false)
      // 如果是活动产品,刷新正常产品列表
      if (type == 'promo') {
        this.$refs.productNormalList.resetSearchForm()
      } else if (type == 'normal') { // 如果是正常产品
        // 刷新活动产品列表
        if (this.activeList.length) {
          this.$refs.productActiveList.resetSearchForm()
        }
      } else if (type == 'borrow') { // 累计
        this.$refs.chooseProduct.clear()
        // 刷新活动产品列表
        if (this.activeList.length) {
          this.$refs.productActiveList.resetSearchForm()
        }
      } else {
        // 正常和活动列表都刷新
        this.getTableListData()
      }
      // 重新获取参与活动列表
      this.getActiveList(false)
    },
    // 获取销售单参与的活动列表，flag: true 查询产品明细列表，false 不查
    async getActiveList (flag) {
      this.spinning = true
      // 触发活动统计查询变量
      if (this.$refs.activeTjList) {
        this.$refs.activeTjList.hasInit = false
      }
      // 已参与活动列表
      const list = await salesPromoQueryList({ salesBillSn: this.$route.params.sn }).then(res => res.data || [])
      this.activeList = list.filter(item => item.promotion && item.promotionRule)
      this.spinning = false
      if (flag) {
        setTimeout(() => {
          this.getTableListData()
        }, 200)
      }
    },
    //  销售单详情 flag: true 查询活动列表，false 不查
    async getOrderDetail (flag) {
      this.spinning = true
      const detail = await salesDetailBySn({ salesBillSn: this.$route.params.sn }).then(res => res.data)
      if (detail) {
        this.detailData = detail
        this.detailData.totalDiscountAmount = Number(this.detailData.totalOrigAmount || 0) - Number(this.detailData.totalAmount || 0)
      }
      this.spinning = false
      if (flag) {
        // 获取活动列表
        this.getActiveList(true)
      }
    },
    // 获取是否有新活动，
    async getNewActive () {
      const hasNewActive = await salesQueryUnPartPromo({ salesBillSn: this.$route.params.sn, enabledFlag: '1' }).then(res => res.data)
      if (hasNewActive.length) {
        this.newActiveList = hasNewActive
        // 有则弹出参与新活动弹框
        this.showNewActiveModal = true
      } else {
        // 获取销售单详情
        this.getOrderDetail(true)
      }
    },
    // 新活动弹框确认后
    showNewActiveOk (type) {
      this.showNewActiveModal = false
      this.getOrderDetail(true)
      // // 特价规则排序
      // if (type == 1) {
      //   this.getSalesPromoDiscountSort()
      // } else {
      //   // 取消加入新活动
      //   this.getOrderDetail(true)
      // }
    },
    // 特价规则排序列表
    getSalesPromoDiscountSort () {
      this.spinning = true
      salesPromoDiscountSort({ salesBillSn: this.$route.params.sn }).then(res => {
        if (res.status == 200) {
          this.discountActiveList = res.data
          this.showDiscountSortModal = res.data && res.data.length > 1
          if (res.data && res.data.length <= 1) {
            this.getOrderDetail(true)
          }
        }
        this.spinning = false
      })
    },
    // 特价规则排序完成或取消排序
    showDiscountSortOk () {
      this.showDiscountSortModal = false
      this.getOrderDetail(true)
    },
    // 页面初始化
    pageInit () {
      this.salesBillSn = this.$route.params.sn
      this.warehouseSn = this.$route.params.sn ? this.$route.params.wSn : ''
      // 是否有新活动
      this.getNewActive()
      this.getColsOptions()
    }
  },
  mounted () {
    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
      this.pageInit()
    }
  },
  activated () {
    // 如果是新页签打开或者进入新的子页（例：存在列表第2条数据编辑页页签时再打开第4条数据的编辑页），则重置当前页面
    if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
      this.pageInit()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {})
  }
}
</script>

<style lang="less">
  .salesNewEdit-wrap{
    position: relative;
    height: 100%;
    padding-bottom: 65px;
    box-sizing: border-box;
    >.ant-spin-nested-loading{
      overflow-y: auto;
      height: 100%;
    }
    .salesEdit-cont{
      margin: 6px 0;
    }
    .redStyle{
      font-weight: bold;
      color: red;
    }
    .ellipsisCon{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .ellipsisText{
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: box;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
    .ant-card-small > .ant-card-body {
        padding: 0!important;
    }
    .affix-cont{
      padding: 6px 12px;
      text-align: right;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .footer-price{
        flex-grow:1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        > div{
          padding: 0 15px;
        }
        .totalPrice{
          span{
            font-weight: bold;
            color: red;
            font-size: 20px;
          }
        }
      }
    }
  }

</style>
