<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="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">
          <el-button type="text" @click="centerDialogVisible = true" class="add-title">
            <p><i class="el-icon-plus add-plus"></i></p>
            添加微信素材
          </el-button>
        </div>
        <el-dialog title="微信消息素材" :visible.sync="centerDialogVisible" width="80%" 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 :span="8">
              <div class="add-content">1</div>
            </el-col>
            <el-col :span="8">
              <div class="add-content">2</div>
            </el-col>
            <el-col :span="8">
              <div class="add-content">3</div>
            </el-col>
          </el-row>
          <!-- <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload> -->
        </el-dialog>
      </el-form-item>
      <el-form-item label="选择推送范围">
        <el-radio-group v-model="form.resource">
          <el-radio label="全体推送"></el-radio>
          <el-radio label="精准推送"></el-radio>
        </el-radio-group>
        <div v-if="form.resource === '精准推送'">
          <div class="form-tags">
            <span class="el-tag tag-info">588</span>
            <span class="el-tag tag-info">实际</span>
            <span class="el-tag tag-info">588</span>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="预览推送数量">
        <span class="gray"><span class="star-red">*</span>实际推送成功数量将略有偏差，选中多个标签为同时满足选中标签群体的会员。推送人数必须大于1人。</span>
        <div>
          <el-button class="form-button">选中标签，预览</el-button>
          <span>统计中，请稍候</span>
        </div>
        <div>
          <el-button class="form-button">重新预览</el-button>
          <span class="form-checknum">188</span>人
          <span class="form-vipnum">标签会员数： 188 人</span>
          <span>其中，关注公众号： 188 人</span>
          <span>已推送4次会员： 188 人</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="input" type="email" placeholder="请输入您要接收任务信息的邮箱"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="form-button" @click="onSubmit">确认推送</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// import Bus from '@/common/bus'

export default {
  data () {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      input: '',
      checked: true,
      dialogImageUrl: '',
      dialogVisible: false,
      centerDialogVisible: false,
      imageUrl: ''
    }
  },
  created () {
    this.getViewCount()
    // Bus.on('test1', msg => {
    //   console.log('msg', msg)
    // })
  },
  mounted () {
    // this.getAddMaterial()
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    getViewCount () {
      this.axios
        .post('http://rap2api.taobao.org/app/mock/115626/pre_view_count', {
          tagIds: '1',
          id: 1,
          parentId: 1,
          type: 2
        })
        .then(res => {
          if (res && res.data && res.data.code === 0) {
            console.log(res.data.result)
            // this.dataList = res.data.result.result
          }
        })
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style lang="stylus" scoped>
.step-info
  margin-top 25px
  padding-bottom 20px
  .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
      .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
    .add-container
      margin 0
      padding 0 20px 20px 20px
      .add-content
        background-color pink
        padding 0 6px
        border 1px solid #ececec
        position relative
        top 30px
        margin-bottom 35px
    .add-line
      border-top 1px solid #e5e5e5
  .form-tags
    background-color #eee
    height 260px
    width 80%
    border-radius 4px
    .tag-info
      width 80px
      height 25px
      line-height 25px
      text-align center
      margin 15px
  .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>
