<template>
  <div>
    <a-modal
      v-model="isShow"
      @cancle="isShow = false"
      :footer="null"
      width="80%"
      :centered="true"
      wrapClassName="addLottery-modal"
      :title="titleText">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :layout="formLayout"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <h3 class="form-titles">基础设置</h3>
        <a-row :gutter="48">
          <a-col :span="6">
            <a-form-model-item ref="name" label="活动名称" prop="name">
              <a-input id="addLottery-time" v-model="form.name" placeholder="15个字以内"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item ref="time" label="活动时间" prop="time">
              <a-range-picker
                id="addLottery-time"
                v-model="form.time"
                format="YYYY-MM-DD"
                :placeholder="['开始时间','结束时间']"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item ref="name" label="抽奖人次" prop="name">
              <a-input-number
                id="addLottery-cjRc"
                style="width: 50%;margin-right: 20px;"
                v-model="form.nums"
                :min="0"
                :max="999999"
                :precision="0"
                placeholder="请输入抽奖人次(0~999999)"
                allowClear />
              <a-checkbox v-model="form.bxNums">
                不限
              </a-checkbox>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item ref="name" label="付费抽奖规则" prop="name">
              每次抽奖需要支付
              <a-input-number
                id="addLottery-cjgz"
                style="width: 30%;margin-right: 5px;"
                :min="0"
                :max="999999"
                :precision="0"
                placeholder="请输入乐豆数(0~999999)"
                allowClear />
              乐豆
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="48">
          <a-col :span="8">
            <a-form-model-item ref="name" label="奖品说明" prop="name">
              <a-input v-model="form.desc" type="textarea" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item ref="name" label="抽奖条件" prop="name">
              <a-input v-model="form.desc" type="textarea" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item ref="name" label="抽奖说明" prop="name">
              <a-input v-model="form.desc" type="textarea" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <h3 class="form-titles">奖品设置</h3>
        <a-row :gutter="48">
          <a-col :span="24">
            <div class="form-item">
              <div style="margin-right: 10px;"><span class="red">*</span>请选择转盘类型</div>
              <a-select style="width: 300px;" v-model="form.region" placeholder="请选择类型">
                <a-select-option value="5">
                  五等分
                </a-select-option>
                <a-select-option value="6">
                  六等分
                </a-select-option>
              </a-select>
            </div>
            <div class="form-item" v-for="(item, index) in 6" :key="index">
              <div style="margin-right: 10px;"><span class="red">*</span> 奖品{{ index }}</div>
              <a-select style="width: 120px;margin-right: 5px;" placeholder="请选择类型">
                <a-select-option value="0">
                  送实物
                </a-select-option>
                <a-select-option value="1">
                  送乐豆
                </a-select-option>
                <a-select-option value="2">
                  未中奖
                </a-select-option>
              </a-select>
              <a-input style="width: 200px;margin-right: 5px;" placeholder="请输入奖品名称,10个字以内"/>
              <a-select style="width: 120px;margin-right: 5px;" placeholder="是否中奖">
                <a-select-option value="1">
                  是
                </a-select-option>
                <a-select-option value="0">
                  否
                </a-select-option>
              </a-select>
              <a-input-number
                style="width: 150px;margin-right: 5px;"
                :min="0"
                :max="100"
                :precision="2"
                placeholder="请输入中奖概率(%)"
                allowClear />
              <a-input-number
                style="width: 150px;margin-right: 5px;"
                :min="0"
                :max="999999"
                :precision="0"
                placeholder="请输入奖品数量"
                allowClear />
              <Upload
                class="upload"
                ref="homeImage"
                :fileSize="0.25"
                listType="picture-card">
              </Upload>
              <span class="upload-desc">请上传奖品图片，300*300px，0.25MB 以内。</span>
            </div>
          </a-col>
        </a-row>

        <a-row :gutter="48">
          <a-col :span="12">
            <div class="form-item">
              <div style="margin-right: 10px;"><span class="red">*</span>中奖限制：</div>
              <a-select mode="multiple" style="width: 300px;" v-model="form.region" placeholder="请选择">
                <a-select-option value="5">
                  中奖后抽奖XXX次内不能再次中奖
                </a-select-option>
                <a-select-option value="6">
                  每天最多可中奖XXX次
                </a-select-option>
                <a-select-option value="6">
                  每人最多可中奖XXX次
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form-item">
              <div style="margin-right: 10px;"><span class="red">*</span>赠送抽奖次数规则：</div>
              <a-select mode="multiple" style="width: 300px;" v-model="form.region" placeholder="请选择">
                <a-select-option value="5">
                  新用户登录送抽奖
                </a-select-option>
                <a-select-option value="6">
                  用户首次投递送抽奖
                </a-select-option>
                <a-select-option value="6">
                  分享给好友或朋友圈送抽奖
                </a-select-option>
                <a-select-option value="6">
                  3个月内无投递记录送抽奖
                </a-select-option>
              </a-select>
            </div>
          </a-col>
        </a-row>

        <div class="form-item" style="justify-content:center;padding: 50px 20px 20px;">
          <a-button type="primary" @click="onSubmit">
            保存
          </a-button>
          <a-button style="margin-left: 10px;" @click="resetForm">
            重置
          </a-button>
        </div>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { VSelect, Upload } from '@/components'
import { goodsClassDetails, saveGoodsClass } from '@/api/shopSetting.js'
export default {
  name: 'AddlotterySetModal',
  components: {
    VSelect,
    Upload
  },
  props: {
    showEditModal: {
      type: Boolean,
      default: false
    },
    itemId: {
      type: String,
      default: ''
    },
    itemData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      isShow: this.showEditModal,
      titleText: '新增活动',
      formLayout: 'vertical',
      labelCol: {},
      wrapperCol: {},
      form: {
        name: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: 'Please input Activity name', trigger: 'blur' },
          { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
        ],
        region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
        date1: [{ required: true, message: 'Please pick a date', trigger: 'change' }],
        type: [
          {
            type: 'array',
            required: true,
            message: 'Please select at least one activity type',
            trigger: 'change'
          }
        ],
        resource: [
          { required: true, message: 'Please select activity resource', trigger: 'change' }
        ],
        desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 查看详情
    getPageInfo () {
      const _this = this
      goodsClassDetails({
        id: _this.itemId
      }).then(res => {
        if (res.status == 200) {
          this.form.setFieldsValue({ formData: res.data })
        }
      })
    },
    // 点击保存;
    handleSubmit (e) {
      e.preventDefault()
      const _this = this
      this.form.validateFields((err, values) => {
        if (!err) {
          const formData = Object.assign({}, this.itemData, this.formData, values.formData)
          formData.id = _this.itemId
          saveGoodsClass(formData).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.$emit('refresh')
              setTimeout(function () {
                _this.isShow = false
              }, 300)
            }
          })
        }
      })
    }
  },
  watch: {
    showEditModal (newValue, oldValue) {
      this.isShow = newValue
    },
    isShow (val) {
      if (!val) {
        this.$emit('close')
      } else {
        this.form.resetFields()
      }
    },
    itemId (newValue, oldValue) {
      if (newValue && this.isShow) {
        this.titleText = '编辑'
        this.getPageInfo(newValue)
      } else {
        this.titleText = '新增'
      }
    }
  }
}
</script>

<style lang="less">
  .addLottery-modal{
    .form-titles{
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
      margin-bottom: 20px;
    }
    .form-item{
      display: flex;
      align-items: center;
      padding: 5px;
    }
    .upload-desc{
      font-size: 12px;
      margin-left: 10px;
    }
    .red{
      color: red;
    }
  }
</style>
