<template>
  <div>
    <el-row class="marketing-button" style="display:flex;">
      <el-col :span="14" class="button-left">
        <div class="left-title button-left" style="flex:2">
          <div class="left-title-name fl">
            <span>
              <img src="@/assets/images/wechat.png">
            </span>
            <span class="title">微信触达域-公众号</span>
            <span class="star-red">*</span>
            <a href="#" class="gray">点击新建群发</a>
          </div>
          <div class="left-title-message fr" style="padding-right: 10px;">
            <span v-if="this.wechatAuth === 1">
              <img src="@/assets/images/auth-icon.png"> 已授权
            </span>
            <span v-if="this.wechatAuth === 0">
              <img src="@/assets/images/unauth-icon.png"> 未授权
            </span>
          </div>
        </div>
        <div class="left-icon">
          <div class="icon-left fl">
            <span class="icon-wechat" @click="handleAddMaterial">
              <img src="@/assets/images/picture.png">
            </span>
            <p class="title-center icon-wechat-msg">图文素材消息</p>
          </div>
          <div class="icon-right">
            <span class="icon-wechat" @click="handleAddTemp">
              <img src="@/assets/images/temp.png">
            </span>
            <p class="icon-wechat-msg title-center">营销模板消息</p>
          </div> 
        </div>
      </el-col>
      <el-col :span="10" class="button-right">
        <div class="left-title button-right" style="flex:1">
          <div class="left-title-name fl">
            <span>
              <img src="@/assets/images/message.png">
            </span>
            <span class="title">移动触达域-短信</span>
            <span class="star-red">*</span>
            <a href="#" class="gray">点击新建群发</a>
          </div>
          <div class="left-title-message fr" style="padding-right: 10px;">
            <span v-if="this.msgAuth === 0">
              <img src="@/assets/images/unauth-icon.png"> 未开通
            </span>
            <span v-if="this.msgAuth === 1">
              <img src="@/assets/images/auth-icon.png"> 已开通
            </span>
          </div>
        </div>
        <div class="right-marketing">
          <div>
            <span class="icon-wechat">
              <img src="@/assets/images/message.png" @click="handleAddMessage">
            </span>
            <p class="icon-wechat-msg title-center">短信营销消息</p>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="marketing-white"></div>
      </el-col>
    </el-row>
    <el-dialog
      title="短信未开通授权"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <img src="@/assets/images/auth-tip-icon.png" style="width:20px">
      <span>短信未开通请先开通授权</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleToOpen">前往开通</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="系统提示"
      :visible.sync="dialogTemp"
      width="500px"
      :before-close="handleClose">
      <div>
        <div style="float: left; width: 30px;"><i class="el-icon-warning" style="font-size:20px"></i></div>
        <div style="width: 400px;float: left;">
          <p>亲爱的舞象云用户，您好：</p>
          <p style="text-indent:25px;margin-top: 20px;">近期，在使用微信营销推送功能时，有部分用户反馈出现推送失败的情况。在舞象云团队紧急分析原因后，暂时定位在调用微信推送接口时，微信反馈接口数量调用达到上限，也就是一次操作数量及频次不能过多。在后续使用时，建议每次推送会员限制在1万以内，并尽量分开时段，不同时发起多次推送。给您带来的困扰，深表抱歉，我们将尽快确定解决方案，完成功能优化。</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogTemp = false" style="margin:15px 0">确 定</el-button>
        <el-button @click="dialogTemp = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import api from '@/tool/api'
const STATE_OK = 200

export default {
  data() {
    return {
      wechatAuth: '',
      msgAuth:'',
      dialogVisible:false,
      dialogTemp:false
    }
  },
  created() {
    this.getAuth()
  },
	methods: {
    handleToOpen(){
      this.dialogVisible = false
    },
    async getAuth() {
      await this.axios.get(api.getAuthState).then(res=> {
          if(res&&res.status===STATE_OK){
              this.wechatAuth = res.data.authState
              this.msgAuth = res.data.msgAuthState
          }
			})
    },
		handleAddMaterial() {
      if(this.wechatAuth===1){
        this.$router.push('addmarketing')
      }else{
       console.log('未授权')
      }

		},
		handleAddTemp() {
       if(this.wechatAuth===1){
         this.dialogTemp = true
         window.location.href = `http://testcenter.bigaka.net/crm/back/wechat/msg-mass/create?type=3`
      }else{
        console.log('未授权')
      }
    },
		handleAddMessage() {
      if(this.msgAuth===1){
        // this.$router.push('addmarketing')
      }else{
        this.dialogVisible = true
      }
    },
    handleClose(done) {
       this.dialogVisible = false
    }
	},
}
</script>
<style lang='stylus' scoped>
.marketing-button
  margin 8px 0
  height 182px
  .button-left, .button-right
    padding-left 5px
    background-color #fff
    height 180px
    .left-title
      height 50px
      line-height 50px
      .left-title-name
        img
          width 30px
          height 30px
    .left-icon
      height 140px
      .icon-left
        width 20%
      .icon-right, .icon-left
        padding 20px 0
        text-align center
        .icon-wechat
          font-size 40px
        .icon-wechat-msg
          font-size 14px
          padding-top 10px
  .button-right
    margin-left 10px
    .right-marketing
      padding 20px 0
      text-align center
      img
        width 64px
        height 64px
      .icon-wechat
        font-size 40px
      .icon-wechat-msg
        font-size 14px
        padding-top 10px
.marketing-white
  background-color #fff
  height 27px
</style>
