<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";
import config from "@/config";
const STATE_OK = 200;

export default {
  data() {
    return {
      wechatAuth: "",
      msgAuth: "",
      dialogVisible: false,
      dialogTemp: false
    };
  },
  created() {
    this.getAuth();
  },
  methods: {
    handleToOpen() {
      // this.dialogVisible = false;
      window.open(platformCtx + '/message/marketingSms/list.do')
    },
    async getAuth() {
      await this.axios.get(api.getAuthState).then(res => {
        const { data } = res;
        if (data) {
          this.wechatAuth = data.authState;
          this.msgAuth = 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("未授权");
        window.open(ctx + "/back/wechat/go-author");
      }
    },
    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>
