<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="99999999"/>
              </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="1"
                  @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;object-fit: cover;"
                    :key="i" />
                </div>
                <span class="upload-desc">说明：单张大小小于10Mb；建议尺寸：宽（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">
                <v-select
                  v-model="form.contentType"
                  id="promotion-contentType"
                  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-videoSet"
                  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-contentLink"
                  :maxLength="100"
                  v-model.trim="form.contentLink"
                  placeholder="请输入跳转链接"
                  @blur="handleLink"
                  allowClear />
                <a-select
                  id="promotionEdit-linkType"
                  :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-row v-if="form.contentType !='LINK' ||(form.contentType ==='LINK'&&form.linkType==='2') ">
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <a-form-model-item label="是否发布" prop="publishFlag">
                <a-radio-group button-style="solid" id="promotionEdit-publishFlag" v-model="form.publishFlag">
                  <a-radio-button value="1">
                    是
                  </a-radio-button>
                  <a-radio-button value="0">
                    否
                  </a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
          </a-row>
          <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="promoRule.ruleType">
                <v-select
                  style="width:40%;"
                  v-model="form.promoRule.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="promoRule.ruleName">
                <a-input
                  :disabled="isDisabled"
                  id="promotionEdit-ruleName"
                  :maxLength="20"
                  v-model.trim="form.promoRule.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="form.promoRule.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="promoRule.ruleBaseType">
                <v-select
                  style="width:40%;"
                  v-model="form.promoRule.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="promoRule.validType">
                <v-select
                  style="width:40%;"
                  v-model="form.promoRule.validType"
                  placeholder="请选择券有效期"
                  id="promotionEdit-validType"
                  code="PROMO_RULE_TICKET_TYPE"
                  :disabled="isDisabled"
                  @change="handleValidType"
                  allowClear></v-select>
                <a-range-picker
                  v-show="form.promoRule.validType==='FIXED'"
                  style="width:40%;margin-left:10px;"
                  v-model="time"
                  :format="dateFormat"
                  id="promotionEdit-time"
                  @change="dateChange"
                  :disabled="isDisabled"
                  :disabled-date="disabledDate"
                  :placeholder="['开始时间', '结束时间']" />
                <span style="width:40%;margin-left:10px;" v-show="form.promoRule.validType==='LIMIT'">
                  有效期<a-input-number
                    style="margin:0 5px;"
                    v-model="form.promoRule.validDays"
                    :step="1"
                    id="promotionEdit-validDays"
                    :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="promoRule.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="promoRule.ruleExplain">
                <a-input
                  v-model="form.promoRule.ruleExplain"
                  :disabled="isDisabled"
                  type="textarea"
                  id="promotionEdit-ruleExplain"
                  placeholder="请输入使用说明（最多50个字符）"
                  :maxLength="50" />
              </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>
            <div 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="productRangeList"
                      :maxTagCount="12"
                      :tree-data="productTypeList"
                      tree-checkable
                      :disabled="isDisabled"
                      id="promotionEdit-productTypeList"
                      :getPopupContainer="triggerNode => triggerNode.parentNode"
                      :replaceFields="{children:'children',title: 'productTypeName',key: 'productTypeSn',value: 'productTypeSn'}"
                      @change="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="返券产品" prop="promoRule.range">
                  <div class="productInfo flex-center">
                    <div>
                      返券金额<a-input-number
                        v-model="form.promoRule.ruleValue"
                        style="margin:0 5px;"
                        :min="0"
                        :step="1"
                        :precision="2"
                        :max="99999999"
                        id="promotionEdit-ruleValue"
                        :disabled="isDisabled"
                        size="small"/> 元
                      <a-button
                        type="primary"
                        id="promotionEdit-addSet-btn"
                        :disabled="isDisabled"
                        class="button-primary"
                        size="small"
                        @click="handleBatchAdd">批量设置</a-button>
                    </div>
                    <a-button type="primary" id="promotionEdit-add-btn" :disabled="isDisabled" @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="chooseProductList" :promoActiveSn="$route.params.sn" :disabledVal="isDisabled"></productTable>
                </div>
              </a-col>
              <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <a-form-model-item label="加盟商编辑" prop="promoRule.dealerEditFlag">
                  <a-radio-group button-style="solid" id="promotionEdit-dealerEditFlag" :disabled="isDisabled" v-model="form.promoRule.dealerEditFlag">
                    <a-radio-button value="1">
                      是
                    </a-radio-button>
                    <a-radio-button value="0">
                      否
                    </a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <a-form-model-item label="是否发布" prop="promoRule.publishFlag">
                  <a-radio-group button-style="solid" id="promotionEdit-publishFlag" v-model="form.promoRule.publishFlag">
                    <a-radio-button value="1">
                      是
                    </a-radio-button>
                    <a-radio-button value="0">
                      否
                    </a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
            </div>
          </a-row>
        </a-form-model>
      </a-card>
    </a-spin>
    <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>
    <!-- 添加产品 -->
    <chooseProduct
      ref="chooseProduct"
      :chooseType="chooseTypeList"
      :itemSn="$route.params.sn"
      :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 { promoActivePublish, promoActiveDetail, saveBatchEntity, promoCreateBatch, deleteByProductType } from '@/api/promoActive'
export default {
  name: 'ProductBrandEditModal',
  mixins: [commonMixin],
  components: { VSelect, Upload, Editor, promotionShowModal, chooseProduct, productTable },
  data () {
    return {
      spinning: false,
      // 表单 label 设置
      formItemLayout: {
        labelCol: { span: 2 },
        wrapperCol: { span: 20 }
      },
      productRangeList: [], // 产品范围列表
      // 链接配置内容
      form: {
        promoActiveSn: undefined, // 促销活动sn
        title: '', // 标题
        imageSet: '', // 图片
        contentType: 'IMAGE_CONTENT', // 内容类型
        content: '', // 内容
        contentLink: '', // 链接内容
        sort: undefined, // 排序
        publishFlag: '0', // 是否发布
        linkType: '1',
        dealerEditFlag: '0', // 加盟商编辑 1是 0否
        promoRule: {
          ruleType: 'ticket', // 基本规则类型
          ruleName: '', // 券名称
          ruleTitle: '', // 副标题
          ruleBaseType: 'category', // 券生成方式
          ruleExplain: '', // 使用说明
          validType: undefined, // 券有效期类型
          validStartDate: undefined, // 券生效时间
          validEndDate: undefined, // 券失效时间
          validDays: undefined, // 券有效期天数
          dealerEditFlag: '0', // 加盟商编辑 1是 0否
          publishFlag: '0', // 是否发布
          range: '1'
        }
      },
      time: [], // 有效期
      dateFormat: 'YYYY-MM-DD', // 有效期时间格式
      promotionName: '', // 促销名称
      pageType: undefined, // 页面类型
      showProModal: false, // 打开产品弹窗
      isShowNextStep: false, // 是否显示下一步 并提交一半配置产品
      isDisabled: false, // 控制页面是否能编辑
      chooseTypeList: [], // 已选中产品范围
      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' }],
        'promoRule.ruleType': [{ required: true, message: '请选择基本规则', trigger: 'change' }],
        'promoRule.ruleName': [{ required: true, message: '请输入券名称', trigger: ['change', 'blur'] }],
        'promoRule.ruleBaseType': [{ required: true, message: '请选择生成方式', trigger: 'change' }],
        'promoRule.validType': [{ required: true, message: '请选择券有效期类型', trigger: 'change' }],
        'promoRule.publishFlag': [{ required: true, message: '请选择是否发布', trigger: 'change' }],
        'promoRule.dealerEditFlag': [{ required: true, message: '请选择加盟商是否可编辑', trigger: 'change' }],
        'promoRule.range': [{ required: true, message: '请选择', trigger: 'blur' }],
        dealerEditFlag: [{ 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.form.promoRule.validStartDate = dateString[0] + ' 00:00:00'
        this.form.promoRule.validEndDate = dateString[1] + ' 23:59:59'
      }
    },
    // 打开产品弹窗
    insterProduct (obj) {
      if (obj && Object.keys(obj).length > 0) {
        this.chooseTypeList = obj.typeArr
      }
      this.showProModal = true
    },
    // 关闭产品弹窗
    closeProductModal () {
      this.showProModal = false
    },
    // 返回列表
    handleBack () {
      this.$router.push({ name: 'promotionManagementList', 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 = res.data.publishState === 'PUBLISH'
            _this.form.promoRule.publishFlag = res.data.publishFlag
            _this.form.promoRule.dealerEditFlag = res.data.dealerEditFlag
          }
          _this.form.publishFlag = res.data.publishFlag
          _this.form.dealerEditFlag = res.data.dealerEditFlag
          _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.imageSet = res.data.imageSet
          if (res.data.imageSet) {
            const images = res.data.imageSet.join(',')
            _this.form.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 = res.data.content != '/pagesB/promoDetail' ? '2' : '1'
            if (res.data.promoRule) {
              _this.isShowNextStep = true
              _this.form.promoRule.range = '1'
              _this.time = [res.data.promoRule.validStartDate, res.data.promoRule.validEndDate]
              if (res.data.promoRule.productRangeList && res.data.promoRule.productRangeList.length > 0) {
                _this.productRangeList = res.data.promoRule.productRangeList.map(item => { return item.productTypeSn })
              }
            }
            _this.form.promoRule = { ..._this.form.promoRule, ...res.data.promoRule }
          }
        }
      })
    },
    // 券有效期 change
    handleValidType (con) {
      this.form.promoRule.validType = con
      if (con === 'FIXED') {
        this.form.promoRule.validDays = undefined
      } else {
        this.time = []
        this.form.promoRule.validStartDate = undefined
        this.form.promoRule.validEndDate = undefined
      }
    },
    //  确定保存  验证必填
    handleSave (type) {
      const _this = this
      if (_this.form.contentType === 'LINK') {
        _this.form.content = _this.form.contentLink
      }
      // 验证组件必填项
      _this.$refs.ruleForm.validate(valid => {
        if (valid) {
          _this.savePartInfo(type)
        }
      })
    },
    // 保存
    savePartInfo (type) {
      const _this = this
      _this.form.promoActiveSn = this.$route.params.sn
      var formData = JSON.parse(JSON.stringify(_this.form))
      formData.imageSet = formData.imageSet ? formData.imageSet.split(',') : []
      // 跳转链接
      if (formData.contentType == 'LINK') {
        delete formData.contentLink
        if (_this.productRangeList && _this.productRangeList.length > 0) {
          formData.promoRule.productRangeList = _this.productRangeList.map(item => { return { productTypeSn: item } })
        }
        // 促销活动
        if (_this.form.linkType === '1') {
          if (_this.form.promoRule.validType === 'FIXED') {
            if (!_this.form.promoRule.validStartDate || _this.form.promoRule.validStartDate.validEndDate) {
              _this.$message.warning('请输入券有效期！')
              return false
            }
          } else {
            if (!_this.form.promoRule.validDays) {
              _this.$message.warning('请输入券有效期！')
              return false
            }
          }
          formData.publishFlag = _this.form.promoRule.publishFlag
          formData.dealerEditFlag = _this.form.promoRule.dealerEditFlag
        } else {
          formData.promoRule = undefined
        }
        if (_this.$refs.chooseProductList) {
          const numInfo = _this.$refs.chooseProductList.getDataNum()
          if (numInfo == 0) {
            _this.$message.warning('请选择返券产品！')
            return
          }
        }
      } else {
        formData.promoRule = undefined
      }
      _this.spinning = true

      promoActivePublish(formData).then(res => {
        if (res.status == 200) {
          _this.$message.success(res.message)
          if (type === 'all') {
            _this.$nextTick(() => {
              _this.handleBack()
              _this.resetSearchForm()
            })
          } else {
            _this.isShowNextStep = true
            _this.getDetail()
          }
          _this.spinning = false
        } else {
          _this.spinning = false
        }
      })
    },
    //  图片上传
    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, // 排序
        publishFlag: '0', // 是否发布
        linkType: '1',
        dealerEditFlag: '0', // 加盟商编辑 1是 0否
        productRangeList: [], // 产品范围列表
        promoRule: {
          ruleType: 'ticket', // 基本规则类型
          ruleName: '', // 券名称
          ruleTitle: '', // 副标题
          ruleBaseType: 'category', // 券生成方式
          ruleExplain: '', // 使用说明
          validType: undefined, // 券有效期类型
          validStartDate: undefined, // 券生效时间
          validEndDate: undefined, // 券失效时间
          validDays: undefined, // 券有效期天数
          dealerEditFlag: '0', // 加盟商编辑 1是 0否
          publishFlag: '0', // 是否发布
          range: '1'
        } // 链接配置内容
      }
      this.isShowNextStep = false
      this.isDisabled = false
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.resetFields()
      }
      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.productRangeList
      this.showProModal = true
    },
    // 批量添加
    handleBatchAdd () {
      if (!this.form.promoRule.ruleValue) {
        this.$message.warning('请输入返券金额（需大于0）！')
        return
      }
      this.$refs.chooseProductList.editMorePrice(this.form.promoRule.ruleValue)
    },
    // 添加产品成功
    addProductSuccess (list) {
      const productArr = list.map(item => {
        return {
          promoActiveSn: this.$route.params.sn,
          promoRuleSn: this.form.promoRule.promoRuleSn,
          productCode: item.code,
          productSn: item.productSn,
          ruleValue: this.form.promoRule.ruleValue,
          price: item.terminalPrice
        }
      })
      promoCreateBatch(productArr).then(res => {
        if (res.status == 200) {
          this.showProModal = false
          // 获取产品列表 有分页
          this.$refs.chooseProductList.pageInit()
        }
      })
    },
    // 选择产品范围
    onChangeTree (e) {
      deleteByProductType({ promoActiveSn: this.$route.params.sn, productTypeSnList: this.productRangeList || [] }).then(res => {
        if (res.status == 200) {
          this.$refs.chooseProductList.pageInit()
        }
      })
      // 保存产品范围
      const newArr = this.productRangeList.map(item => {
        return {
          promoActiveSn: this.$route.params.sn,
          promoRuleSn: this.form.promoRule.promoRuleSn,
          productTypeSn: item
        }
      })
      saveBatchEntity({ list: newArr, 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%;
    box-sizing: border-box;
    padding-bottom:51px;
    >.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;
      justify-content: space-between;
    }
    #setPromotion-productRange{
      /deep/.ant-select-dropdown{
        max-height:30vh !important;
      }
    }
  }
</style>
