<template>
  <div class="step-info">
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="新建推送名称">
        <span class="gray"><span class="star-red">*</span> 推送名称仅供数据中心操作记录查询，您推送的会员将不会看到此信息。</span>
      </el-form-item>
      <el-form-item label="推送名称">
        <el-input v-model.trim="form.name" placeholder="请输入推送名称，10字以内"></el-input>
      </el-form-item>
      <el-form-item label="选择推送素材" class="step-choose">
        <span class="gray"><span class="star-red">*</span> 推送素材需前往<a href="#">微信公众平台</a>-管理-素材管理维护。</span>
        <div class="add-material" @click="centerDialogVisible = true">
          <div v-if="!currentImgUrl">
            <el-button type="text" class="add-title">
              <p><i class="el-icon-plus add-plus"></i></p>
              添加微信素材
            </el-button>
          </div>
          <div v-else>
            <img :src="currentImgUrl" alt="">
          </div>
        </div>
        <el-dialog title="微信消息素材" :visible.sync="centerDialogVisible" width="1000px" center class="add-subtitle title">
          <el-row>
            <el-col :span="24">
              <div class="add-line"></div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="add-container">
            <el-col v-if="!materList.length">
              暂无素材
            </el-col>
            <el-col v-else :span="8" v-for="(item,index) in materList" :key="index">
              <div class="add-content" v-for="(thumb,index) in item.content.news_item" :key="index" @click="handleImg(thumb.thumb_media_id,thumb.thumb_url)">
                <img :src="thumb.thumb_url" :alt="thumb.title">
                <div class="box-mask"><span>选择素材</span></div>
              </div>
            </el-col>
          </el-row>
          <span slot="footer" class="add-footer">
            <el-button @click="centerDialogVisible = false" style="color: #fff;background-color: #204d74; border-color: #122b40;">取 消</el-button>
          </span>
        </el-dialog>
      </el-form-item>
      <el-form-item label="选择推送范围">
        <el-radio-group v-model="form.resource">
          <el-radio label="全体推送" @change="getAll"></el-radio>
          <el-radio label="精准推送" @change="getsingele"></el-radio>
        </el-radio-group>
        <span v-if="isCount">统计中...</span>
        <span v-else>预计推送数量{{currentTagCount}}（关注微信公众号用户）</span>
        <div v-if="form.resource === '精准推送'">
          <div class="form-tags">
            <span v-for="(item,index) in tagList" :key="item.tagId">
              <span @click="handleClickTag(item, index)" class="el-tag tag-info" :class="{active:item.isActive}">
                {{item.name}}
              </span>
            </span>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="预览推送数量">
        <span class="gray"><span class="star-red">*</span>实际推送成功数量将略有偏差，选中多个标签为同时满足选中标签群体的会员。推送人数必须大于1人。</span>
        <div v-if="isCount">
          <el-button class="form-button">选中标签，预览</el-button>
          <span>统计中，请稍候</span>
        </div>
        <div v-else>
          <el-button class="form-button">重新预览</el-button>
          <span class="form-checknum" v-if="form.resource === '全体推送'">{{this.currentTagCount}}</span>
          <span class="form-checknum" v-else>{{successNum}}</span>人
          <span class="form-vipnum">标签会员数： {{tagNum}} 人</span>
          <span>其中，关注公众号： {{followNum}} 人</span>
          <span>已推送4次会员： {{fourthNum}} 人</span>
        </div>
      </el-form-item>
      <el-form-item label="执行推送任务">
        <span class="gray"><span class="star-red">*</span>填写邮箱后，勾选免责说明，确认进行推送，推送完成后将发送邮件通知至指定邮箱。</span>
        <el-checkbox v-model="checked">本次推送为t测试组商户123自发行为，发放内容请遵守国家相关法律规定..</el-checkbox>
      </el-form-item>
      <el-form-item label="指定接收邮箱">
        <el-input v-model="email" type="email" placeholder="请输入您要接收任务信息的邮箱"></el-input>
      </el-form-item>
      <el-form-item class="submit-dialog">
        <el-button class="form-button" @click="handleConfirmPush" :style="isBtnCheckd" :disabled="!checked">确认推送</el-button>
        <el-dialog title="推送确认" :visible.sync="submitDialogVisible" width="30%" center>
          <div>
            <img :src="currentImgUrl">
            <p>向{{currentTagCount}}名粉丝推送</p>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="onSubmit">确 定</el-button>
          </span>
        </el-dialog>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: '',
        type: [],
        resource: '全体推送',
      },
      materList: [],
      email: '',
      checked: false,
      dialogVisible: false,
      centerDialogVisible: false,
      submitDialogVisible: false,
      currentImgUrl: '',
      currentImgId: '',
      isCount: false,
      currentTagCount: 0,
      tagNum: 0,
      followNum: 0,
      fourthNum: 0,
      successNum: 0,
      currentTagIndex: 0,
      tagIds: [],
      tagIdsSave: [],
      tagList: [],
      tagIdsList: [],
      chooseTag: [],
    }
  },
  created() {
    if (localStorage && localStorage.materList) {
      this.materList = JSON.parse(localStorage.materList)
    }
    this.getTagList()
  },
  computed: {
    isBtnCheckd() {
      return this.checked ? 'opacity: 1' : 'opacity: .65'
    },
  },
  methods: {
    getAll() {
      this.isCount = true
      this.getTagCountAll()
    },
    getsingele() {
      this.currentTagCount = 0
    },
    handleConfirmPush() {
      // 校验
      if (!this.form.name) {
        return this.$message({
          message: '请输入推送标题',
          type: 'warning',
        })
      }
      if (!this.currentImgUrl) {
        return this.$message({
          message: '请选择推送素材',
          type: 'warning',
        })
      }
      if (!this.currentImgUrl) {
        return this.$message({
          message: '请选择推送素材',
          type: 'warning',
        })
      }
      var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/

      if (!this.email) {
        return this.$message({
          message: '请选择邮箱',
          type: 'warning',
        })
      } else if (!reg.test(this.email)) {
        return this.$message({
          message: '邮箱格式不正确',
          type: 'warning',
        })
      }
      this.submitDialogVisible = true
    },
    handleClickTag(item, index) {
      item.isActive = !item.isActive
      this.currentTagIndex = index
      this.isCount = true

      if (item.isActive) {
        this.tagIds.push(item.tagId)
        this.tagIdsSave.push({
          tagId: item.tagId,
          name: item.name,
        })
      } else {
        this.tagIds.forEach((tag, index) => {
          if (tag === item.tagId) {
            this.tagIds.splice(index, 1)
          }
        })
        this.tagIdsSave.forEach((tag, index) => {
          if (tag.tagId === item.tagId) {
            this.tagIdsSave.splice(index, 1)
          }
        })
      }
      this.tagList = this.tagList.splice(0)
      this.getTagCount()
      this.getViewCount()
    },
    handleImg(id, url) {
      this.currentImgUrl = url
      this.currentImgId = id
      this.centerDialogVisible = false
    },
    onSubmit() {
      if (this.currentTagCount < 1) {
        return this.$message({
          message: '推送成功人数>1时才可推送',
          type: 'warning',
        })
      }
      this.submitDialogVisible = false
      this.save()
    },
    save() {
      this.axios
        .post('http://testcenter.bigaka.net/crm/back/wechat/msg-mass/save', {
          mediaId: this.currentImgId,
          msgId: '',
          scope: this.form.resource === '全体推送' ? '0' : '1',
          tagArrays: this.form.resource === '全体推送' ? this.tagList : this.tagIdsSave,
          title: this.form.name,
          tmplId: '',
          type: 1,
        })
        .then(res => {
          if (res && res.data && res.data.code === 0) {
            this.$message({
              message: res.data.message,
              type: 'success',
            })
            this.$router.push({ path: '/home/marketing' })
          }
        })
    },
    // tagcount
    getTagCount() {
      this.axios
        .post('http://testcenter.bigaka.net/crm/back/wechat/msg-mass/tag-count', {
          tagIds: this.tagIds,
          type: '1',
        })
        .then(res => {
          this.isCount = false
          if (res.data) this.currentTagCount = res.data.result
        })
    },
    // all
    getTagCountAll() {
      this.axios
        .post('http://testcenter.bigaka.net/crm/back/wechat/msg-mass/tag-count', {
          tagIds: this.tagIdsList,
          type: '1',
        })
        .then(res => {
          this.isCount = false
          if (res.data) this.currentTagCount = res.data.result
        })
    },
    // 初始化  taglist
    getTagList() {
      this.axios.post('http://testcenter.bigaka.net/crm/back/tag/customer-cache-list').then(res => {
        this.tagList = res.data
        this.tagList.forEach(item => {
          this.tagIdsList.push(item.tagId)
        })
        this.isCount = true
        this.getTagCountAll()
      })
    },
    // 图文推送预览人数
    getViewCount() {
      this.isCount = true
      this.axios
        .post('http://testcenter.bigaka.net/crm/back/wechat/msg-mass/pre_view_count', {
          tagIds: this.tagIds,
        })
        .then(res => {
          if (res && res.data && res.data.code === 0) {
            if (res.data.result) {
              this.isCount = false
              const { tagNum, followNum, fourthNum } = res.data.result
              this.tagNum = tagNum
              this.followNum = followNum
              this.fourthNum = fourthNum
              this.successNum = this.followNum - this.fourthNum
            }
          }
        })
    },
  },
}
</script>
<style lang="stylus" scoped>
.box-mask
  position absolute
  width 100%
  height 100%
  background-color rgba(0, 0, 0, 0.4)
  text-align center
  font-size 16px
  color #fff
  top 0
  left 0
  pointer-event none
  opacity 0
.box-mask:hover
  opacity 1
.active
  background #0096FF
  color #fff
.step-info
  margin-top 25px
  padding-bottom 20px
  .submit-dialog
    >>>.el-dialog__header
      padding 15px
      border-bottom 1px solid #e5e5e5
      .el-dialog__title
        text-align center
        font-size 18px
        color #73879C
  .el-input
    width 50%
  .step-choose
    margin-top 60px
    .add-material
      width 265px
      height 229px
      border 2px solid #e3e4e9
      color #e3e4e9
      text-align center
      position relative
      cursor pointer
      .add-title
        color #a4a4a4
        .add-plus
          font-size 91px
          font-weight 100
          margin 18px 0
          color #e3e4e9
          text-align center
    >>>.el-dialog__header
      padding 4px 20px 0px
    >>>.el-dialog--center
      text-align left
    >>>.el-dialog__body
      padding 0
    >>>.el-dialog__title
      line-height 24px
      font-size 15px
      color #73879C
    >>>.el-dialog--center .el-dialog__footer
      text-align center
    .add-container
      padding 20px
      .add-content
        border 1px solid #ececec
        margin-bottom 35px
        width 263px
        height 236px
        position relative
        img
          cursor pointer
          width 100%
          height 100%
    .add-line
      border-top 1px solid #e5e5e5
  .form-tags
    background-color #eee
    height 100%
    width 100%
    border-radius 4px
    .tag-info
      min-width 80px
      height 25px
      line-height 25px
      text-align center
      margin 15px
      cursor pointer
      border-radius 12px
  .form-button
    width 138px
    height 37px
    border none
    background-color rgba(51, 122, 183, 1)
    border-radius 3px
    color #fff
    font-family 'Arial Normal', 'Arial'
    font-weight 400
    font-style normal
    font-size 13px
    margin-right 15px
  .form-checknum
    color blue
    font-size 32px
  .form-vipnum
    border-left 1px solid red
    height 50px
    display inline-block
    padding-left 26px
    margin-left 26px
</style>
