<template>
  <div>
    <div class="addactivetype">
      <div class="page-search row items-center flex">
        <div class="col row wrap q-mr-lg q-col-gutter-md">
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="addMsg.ActivityName" ref="Name"
              class="col-12 q-pb-lg" label="活动名称" :rules="[val => !!val || '请填写活动名称']" />
          </div>
          <div class="col-6">
            <q-select stack-label color="primary" filled clearable label="选择活动类型" option-value="Id"
              option-label="TypeName" :options="activeTypeOptions" v-model="addMsg.ActivityType" ref="ActivityType"
              emit-value map-options :rules="[val => !!val || '请选择活动类型']" />
          </div>
          <div class="col-6 Sysuser_Date">
            <q-input filled v-model="addMsg.StartTime" mask="####-##-## ##:##:##" label="开始时间" ref="StartTime"
              :rules="[val => !!val || '请选择开始时间']">
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                    <div class="q-gutter-md row items-start">
                      <q-date v-model="addMsg.StartTime" mask="YYYY-MM-DD HH:mm:ss"></q-date>
                      <q-time v-model="addMsg.StartTime" format24h mask="YYYY-MM-DD HH:mm:ss" />
                    </div>
                    <q-btn v-close-popup label="关闭" color="primary" flat style="float:right" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
          </div>
          <div class="col-6 Sysuser_Date">
            <q-input filled v-model="addMsg.EndTime" mask="####-##-## ##:##:##" label="结束时间" ref="EndTime"
              :rules="[val => !!val || '请选择结束时间']">
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                    <div class="q-gutter-md row items-start">
                      <q-date v-model="addMsg.EndTimeStr" mask="YYYY-MM-DD HH:mm:ss" @input="edate"></q-date>
                      <q-time v-model="addMsg.EndTimeStr" format24h mask="YYYY-MM-DD HH:mm:ss" @input="etime" />
                    </div>
                    <q-btn v-close-popup label="关闭" color="primary" flat style="float:right" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
          </div>
          <div class="col-6">
            <q-input filled v-model="addMsg.SignStartTime" mask="####-##-## ##:##:##" ref="SignStartTime" label="报名开始时间"
              :rules="[val => !!val || '请选择报名开始时间']">
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                    <div class="q-gutter-md row items-start">
                      <q-date v-model="addMsg.SignStartTimeStr" mask="YYYY-MM-DD HH:mm:ss" @input="date" />
                      <q-time v-model="addMsg.SignStartTimeStr" format24h mask="YYYY-MM-DD HH:mm:ss" @input="time" />
                    </div>
                    <q-btn v-close-popup label="关闭" color="primary" flat style="float:right" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
          </div>
          <div class="col-6">
            <q-input filled v-model="addMsg.SignEndTime" mask="####-##-## ##:##:##" ref="SignEndTime" label="报名结束时间"
              :rules="[val => !!val || '请选择报名结束时间']">
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                    <div class="q-gutter-md row items-start">
                      <q-date v-model="addMsg.SignEndTimeStr" mask="YYYY-MM-DD HH:mm:ss" @input="endDate" />
                      <q-time v-model="addMsg.SignEndTimeStr" format24h mask="YYYY-MM-DD HH:mm:ss" @input="endTime" />
                    </div>
                    <q-btn v-close-popup label="关闭" color="primary" flat style="float:right" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
          </div>
          <div class="col-6">
            <q-input filled stack-label maxlength="40" :dense="false" v-model="addMsg.LocationName" ref="LocationName"
              class="col-12 q-pb-lg" label="活动地址" :rules="[val => !!val || '请填写活动地址']">
            </q-input>
          </div>
          <div class="col-6">
            <q-input filled stack-label maxlength="40" disable :dense="false" v-model="addMsg.LonLat" ref="LonLat"
              class="col-12 q-pb-lg" label="门店经纬度" :rules="[val => !!val || '请填写门店经纬度']">
              <template v-slot:after>
                <q-btn round color="black" icon="my_location" @click="getMapShow" />
              </template>
            </q-input>
            <!-- 地图选址 -->
            <el-dialog title="地图展示" :visible.sync="isShowMap" width="960px" style="zIndex:999999">
              <Map @map-submit="mapEvent" :address="addMsg.LocationName" style="zIndex:999999"></Map>
            </el-dialog>
          </div>
          <div class="col-6">
            <div>是否免费：</div>
            <q-toggle v-model="addMsg.IsFree" :true-value="1" :false-value="2"
              @input='addMsg.Price=0,addMsg.PointNum=0' />
          </div>
          <div class="col-6" v-if="addMsg.IsFree==2">
            <q-input filled stack-label maxlength="20" type="number" :step="0.01" :dense="false" v-model="addMsg.Price"
              ref="Price" class="col-12 q-pb-lg" label="现金价格" :rules="[val => !!val || '请填写现金价格']" suffix="元">
            </q-input>
          </div>
          <div class="col-6" v-if="addMsg.IsFree==1">
            <!-- 占位 -->
          </div>
          <div class="col-6">
            <div>是否区分性别：</div>
            <q-toggle v-model="addMsg.Distinguish" :true-value="0" :false-value="1"
              @input='addMsg.ManNum=0,addMsg.WoManNum=0' />
          </div>
          <div class="col-6" v-if=" addMsg.Distinguish===1">
            <q-input filled stack-label maxlength="20" type="number" :dense="false" v-model="addMsg.ManNum" ref="ManNum"
              class="col-12 q-pb-lg" label="总人数" :rules="[val => !!val || '请填写总人数']" suffix="人">
            </q-input>
          </div>
          <div class="col-6" v-if="addMsg.Distinguish==0">
            <!-- 占位 -->
          </div>
          <div class="col-6" v-if="addMsg.Distinguish==0">
            <q-input filled stack-label maxlength="20" type="number" :dense="false" v-model="addMsg.ManNum" ref="ManNum"
              class="col-12 q-pb-lg" label="男性" :rules="[val => !!val || '请填写男性人数']" suffix="人">
            </q-input>
          </div>
          <div class="col-6" v-if="addMsg.Distinguish==0">
            <q-input filled stack-label maxlength="20" type="number" :dense="false" v-model="addMsg.WoManNum"
              ref="WoManNum" class="col-12 q-pb-lg" label="女性" :rules="[val => !!val || '请填写女性人数']" suffix="人">
            </q-input>
          </div>
          <div class="col-6">
            <div>是否区分年龄：</div>
            <q-toggle v-model="addMsg.AgeLimit" :true-value="0" :false-value="1"
              @change='addMsg.StartAge=0,addMsg.EndAge=0' />
          </div>
          <div class="col-6" v-if="addMsg.AgeLimit===0">
            <div>年龄范围：</div>
            <q-range v-model="labelAge" :min="0" :max="50" :step="1" label-always :left-label-value="labelAge.min + '岁'"
              :right-label-value="labelAge.max + '岁'" color="brown" @change="changeAge" />
          </div>
          <div class="col-6" v-if="addMsg.AgeLimit==1">
            <!-- 占位 -->
          </div>
          <div class="col-6">
            <div>是否内部限制：</div>
            <q-toggle v-model="addMsg.LnsideLimit" :true-value="1" :false-value="0" />
          </div>
          <div class="col-6">
            <div>报名取消确认：</div>
            <q-toggle v-model="addMsg.IsCancelConfirm" :true-value="1" :false-value="2" />
          </div>
          <div class="col-6">
            <q-uploader :style="{ backgroundImage: 'url(' + addMsg.CoverImg + ')' }"
              style="width:auto;height:300px;background-repeat:no-repeat;background-size:cover; border:1px solid #eee"
              flat hide-upload-btn max-files="1" label="封面图" accept=".jpg, image/*" :factory="uploadFile" auto-upload>
            </q-uploader>
          </div>
        </div>
      </div>
      <div class="page-search row items-center flex">
        <div class="q-mt-lg q-mb-sm">活动特色</div>
        <div class="col-12">
          <Ueditor :value="ueditor.value" :config="ueditor.config" @input="setVal" ref="ue" no-margin
            :isShowInsertImage="false" :isShowAttachment="false" :isShowVoice="false"></Ueditor>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    UploadSelfFile
  } from "../../api/common/common";
  import Ueditor from "../editor/UeEditor";
  import Map from "./commonMap";
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      },
      activeTypeOptions: {
        type: Array,
        default: null
      }
    },
    components: {
      Ueditor,
      Map
    },
    data() {
      return {
        labelAge: {
          min: 0,
          max: 0
        }, //年龄范围
        addMsg: {
          Id: 0, //活动编号(主键)
          ActivityName: "", //活动名称
          StartTime: "", //开始时间
          EndTime: "", //结束时间
          CoverImg: "", //封面图
          ActivityType: 0, //活动类型
          ActivityInfo: "", //活动详情
          SignStartTime: "", //报名开始时间
          SignEndTime: "", //报名截止时间
          IsFree: 1, //是否免费   1是  2否
          Price: 0, //价格
          PointNum: 0, //点数
          IsCancelConfirm: 1, //取消确定1是 2否
          Distinguish: 1, //是否区别性别 0区分 1不区分
          ManNum: 0, //男数量
          WoManNum: 0, //女数量
          AgeLimit: 1, //是否区别年龄 0区分 1不区分
          StartAge: 0, //最小年龄
          EndAge: 0, //最大年龄
          LnsideLimit: 1, //内部限制0-否，1-是
          LonLat: '', //经纬度（逗号分隔）
          LocationName: '', //位置名称
        },
        persistent: true,
        isShowMap: false, //是否显示地图弹窗
        //富文本
        ueditor: {
          value: "",
          config: {
            initialFrameWidth: null,
            initialFrameHeight: 100,
            autoHeightEnabled: true,
            enableContextMenu: false,
            zIndex: 900
          }
        },
      }
    },
    watch: {
      saveObj: {
        handler(val) {
          if (val && val.Id > 0) {
            this.addMsg.Id = this.saveObj.Id
            this.addMsg.ActivityName = this.saveObj.ActivityName
            this.addMsg.StartTime = this.saveObj.StartTime
            this.addMsg.EndTime = this.saveObj.EndTime
            this.addMsg.CoverImg = this.saveObj.CoverImg
            this.addMsg.ActivityType = this.saveObj.ActivityType
            this.addMsg.ActivityInfo = this.saveObj.ActivityInfo
            this.addMsg.SignStartTime = this.saveObj.SignStartTime
            this.addMsg.SignStartTimeStr = this.saveObj.SignStartTimeStr
            this.addMsg.SignEndTime = this.saveObj.SignEndTime
            this.addMsg.SignEndTimeStr = this.saveObj.SignEndTimeStr
            this.addMsg.IsFree = this.saveObj.IsFree
            this.addMsg.Price = this.saveObj.Price
            this.addMsg.PointNum = this.saveObj.PointNum
            this.addMsg.IsCancelConfirm = this.saveObj.IsCancelConfirm
            this.addMsg.Distinguish = this.saveObj.Distinguish
            this.addMsg.ManNum = this.saveObj.ManNum
            this.addMsg.WoManNum = this.saveObj.WoManNum
            this.addMsg.AgeLimit = this.saveObj.AgeLimit
            this.addMsg.StartAge = this.saveObj.StartAge
            this.addMsg.EndAge = this.saveObj.EndAge
            this.labelAge.max = this.saveObj.StartAge
            this.labelAge.min = this.saveObj.EndAge
            this.addMsg.LnsideLimit = this.saveObj.LnsideLimit
            this.addMsg.LonLat = this.saveObj.LonLat
            this.addMsg.LocationName = this.saveObj.LocationName
            this.setVal(this.addMsg.ActivityInfo);
          }
        },
        deep: true
      },
      addMsg: {
        handler(val) {
          if (val) {
            this.$emit("success", val)
          }
        },
        deep: true
      }
    },
    mounted() {
      if (this.saveObj && this.saveObj.Id > 0) {
        this.addMsg.Id = this.saveObj.Id
        this.addMsg.ActivityName = this.saveObj.ActivityName
        this.addMsg.StartTime = this.saveObj.StartTime
        this.addMsg.EndTime = this.saveObj.EndTime
        this.addMsg.CoverImg = this.saveObj.CoverImg
        this.addMsg.ActivityType = this.saveObj.ActivityType
        this.addMsg.ActivityInfo = this.saveObj.ActivityInfo
        this.addMsg.SignStartTime = this.saveObj.SignStartTime
        this.addMsg.SignStartTimeStr = this.saveObj.SignStartTimeStr
        this.addMsg.SignEndTime = this.saveObj.SignEndTime
        this.addMsg.SignEndTimeStr = this.saveObj.SignEndTimeStr
        this.addMsg.IsFree = this.saveObj.IsFree
        this.addMsg.Price = this.saveObj.Price
        this.addMsg.PointNum = this.saveObj.PointNum
        this.addMsg.IsCancelConfirm = this.saveObj.IsCancelConfirm
        this.addMsg.Distinguish = this.saveObj.Distinguish
        this.addMsg.ManNum = this.saveObj.ManNum
        this.addMsg.WoManNum = this.saveObj.WoManNum
        this.addMsg.AgeLimit = this.saveObj.AgeLimit
        this.addMsg.StartAge = this.saveObj.StartAge
        this.addMsg.EndAge = this.saveObj.EndAge
        this.labelAge.max = this.saveObj.StartAge
        this.labelAge.min = this.saveObj.EndAge
        this.addMsg.LnsideLimit = this.saveObj.LnsideLimit
        this.addMsg.LonLat = this.saveObj.LonLat
        this.addMsg.LocationName = this.saveObj.LocationName
        this.setVal(this.addMsg.ActivityInfo);
      } else {
        this.addMsg = {
            Id: 0, //活动编号(主键)
            ActivityName: "", //活动名称
            StartTime: "", //开始时间
            EndTime: "", //结束时间
            CoverImg: "", //封面图
            ActivityType: 0, //活动类型
            ActivityInfo: "", //活动详情
            SignStartTime: "", //报名开始时间
            SignEndTime: "", //报名截止时间
            IsFree: 1, //是否免费   1是  2否
            Price: 0, //价格
            PointNum: 0, //点数
            IsCancelConfirm: 1, //取消确定1是 2否
            Distinguish: 1, //是否区别性别 0区分 1不区分
            ManNum: 0, //男数量
            WoManNum: 0, //女数量
            AgeLimit: 1, //是否区别年龄 0区分 1不区分
            StartAge: 0, //最小年龄
            EndAge: 0, //最大年龄
            LnsideLimit: 1, //内部限制0-否，1-是
            LonLat: '', //经纬度（逗号分隔）
            LocationName: '', //位置名称
          },
          this.setVal("");
      }
    },
    methods: {
      // 选择开始时间
      sdate(val) {
        this.addMsg.StartTime = val
      },
      stime(val) {
        this.addMsg.StartTime = val
      },
      // 选择结束时间
      edate(val) {
        this.addMsg.EndTime = val
      },
      etime(val) {
        this.addMsg.EndTime = val
      },
      // 选择报名开始时间
      date(val) {
        this.addMsg.SignStartTime = val
      },
      time(val) {
        this.addMsg.SignStartTime = val
      },
      // 选择报名结束时间
      endDate(val) {
        this.addMsg.SignEndTime = val
      },
      endTime(val) {
        this.addMsg.SignEndTime = val
      },
      // 选择年龄范围
      changeAge(val) {
        this.addMsg.StartAge = val.min
        this.addMsg.EndAge = val.max
      },
      //限制活动开始时间小于结束时间
      StartTimeOptions(date) {
        let endTime = "2050/1/1"
        if (this.addMsg.EndTime) {
          endTime = this.addMsg.EndTime
        }
        return Date.parse(date) <= Date.parse(endTime)
      },
      //限制活动结束时间大于开始时间
      EndTimeOptions(date) {
        let startTime = "2000/1/1"
        if (this.addMsg.StartTime) {
          startTime = this.addMsg.StartTime
        }
        return Date.parse(date) >= Date.parse(startTime)
      },
      //限制活动报名开始时间小于报名结束时间
      SignStartTimeOptions(date) {
        let endTime = "2050/1/1"
        if (this.addMsg.SignEndTime) {
          endTime = this.addMsg.SignEndTime
        }
        return Date.parse(date) <= Date.parse(endTime)
      },
      //限制活动报名结束时间大于报名开始时间
      SignEndTimeOptions(date) {
        let startTime = "2000/1/1"
        if (this.addMsg.SignStartTime) {
          startTime = this.addMsg.SignStartTime
        }
        return Date.parse(date) >= Date.parse(startTime)
      },
      uploadFile(files) {
        UploadSelfFile("course", files[0], res => {
          if (res.Code == 1) {
            this.addMsg.CoverImg = res.FileUrl;
          }
        });
      },
      //表单验证
      saveRule() {
        this.$refs.Name.validate();
        this.$refs.StartTime.validate();
        this.$refs.EndTime.validate();
        this.$refs.SignStartTime.validate();
        this.$refs.SignEndTime.validate();
        if (!this.$refs.Name.hasError &&
          !this.$refs.StartTime.hasError &&
          !this.$refs.EndTime.hasError &&
          !this.$refs.SignStartTime.hasError &&
          !this.$refs.SignEndTime.hasError) {
          return true
        } else
          return false
      },
      //关闭窗口
      closeRuleForm() {
        this.$emit('close');
        this.persistent = false
      },
      //   富文本
      setVal(val) {
        this.addMsg.ActivityInfo = val;
        this.ueditor.value = decodeURIComponent(val);
      },
      //得到地图信息
      mapEvent(e) {
        this.addMsg.LonLat = e.lat + "," + e.long;
        this.addMsg.LocationName = e.address;
        this.isShowMap = false;
      },
      getMapShow() {
        this.isShowMap = true;
      },
    },
  }
</script>
<style>
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
    margin-right: 5px;
  }

  .el-tag {
    margin-right: 5px;
  }

  .el-form-item__content {
    line-height: 0;
  }

  .el-button {
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    height: 32px;
    margin-top: 8px;
  }

  .el-dialog {
    z-index: 99999;
  }
</style>