<template>
  <div class="main">
    <van-loading size="80px"  color="#1989fa" class="ld" v-if="overlayShow">加载中...</van-loading>
    <van-overlay :show="overlayShow" />
    <div class="main-manInfos">
      <div class="manInfo-logos">
        <img class="logos-logo" :src="test.manInfo.logoUrl" />
      </div>
      <div class="manInfo-name" @click="manInfoClick">我的专柜：{{test.manInfo.barName}}</div>
      <div class="manInfo-switch" @click="switchBarClick" v-if="flag == 1">
        <div class="switch-text">切换</div>
        <img class="switch-icon" :src="test.manInfo.icon['1']" />
      </div>
    </div>
    <div class="main-tips">
      <div class="tips-tip">店铺粉丝 {{test.barInfo.fans}}</div>
      <div class="tips-tip">个人粉丝 {{test.barInfo.personalFans}}</div>
      <div class="tips-tip">
        昨日新增
        <span>{{test.barInfo.newFans}}</span>
        <span>/</span>
        <span>{{test.barInfo.allNewFans}}</span>
      </div>
    </div>
    <div class="main-menus">
      <div class="menus-row">
        <div class="menu" @click="menu02Click" :style="flag == 1? '' : 'margin-right:10px;' ">
          <img class="menu-logo" :src="test.menuInfo.icon['2']" />
          <div class="menu-text">任务列表</div>
        </div>
        <div class="menu margin1" @click="menu05Click" v-if="flag == 1">
          <img class="menu-logo" :src="test.menuInfo.icon['5']" />
          <div class="menu-text">活动模版</div>
        </div>
        <div class="menu" @click="menu03Click">
          <img class="menu-logo" :src="test.menuInfo.icon['3']" />
          <div class="menu-text">活动列表</div>
        </div>
      </div>
      <div class="menus-row">
        <div class="menu" @click="menu04Click" :style="flag == 1? '' : 'margin-right:10px;' ">
          <img class="menu-logo" :src="test.menuInfo.icon['4']" />
          <div class="menu-text">专柜维护</div>
        </div>
        <div class="menu margin1" @click="handleCoupon" v-if="flag == 1">
          <img class="menu-logo" :src="test.menuInfo.icon['1']" />
          <div class="menu-text">优惠券管理</div>
        </div>
        <div class="menu" @click="menu06Click">
          <img class="menu-logo" :src="test.menuInfo.icon['6']" />
          <div class="menu-text">商品管理</div>
        </div>
      </div>
    </div>
    <div class="main-actives">
      <div class="actives-banners">
        <div class="actives-banner-title">现有开展活动</div>
      </div>
      <p v-if="currentActives.length === 0" style="font-size: 16px;">当前暂无活动</p>
      <template v-for="(item, index) in currentActives">
        <div
          v-if="index < active_limit"
          :key="item.id"
          class="actives-main"
          @click="toDetail(item.id, item.activityType)"
        >
          <div class="active-logos">
            <!-- <img class="active-logo" :src="test.activeInfo.icon['1']" /> -->
            <img class="active-logo" :src="item.logo" />
          </div>
          <div class="active-infos">
            <div class="active-title">{{item.activityName}}</div>
            <div class="active-dsc">{{item.des}}</div>
          </div>
        </div>
      </template>
      <div v-if="currentActives.length > 3 && !finished" class="actives-mores" @click="handleMore">
        <div class="mores-title">查看更多</div>
        <img class="mores-icon" :src="test.cache.arrowRightDark" />
      </div>
    </div>
    <div class="main-menuBar">
      <div class="menuBar-menu" @click="menuBarClick('MainSale')">
        <img class="menuBar-icon" :src="test.menuBarInfo.icon.now['1']" />
        <div class="menuBar-title menuBar-title-ac">活动</div>
      </div>
      <div class="menuBar-menu" @click="menuCase()">
        <img class="menuBar-icon" :src="test.menuBarInfo.icon.now['2']" />
        <div class="menuBar-title">案例</div>
      </div>
      <div class="menuBar-menu" @click="menuProfit()">
        <img class="menuBar-icon" :src="test.menuBarInfo.icon.now['3']" />
        <div class="menuBar-title">收益</div>
      </div>
      <div class="menuBar-menu" @click="menuTask()">
        <img class="menuBar-icon" :src="test.menuBarInfo.icon.now['4']" />
        <div class="menuBar-title">任务</div>
      </div>
      <div class="menuBar-menu" @click="menuBarClick('Me')">
        <img class="menuBar-icon" :src="test.menuBarInfo.icon.now['5']" />
        <div class="menuBar-title">我的</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {
  getStoreDetail,
  getMemberListByCode,
  getDirector
} from "@/api/sidebar/voucher";
import { configWx, getUserInfo } from "@/utils/aCommon";
import { getUserInfoByUserId } from "@/api/sidebar/voucher";
import { getCurrentActive } from "@/api/active";
import { log } from "util";
export default {
  name: "discountIndex",
  data() {
    return {
      finished: false,
      active_limit: 3,
      currentActives: [],
      test: {
        cache: {
          imgUrl: "/hi.jpg",
          actDsc: "由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。",
          nowMenuBar: "1",
          arrowRightDark: "/mainSale/icon-arrow-right-dark.png"
        },
        manInfo: {
          bk_logoUrl: "https://ezhq.xyz/img/main/logo_sona.jpg",
          logoUrl: "",
          barFrom: "",
          barName: "",
          icon: {
            "1": "/mainSale/icon-arrow-right-light.png"
          }
        },
        barInfo: {
          fans: "",
          personalFans: "",
          newFans: "",
          allNewFans: ""
        },
        menuInfo: {
          icon: {
            "1": "/mainSale/icon-menu-01.png",
            "2": "/mainSale/icon-menu-02.png",
            "3": "/mainSale/icon-menu-03.png",
            "4": "/mainSale/icon-menu-04.png",
            "5": "/mainSale/icon-menu-05.png",
            "6": "/mainSale/icon-menu-06.png"
          }
        },
        activeInfo: {
          icon: {
            "0": "/mainSale/icon-active-title.png",
            "1": "/mainSale/icon-active-1.png",
            "2": "/mainSale/icon-active-2.png",
            "3": "/mainSale/icon-active-3.png"
          }
        },
        menuBarInfo: {
          list: {
            main: [
              {
                name: "",
                iconUaUrl: "",
                iconAcUrl: ""
              }
            ]
          },
          icon: {
            now: {
              "1": "",
              "2": "",
              "3": "",
              "4": "",
              "5": ""
            },
            ua: {
              "1": "/mainSale/icon-menuBar-1-ua.png",
              "2": "/mainSale/icon-menuBar-2-ua.png",
              "3": "/mainSale/icon-menuBar-3-ua.png",
              "4": "/mainSale/icon-menuBar-4-ua.png",
              "5": "/mainSale/icon-menuBar-5-ua.png"
            },
            ac: {
              "1": "/mainSale/icon-menuBar-1-ac.png",
              "2": "/mainSale/icon-menuBar-2-ac.png",
              "3": "/mainSale/icon-menuBar-3-ac.png",
              "4": "/mainSale/icon-menuBar-4-ac.png",
              "5": "/mainSale/icon-menuBar-5-ac.png"
            }
          }
        }
      },
      dis: {},
      oyStallCode: "",
      userId: "",
      zcache: {
        nowUrl: "",
        preAuthCodeUrl: "",
        code: "",
        userId: "",
        userInfoResOld: "",
        userInfoResNew: ""
      },
      flag: 1,
      overlayShow: false,
      memberList: []
    };
  },
  created() {
    this.checkNowMenuBar()
    if (sessionStorage.getItem("userId")) {
      if (sessionStorage.getItem("avatar")) {
        this.test.manInfo.logoUrl = sessionStorage.getItem("avatar");
      }
      if (sessionStorage.getItem("personalFan")) {
        this.test.barInfo.personalFans = sessionStorage.getItem("personalFan");
      }
      if (sessionStorage.getItem("barName")) {
        this.test.manInfo.barName = sessionStorage.getItem("barName");
      }
      if (sessionStorage.getItem("allFans")) {
        this.test.barInfo.fans = sessionStorage.getItem("allFans");
      }
      if (sessionStorage.getItem("newFans")) {
        this.test.barInfo.newFans = sessionStorage.getItem("newFans");
      }
      if (sessionStorage.getItem("allNewFans")) {
        this.test.barInfo.allNewFans = sessionStorage.getItem("allNewFans");
      }
      if (sessionStorage.getItem("role")) {
        this.flag = sessionStorage.getItem("role");
      }
    } else {
      this.zReadyUserId()
      this.zTestGetNowUrlInfo()
    }
    this.GET_CurrentActive()
  },
  methods: {
    // 跳转到 活动详情
    toDetail(active_id, type) {
      this.$router.push({
        path: "/activeDetail",
        query: {
          id: active_id,
          active_type: type
        }
      });
    },
    handleMore() {
      this.active_limit += 3;
      if (this.active_limit == this.currentActives.length) {
        this.finished = true;
      }
    },
    // 获取当前 活动
    GET_CurrentActive() {
      getCurrentActive().then(res => {
        this.currentActives = res.data || [];
      })
    },
    // 获取用户角色
    getDirector(userId) {
      getDirector({ userId }).then(res => {
        if (res.data == true) {
          this.flag = 1;
        } else {
          this.flag = 2;
        }
        sessionStorage.setItem("role", this.flag);
      });
    },
    // 获取用户头像信息
    getUserInfo() {
      let headerData = {
        agentId: "1000033",
        corpId: "ww4df265003b43fa0d"
      }
      return new Promise((resolve, reject) => {
        axios({
        url:  "http://139.155.48.151:8085/workWx/auth/user/get?userId=" + this.zcache.userId,
        method: "get",
        headers: headerData
      })
        .then(res => {      
          if(res.data != null) {
            sessionStorage.setItem("avatar", res.data.data.avatar)
            resolve(res.data.data.avatar)
          }else {
            resolve('')
          }         
        })
        .catch(err => {
          reject(err)
        });
      })
      
    },
    // 获取个人粉丝
    getFans() {
      let headerData = {
        agentId: "1000033",
        corpId: "ww4df265003b43fa0d"
      }
      return new Promise((resolve, reject) => {
        axios({
          url:
            "http://139.155.48.151:8085/workWx/auth/contact/listExternalContacts?userId=" + this.zcache.userId,
            method: "get",
            headers: headerData
           })
          .then(res => {
            console.log(res);
            
            if(res.data.data != null) {
              if(res.data != []) {
                sessionStorage.setItem("personalFan", res.data.data.length)
                resolve(res.data.data.length)  
              }else {
                sessionStorage.setItem("personalFan", '')
                resolve('')
              }
                          
            }else {
              console.log('zheli');              
              if(res.data.errorCode == "84061") {             
                sessionStorage.setItem("personalFan", 0)
                resolve(0)
              }else {   
                console.log('?');                           
                sessionStorage.setItem("personalFan", '')
                resolve('')
              }
            }
          })
          .catch(err => {
            reject(err)
          })
      })
      
    },
    // 获取店铺所有粉丝
    getAllFans() {
      let headerData = {
        agentId: "1000033",
        corpId: "ww4df265003b43fa0d"
      }    
      return new Promise((resolve, reject) => {
        axios({
          url: "http://139.155.48.151:8085/workWx/auth/contact/getCustomerInfoByOyStallCode?oyStallCode=" + this.oyStallCode,
          method: "get",
          headers: headerData
        })
        .then(res => {
          let newList = []
          res.data.data.forEach(item => {
            if(item != null) {
              newList.push(item)
            }
          })
          sessionStorage.setItem("allFans", newList.length)
          resolve(newList.length)
        })
        .catch(err => {
          reject(err)
        })
      })
      
    },
    getAllNewFans() {
      let params = {
        oyStallCode: this.oyStallCode
      }
        getMemberListByCode(params).then(res => {
          this.memberList = res.data
          this.getAllInfo(res.data)
        }).catch(err => {
          console.log(err);          
        })      
    },
    getAddFans(flag, userId) {
      let JsonStr = {}
      if (flag == 1) {
        JsonStr.userid = [userId];
      } else {                  
        JsonStr.userid = userId
      }
      let timeNow = Math.round(new Date() / 1000);
      JsonStr.start_time = timeNow - 24 * 60 * 60;
      JsonStr.end_time = timeNow;
      return new Promise((resolve, reject) => {
        axios({
        url:
          "http://139.155.48.151:8085/workWx/auth/contact/getUserBehaviorData",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          agentId: "1000033",
          corpId: "ww4df265003b43fa0d"
        },
        data: JsonStr
      }).then(res => {
          let data = JSON.parse(res.data.data);
          if (flag == 1) {
            // 获取个人新增粉丝
            if(data != null) {
              let newFans = data.behavior_data[0].new_contact_cnt + data.behavior_data[1].new_contact_cnt;
              sessionStorage.setItem("newFans", newFans);
              resolve(newFans)
            }else {
              sessionStorage.setItem("newFans", '')
              resolve('')
            } 
          } else {
             if(data != null) {
              let allNewFans = data.behavior_data[0].new_contact_cnt + data.behavior_data[1].new_contact_cnt;
              sessionStorage.setItem("allNewFans", allNewFans);
              resolve(allNewFans)
            }else {
              sessionStorage.setItem("allNewFans", '');
              resolve('')
            }
          }
        })
        .catch(err => {
          reject(err)
        })
      })
      
    },
    // 获取店铺信息
    getStore() {
      let params = {
        oyStallCode: this.oyStallCode
      }
      return new Promise((resolve, reject) => {
        getStoreDetail(params).then(res => {
          if (res.data.stallInfo != null) {
            sessionStorage.setItem("barName", res.data.stallInfo.name)
            resolve(res.data.stallInfo.name)
          }else {
            resolve('')
          }
        }).catch(err => {
          reject(err)
        })
      })     
    },
    getAllInfo(list) {
      console.log('getAllInfo');     
      Promise.all([this.getUserInfo(), this.getFans(), this.getAllFans(),this.getAddFans(1,this.zcache.userId),this.getAddFans(2,list), this.getStore()]).then(res => {
        console.log('进来了');        
        console.log(res,'promise');
        this.test.manInfo.logoUrl = res[0]
        this.test.barInfo.personalFans = res[1]
        this.test.barInfo.fans = res[2]
        this.test.barInfo.newFans = res[3]
        this.test.barInfo.allNewFans = res[4]
        this.test.manInfo.barName = res[5]
        this.overlayShow = false   
      })
    },
    checkNowMenuBar() {
      let inData = "1";
      this.test.menuBarInfo.icon.now = this.test.menuBarInfo.icon.ua;
      this.test.menuBarInfo.icon.now[inData] = this.test.menuBarInfo.icon.ac[
        inData
      ];
    },
    manInfoClick() {
      this.$router.push("counterInfo");
    },
    switchBarClick() {
      this.$router.push({
        path: "ChangeCounter",
        query: {
          userId: this.zcache.userId
        }
      });
    },
    testButtonClick() {},
    menu01Click() {},
    menu02Click() {
      this.$router.push("Task");
    },
    menu03Click() {
      this.$router.push("activeList");
    },
    menu04Click() {
      this.$router.push("counterInfo");
    },
    menu05Click() {
      this.$router.push("ActTemplate");
    },
    menu06Click() {
      this.$router.push("goodManage");
    },
    handleCoupon() {
      this.$router.push("coupon");
    },
    menuBarClick(inData) {
      this.$router.push(inData);
    },
    menuCase() {
      this.$router.push({ path: "/case" })
    },
    menuProfit() {
      this.$router.push({ path: "/profitList" })
    },
    menuTask() {
      this.$router.push({ path: "/taskList" })
    },
    // 获取code
    zReadyUserId() {
      if (this.$route.query.code === undefined) {
        // alert('没code')
        this.zTestPreAuthCode();
      } else {
        // alert('有code')
        this.overlayShow = true
        this.zTestGetNowUrlInfo();
        this.zTestGetUserInfoByOldToken();
      }
    },
    // 测试-获取当前Url信息
    zTestGetNowUrlInfo() {
      this.zcache.nowUrl = JSON.stringify(this.$route.query)
      this.zcache.code = String(this.$route.query.code)
      this.url = this.zcache.nowUrl
    },
    zTestPreAuthCode() {
      console.log('获取code')     
      this.overlayShow = true
      // alert('获取code')
      const basicInfo = {
        head: "https://open.weixin.qq.com/connect/oauth2/authorize?",
        // appId: "wwd1cdbca7b8b2b6c4",
        appId: "ww4df265003b43fa0d",
        redirectUrI: encodeURIComponent("oysales.oywanhao.com:8087"),
        responseType: "code",
        scope: "snsapi_base",
        state: "ztest",
        tail: "#wechat_redirect"
      }
      let url =
        basicInfo.head +
        "appid=" +
        basicInfo.appId +
        "&redirect_uri=" +
        basicInfo.redirectUrI +
        "&response_type=" +
        basicInfo.responseType +
        "&scope=" +
        basicInfo.scope +
        "&state=" +
        basicInfo.state +
        basicInfo.tail;
      this.zcache.preAuthCodeUrl = url;
      window.location.href = url;
    },
    // 获取userId
    zTestGetUserInfoByOldToken() {
      let postData = {
        code: this.zcache.code
      };
      let headerData = {
        agentId: "1000033",
        corpId: "ww4df265003b43fa0d"
      };
      this.zcache.userInfoResOld = "PostData:" + JSON.stringify(postData);
      axios({
        url: "http://139.155.48.151:8085/workWx/auth/oauth2/getUserInfo?code=" + this.zcache.code,
        method: "post",
        headers: headerData
      })
        .then(res => {
          sessionStorage.setItem("userId", String(res.data.data.userId))
          this.zcache.userId = String(res.data.data.userId);
          this.getUserFromId(this.zcache.userId);
          // this.getUserInfo();
          this.getDirector(res.data.data.userId);
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取店铺code
    getUserFromId(id) {   
      console.log(1);
         
      let userName = id;
      getUserInfoByUserId({ userName }).then(res => {       
        sessionStorage.setItem("oyStallCode", res.data[0].oyStallCode)
        this.oyStallCode = res.data[0].oyStallCode;     
        // this.getAllInfo()
        this.getAllNewFans()
      })
      .catch(err => {})
    }
  }
};
</script>

<style scoped>
.ld >>> .van-loading__text {
  color: #fff;
}
.ld {
  z-index: 1000;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);  
}
.testCube {
  width: 60px;
  height: 10px;
  background-color: lightcoral;
  border: 1px solid white;
}

.main {
  background-color: rgb(237, 239, 243);
  width: 100%;
  height: auto;
  padding-bottom: 94px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  overflow: auto;
}

.main-manInfos {
  width: 100%;
  height: 72px;
  background-color: #4377bc;
  padding: 0px 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.manInfo-logos {
  width: 48px;
  height: 48px;
  /*border: 1px solid white;*/

  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

.logos-logo {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;

  border: 2px solid white;
}

.manInfo-name {
  width: 100%;
  height: 18px;
  padding: 0px 12px;
  margin-right: 60px;

  color: white;

  font-size: 14px;
  line-height: 16px;
  font-weight: bold;
}

.manInfo-switch {
  width: 100px;
  height: 18px;

  font-size: 14px;
  line-height: 18px;
  font-weight: bold;

  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.switch-icon {
  width: 5px;
  height: 8px;
}

.switch-text {
  color: white;

  padding-right: 4px;

  font-size: 14px;
  line-height: 16px;
  font-weight: normal;
}

.main-tips {
  width: 100%;
  height: 48px;
  background-color: #f8f8f8;

  padding: 0px 16px;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.tips-tip {
  /*border: 1px solid darkorange;*/
  width: 30%;
  height: 16px;

  color: #4377bc;
  font-size: 12px;
  font-weight: normal;
  line-height: 16px;
  text-align: center;
}

.main-menus {
  /*border: 1px solid lightseagreen;*/
  width: 100%;
  height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.menus-row {
  width: 100%;
  height: 120px;
  padding: 12px 16px 0px 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.menu {
  width: 108px;
  height: 108px;
  background-color: #f8f8f8;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.menu-logo {
  width: 48px;
  height: 48px;

  object-fit: cover;
}

.menu-text {
  font-size: 14px;
  font-weight: bold;
  color: #2d476a;
}

.main-actives {
  width: 100%;
  margin-top: 36px;
  padding: 0px 12px;
  background-color: white;

  display: flex;
  flex-direction: column;
  justify-content: start;
}

.actives-banners {
  border-bottom: 1px solid #eeeeee;
  width: 100%;
  height: 25px;

  display: flex;
  flex-direction: row;
  justify-content: center;
}

.actives-banner-small {
  width: 220px;
  height: 30px;

  object-fit: cover;

  position: relative;
  bottom: 7px;
}

.actives-banner-title {
  background: url(/mainSale/icon-active-title.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  width: 220px;
  height: 30px;

  font-size: 16px;
  line-height: 16px;
  color: #2d476a;
  text-align: center;

  position: relative;
  bottom: 7px;
}

.actives-banner-main {
  width: 148px;
  height: 24px;
  border-radius: 40px;
  margin: 0px 4px;

  font-size: 16px;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
  color: #2d476a;

  background: linear-gradient(#ffffff, 50%, #e4f9ff);
  box-shadow: 0px 1px 1px 0px #96cedc;

  position: relative;
  bottom: 12px;
}

.actives-main {
  border-bottom: 1px solid #eeeeee;
  width: 100%;
  height: 105px;
  padding: 12px 0px;

  display: flex;
  flex-direction: row;
  justify-content: start;
}

.active-logos {
  background-color: #f8f8f8;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.active-logo {
  width: 56px;
  height: 56px;
}

.active-infos {
  width: 100%;
  height: 80px;
  padding-left: 12px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.active-title {
  height: 16px;
  font-size: 14px;
  font-weight: bold;
  line-height: 14px;
  margin-bottom: 8px;
}

.active-dsc {
  height: 36px;
  width: 100%;
  font-size: 12px;
  font-weight: normal;
}

.actives-mores {
  width: 100%;
  height: 40px;
  /*border: 1px solid red;*/

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.mores-title {
  width: auto;
  height: 14px;

  margin-right: 4px;

  font-size: 12px;
  font-weight: normal;
  line-height: 14px;
  color: #2d476a;
}

.mores-icon {
  width: 10px;
  height: 14px;
}

.main-menuBar {
  /*border: 1px solid darkviolet;*/
  box-shadow: inset 0px 1px 2px 0px rgba(221, 221, 221, 1);
  width: 100%;
  height: 82px;
  position: fixed;
  bottom: 0px;
  left: 0px;
  background-color: #fafafa;
  padding: 0px 14px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.menuBar-menu {
  /*background-color: greenyellow;*/
  width: 48px;
  height: 47px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.menuBar-icon {
  width: 24px;
  height: 24px;
  object-fit: cover;
}

.menuBar-title {
  width: auto;
  height: 12px;
  font-size: 10px;
  font-weight: bold;
  color: rgba(67, 119, 188, 0.4);
  text-align: center;
}

.menuBar-title-ac {
  color: rgba(67, 119, 188, 1);
}
.margin1 {
  margin: 0 10px;
}
.margin2 {
  margin-right: 10px;
}
</style>