<template>
  <section class="dm-wrap" v-loading="loading">
    <el-form :model="form" ref="form" :rules="rules" label-suffix="：" label-width="110px">
      <el-form-item label="签到开关" prop="value1">
        <el-switch v-model="form.value1" active-color="rgba(47, 84, 235, 1)"></el-switch>
      </el-form-item>
      <el-form-item label="签到日期" prop="value2">
        <el-radio-group v-model="form.value2" class="pick-radio">
          <el-radio :label="0">长期生效</el-radio>
          <el-radio :label="1">指定日期</el-radio>
        </el-radio-group>
        <el-date-picker v-if="form.value2" v-model="form.value3" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <!-- 签到日期选择指定日期 -->
      <el-form-item label="签到时段" prop="value4">
        <el-radio-group v-model="form.value4" class="pick-radio">
          <el-radio :label="0">长期生效</el-radio>
          <el-radio :label="1">指定时段</el-radio>
        </el-radio-group>
        <!-- 签到时段选择指定时段 -->
        <el-time-picker v-if="form.value4" v-model="form.value5" is-range range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker>
      </el-form-item>
      <el-form-item label="签到间隔" prop="value6">
        <el-radio-group v-model="form.value6" class="sign-time">
          <el-radio :label="0">每天<span v-if="form.value6 === 0" class="tips">每个用户每天可在门店签到一次。每天0:00刷新签到次数</span></el-radio>
          <el-radio :label="1">每周<span v-if="form.value6 === 1" class="tips">每个用户每周可在门店签到一次。每周一0:00刷新签到次数</span></el-radio>
          <el-radio :label="2">每月<span v-if="form.value6 === 2" class="tips">每个用户每月可在门店签到一次。每月1号0:00刷新签到次数</span></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="签到门店" prop="value7">
        <vue-gic-store-new :options="options" :isAdd="isAdd" :uuid.sync="uuid" ref="storeNew" @store-change="storeChange"></vue-gic-store-new>
      </el-form-item>
      <el-form-item label="签到距离" prop="value8">
        <el-input-number v-model="form.value8" controls-position="right" class="shortInput" @change="handleChange" :min="100" :max="5000"></el-input-number><span style="margin-left:9px;">米</span>
        <span class="tips">*为了保证用户体验，建议设置签到距离为100米，设置范围为100-5000米。</span>
      </el-form-item>
      <el-form-item label="签到人群" prop="value9">
        <div style="width:984px">
          <p class="people">在此权限下进行条件筛选<i>（不进行筛选则默认是您权限下的所有用户）</i></p>
          <vue-gic-people :projectName="projectName" :useId="useId" :hasSearchData="hasSearchData" :sceneValue="sceneValue" ref="peopleFilter" :isAdd="operateType" @findFilter="findFilter" @getBackData="getBackData" @editHide="editHide" @editShow="editShow" />
          <div class="gic-people--button" v-show="toggleTag">
            <el-button size="small" type="primary" @click="getData">确 定</el-button>
            <el-button size="small" @click="cancelFilter">取 消</el-button>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="签到规则说明" prop="value10">
        <el-input v-model="form.value10" class="long-input" type="textarea" resize="none" rows="4" maxlength="200" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="签到福利" prop="value11">
        <!-- 营销事件组件 -->
        <!-- 只有实时才是单图文 -->
        <marketing-event ref="marketingEvent" @has-card="hasCard" :integralMultiple="true"></marketing-event>
        <span class="tips">*支持每人限领张数≥100张的卡券。</span>
      </el-form-item>
      <el-button type="primary" @click="onSubmit('form')" style="margin:24px 0 50px 111px;">保存</el-button>
    </el-form>
  </section>
</template>

<script>
import marketingEvent from './marketing-event/index.vue';
export default {
  name: 'sign-setting',
  components: {
    'marketing-event': marketingEvent
  },
  data() {
    return {
      loading: false,
      // 门店筛选器
      uuid: '', // 新增传空，编辑必传,
      // 需要的下拉 默认为全部[0,1,2,3,4,5]
      // 0 全部 1 门店类型 2门店标签 3 门店区域 4 门店分组 5 部分门店
      options: [0, 1, 2, 3, 4, 5],
      isAdd: true,
      storeConfig: null,
      // 人群筛选器
      projectName: '', // 当前项目名
      sceneValue: 'member', // 场景值
      useId: '', // 模板id
      hasSearchData: '', // 当前页回显的数据(接口返回)
      operateType: true, // 编辑的时候是false 新增是true 例如列表筛选是开始true 编辑改成false
      toggleTag: false, // 控制(确认取消)按钮显示的参数,仅供参考,可自行修改
      saveTag: false, // 控制(保存)按钮显示的参数,仅供参考,可自行修改
      form: {
        value1: false, // 签到开关
        value2: 0, // 签到日期
        value3: 0, // 签到指定日期
        value4: 0, // 签到时段
        value5: 0, // 签到指定时段
        value6: 0, // 签到间隔
        value7: 0, // 签到门店
        value8: 0, // 签到距离
        value9: 0, // 签到人群
        value10: '', // 签到规则说明
        value11: [] // 签到福利
      },
      rules: {
        // giveContent: { validator: validGiveContent, message: '请输入转赠对话框文字', trigger: 'blur' },
        // giveRule: { required: true, message: '请输入卡券转赠规则', trigger: 'blur' }
      },
      couponAutoGetStock: null
    };
  },
  created() {
    this.$store.commit('mutations_breadcrumb', [{ name: '门店签到' }, { name: '门店签到设置', path: '' }]);
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(valid);
        } else {
          console.log(valid);
          return false;
        }
      });
    },
    storeChange() {
      // console.log(this.uuid);
      this.$refs['storeNew'].getStoreConfig().then(data => {
        // console.log('data----', data);
        this.storeConfig = data;
      });
    },
    // 父组件调用子组件方法,触发父组件事件
    getData() {
      var that = this;
      that.$refs.peopleFilter.confirmSet();
    },

    // 子组件触发父组件事件,返回过滤条件数据
    findFilter(value) {
      // var that = this;
      console.log(value);
    },

    // 取消
    cancelFilter() {
      var that = this;
      that.$refs.peopleFilter.cancelSet();
    },

    // 获取需要回显的数据, 供保存时候使用
    getBackData(val) {
      var that = this;
      console.log(val);
      that.getSaveData = val;
    },
    // 显示编辑,保存按钮隐藏,确认按钮显示 (子组件会调用)
    editShow() {
      var that = this;
      console.log('editShow');
      that.toggleTag = true;
      that.saveTag = false;
    },
    hasCard(card) {
      console.log(card);
      this.couponAutoGetStock = card;
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.el-scrollbar__wrap {
  margin-right: -5px !important;
}
/deep/.el-form-item {
  margin-bottom: 28px;
  .el-form-item__label,
  .el-form-item__content {
    line-height: 22px;
    vertical-align: top;
    .pick-radio {
      height: 27px;
      .el-radio {
        line-height: 22px;
      }
    }
  }
}
/deep/.el-date-editor {
  margin: -5px 0 0 20px;
  vertical-align: top;
  // height: 22px;
}
.el-radio {
  margin-right: 0;
}
/deep/.el-input-number {
  width: 90px;
  .el-input-number__increase,
  .el-input-number__decrease {
    width: 20px;
    background: #fff;
  }
}
.long-input {
  width: 500px;
}
/deep/.el-checkbox-group {
  display: inline-block;
  vertical-align: middle;
  .el-checkbox-button {
    margin-right: 10px;
  }
  &:first-child .el-checkbox-button__inner,
  &:last-child .el-checkbox-button__inner {
    border-radius: 0 !important;
    border: 1px solid #dcdfe6 !important;
  }
}
.tips {
  margin-left: 10px;
  color: #606266;
}
.people {
  color: #303133;
  font-weight: bold;
  i {
    color: #606266;
    font-weight: normal;
    font-style: normal;
  }
}
.sign-time {
  vertical-align: top;
  margin-bottom: -18px;
  .el-radio {
    margin: 0 0 18px;
    display: block;
  }
}
</style>
