<template>
  <div class="app-main app-content">
    <!-- 用户信息 -->
    <div class="user-wrap" :style="{ backgroundImage: `url(${constant.imgUrl}/home/bg_hd_home.png)` }">
      <div class="user-top">
        <div class="app-size-28">今日概况</div>
      </div>
      <div class="income-amount">
        <div>收入金额</div>
        <div class="price">{{ $util.numberFormat(data.todayData.income) }}</div>
      </div>
      <div class="user-bottom">
        <navigator url="/admin/home/order" open-type="switchTab" class="info-list">
          <div class="info-list-name">开单</div>
          <div class="info-list-value">
            {{ $util.numberFormat(data.todayData.order) || 0 }}
          </div>
        </navigator>
        <div class="info-list">
          <div class="info-list-name">访客</div>
          <div class="info-list-value">
            {{ $util.numberFormat(data.todayData.visit) || 0 }}
          </div>
        </div>
        <div
          class="info-list"
          @click="goNewStudent"
        >
          <div class="info-list-name">新学员</div>
          <div class="info-list-value">
            {{ $util.numberFormat(data.todayData.newStudent) || 0 }}
          </div>
        </div>
      </div>
    </div>
    <!-- 订单总览 -->
    <div class="module-com order-wrap">
      <div class="total-blo">
        <div
          class="total-list"
          v-for="(item, index) in orderData"
          :key="index"
          @click="pageTo(item)"
        >
          <div class="list-num">{{ item.value }}</div>
          <div class="app-color-3">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <!-- 消息 -->
    <div class="module-com news-wrap">
      <div
        class="news-list"
        v-for="(item, index) in data.notice"
        :key="index"
        @click="pageToFn(item.page)"
      >
        <div class="news-left">
          <i class="iconfont iconxiaoxi2 ling"></i>
          <span>{{ item.title }}</span>
        </div>
        <div class="news-right">
          <span>{{ item.action }}</span>
          <i class="iconfont iconxiangyou"></i>
        </div>
      </div>
    </div>

    <!-- 客户按钮 -->
    <view class="module-com">
      <view class="tabs-head_bx">
        <image
          @click="pageTo({ url: '/admin/billing/index' })"
          :src="kdSrc"
          mode="widthFix"
        ></image>
      </view>
      <div class="tabs-wrap">
        <div
          class="tabs-list"
          v-for="(item, index) in tabsData"
          :key="index"
        >
          <div @click="goPage(item)">
            <div class="tabs-img">
              <img
                :src="item.img"
                alt
                mode="widthFix"
              />
            </div>
            <div class="tabs-name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </view>

    <!-- 总览 -->
    <div class="module-com total-wrap">
      <div class="total-tit">总览</div>
      <div class="total-blo">
        <div
          class="total-list"
          v-for="(item, index) in totalData"
          :key="index"
        >
          <div class="list-num">{{ $util.numberFormat(item.value) }}</div>
          <div class="app-color-3">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <!-- <fab-module /> -->
    <!-- 续费遮罩层 -->
    <modal-module
      :show="renewMask"
      :custom="true"
      :maskClosable="true"
      padding="30rpx 30rpx"
    >
      <template>
        <div class="renew-wrap">
          <div class="renew-wrap-text">你的账号已到期</div>
          <button
            class="admin-button-com middle"
            @click="renewFn()"
          >
            立即续费
          </button>
        </div>
      </template>
    </modal-module>
    <none-hd :show="AUTHORITY_SHOW" :title="MODEL_TITLE" :btnText="MODEL_BTN_TEXT" @bthClick="toFreeApply_HOME" :authShow="EXPER_AUTH_SHOW" @experienceClick="experienceFun"></none-hd>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import FabModule from "@/components/plugin/fab";
import AppAvatarModule from "@/components/module/app-avatar";
import ModalModule from "@/components/plugin/modal";
import { getDataTimestamp } from "@/utils/common";
import { getWeixinId } from "@/api/invite/index";
import { getUser } from "@/utils/auth";
import { consoleIndex } from "@/api/workbench";
import noneHd from "@/components/none-hd";
export default {
  name: "admin-workbench",
  components: {
    ModalModule,
    FabModule,
    AppAvatarModule,
    noneHd
  },
  // mixins:[share],
  data () {
    return {
      constant: this.$constant,
      // 遮罩层
      renewMask: false,
      getappIdList: {},
      data: {
        admin: {},
        asset: {},
        notice: {},
        todayData: {
					income:0.00,
					order:0,
					custom:0,
					expend:0.00
        }
      },
      // 订单总览
      orderData: [
        {
          name: "待配送",
          value: 0,
          url: "/admin/home/order",
          type: 4,
          query: {
            tabIndex: 2
          }
        },
        {
          name: "配送中",
          value: 0,
          url: "/admin/home/order",
          type: 4,
          query: {
            tabIndex: 3
          }
        },
        {
          name: "已完成",
          url: "/admin/home/order",
          type: 4,
          query: {
            tabIndex: 0
          },
          value: 0
        }
      ],
      // tab按钮
      tabsData: [
        {
          name: "商城",
          img: `${this.$constant.imgUrl}/ghs/home/shop.png`,
          url: "/admin/my-mall"
        },
        {
          name: "收款",
          img: `${this.$constant.imgUrl}/ghs/home/icon_sk.png`,
          url: "/admin/billing/priceChange"
        },
        {
          name: "供应商",
          img: `${this.$constant.imgUrl}/ghs/home/icon_ghs.png`,
          url: "/pagesPurchase/order"
        },
        {
          name: "采购单",
          img: `${this.$constant.imgUrl}/ghs/home/icon_caigou.png`,
          url: "/pagesPurchase/shopping"
        },
        {
          name: "商品",
          img: `${this.$constant.imgUrl}/ghs/home/icon_spgl.png`,
          url: "/admin/goodsManage/list"
        },
        {
          name: "员工",
          img: `${this.$constant.imgUrl}/ghs/home/yggl.png`,
          url: "/admin/staff/list"
        },
        {
          name: "邀请开店",
          img: `${this.$constant.imgUrl}/ghs/home/yqyl.png`,
          url: "/pagesInvite/list"
        },
        {
          name: "经营概况",
          img: `${this.$constant.imgUrl}/ghs/home/jyzk.png`,
          url: "/pagesStatistics/business"
        }
      ],
      // 总览
      totalData: [
        {
          name: "客户数",
          value: 0
        },
        {
          name: "总访问",
          value: 0
        },
        {
          name: "总订单",
          value: 0
        },
        {
          name: "总收入(元)",
          value: 0
        },
        {
          name: "总支出(元)",
          value: 0
        },
        {
          name: "总采购(元)",
          value: 0
        }
      ],
      cgSrc: `${this.$constant.imgUrl}/ghs/home/cg.png`,
      kdSrc: `${this.$constant.imgUrl}/ghs/home/open_order.png`
    };
  },
  onShareAppMessage (res) {
      return {
        title: "",
        desc: "",
        imgUrl: "",
        path: ""
      };
  },
  computed: {
    ...mapGetters({ userInfo: "getUser" }),
    ...mapGetters({ loginInfo: "getLoginInfo" })
  },
  onLoad (option) {
   },
  onPullDownRefresh () {
    this.init();
    uni.stopPullDownRefresh();
  },
  onShow () {
  },
  methods: {
    goPage (item) {
      if (item.url === '/admin/billing/priceChange') {
        this.goToMallPt('pages/pay/index')
        return true
      }
      if(item.url === '/admin/my-mall'){
        this.goToMallPt('pages/home/index')
        return true
      }
      this.$util.pageTo(item)
    },
    init () {
					getWeixinId().then(res => {
						this.getappIdList = res.data
					});
					getUser().then(res => {
						uni.setNavigationBarTitle({
							title: res.name
						});

						let nowTime = getDataTimestamp(new Date(), true);
						if (nowTime > res.setDeadline) {
							this.renewMask = true;
						}
					});
					consoleIndex().then(res => {
						this.data = res.data;
						const { asset, todayData } = res.data;
						if (!this.$util.isEmpty(asset)) {
							// 订单总览
							this.orderData[0].value = asset.unSendOrder;
							this.orderData[1].value = asset.sendingOrder;
							this.orderData[2].value = todayData.order;
							// 总览数据
							this.totalData[0].value = asset.totalUser;
							this.totalData[1].value = asset.totalView;
							this.totalData[2].value = asset.totalOrder;
							this.totalData[3].value = asset.totalIncome;
							this.totalData[4].value = asset.totalExpend;
							this.totalData[5].value = asset.totalPurchase;
						}
					});
    },
    // 跳转
    pageToFn (page) {
      this.$util.pageTo({
        url: page
      });
    },
    // 新学员列表
    goNewStudent () {
      uni.navigateTo({
        url: '/admin/home/newStudent'
      })
    },
    // 续费
    renewFn () {
      this.$util.pageTo({
        url: "/pagesClient/official/index",
        query: {
          pay: 1
        },
        type: 2
      });
    },
    goToMallPt (url) {
      let self = this
      console.log(url + '?account=' + self.loginInfo.shopId)
        uni.navigateToMiniProgram({
          appId: this.getappIdList.mall.miniAppId,
          path: url + '?account=' + self.loginInfo.shopId,
          //develop 开发版 trial 体验版 release 正式版
          envVersion: process.env.NODE_ENV === 'development' ? 'develop' : 'release',
          extraData: {
            'hdShopAdminId': self.loginInfo.shopAdminId
          },
          success (res) {
          }
        })
    },
  }
};
</script>

<style lang="scss" scoped>
// button {
//   margin: 0;
//   padding: 0;
//   border: 1px solid transparent;  //自定义边框
//   outline: none;    //消除默认点击蓝色边框效果
// }
.app-content {
  padding-bottom: 10px;
}
// 公共
.module-com {
  margin-bottom: 20px;
  // padding: 20px;
  background-color: #fff;
  // box-shadow: 0px 6px 16px #ddd;
  // border-radius: 10px;
}
// 用户信息
.user-wrap {
  padding: 20px 30px 34px 30px;
  color: #fff;
  text-align: center;
  // background-image: url(http://img.huaml.com/home/deserve.png);
  background-size: 100% 380px;
  background-repeat: no-repeat;
  .user-top {
    @include disFlex(center, space-between);
    .open-bt_bx {
      display: flex;
      align-items: center;
      line-height: 1upx;
      & > button {
        padding: 0;
        line-height: auto;
        background-color: transparent;
        border: 1px solid #ffffff;
        border-radius: 22px;
        padding: 10upx 17upx !important;
        // height: 44px;
        // line-height: 44px;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        // margin: 0 10px;
        & > .iconfont {
          font-size: 25px;
          padding-right: 10px;
        }
      }
    }
  }
  .income-amount {
    margin-top: 36px;
    margin-bottom: 37px;
    .price {
      font-size: 50px;
      font-weight: bold;
      margin-top: 4px;
    }
  }
  .user-bottom {
    @include disFlex(center, space-around);
    // padding-bottom: 40px;
    .info-list-name {
      color: #bfd4ff;
    }
    .info-list-value {
      font-size: 36px;
      font-weight: bold;
      margin-top: 4px;
    }
  }
}
// 消息
.news-wrap {
  .news-list {
    @include disFlex(center, space-between);
    padding: 30px 24px 30px 30px;
    border-bottom: 1px solid $borderColor;
    font-size: 26px;
    color: $fontColor2;
    &:active {
      background-color: $backColor;
    }
    & > div {
      @include disFlex(center, flex-start);
    }
    .news-left {
      .iconfont {
        color: $mainColor;
        margin-right: 10px;
      }
      .ling {
        font-size: 28rpx;
      }
    }
    .news-right {
      font-size: 26px;
      color: $mainColor;
      transform: scale(0.9);
      @include disFlex(flex-end, flex-start);
      .iconfont {
        font-size: 24px;
        margin-left: 10px;
        margin-bottom: 6upx;
      }
    }
  }
}
// 总览
.total-wrap,
.order-wrap {
  .total-tit {
    padding: 18px 0 18px 20px;
    border-bottom: 1px solid $borderColor;
    font-weight: 600;
    font-size: 24px;
    color: #333333;
  }
  .total-blo {
    @include disFlex(center, space-between);
    flex-wrap: wrap;
    padding: 30px 0 40px;
    .total-list {
      width: 33%;
      text-align: center;
      margin: 20px 0px;
      border-right: 1px solid $borderColor;
      .list-num {
        margin-bottom: 8px;
        font-size: 36px;
        font-weight: bold;
      }
    }
    .total-list:nth-child(3n) {
      border-right: none;
    }
    .total-list:nth-child(n + 4) {
      padding-bottom: 0;
    }
  }
}
.tabs-head_bx {
  display: flex;
  align-items: center;
  padding: 20px 15px;
}
// tabs
.tabs-wrap {
  padding: 20px 10px;
  @include disFlex(center, flex-start);
  flex-wrap: wrap;
  .tabs-list {
    width: 25%;
    margin-top: 50px;
    text-align: center;
    .tabs-img {
      width: 100px;
      height: 100px;
      margin: 0 auto;
      img {
        height: 100%;
      }
    }
    .tabs-name {
      color: $fontColor2;
      margin-top: 10px;
    }
    &:nth-child(-n + 4) {
      margin-top: 0;
    }
  }
}
// 遮罩层
.renew-wrap {
  text-align: center;
  .renew-wrap-text {
    margin-top: 30px;
    margin-bottom: 60px;
    font-size: 34px;
  }
}
</style>
