<template>
  <el-form ref="form" :model="form" label-width="100px" :rules="rules" v-loading="loading" element-loading-text="拼命加载中" >
    <section class="dm-form__wrap">
      <h3 class="dm-title__label">计划内容设置</h3>
      <el-form-item label="计划名称" prop="ecmPlanName">
        <dm-input class="w400" :maxlength="9" v-model="form.ecmPlanName" ></dm-input>
      </el-form-item>
      <el-form-item label="时效">
        <el-radio v-model="form.effectType" :label="0" :disabled="!isAdd">实时</el-radio>
        <el-radio class="mr10" v-model="form.effectType" :label="1" :disabled="!isAdd">每天</el-radio>
        <el-select style="width:262px;" v-model="form.effectTime"  v-if="form.effectType"  placeholder="请选择时间">
          <el-option v-for="(v,i) in dayOptions" :key="i" :label="v.label" :value="v.value"></el-option>
        </el-select>
         <div class="layout--tips" v-if="form.effectType">
          <i class="el-icon-info inline-block"></i>
          <div class="layout--tips__content">
          <p>每天发送<b class="bold">图文、文本、图片</b>将使用微信群发接口，占用每个用户每月4条的群发次数</p>
          <p>每天发送<b class="bold">小程序</b>使用客服接口，但客服接口需要用户在24小时之内与微信公众号互动才能发送成功，可能导致成功率过低，不占用每个用户每月4条的群发次数。</p>
          <p>每天发送<b class="bold">短信、卡券、话务</b>均不占用群发次数。</p></div>
        </div>
        <div class="layout--tips" v-else>
          <i class="el-icon-info"></i>
          实时发送调用微信客服接口，不占用每个用户每月4条的群发次数
        </div>


      </el-form-item>
      <el-form-item label="触发行为" class="width50" v-if="!form.effectType">
        <el-select class="w400" v-model="form.effectAction"  placeholder="选择发送状态">
          <el-option v-for="(v,i) in effectActionOptions" :key="i" :label="v.label" :value="v.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="常用场景" class="width50" v-if="form.effectType">
        <div class="fz12 gray">选填，勾选后生效</div>
        <el-checkbox-group v-model="checked" :max="1">
          <div class="pb10">
            <el-checkbox  class="w150" label="brithday_day">会员生日前 </el-checkbox>
            <el-input-number controls-position="right" :min="0" style="width:244px;" :disabled="checked[0] !== 'brithday_day'" v-model="form.brithday_day"></el-input-number> 天
          </div>
          <div class="pb10">
            <el-checkbox  class="w150" label="attention_day">关注时长超过 </el-checkbox>
            <el-input-number controls-position="right" :min="0" :max="100000" style="width:244px;" :disabled="checked[0] !== 'attention_day'" v-model="form.attention_day"></el-input-number> 天
          </div>
          <div class="pb10">
            <el-checkbox class="w150" label="lastCost_day">最近消费间隔 </el-checkbox>
            <el-input-number controls-position="right" :min="0" style="width:244px;" :disabled="checked[0] !== 'lastCost_day'" v-model="form.lastCost_day"></el-input-number> 天
          </div>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="营销场景">
        <span v-if="isEdit">{{form.sceneSettingName}}</span>
        <el-select  v-else class="w400"  v-model="form.sceneSettingId" placeholder="选择营销场景">
          <el-option v-for="item in sceneSettingIdOptions" :key="item.sceneSettingId" :label="item.sceneName" :value="item.sceneSettingId"></el-option>
        </el-select>
      </el-form-item>
    </section>
    <section class="dm-form__wrap">
      <h3 class="dm-title__label">有效时间</h3>
      <el-form-item label="有效时间"  prop="endDate" :show-message="showMessage">
        <el-radio v-model="form.expireType" :label="0">长期有效</el-radio>
        <el-radio v-model="form.expireType" :label="1">固定期限</el-radio>
        <el-date-picker class="ml10" v-if="form.expireType"
          v-model="form.beginDate" type="datetime"
          placeholder="开始时间" @change="checkBeginEndTime">
        </el-date-picker>
        <el-date-picker v-if="form.expireType"
          v-model="form.endDate" type="datetime"
          :picker-options="endDatePickerOptions"
          placeholder="结束时间" @change="checkBeginEndTime">
        </el-date-picker>
      </el-form-item>
    </section>
    <section class="dm-form__wrap">
      <h3 class="dm-title__label">适用人群</h3>
        <div class="mb20">
            <vue-gic-people :projectName="projectName" :useId="useId" :hasSearchData="hasSearchData" :sceneValue="sceneValue" ref="peopleFilter" @findFilter="findFilter" @getBackData="getBackData"  @editHide= "editHide" @editShow="editShow" @hideBtn="hideBtn"/>
            <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>
    </section>
    <section class="dm-form__wrap">
      <h3 class="dm-title__label">营销回复</h3>
      <marketing-event v-if="ecmPlanId" :ecmPlanId="ecmPlanId" :code="code" :enabledMessageState="enabledMessageState"></marketing-event>
    </section>
    <div class="btn-wrap_fixed" :class="{'on':asideShow}">
      <el-button type="primary" @click="submit('form')">保 存</el-button>
      <el-button  @click="$router.go(-1)">返 回</el-button>
    </div>
  </el-form>
</template>

<script>
import {getEcmInfo,saveEcmInfo} from '@/service/api/ecmApi.js';
import {sceneSettingList} from '@/service/api/commonApi.js';
import smsTemp from '@/components/libs/smsTemp';
import dmImgText from '@/components/libs/imgTextTemp'
import dmImgBox from '@/components/libs/imgTemp/index-box.vue'
import cardTemp from '@/components/libs/cardTemp'
import config from '@/config'
import wxText from '@/components/wxText/wxText'
import {checkMessageSendCount} from '@/service/api/messageApi.js';
import marketingEvent from './marketing-event/index.vue';
import {formateDateTimeByType} from '@/utils/index.js'
export default {
  data () {
    return {
      ecmPlanId:'',  // 必传,
      code:'1001',
      loading:false,
      effectActionOptions:[{value:'subscribe',label:'关注触发'},{value:'authentication',label:'认证触发'}],
      // {value:'consume',label:'消费触发'}
      dayOptions:Array(24).fill().map((v,i) =>({value:i,label:i+':00'})),
      sceneSettingIdOptions:[],
      form:{
        ecmPlanName:'',
        effectType:0,
        effectTime:0,
        effectAction:'subscribe',
        sceneSettingId:'',
        sceneSettingName:'',
        expireType:0,
        cardId:'',
        mediaId:'',
        imageTextId:'',
        textContent:'',
        title:'',
        describe:'',
        lateDays:'',
        brithday_day:'',
        attention_day:'',
        lastCost_day:'',
        memberSearchDTO:'',
        beginDate:'',
        endDate:''
      },
      dateTime:['',''],
      endDatePickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      checked:[],
      rules:{
        ecmPlanName:{type:'string', required: true, message: '计划名称不能为空', trigger: 'blur' },
      },
      isEdit:this.$route.meta.type === 'edit',
      isAdd:this.$route.meta.type === 'add',
      content: '',
      customToolbar: [['link']],
      // 人群筛选器可传参数
      projectName: '', // 当前项目名
      sceneValue: 'member', // 场景值
      useId: '', // 模板id
      hasSearchData: '' , // 当前页回显的数据(接口返回)
      toggleTag: false, // 控制按钮显示的参数,仅供参考,可自行修改
      getSaveData:'',
      saveTag:false,
      enabledMessageState:0,
      showMessage:false
    }
  },
  components:{
    'marketing-event':marketingEvent
  },
  computed: {
    asideShow() {
      return this.$store.state.marketing.asideShow
    }
  },
  created(){
    this.$store.commit('mutations_breadcrumb',[{name:'营销管理',path:''},{name:'智能营销',path:'/ecm'},{name:'智能营销管理',path:''}]);
    if (this.isAdd) {
      this.sceneSettingList();
    }
     this.getEcmInfo();
  },
  methods: {
    getData() {
      this.$refs.peopleFilter.confirmSet()
    },
    // 子组件触发父组件事件,返回过滤条件数据
    findFilter(value){
      console.log(value)
      this.form.memberSearchDTO = value;
    },
    // 取消
    cancelFilter(){
      this.$refs.peopleFilter.cancelSet()
    },
    // 获取需要回显的数据, 供保存时候使用
    getBackData(val) {
      console.log(val)
      this.getSaveData = val;
    },
    // 显示编辑,保存按钮隐藏,确认按钮显示 (子组件会调用)
    editShow() {
      this.toggleTag = true
      this.saveTag = false
    },
    // 显示保存按钮,隐藏确认按钮显示  (子组件会调用)
    editHide() {
      this.toggleTag = false
      this.saveTag = true
    },
    // 隐藏保存按钮和确认按钮  (子组件会调用)
    hideBtn() {
      this.toggleTag = false;
      this.saveTag = false
    },
    async sceneSettingList() {
        let res = await sceneSettingList();
        this.sceneSettingIdOptions = res.result;
    },
    async getEcmInfo() {
      this.loading = true;
      let res = await getEcmInfo({ecmPlanId:this.$route.params.id});
      this.loading = false;
      const result = res.result.ecmDTO;
      const commonScene = res.result.commonScene;

      this.enabledMessageState = res.result.enabledMessageState || 0;

      if(result && this.isEdit) {
        this.ecmPlanId = this.form.ecmPlanId = result.ecmPlanId || '';
        this.form.ecmPlanName = result.ecmPlanName;
        this.form.effectType = result.effectType;
        this.form.effectTime = result.effectTime;
        this.form.effectAction = result.effectAction;
        this.form.sceneSettingId = result.sceneSettingId;
        this.form.sceneSettingName = result.sceneSettingName;
        this.form.memberSearchDTO = result.filterJson;
        this.form.expireType = result.expireType;
        if (this.form.expireType){
          this.form.beginDate = result.beginDate || '';
          this.form.endDate = result.endDate || '';
        }
        if (res.result.searchId) {
          this.useId = res.result.searchId || '';
          this.hasSearchData = result.filterJson || '{}';
        }
        if (this.form.effectType === 1) {
          this.form.brithday_day = commonScene.brithday_day;
          this.form.attention_day = commonScene.attention_day;
          this.form.lastCost_day = commonScene.lastCost_day;
          if (this.form.brithday_day) {
            this.checked = ['brithday_day']
          } else if (this.form.attention_day) {
            this.checked = ['attention_day']
          } else if (this.form.lastCost_day) {
            this.checked = ['lastCost_day']
          }
        }
      } else if (this.isAdd) {
        this.ecmPlanId = res.result.templateEcmPlanId || '';
      }
    },
    //提交保存
    submit (formName) {
      if(this.checkBeginEndTime()) return;
      if (this.form.expireType && (!this.form.beginDate || !this.form.endDate)) {
        this.$tips({type:'warning',message:'固定期限不能为空'});
        return;
      }
      if (this.toggleTag && !this.getSaveData ) {
        this.$tips({type:'warning',message:'人群筛选未保存条件'})
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveEcmInfo();
        } else {
          this.$tips({type:'warning',message:'表单填写不完整'});
          return false;
        }
      });
    },
    saveEcmInfo() {
      this.loading = true;
      let params = {
        ecmPlanId:this.form.ecmPlanId || '',
        templateEcmPlanId:this.isAdd?this.ecmPlanId:'',
        ecmPlanName:this.form.ecmPlanName,  //	是	int	计划名称不能为空,且最多9个汉字
        effectType:	this.form.effectType,//是	int	时效: 实时: 0; 每天: 1
        effectTime:this.form.effectTime,	//否	int	effectType = 1每天时必填, 时效为时间为0-23
        effectAction:this.form.effectAction, //	否	string	effectType = 0实时时必填, 关注触发: ‘subscribe’; 认证触发: ‘authentication’
        marketingType:this.form.marketingType,	//是	String	营销方式: 卡券营销: ‘card’; 短信营销 : ‘message’; 图文营销: ‘teletext’; 文本营销: ‘text’; 话务: ‘teltask’; 微信图片: ‘image’
        memberSearchDTO:this.form.memberSearchDTO,
        searchJson:this.getSaveData,
        expireType:this.form.expireType,
        beginDate:this.form.expireType ? formateDateTimeByType(this.form.beginDate,'yyyy-MM-dd-HH-mm-ss') : '',
        endDate:this.form.expireType ? formateDateTimeByType(this.form.endDate,'yyyy-MM-dd-HH-mm-ss') : ''
      }
      if (this.form.effectType) {
        params[this.checked[0]] = this.form[this.checked[0]] || 0;
      }

      if (this.isAdd) {
        params.sceneSettingId = this.form.sceneSettingId;//	否	String	营销场景
      }

      saveEcmInfo(params).then(res => {
        this.loading = false;
        if (res.errorCode === 0) {
          if (this.isEdit) {
            this.$confirm('操作成功, 是否返回列表?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$router.go(-1);
            }).catch(err => { this.getEcmInfo(); });
          } else {
            this.$router.go(-1);
          }
        } else {
          this.$tips({type:'error',message:res.message || '操作失败'});
        }
      }).catch(err => {
        this.loading = false;
      })
    },
    // 辅助方法 对比开始时间结束时间
    checkBeginEndTime (){
      let beginDate = this.form.beginDate && new Date(this.form.beginDate);
      let endDate = this.form.endDate && new Date(this.form.endDate);
      if (this.form.expireType && beginDate && endDate && (beginDate.getTime() > endDate.getTime())) {
        this.$tips({type:'warning',message:'开始时间不能大于结束时间'});
        // this.form.beginDate = this.form.endDate;
        this.showMessage = true;
        return true;
      } else {
        this.showMessage = false;
        return false;
      }
    }
  }
}
</script>
