<template>
  <div class="promotionEdit-wrap">
    <a-spin :spinning="spinning" tip="Loading...">
      <a-page-header :ghost="false" :backIcon="false" class="promotionEdit-cont" >
        <!-- 自定义的二级文字标题 -->
        <template slot="subTitle">
          <a id="promotionEdit-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" />返回列表</a>
          <span v-if="pageType==='edit'" style="margin: 0 10px 0 20px;color: #666;font-size: 14px;font-weight: 600;">促销名称：{{ promotionName||'--' }}</span>
        </template>
      </a-page-header>
      <!-- 表单 -->
      <a-card :bordered="false" class="promotionEdit-cont">
        <a-form-model
          id="promotionEdit-form"
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
        >
          <a-row>
            <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <a-form-model-item label="标题" prop="title" :label-col="{span:4}" :wrapper-col="{span:16}">
                <a-input
                  id="promotionEdit-title"
                  :maxLength="30"
                  v-model.trim="form.title"
                  placeholder="请输入标题名称(最多30个字符)"
                  :disabled="isDisabled"
                  allowClear/>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <a-form-model-item label="排序" prop="sort" :label-col="{span:4}" :wrapper-col="{span:16}">
                <a-input-number
                  style="width:100%"
                  id="promotionEdit-sort"
                  :disabled="isDisabled"
                  allowClear
                  placeholder="请输入排序数字(数字越大越靠后)"
                  v-model="form.sort"
                  :min="0"
                  :max="999999"/>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <a-form-model-item label="封面图片" prop="imageSet">
                <Upload
                  v-if="pageType==='add'||(pageType==='edit'&&!isDisabled)"
                  class="upload"
                  id="promotionEdit-imageSet"
                  v-model="form.imageSet"
                  ref="imageSet"
                  :fileSize="10"
                  :maxNums="10"
                  @change="changeImage"
                  listType="picture-card"></Upload>
                <div v-else>
                  <img
                    :src="con"
                    alt="图片走丢了"
                    width="80"
                    height="80"
                    v-for="(con,i) in imageSet"
                    style="margin-right:10px;"
                    :key="i" />
                </div>
                <span class="upload-desc">说明：单张大小小于10Mb，最多10张；建议尺寸：宽（420px）*高（230px）</span>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <a-form-model-item label="参与客户" prop="contentType">
                全部数字货架客户
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <a-form-model-item label="内容类型" prop="contentType">
                <v-select
                  v-model="form.contentType"
                  id="promotion-saleStatus"
                  code="PROMO_CONTENT_TYPE"
                  showType="radio"
                  :disabled="isDisabled"
                  @change="changeContentType"
                  allowClear></v-select>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <a-form-model-item label="内容" prop="content" v-show="form.contentType =='IMAGE_CONTENT'">
                <editor
                  v-show="pageType === 'add'||(pageType === 'edit'&&!isDisabled)"
                  id="promotionEdit-editor"
                  ref="editor"
                  class="promotionEdit-editor"
                  @on-change="editorChange"
                  :cache="false"></editor>
                <div v-if="(pageType === 'edit')&&isDisabled" class="box" v-html="form.content"></div>
              </a-form-model-item>
              <a-form-model-item label="上传视频" prop="content" v-show="form.contentType =='VIDEO'">
                <Upload
                  v-if="pageType==='add'||(pageType==='edit'&&!isDisabled)"
                  class="upload"
                  id="promotionEdit-imageSet"
                  v-model="form.content"
                  fileType="video/mp4"
                  ref="videoSet"
                  :fileSize="100"
                  :maxNums="1"
                  @change="changeVideo"
                ></Upload>
                <div v-else>
                  <video
                    ref="videoPlayer"
                    width="230"
                    height="150"
                    controls
                    loop
                    controlsList="nodownload">
                    <source :src="form.content" type="video/mp4">
                  </video>
                </div>
                <span class="upload-desc">说明：文件最大100M；视频：mp4.avi.flv</span>
              </a-form-model-item>
              <a-form-model-item label="跳转链接" prop="contentLink" v-if="form.contentType =='LINK'">
                <a-input
                  style="width:50%;"
                  :disabled="form.linkType==='1'||(pageType==='edit'&&isDisabled)"
                  id="promotionEdit-title"
                  :maxLength="100"
                  v-model.trim="form.contentLink"
                  placeholder="请输入跳转链接"
                  @blur="handleLink"
                  allowClear />
                <a-select
                  id="promotionEdit-title"
                  :disabled="isDisabled"
                  default-value="货架促销"
                  @change="handleLinkType"
                  style="width: 120px;margin-left:10px;"
                  v-model="form.linkType">
                  <a-select-option value="1">
                    货架促销
                  </a-select-option>
                  <a-select-option value="2">
                    其他
                  </a-select-option>
                </a-select>
                <span class="tip upload-desc">
                  选择【货架促销】，促销内容会同步显示在促销模块内
                </span>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
        <a-form-model
          id="setPromotion-form"
          ref="sellRuleForm"
          :model="sellForm"
          :rules="sellRules"
          class="setPromotion-form"
          :label-col="sellFormItemLayout.labelCol"
          :wrapper-col="sellFormItemLayout.wrapperCol">
          <a-row v-if="form.contentType ==='LINK'&&form.linkType==='1'">
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <a-form-model-item label="基本规则" prop="ruleType">
                <v-select
                  style="width:40%;"
                  v-model="sellForm.ruleType"
                  placeholder="请选择基本规则"
                  id="promotionEdit-ruleType"
                  code="PROMO_ACTIVE_RULE_TYPE"
                  :disabled="isDisabled"
                  allowClear></v-select>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <a-form-model-item label="券名称" :label-col="{span:4}" :wrapper-col="{span:16}" prop="ruleName">
                <a-input
                  :disabled="isDisabled"
                  id="promotionEdit-ruleName"
                  :maxLength="20"
                  v-model.trim="sellForm.ruleName"
                  placeholder="请输入券名称(最多20个字符)"
                  allowClear />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <a-form-model-item label="券副标题" :label-col="{span:4}" :wrapper-col="{span:16}">
                <a-input
                  :disabled="isDisabled"
                  id="promotionEdit-ruleTitle"
                  :maxLength="20"
                  v-model.trim="sellForm.ruleTitle"
                  placeholder="请输入券副标题(最多20个字符)"
                  allowClear />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <a-form-model-item label="生成方式" prop="ruleBaseType">
                <!-- showType="radio" -->
                <v-select
                  style="width:40%;"
                  v-model="sellForm.ruleBaseType"
                  id="promotionEdit-ruleBaseType"
                  code="PROMO_RULE_BASE_TYPE"
                  :disabled="isDisabled"
                  allowClear></v-select>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <a-form-model-item label="券有效期" prop="validType">
                <v-select
                  style="width:40%;"
                  v-model="sellForm.validType"
                  placeholder="请选择券有效期"
                  id="promotionEdit-validType"
                  code="PROMO_RULE_TICKET_TYPE"
                  :disabled="isDisabled"
                  allowClear></v-select>
                <a-range-picker
                  v-show="sellForm.validType==='FIXED'"
                  style="width:40%;margin-left:10px;"
                  v-model="time"
                  :format="dateFormat"
                  @change="dateChange"
                  :disabled="isDisabled"
                  :disabled-date="disabledDate"
                  :placeholder="['开始时间', '结束时间']" />
                <span style="width:40%;margin-left:10px;" v-show="sellForm.validType==='LIMIT'">
                  有效期<a-input-number
                    style="margin:0 5px;"
                    v-model="sellForm.validDays"
                    :step="1"
                    :max="99999999"
                    :min="1"
                    :disabled="isDisabled"
                    :precision="0"/>天
                </span>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <a-form-model-item class="productName" label="券适用范围" prop="range">
                全部产品
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <a-form-model-item label="使用说明" prop="ruleExplain">
                <a-input
                  v-model="sellForm.ruleExplain"
                  :disabled="isDisabled"
                  type="textarea"
                  placeholder="请输入使用说明（最多50个字符）"
                  :maxLength="200" />
              </a-form-model-item>
            </a-col>
            <div style="text-align:center;" v-if="!isShowNextStep"><a-button type="primary" size="large" :disabled="isDisabled" @click="handleSave('part')" >保存后设置产品</a-button></div>
          </a-row>
          <a-row v-if="form.contentType =='LINK'&&isShowNextStep">
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <a-form-model-item label="产品范围">
                <div id="setPromotion-productRange" style="position:relative;">
                  <a-tree-select
                    v-model="sellForm.productRangeList"
                    :maxTagCount="12"
                    :tree-data="productTypeList"
                    tree-checkable
                    :disabled="isDisabled"
                    :getPopupContainer="triggerNode => triggerNode.parentNode"
                    :replaceFields="{children:'children',title: 'productTypeName',key: 'productTypeSn',value: 'productTypeSn'}"
                    @blur="onChangeTree"
                    placeholder="请选择产品范围" />
                </div>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <a-form-model-item label="返券产品">
                <div class="productInfo flex-center">
                  <div>
                    返券金额<a-input-number
                      v-model="sellForm.ruleValue"
                      style="margin:0 5px;"
                      :min="1"
                      :step="1"
                      :precision="2"
                      :max="99999999"
                      size="small"/> 元
                    <a-button type="primary" class="button-primary" size="small" @click="handleBatchAdd">批量添加</a-button>
                  </div>
                  <a-button type="primary" :disabled="sellForm.productRangeList&&sellForm.productRangeList.length>0" @click="handleAddProduct" size="small">添加产品</a-button>
                </div>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <div style="width: 83%;margin:0 auto 10px;">
                <productTable ref="chooseProduct" :promoActiveSn="$route.params.sn"></productTable>
              </div>
            </a-col>
          </a-row>
        </a-form-model>
      </a-card>
    </a-spin>
    <!-- v-if="form.contentType !='LINK'||isShowNextStep" -->
    <div class="affix-cont">
      <a-button
        type="primary"
        class="button-primary"
        :disabled="spinning"
        id="productInfoEdit-submit-btn"
        size="large"
        @click="handleSave('all')"
        v-if="form.contentType !='LINK'|| isShowNextStep ||(form.contentType ==='LINK'&&form.linkType ==='2')"
        style="padding: 0 60px;">保存</a-button>
    </div>
    <!-- 预览 -->
    <promotion-show-modal ref="showModal" :openModal="openShowModal" @close="openShowModal = false"></promotion-show-modal>
    <!-- 添加产品 -->
    <chooseProduct
      ref="chooseProduct"
      :chooseType="chooseTypeList"
      :openModal="showProModal"
      @ok="addProductSuccess"
      @close="closeProductModal"></chooseProduct>
  </div>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import moment from 'moment'
import { VSelect, Upload } from '@/components'
import Editor from '@/components/WEeditor'
import promotionShowModal from './promotionShowModal'
import productTable from './productTable'
import chooseProduct from './chooseProductsModal.vue'
import { productTypeQuery } from '@/api/productType'
import { promoActiveDetail, saveBatchEntity, promoCreateBatch, deleteByProductType } from '@/api/promoActive'
export default {
  name: 'ProductBrandEditModal',
  mixins: [commonMixin],
  components: { VSelect, Upload, Editor, promotionShowModal, chooseProduct, productTable },
  data () {
    return {
      spinning: false,
      formItemLayout: {
        labelCol: { span: 2 },
        wrapperCol: { span: 20 }
      },
      sellFormItemLayout: {
        labelCol: { span: 2 }, // 文字前距离设置
        wrapperCol: { span: 20 }// 表单后距离设置  数字越大距离越小
      },
      form: {
        promoActiveSn: undefined, // 促销活动sn
        title: '', // 标题
        imageSet: '', // 图片
        contentType: 'IMAGE_CONTENT', // 内容类型
        content: '', // 内容
        contentLink: '', // 链接内容
        sort: undefined, // 排序
        ruleEnableFlag: '1', // 参数配置 1勾选配置  0不能配置
        publishFlag: '0',
        dealerEditFlag: '0', // 加盟商编辑 1是 0否
        promoRule: {},
        publishState: 'UNPUBLISH'
      },
      // 参数配置数据
      sellForm: {
        ruleType: 'ticket', // 基本规则类型
        productRangeFlag: '', // 产品范围标记 0无  1有产品范围
        productRangeList: [], // 产品范围列表
        ruleName: '', // 券名称
        ruleTitle: '', // 副标题
        ruleBaseType: 'category', // 券生成方式
        ruleExplain: '', // 使用说明
        validType: undefined, // 券有效期类型
        validStartDate: undefined, // 券生效时间
        validEndDate: undefined, // 券失效时间
        validDays: undefined, // 券有效期天数
        range: '1'
      },
      time: [], // 有效期
      promotionName: '',
      dateFormat: 'YYYY-MM-DD',
      pageType: undefined, // 页面类型
      showProModal: false,
      isShowNextStep: false, // 是否显示下一步 配置产品
      openShowModal: false,
      isDisabled: false, // 控制是否能编辑
      chooseTypeList: [],
      chooseProductList: [],
      imageSet: [], // 回显显示图片数据
      productTypeList: [],
      rules: {
        title: [{ required: true, message: '请输入标题名称', trigger: 'blur' }],
        imageSet: [{ required: true, message: '请选择要上传的封面图片', trigger: 'change' }],
        sort: [{ required: true, message: '请输入排序数字', trigger: 'blur' }],
        contentType: [{ required: true, message: '请选择内容类型', trigger: 'change' }],
        content: [{ required: true, message: '请输入对应内容', trigger: ['blur', 'change'] }],
        contentLink: [{ required: true, message: '请输入对应内容', trigger: 'blur' }],
        publishFlag: [{ required: true, message: '请选择是否发布', trigger: 'change' }]
      },
      sellRules: {
        ruleType: [{ required: true, message: '请选择基本规则', trigger: 'change' }],
        ruleName: [{ required: true, message: '请输入券名称', trigger: ['change', 'blur'] }],
        ruleBaseType: [{ required: true, message: '请选择生成方式', trigger: 'change' }],
        validType: [{ required: true, message: '请选择券有效期类型', trigger: 'change' }],
        ruleDetailList: [{ type: 'array', required: true, message: '请选择券内容', trigger: 'blur' }],
        range: [{ required: true, message: '请选择券适用范围', trigger: 'change' }]
      }
    }
  },
  methods: {
    // 禁用日期时间
    disabledDate (current) {
      return current && current < moment().startOf('day')
    },
    dateChange (date, dateString) {
      this.time = date
      if (dateString[0] != '' && dateString[1] != '') {
        this.sellForm.validStartDate = dateString[0] + ' 00:00:00'
        this.sellForm.validEndDate = dateString[1] + ' 23:59:59'
      }
    },
    // 打开产品弹窗
    insterProduct (obj) {
      if (obj && Object.keys(obj).length > 0) {
        this.chooseTypeList = obj.typeArr
        this.chooseDataList = obj.productArr
        this.chooseProductList = obj.chooseProductArr
      }
      this.showProModal = true
    },

    closeProductModal () {
      this.showProModal = false
    },
    // 返回列表
    handleBack () {
      this.$router.push({ name: 'promotionInfoList', query: { closeLastOldTab: true } })
    },
    //  详情  挨个赋值原因：该接口和修理厂促销列表详情用的同一个接口，给后端传值过滤多余参数
    getDetail () {
      const _this = this
      promoActiveDetail({ sn: this.$route.params.sn }).then(res => {
        if (res.status == 200) {
          // 编辑按钮时，publishState 已发布，只能编辑是否发布；publishState已关闭，都可以编辑
          if (_this.pageType === 'edit') {
            _this.isDisabled = true
            _this.form.publishFlag = res.data.publishFlag
          }
          _this.form.promoActiveSn = res.data.promoActiveSn
          _this.form.title = res.data.title
          _this.form.contentType = res.data.contentType
          _this.form.sort = res.data.sort
          _this.form.imageSet = res.data.images
          if (res.data.images) {
            const images = res.data.images.split(',')
            _this.imageSet = images
            if (this.pageType === 'add' || (this.pageType === 'edit' && res.data.publishState != 'PUBLISH')) {
              _this.$refs.imageSet.setFileList(images)
            }
          }
          _this.form.content = res.data.content
          _this.promotionName = res.data.name || ''
          _this.form.dealerEditFlag = res.data.dealerEditFlag
          if (res.data.contentType == 'IMAGE_CONTENT') {
            _this.$refs.editor.setHtml(res.data.content)
          } else if (res.data.contentType == 'VIDEO') {
            if (res.data.publishState != 'PUBLISH') {
              _this.$refs.videoSet.setFileList(res.data.content)
            }
          } else if (res.data.contentType == 'LINK') {
            _this.form.contentLink = res.data.content
            _this.form.linkType = '1'
            if (res.data.promoRule) {
              _this.isShowNextStep = true
              _this.sellForm.range = '1'
              _this.time = [res.data.promoRule.validStartDate, res.data.promoRule.validEndDate]
              if (res.data.promoRule.productRangeList && res.data.promoRule.productRangeList.productRangeList.length > 0) {
                _this.sellForm.productRangeList = res.data.promoRule.productRangeList.map(item => { return item.productTypeSn })
              }
              _this.sellForm = res.data.promoRule
            }
          }
        }
      })
    },
    //  确定保存
    handleSave (type) {
      this.$message.success('保存成功')
      this.$nextTick(() => {
        this.handleBack()
        this.resetSearchForm()
      })
    },
    //  图片上传
    changeImage (file) {
      this.form.imageSet = file
    },
    // 视频上传
    changeVideo (file) {
      this.form.content = file
    },
    //  文本编辑器
    editorChange (html, text) {
      this.form.content = html
    },
    // 重置
    resetSearchForm () {
      if (this.pageType == 'add' || (this.pageType == 'edit' && !this.isDisabled)) {
        if (this.$refs.imageSet) {
          this.$refs.imageSet.setFileList('')
        }
        if (this.$refs.videoSet) {
          this.$refs.videoSet.setFileList('')
        }
      }
      if (this.$refs.editor) {
        this.$refs.editor.setHtml('')
      }
      this.form = {
        promoActiveSn: undefined, // 促销活动sn
        title: '', // 标题
        imageSet: '', // 图片
        contentType: 'IMAGE_CONTENT', // 内容类型
        content: '', // 内容
        contentLink: '', // 链接内容
        sort: undefined, // 排序
        ruleEnableFlag: '1', // 参数配置 1勾选配置  0不能配置
        publishState: 'UNPUBLISH', // 是否发布
        dealerEditFlag: '0', // 加盟商编辑 1是 0否
        // 参数配置数据
        promoRule: {
          ruleType: 'ticket', // 基本规则类型
          productRangeFlag: '', // 产品范围标记 0无  1有产品范围
          productRangeList: [], // 产品范围列表
          ruleName: '', // 券名称
          ruleTitle: '', // 副标题
          ruleBaseType: 'category', // 券生成方式
          ruleExplain: '', // 使用说明
          validType: undefined, // 券有效期类型
          validStartDate: undefined, // 券生效时间
          validEndDate: undefined, // 券失效时间
          validDays: undefined, // 券有效期天数
          // 券内容
          ruleDetailList: []
        }
      }
      this.isShowNextStep = false
      this.isDisabled = false
      if (this.$refs.setContent) {
        this.$refs.setContent.clearContent()
      }
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.resetFields()
      }
    },
    // 获取产品范围数据
    getTreeData () {
      productTypeQuery({}).then(res => {
        if (res.status == 200) {
          this.productTypeList = res.data
        } else {
          this.productTypeList = []
        }
      })
    },
    // 选择内容类型
    changeContentType (e) {
      if (e === 'LINK') {
        this.form.linkType = '1'
        this.form.contentLink = '/pagesB/promoDetail'
        this.form.content = '/pagesB/promoDetail'
      } else {
        this.form.linkType = undefined
        this.form.contentLink = ''
        this.form.content = ''
      }
      this.form.contentType = e
    },
    // 填入link内容
    handleLink (con) {
      if (!con.target.value || con.target.value != '/pagesB/promoDetail') {
        this.form.linkType = '2'
      } else {
        this.form.linkType = '1'
      }
      this.form.contentLink = con.target.value
    },
    // 选择货架促销填入默认值
    handleLinkType (val) {
      this.form.contentLink = val === '2' ? '' : '/pagesB/promoDetail'
    },
    // 添加产品
    handleAddProduct () {
      this.chooseTypeList = this.sellForm.productRangeList
      this.showProModal = true
    },
    // 批量添加
    handleBatchAdd () {
      if (!this.sellForm.ruleValue) {
        this.$message.warning('请输入返券金额！')
        return
      }
      this.$refs.chooseProduct.editMorePrice(this.sellForm.ruleValue)
    },
    // 添加产品成功
    addProductSuccess (list) {
      const productArr = list.map(item => {
        return {
          promoActiveSn: this.$route.params.sn,
          promoRuleSn: this.sellForm.promoRuleSn,
          productCode: item.code,
          productSn: item.productSn,
          ruleValue: this.sellForm.ruleValue,
          price: item.terminalPrice
        }
      })
      promoCreateBatch(productArr).then(res => {
        if (res.status == 200) {
          this.showProModal = false
          // 获取产品列表 有分页
          this.$refs.chooseProduct.pageInit()
        }
      })

      this.$refs.setContent.setProductSn(productArr)
    },
    onChangeTree (e) {
      s
      deleteByProductType({ promoActiveSn: this.$route.params.sn, productTypeSnList: this.sellForm.productRangeList || [] }).then(res => {
        if (res.status == 200) {
          this.$refs.chooseProduct.pageInit()
        }
      })
      // 保存产品范围
      saveBatchEntity({ list: this.sellForm.productRangeList, promoActiveSn: this.$route.params.sn }).then(res => {
        if (res.status == 200) {
          console.log('保存产品范围成功')
        }
      })
    },
    pageInit () {
      this.pageType = this.$route.params.pageType
      if (this.pageType === 'edit') {
        this.getDetail()
      }
      console.log('加载产品范围')
      this.$nextTick(() => {
        this.getTreeData()
      })
    }
  },
  mounted () {
    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
      this.pageInit()
    }
  },
  activated () {
    // 如果是新页签打开，则重置当前页面
    if (this.$store.state.app.isNewTab) {
      this.pageInit()
    }
    // 仅刷新列表，不重置页面
    if (this.$store.state.app.updateList) {
      this.pageInit()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {})
  }
}
</script>

<style lang="less" scoped>
.promotionEdit-wrap{
    position: relative;
    height: 100%;
    padding-bottom:51px;
    box-sizing: border-box;
    >.ant-spin-nested-loading{
      overflow-y: scroll;
      height: 100%;
    }
    /deep/.ant-form-item{
      margin-bottom:8px;
    }
    .promotionEdit-cont{
      margin-bottom: 10px;
    }
    .upload{
      width: 100%!important;
    }
    //  文本编辑器  工具栏样式换行
    .promotionEdit-editor{
      .w-e-toolbar{
        flex-wrap: wrap;
        z-index: 0;
      }
    }
    //  商品图片描述
    .upload-desc{
      font-size: 12px;
      color: #808695;
    }
    #promotionEdit-attachList{
      height: auto;
    }
    .box{
      border:1px solid #d9d9d9;
      border-radius:4px;
      padding:4px 11px;
      color:rgba(0, 0, 0, 0.25);
      cursor: not-allowed;
      background:#fdfdfd;
    }
    .affix{
      .ant-affix{
        z-index: 101;
        display:inline-block
      }
    }
    /deep/.ant-radio-disabled + span{
     color:#000!important;
    }
    .tip{
      margin-left:10px;
    }

    .productInfo{
      display:flex;
      align-items:center;
      justify-content: space-between;
    }
    #setPromotion-productRange{
      /deep/.ant-select-dropdown{
        max-height:30vh !important;
      }
    }
  }
</style>
