<template>
  <div class="admin">
    <div class="admin-top">
      <div class="logo">
        <img src="../assets/images/logo.png" />
        <span>v{{ version }}</span>
      </div>
      <div class="admin-right">
        <el-tooltip class="item" effect="dark" content="金币信息" placement="top">
          <div class="left" @click="toActive">
            <div :style="{marginLeft: '0px'}">{{ $store.state.userInfo.coin }}</div>
            <span style="margin-right: 10px;"><img src="../assets/coin.png" width="30"/></span>
          </div>
        </el-tooltip>
        <el-button type="button" :class="'el-button el-button--primary'" @click="sign">签到</el-button>
        <el-tooltip class="item" effect="dark" content="用户激活" placement="top">
          <div class="left" @click="toActive">
            <span>会员信息:</span>
            <div :style="{marginLeft: '10px', color: $store.state.userInfo.flag == 1? 'green': 'red'}">{{ getStateInfo }}</div>
          </div>
        </el-tooltip>
        <el-dropdown @command="handleClick">
          <div class="userinfo">
            <span>{{ $store.state.userInfo.name + "(" + $store.state.userInfo.phone + ")" }}</span>
            <img src="../assets/images/bottom.png" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <!-- <el-dropdown-item command="phone">修改手机</el-dropdown-item> -->
            <el-dropdown-item command="pwd">修改密码</el-dropdown-item>
            <el-dropdown-item command="message">消息推送</el-dropdown-item>
            <el-dropdown-item command="coin">金币流水</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="admin-main">
      <el-scrollbar class="left">
        <el-menu
          :default-active="activePath"
          :collapse-transition="true"
          unique-opened
          background-color="#545c64"
          router
          text-color="#fff"
          :collapse="isCollapse">
          <el-menu-item index="/welcome">
            <i class="el-icon-monitor"></i>
            <span slot="title">工作台</span>
          </el-menu-item>
          <el-submenu index="/normalSendGoods">
            <template slot="title">
              <i class="el-icon-shopping-cart-2"></i>
              <span slot="title">备货单管理</span>
            </template>
            <el-menu-item index="/normalSendGoods">抢仓发货</el-menu-item>
            <el-menu-item index="/shippingDesk">发货台管理</el-menu-item>
            <el-menu-item index="/waitPackageList">待装箱发货单</el-menu-item>
            <el-menu-item index="/waitShippingList">待收货发货单</el-menu-item>
            <el-menu-item index="/shippingList">已收货发货单</el-menu-item>
          </el-submenu>

          <el-submenu index="/copyProduct">
            <template slot="title">
              <i class="el-icon-goods"></i>
              <span slot="title">商品管理</span>
            </template>
            <el-menu-item index="/copyProduct">商品复制</el-menu-item>
          </el-submenu>
          <el-submenu index="/stock">
            <template slot="title">
              <i class="el-icon-house"></i>
              <span slot="title">库存管理</span>
            </template>
            <el-menu-item index="/returnPackage">退货包裹管理</el-menu-item>
            <el-menu-item index="/returnDetail">退货明细</el-menu-item>
          </el-submenu>
          <el-submenu index="/niubiCopy">
            <template slot="title">
              <i class="el-icon-magic-stick"></i>
              <span slot="title">选品采集</span>
            </template>
            <el-menu-item index="/niubiCopy">商品采集</el-menu-item>
            <el-submenu index="/track" style="padding-left: 15px;">
              <template slot="title">
                <span slot="title">选品跟踪</span>
              </template>
              <el-menu-item index="/storeTrack">店铺跟踪</el-menu-item>
              <el-menu-item index="/keywordTrack">关键字跟踪</el-menu-item>
              <el-menu-item index="/favoriteTrack">我的收藏</el-menu-item>
            </el-submenu>
            <el-submenu index="/newproductTrack" style="padding-left: 15px;">
              <template slot="title">
                <span slot="title">新品跟踪（免费）</span>
              </template>
              <el-menu-item index="/newProduct">上架新品</el-menu-item>
              <el-menu-item index="/newProductGroup">我的分组</el-menu-item>
            </el-submenu>
            <el-menu-item index="/indexTrack">首页商品跟踪</el-menu-item>
          </el-submenu>
          <el-submenu index="/qualification">
            <template slot="title">
              <i class="el-icon-s-check"></i>
              <span slot="title">资质合规</span>
            </template>
            <el-menu-item>
              <template #title>
                <a style="color: white" :href="'https://www.evatmaster.com/ost/registered?channelNo=SCBFWYSHZTEMUXZSQDHZ'" target="_blank">
                  <span>欧税通</span>
                </a>
              </template>
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="/saleData">
            <i class="el-icon-s-data"></i>
            <span slot="title">销售数据</span>
          </el-menu-item>
          <el-menu-item index="/learning">
            <i class="el-icon-eleme"></i>
            <span slot="title">新手园地</span>
          </el-menu-item>
          <!-- <el-menu-item index="/statistics">
            <i class="el-icon-s-data"></i>
            <span slot="title">数据统计</span>
          </el-menu-item> -->
        </el-menu>
      </el-scrollbar>
      <div class="container">
        <transition name="fade-transform" mode="out-in">
          <keep-alive include="NormalSendGoods">
            <router-view class="container-app"></router-view>
          </keep-alive>
        </transition>
      </div>
    </div>
    <el-dialog
      title="激活充值"
      :visible="$store.state.activeDlgShow"
      :close-on-click-modal="false"
      width="1200"
      :before-close="handleClose">
      <ai-payment/>
    </el-dialog>

    <div id="kefu" @click="gotoKefu">
      <label slot="reference" class="topBtn" title="联系客服"></label>
    </div>
  </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex'
import AiPayment from "@/components/AiPayment.vue";

  export default {
    components: {AiPayment},
    data () {
      return {
        isCollapse: false,
        activePath: '/home',
        form: {
          mallId: this.$store.state.mallId,
          mallName: this.$store.state.mallName,
          code: ''
        },
        version: '',
        vipType: ["体验会员","月会员","半年会员","年会员","多店通用年会员"]
      }
    },
    computed: {
      freeLogo: () => require("../assets/free.png"),
      getStateInfo() {
        if (this.$store.state.userInfo.flag == 0) {
          return '未激活';
        } else if (this.$store.state.userInfo.flag == 1) {
          if (this.$store.state.userInfo.type != 4) {
            return `(${this.$store.state.userInfo.mallName})` + this.vipType[this.$store.state.userInfo.type];
          } else {
            return this.vipType[this.$store.state.userInfo.type]
          }

        } else {
          return '已过期';
        }
      },

      ...mapState(['mallName', 'mallList'])
    },

    watch: {
      $route (v) {
        this.activePath = v.fullPath
      }
    },

    created () {
      const devVersion = require('../manifest.development.json').version
      const prodVersion = require('../manifest.production.json').version
      this.version = process.env.NODE_ENV === 'production' ? prodVersion : devVersion
      this.activePath = this.$route.fullPath
    },

    methods: {
      ...mapMutations(['setActiveDlgShow']),
      handleClick (e) {
        if (e === 'logout') {
          this.$store.dispatch('SignOut', false)
        } else if (e === 'pwd') {
          this.$router.push('changePwd')
        } else if (e === 'message') {
          this.$router.push('message')
        } else if (e === 'coin') {
          this.$router.push('coinFlow')
        }
      },
      handleClose() {
        this.form.mallId = "";
        this.form.mallName = "";
        this.form.code = "";
        this.setActiveDlgShow(false)
      },
      toActive() {
        this.setActiveDlgShow(true)
      },
      getMessage(type) {
        return `你使用的是“${this.vipType[type]}”兑换券，确定兑换？`;
      },
      active() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$http.post(`/api/coupon/getDetail`, null, {
              params: {
                code: this.form.code
              }
            }).then(res => {
              if (res.code == 0) {
                let msg = this.getMessage(res.data.type);
                this.$confirm(msg, '温馨提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'info'
                }).then(() => {
                  this.$http.post(`/api/order/upgradeByCode`, null, {
                    params: {
                      ...this.form
                    }
                  }).then(res => {
                    if (res.code == 0) {
                      this.$message.success('激活成功')
                      this.$store.dispatch('getUserInfo')
                      this.setActiveDlgShow(false)
                    }
                  })
                })
              }
            });

          }
        })
      },
      sign () {
        this.$http.post(`/api/malluser/sign`).then(res => {
          if (res.code == 0) {
            this.$message.success('签到成功')
            this.$store.dispatch('getUserInfo')
          }
        })
      },
      gotoKefu() {
        window.open('https://work.weixin.qq.com/kfid/kfcaa4208f661131eba', '_blank')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .admin {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #f4f4f4;

    .fade-transform-leave-active,
    .fade-transform-enter-active {
      transition: all .4s;
    }

    .fade-transform-enter {
      opacity: 0;
      transform: translateX(-20px);
    }

    .fade-transform-leave-to {
      opacity: 0;
      transform: translateX(20px);
    }

    .admin-main {
      display: flex;
      align-items: center;
      height: calc(100% - 64px);
      overflow: hidden;
      border-top: 1px solid rgba(0,0,0,0.15);

      .container {
        flex: 1;
        height: 100%;
        overflow: hidden;

        .container-app {
          width: 100%;
          height: 100%;
          overflow-y: auto;
        }
      }

      .left {
        width: 246px;
        height: 100%;
        background: #545c64;

        img {
          width: 16px;
          height: 16px;
          margin-right: 10px;
          opacity: 0.8;
        }
      }
    }

    .admin-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
      padding: 0 24px 0 36px;
      // box-shadow: 0px 1px 0px 0px rgba(128, 128, 128, 0.1);
      background: #fff;

      .logo {
        display: flex;
        align-items: baseline;

        span {
          position: relative;
          bottom: 12px;
          font-size: 16px;
        }

        img {
          width: 60px;
          margin-right: 12px;
        }

        h1 {
          line-height: 25px;
          color: #1F2635;
          font-size: 18px;
          font-weight: 600;
        }

        p {
          margin-top: 1px;
          line-height: 17px;
          font-size: 12px;
          font-weight: 400;
          color: #A5A9BC;
        }
      }

      .admin-middle {
        display: flex;
        align-items: center;
        height: 64px;

        span {
          position: relative;
          margin-right: 60px;
          height: 64px;
          line-height: 64px;
          font-size: 16px;
          color: #1F2635;
          cursor: pointer;
          transition: all ease 0.5s;

          &.active::after {
            position: absolute;
            left: 50%;
            bottom: 9px;
            z-index: 1;
            width: 52px;
            height: 4px;
            background: #00A971;
            transform: translateX(-50%);
            content: ' ';
          }

          &.active, &:hover {
            color: #1FBAD6;
          }

          &:last-child {
            margin-right: 0;
          }
        }
      }

      .admin-right {
        display: flex;
        align-items: center;
        height: 100%;

        .left {
          display: flex;
          align-items: center;
          cursor: pointer;
          transition: all ease 0.3s;

          &:hover {
            opacity: 0.5;
          }
        }

        .userinfo {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 56px;
          margin-left: 20px;
          cursor: pointer;
          transition: all ease 0.3s;

          &:hover {
            opacity: 0.5;
          }

          .avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
          }

          span {
            margin-right: 8px;
            color: #1F2635;
            font-size: 14px;
          }
        }
      }
    }
  }

  #kefu {
    position: fixed;
    right: 20px;
    bottom: 40px;
    z-index: 999;
    width: 60px;
    height: 60px;
  }
  #kefu .topBtn {
    width: 60px;
    height: 60px;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    cursor: pointer;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    -webkit-animation: wobble 250ms  infinite;
    animation: wobble 250ms  infinite;
    background-image: url('data:image/svg+xml;%20charset=utf8,%3Csvg%20t%3D%221575450105478%22%20class%3D%22icon%22%20viewBox%3D%220%200%201220%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%222883%22%20width%3D%2248%22%20height%3D%2248%22%3E%3Cpath%20d%3D%22M609.524%20103.522c-222.89%200-403.712%20178.472-403.712%20398.78%200%20220.31%20180.823%20398.782%20403.712%20398.782%20222.889%200%20403.712-178.473%20403.712-398.781%200-220.309-180.823-398.781-403.712-398.781v48.762c196.1%200%20354.95%20156.785%20354.95%20350.019s-158.85%20350.019-354.95%20350.019-354.95-156.785-354.95-350.02c0-193.233%20158.85-350.018%20354.95-350.018v-48.762z%22%20fill%3D%22%231296db%22%20p-id%3D%222884%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M786.578%20916.34c166.45-69.217%20278.408-231.055%20278.408-414.035%200-248.026-203.847-449.219-455.457-449.219-251.619%200-455.457%20201.188-455.457%20449.22%200%2055.397%2010.152%20109.367%2029.718%20159.975%204.855%2012.56-1.39%2026.677-13.949%2031.533-12.56%204.855-26.677-1.39-31.532-13.949a490.396%20490.396%200%200%201-3.042-8.078c-1.85%200.077-3.711%200.116-5.581%200.116C58.06%20671.903%200%20614.597%200%20543.903c0-65.005%2049.09-118.69%20112.68-126.91C153.65%20182.56%20360.56%204.324%20609.528%204.324c248.962%200%20455.877%20178.24%20496.85%20412.67%2063.583%208.225%20112.669%2061.907%20112.669%20126.909%200%2070.694-58.06%20128-129.686%20128-1.89%200-3.771-0.04-5.642-0.119-47.536%20129.702-148.34%20235.841-279.493%20290.027-1.161%2033.464-29.012%2060.24-63.2%2060.24-34.925%200-63.237-27.944-63.237-62.416%200-34.471%2028.312-62.415%2063.237-62.415%2017.892%200%2034.048%207.333%2045.551%2019.12z%22%20fill%3D%22%231296db%22%20p-id%3D%222885%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M609.528%20611.405c-58.933%200-112.056-10.644-158.472-28.342-16.123-6.147-30.211-12.702-42.138-19.208-6.926-3.777-11.447-6.59-13.437-7.972-19.24-13.373-44.428%205.446-37.059%2027.688%2035.296%20106.527%20136.054%20179.913%20251.106%20179.913%20115.05%200%20215.796-73.384%20251.092-179.913%207.37-22.243-17.82-41.062-37.06-27.687-1.99%201.383-6.51%204.195-13.434%207.972-11.926%206.505-26.012%2013.06-42.133%2019.207-46.413%2017.698-99.533%2028.342-158.465%2028.342z%22%20fill%3D%22%231296db%22%20p-id%3D%222886%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
  }
</style>
