<template>
  <div class="redPacketSetEidit-page">
    <a-spin :spinning="spinning" tip="Loading...">
      <a-page-header :ghost="false" :backIcon="false" class="redPacketSetEidit-baseInfo">
        <template slot="subTitle">
          <a href="javascript:;" @click="handleBack" id="redPacketSetEidit-handleBack">
            <a-icon type="left"></a-icon> 返回列表
          </a>
          <span style="margin: 0 15px;color: #666;font-weight: bold;">新增红包活动</span>
        </template>
      </a-page-header>
      <a-card :bordered="false" size="small" class="pages-wrap">
        <div class="redPacketSetEidit-baseInfo">
          <a-form-model
            id="redPacketSetEidit-form"
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-row :gutter="24">
              <a-row>
                <a-col :span="12">
                  <a-form-model-item label="活动名称" prop="ruleName">
                    <a-input id="redPacket-ruleName" allowClear :maxLength="30" v-model.trim="form.ruleName" placeholder="请输入活动名称(最多30个字符)"/>
                  </a-form-model-item>
                </a-col>
                <!-- <a-col :span="12">
                  <a-form-model-item label="活动截止时间" prop="activeTime" help="活动成发布后即刻开始,无需设置开始时间">
                    <a-input id="redPacket-time" style="width: 70%;margin-right:10px;" allowClear v-model.trim="form.activeTime" placeholder="请输入活动截止时间(精确到小时)"/>
                    <a-checkbox>永久</a-checkbox>
                  </a-form-model-item>
                </a-col> -->
              </a-row>
              <a-row>
                <a-col :span="24">
                  <a-form-model-item label="参与货架" prop="joinNum" :label-col="{span: 3}" :wrapper-col="{span: 20}">
                    <span v-if="form.joinNum">已选{{ form.joinNum }}货架</span>
                    <a-button type="link" class="button-info" @click="openModal=true">点击选择</a-button>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <!-- <a-row>
                <a-col :span="24">
                  <a-form-model-item label="活动范围" prop="activeOrg" :label-col="{span: 3}" :wrapper-col="{span: 20}">
                    <div style="color:#999">修配易码通用户下单后可获得红包奖励</div>
                    <a-checkbox-group
                      v-model="form.activeOrg"
                      name="checkboxgroup"
                      :options="plainOptions"
                    />
                  </a-form-model-item>
                </a-col>
              </a-row> -->
              <a-row>
                <a-col :span="24">
                  <a-form-model-item label="客服微信" prop="serviceQrcode" :label-col="{span: 3}" :wrapper-col="{span: 20}">
                    <Upload
                      class="upload"
                      v-model="form.serviceQrcode"
                      ref="serviceQrcode"
                      :fileSize="10"
                      :maxNums="1"
                      @remove="removeImage"
                      @change="changeImage"
                      listType="picture-card"></Upload>
                    <div class="upload-desc" style="margin-left: 100px;color:#999">说明：单张大小小于10Mb，最多1张。</div>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="24">
                  <a-form-model-item label="备注" :label-col="{span: 3}" :wrapper-col="{span: 20}">
                    <a-textarea :rows="4" v-model="form.remarks" :maxLength="150" placeholder="请输入备注(最多150字符)"></a-textarea>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-row>
            <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;">
              <a-button type="default" @click="handleBack" style="margin-right:20px;" id="redPacketSetEidit-cansel">取消</a-button>
              <a-button type="primary" @click="handleSubmit" id="redPacketSetEidit-handleSubmit">保存</a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
      </a-card>
      <!-- 选择货架弹窗 -->
      <shelfModal ref="shelfModal" :checkedList="form.ruleStoreList" :visible="openModal" @close="openModal=false" @ok="chooseShelf"></shelfModal>
    </a-spin>
  </div>
</template>

<script>
import { VSelect, Upload } from '@/components'
import { rewardRuleDetail, rewardRuleCreate, rewardRuleModify } from '@/api/redPacket.js'
import shelfModal from './shelfModal.vue'
export default {
  components: { shelfModal, VSelect, Upload },
  data () {
    return {
      spinning: false,
      openModal: false, // 货位模板弹窗初始状态
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      },
      plainOptions: [{ label: '货架订单', value: '1' }],
      pageInfo: null,
      form: {
        ruleName: '', // 活动名称
        joinNum: '', // 参与数
        ruleStoreList: [], // 参与门店
        serviceQrcode: '', // 客服二维码图片
        remarks: ''
      },
      rules: {
        ruleName: [ { required: true, message: '请输入活动名称', trigger: 'change' } ],
        joinNum: [ { required: true, message: '请选择参与货架', trigger: 'change' } ],
        serviceQrcode: [ { required: true, message: '请上传客服微信二维码图片', trigger: 'change' } ]
      }
    }
  },
  computed: {
    isEdit () {
      return this.$route.params.sn
    }
  },
  methods: {
    retForm () {
      this.form = {
        ruleName: '', // 活动名称
        joinNum: '', // 参与数
        ruleStoreList: [], // 参与门店
        serviceQrcode: '', // 客服二维码图片
        remarks: ''
      }
      this.$refs.ruleForm.resetFields()
      this.removeImage()
    },
    handleBack () {
      this.retForm()
      this.$router.push({ name: 'redPacketList' })
    },
    //  图片上传
    changeImage (file) {
      this.form.serviceQrcode = file
    },
    removeImage () {
      this.form.serviceQrcode = ''
      this.$refs.serviceQrcode.setFileList('')
    },
    chooseShelf (data) {
      this.form.ruleStoreList = data
      this.openModal = false
      this.form.joinNum = data.length
      this.$refs.ruleForm.validateField('joinNum')
    },
    // 活动详情
    getDetail () {
      this.spinning = true
      rewardRuleDetail({
        rewardRuleSn: this.$route.params.sn
      }).then(res => {
        if (res.status == 200) {
          const storeList = []
          res.data.rewardRuleStoreList.map(item => {
            storeList.push({
              shelfSn: item.shelfSn
            })
          })
          this.form = {
            ruleName: res.data.ruleName, // 活动名称
            joinNum: res.data.joinNum, // 参与数
            ruleStoreList: storeList, // 参与门店
            serviceQrcode: res.data.serviceQrcode, // 客服二维码图片
            remarks: res.data.remarks,
            rewardRuleSn: res.data.rewardRuleSn
          }
          this.$refs.serviceQrcode.setFileList(res.data.serviceQrcode)
        }
        this.spinning = false
      })
    },
    // 保存
    handleSubmit () {
      const _this = this
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const params = Object.assign({}, _this.form)
          const fun = !this.isEdit ? rewardRuleCreate : rewardRuleModify
          _this.spinning = true
          fun(params).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              setTimeout(function () {
                _this.isshow = false
                _this.spinning = false
                _this.handleBack()
              }, 300)
            } else {
              _this.spinning = false
            }
          })
        } else {
          return false
        }
      })
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 编辑
      if (vm.$route.params.sn) {
        vm.getDetail()
      } else {
        vm.retForm()
      }
    })
  }
}
</script>

<style lang="less">
  .redPacketSetEidit-page{
    position: relative;
    height: 100%;
    padding-bottom: 51px;
    box-sizing: border-box;
    .redPacketSetEidit-baseInfo{
      margin-bottom: 10px;
      .ant-input-number-handler-wrap{
        display: none;
      }
    }
    .bzj-collapse{
      margin-top: 10px;
      .ant-collapse-content-box{
        padding: 10px !important;
      }
    }

  }
</style>
