<style>
  .el-picker-panel {
    z-index: 9999 !important;
  }

  .el-range-editor--small.el-input__inner {
    background-color: transparent !important;
    border: 0 !important;
    height: 40px;
    line-height: 40px;
  }

  .el-range-editor .el-range-input {
    background-color: transparent !important;
  }

  .el-range-editor--small .el-range-separator {
    line-height: 30px !important;
  }

</style>
<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 800px;max-width:900px;">
      <q-card-section>
        <div class="text-h6">{{addMsg.ID==0?'新增活动信息':'修改活动信息'}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="row wrap">
          <q-input filled v-model="addMsg.Title" class="col-6 q-pr-lg q-pb-lg" :rules="[val => !!val || '请填写标题']"
            ref="Title" label="标题">
          </q-input>
          <q-input filled v-model="addMsg.SurveyNum" @keyup.native="checkInteger(addMsg,'SurveyNum')" class="col-6 q-pb-lg" :rules="[val => !!val || '请填写数量']"
            ref="SurveyNum" label="问卷调查份数">
          </q-input>
          <q-field filled dense class="col-6 q-pb-lg q-pr-lg">
            <template v-slot:control>
              <el-date-picker v-model="dateList" size="small" type="datetimerange" range-separator="至"
                value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </template>
          </q-field>
          <q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.PrizeType"
            :options="platList" label="领奖方式" ref="PrizeType" :rules="[val => !!val || '请填写标题']" class="col-6 q-pb-lg" emit-value map-options />
          <q-input filled v-model="addMsg.PrizeAddress" class="col-6 q-pb-lg q-pr-lg"
            :rules="[val => !!val || '请填写奖品地址']"  ref="PrizeAddress" label="奖品地址">
          </q-input>
          <q-input filled type="textarea" :rows="3" v-model="addMsg.Description" class="col-12 q-pb-lg"
            :rules="[val => !!val || '请填写活动说明']" ref="Description" label="活动说明">
          </q-input>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeSaveForm" />
        <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
          @click="saveActive" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script>
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        addMsg: {
          ID: 0,
          Title: '',
          StartDate: '',
          EndDate: "",
          SurveyNum: '',
          Description: '',
          PrizeAddress: '',
          PrizeType: '',
        },
        platList: [],
        dateList: [],
        saveLoading: false,
      }
    },
    mounted() {
      this.GetPrizeTypeEnumList();
      this.initObj()
    },
    methods: {
      //初始化表单
      initObj() {
        if (this.saveObj && this.saveObj.ID > 0) {
          this.apipostDS("/api/Survey/GetActivitySurvey", {
            ID: this.saveObj.ID
          }, res => {
            this.addMsg = res.data.data;
            this.addMsg.PrizeType = this.addMsg.PrizeType.toString()
            this.dateList = [this.addMsg.StartDate, this.addMsg.EndDate]
          })
        }
      },
      //关闭弹窗
      closeSaveForm() {
        this.$emit('close')
        this.persistent = false
      },
      GetPrizeTypeEnumList() {
        this.apipostDS("/api/Survey/GetPrizeTypeEnumList", {}, res => {
          if (res.data.resultCode == 1) {
            this.platList = res.data.data
          } else {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: res.data.message
            })
          }
        })
      },
      //保存数据
      saveActive() {
        this.$refs.Title.validate();
        this.$refs.SurveyNum.validate();
        this.$refs.PrizeType.validate();
        this.$refs.PrizeAddress.validate();
        this.$refs.Description.validate();
        if (this.dateList && this.dateList.length > 0) {
            this.addMsg.StartDate = this.dateList[0];
            this.addMsg.EndDate = this.dateList[1];
        } else {
            this.$q.notify({
                type: 'negative',
                position: "top",
                message: '请选择活动时间'
              })
            return false
        }
        if (!this.$refs.Title.hasError && !this.$refs.SurveyNum.hasError && !this.$refs.PrizeType.hasError && !this.$refs.PrizeAddress.hasError
         && !this.$refs.Description.hasError) {
          this.apipostDS("/api/Survey/SetActivitySurvey", this.addMsg, res => {
            if (res.data.resultCode == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '数据保存成功！',
                position: 'top'
              })
              this.$emit('close');
              this.$emit('success');
            } else {
              this.$q.notify({
                type: 'negative',
                position: "top",
                message: res.data.message
              })
            }
          })
        }
      }
    }
  }

</script>
