<template>
  <div class="Indexbox">
    <div class="justify-between">
      <div class="backc left-box">
        <div class="brandbox">
          <div class="brandimg">
            <img :src="brandInfo.brandLogo" alt="" v-if="brandInfo.brandLogo">
            <img src="../assets/img/default.png" alt="" v-else>
          </div>
          <div class="brandText">
            <div class="name ellipsis_1">{{brandInfo.brandName}}</div>
            <!--<img v-if="brandInfo.brandType " class="type" src="../assets/img/v1.png" />-->
            <!--<img v-else class="type" src="../assets/img/v0.png" />-->
            <!--<p v-if="brandInfo.expireDesc">有效期限：{{brandInfo.expireDesc}}</p>-->
          </div>
          <!-- v-if="brandInfo.enableUpgrade" -->
                <!-- 权益升级 -->
                <!-- 0629隐藏按钮 -->
          <!-- <div class="btn" v-if="brandInfo.enableUpgrade">
              <router-link to="/vippay?shengji=true">
                  <el-button type="primary" size="small">权益升级</el-button>
              </router-link>
          </div>
          <div class="btn" v-if="!brandInfo.enableUpgrade && !brandInfo.needRenew">
              <el-button type="primary" size="small" @click="tips">权益升级</el-button>
          </div>
            <div class="btn" v-if="brandInfo.needRenew">
              <router-link to="/vippay">
                  <el-button type="primary" size="small">权益续费</el-button>
              </router-link>
            </div> -->
          <div style="line-height: 25px;border-left: 3px solid #d2d2d2;padding-left: 15px">
            <el-tooltip placement="top">
              <div slot="content">售后率：卖出后被售后的单品/ 所有卖出的单品
                <br/>
                平均售后天数：时间差的总和 / 时间差的数量(时间差公式：提交处理
                <br/>
                售后时间 - 发起售后的时间)
                <br/>
                平均发货天数：所有订单商品的发货天数总和 / 所有订单的商品数量
                <br/>
                超时发货：占比= 超时订单 / 全部订单
              </div>
              <span>品牌综合<i class="el-icon-question"></i></span>
            </el-tooltip>
            <p>售后率:{{brandInfo.afterSalesRate}}</p>
            <p>平均售后:{{brandInfo.avAfterSales}}</p>
            <p>平均发货:{{brandInfo.avDelivery}}</p>
            <p>超时发货:{{brandInfo.deliveryTimeout}}</p>
          </div>
        </div>
        <div class="navBtn">
          <span class="alink" @click="goPage(4,'/marketing/shoprenovation')">店铺装修</span>
          <!-- <span class="alink" @click="goPage(4,'/marketing/coupon')">优惠券</span> -->
          <span class="alink" @click="goPage(4,'/marketing/msn')">订阅服务</span>
          <!-- <router-link class="alink" to="">库存预警</router-link> -->
        </div>
      </div>
      <div class="managesboxTop">
        <div class="title">售后工单</div>
        <div class="contentTop">
          <div class="item" @click="goPage3(1,index)"
               v-for="(item,index) in goodsArr3" :key="index">
            <div class="num"><countUp :delay="1000" :endVal="~~item.count || 0"/></div>
            <span>{{item.status}}</span>
          </div>
        </div>
      </div>
      <div class="backc center-small-box" style="visibility: hidden">
        <div class="newTitle" >
          {{noticeData.title}}
        </div >
        <div class="newText ellipsis_3" v-html="noticeData.content"/>
        <div class="moreBtn" v-if="noticeData.title">
          <router-link class="alink" :to="{path:'/notice/details',query:{noticeId:noticeData.id}}">查看详情&gt;&gt;</router-link>
        </div>
      </div>

    </div>
    <div class="justify-between" v-if="showInfo != undefined">
      <div v-if="showInfo" class="left-box">
        <img class="indexSaleRank" v-if="isBuySaleRank" :src="ImgServerUrl + 'indexSaleRank1.png'" @click="goPage(4, '/marketing/salerank')"/>
        <img class="indexSaleRank" v-else :src="ImgServerUrl + 'indexSaleRank0.png'" @click="goPage(4, '/marketing/salerankad')"/>
      </div>
      <div :class="showInfo?'chartbox right-box':'chartbox'">
        <div>活跃统计</div>
        <div class="notice">
          <v-chart :option="polar" style="width: 100%;height:280px;padding-top:5px;" ref="echarts1"/>
          <div class="chart_btn">
            <el-radio-group v-model="radio" size="mini" @change="chartChange">
              <el-radio-button label="1">最近7天</el-radio-button>
              <el-radio-button label="2">最近30天</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
    </div>
    <div style="display:flex">
      <div class="managesbox left">
        <div class="title">订单管理</div>
        <div class="content content0">
            <el-row :gutter="10">
              <el-col :span="4" v-for="(item,index) in orderArr" :key="index">
                <div class="item" @click="goPage(1,'/order/orderlist/' +item.tabIndex)">
                    <img :src="'../static/img/index/order'+ index +'.png'" alt="">
                    <div class="num"><countUp :delay="1000" :endVal="~~item.num || 0"/></div>
                    <span>{{item.text}}</span>
                </div>
              </el-col>
            </el-row>
        </div>
      </div>
      <div class="managesbox right">
        <div class="title">商品管理</div>
        <div class="content content0">
            <el-row :gutter="10">
              <el-col :span="8" v-for="(item,index) in goodsArr2" :key="index">
                <div class="item" @click="goPage2(2,item.imgIndex)">
                    <img :src="'../static/img/index/goods'+ item.imgIndex +'.png'" alt="">
                    <div class="num"><countUp :delay="1000" :endVal="~~item.num || 0"/></div>
                    <span>{{item.text}}</span>
                </div>
              </el-col>
            </el-row>
        </div>
      </div>
    </div>

    <!-- 首页弹窗 -->
    <div class="alert-wrap" v-if="isShowIndexBanner && indexPopupBanner.length > 0">
      <div class="mask"/>
      <div class="mycontent">
        <div class="indexBannerBox">
          <el-carousel v-if="indexPopupBanner.length > 1" :interval="5000" height="600px" indicator-position="outside">
            <el-carousel-item v-for="(item, index) in indexPopupBanner" :key="index">
              <img :style="item.uri?'cursor: pointer':''" :src="item.imgUrl" alt="" @click="goto(item.uri)">
            </el-carousel-item>
          </el-carousel>
          <!-- 单张 -->
          <img
            v-else
            style="cursor: pointer"
            :src="indexPopupBanner[0].imgUrl"
            @click="() => {
              indexPopupBanner[0].uri?goto(indexPopupBanner[0].uri):(isShowIndexBanner = false)
            }">
          <span class="close" @click="isShowIndexBanner = false">
            <img src="https://img.edsmall.com/ROOT/ETao/fenxiao/pc_v3/banner_close.png" alt="">
          </span>
        </div>
      </div>
    </div>
    <!-- <Hello /> -->
  </div>
</template>

<script>
// 导入组件
import ECharts from 'vue-echarts'
import "echarts"
import Hello from '../components/Hello'
import * as getHttp from '../api/demo/app'
import { _getStorage,_saveStorage,_removeStorage } from '@/utils/utils'
import { mapState, mapMutations } from 'vuex'
import countUp from 'vue-countup-v2';
export default {
  name: 'Index',
  data () {
    return {
      first:true,//首次弹出续费
      brandId:'',
      noticeData:{},
      brandInfo:'',
      orderArr:[
          {
            num:'0',
            text:'待付款',
            tabIndex:0
          },
          {
            num:'0',
            text:'待确认',
            tabIndex:1
          },
          {
            num:'0',
            text:'待发货',
            tabIndex:2
          },
          {
            num:'0',
            text:'已发货',
            tabIndex:3
          },{
            num:'0',
            text:'交易成功',
            tabIndex:4
          },{
            num:'0',
            text:'已关闭',
            tabIndex:5
          },
          {
            num:'0',
            text:'退款中',
            tabIndex:6
          }
      ],
      goodsArr2:[
          {
            num:'0',
            text:'SPU出售中',
            imgIndex: 0
          },
          // {
          //   num:'0',
          //   text:'SKU库存预警',
          //   imgIndex: 3
          // },
          // {
          //   num:'0',
          //   text:'SKU已售完',
          //  imgIndex: 1
          // },
          {
            num:'0',
            text:'SPU仓库中',
            imgIndex: 2
          },
          {
            num:'0',
            text:'SPU审核中',
            imgIndex: 4
          }
      ],
      goodsArr3:[
          {
            count:'0',
            status:'商家待确认',
            tabIndex:1
          },
          {
            count:'0',
            status:'商家待处理',
            tabIndex:2
          },
      ],
      polar: {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#C4C4C4'
                }
            }
        },
        legend: {
          // icon: 'rect',
          // itemWidth: 20,
          // itemHeight: 2,
          // itemGap: 20,
          data: ['浏览数', '访问数'],
          // right: '280',
          // textStyle: {
          //     fontSize: 12,
          //     color: '#3B3B3B'
          // }
        },
        grid: {
          left: '5%',
          right: '6%',
          bottom: '5%',
          containLabel: true
        },
        xAxis:
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: '#8A8A8A'
                }
            },
            // axisLabel: {
            //     interval:0
            // },
            data: []
          }
        ,
        yAxis: [{
            type: 'value',
            minInterval:1,
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#8A8A8A'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 14
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#eeeeee'
                }
            }
        }],
        series: [
        //   {
        //     name: '最高气温',
        //     type: 'line',
        //     data: [11, 11, 15, 13, 12, 13, 10],
        //     markPoint: {
        //         data: [
        //             {type: 'max', name: '最大值'},
        //             {type: 'min', name: '最小值'}
        //         ]
        //     },
        //     markLine: {
        //         data: [
        //             {type: 'average', name: '平均值'}
        //         ]
        //     }
        // },
        ]
      },
      radio:1,
      afteraleData:{},
      dataOrder:{},
      advImgData:{},
      options: {
        useEasing: true,//设置宽松
        useGrouping: false,//是否使用千位分隔符
        separator: '',//千位分隔符
        decimal: '.',//小数点分隔符
        decimalPlaces: 0, //小数点位数
        prefix: '',//前缀符
        suffix: '',//后缀付，可以加单位
      },
      indexPopupBanner: [],
      isShowIndexBanner: false,
      isBuySaleRank: false,
      showInfo: undefined,
      buyed: false
    }
  },
  props:{
    //接收参数
  },
  mounted() {
    // 时间钩子
    // this.init();
    // this.open()
    let { brandId } = _getStorage('info');
    this.brandId =brandId;
    this.getbrandInfo();
    this.getAfterSaleInfo();
    this.getNoticeInfo();
    this.getOrderInfo();
    this.getGoodsInfo();
    if(this.$route.query.isShowPay){
      this.payOk()
    }
        //图表
    this.changeCharts(1);
    this.getSaleRankInfo()
  },
  computed:{
    // getFrist() {
    //   return _getStorage('firstTan');
    // }
  },
  methods:{
       ...mapMutations("navBar",['collapseChage','clickNavItem']),
       goPage(act,page){
          // if(act ==4){
             this.$router.push(page);
             this.clickNavItem(act);
          // }
       },
        goPage2(act,index){
          let page ='/goods/list?type='
            if(index ==1){
              page = '/goods/warnstock?type='
            }
             this.$router.push(page+index);
             this.clickNavItem(act);
       },
       goPage3(act,index){
            let page ='/aftersale/indexsale?status='
             this.$router.push(page+index);
             this.clickNavItem(act);
       },

    // 执行方法
    init(){
      getHttp.getList().then(r => {
        console.log(r)
      })
    },
    changeCharts(type){
      //  type 1-七天内  2-最近30天
      this.$axios.get('/statistics/list',{
          params:{
            brandId:this.brandId,
            dateType:type
          }
        })
        .then((res) => {
          if(res.data.code == 200){
            var data = res.data.data;
            this.polar.xAxis.data = data.xAxis.data;
            this.polar.legend = data.legend;

            var markPoint = {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            };
            data.series.forEach(s => {
              s.type='line',
              s.markPoint = markPoint;
            });
            this.polar.series = data.series;
          }
        })
        .catch((err) => {console.log(err)})

    },
    chartChange(e){
      this.changeCharts(this.radio);
    },
      open() {
        const h = this.$createElement;
        const stime = '2020-10-20'
         this.$msgbox({
          // title: '提示',
          message: h('p', { style: 'padding:20px 0' }, [
            h('div', null, '尊敬的用户,您好 '),
            h('span', null, this.brandInfo.renewTips ),
            // h('span', { style: 'color: #f60' }, stime),
          ]),
          showCancelButton: true,
          center:true,
          confirmButtonText: '立即续费',
          cancelButtonText: '我知道了',
        }).then(action => {
             _saveStorage('firstTan',true);
            this.$router.push('/vippay');
        }).catch(() => {
              _saveStorage('firstTan',true);
        });
      },
      payOk() {
        this.$message({
          message: '支付成功，正在审核请等待1~3个工作日，审核结果将会以短信方式告知！',
          type: 'success'
        });
        this.$router.push("/");
      },
      tips(){
        this.$message({
          message: '您的权益还未过期，暂时不需要开通哦~',
          type: 'success'
        });
      },
      getbrandInfo(){
        this.$axios.get('/index/brandInfo/'+this.brandId).then(res=>{
          let {code,data} =res.data;
            if(code ==200){
                this.brandInfo = data;
                let ft = _getStorage('firstTan');
                 if(!ft){
                    if(data.needRenew){
                      _saveStorage('firstTan',true);
                      // 先隐藏掉---推出交费在开启
                      // this.open();
                    }
                 }
            }
        })
      },
      // 售后
      getAfterSaleInfo(){
        this.$axios.get('/order/afterSalesCount',{
          params:{
            brandId:this.brandId
          }
        }).then(res=>{
          let {code,data} =res.data;
            if(code ==200){
              this.goodsArr3 = data
            }
        })
      },
      getNoticeInfo(){
        this.$axios.get('/index/notice').then(res=>{
          let {code,data} =res.data;
            if(code ==200){
                this.noticeData =data?data:{};
            }
        })
      },
      getOrderInfo(){
        let { brandId } = _getStorage('info');

        this.$axios.get('/index/statistics/order',{
          params:{
            brandId:brandId
          }
        }).then(res=>{
          let {code,data} =res.data;
            if(code ==200){
              this.dataOrder = data
                this.orderArr.map(res=>{
                  switch(res.text)
                    {
                        case '待付款':
                            res.num = data.waitPay
                            break;
                        case '待确认':
                              res.num = data.waitConfirm
                            break;
                        case '待发货':
                            res.num = data.waitDeliver
                            break;
                        case '已发货':
                            res.num = data.deliverid
                            break;
                        case '交易成功':
                            res.num = data.finished
                            break;
                        case '已关闭':
                            res.num = data.closed
                            break;
                        default:
                          res.num = data.refunding
                    }
                })
            }
        })
      },
      getGoodsInfo(){
        let { brandId } = _getStorage('info');
        this.$axios.get('/products/productInfo',{
          params:{
            brandId:brandId
          }
        }).then(res=>{
          let {code,data} =res.data;
            if(code ==200){
                this.goodsArr2.map(res=>{
                  switch(res.text)
                    {
                        case 'SPU出售中':
                            res.num = data.putaway
                            break;
                        case 'SKU已售完':
                              res.num = data.saleAll
                            break;
                        case 'SPU仓库中':
                            res.num = data.soldOut
                            break;
                        case 'SKU库存预警':
                            res.num = data.warnstock
                            break;
                        case 'SPU审核中':
                            res.num = data.reviewing
                            break;
                        default:
                    }
                })
            }
        })
      },
      goto(url) {
        if(url) {
          if (/^http/.test(url)) {
            window.open(url)
          } else {
            this.$router.push(url)
          }
        }
      },
    getBannner() {
      this.$axios.get("/common/commonInfo").then((res) => {
        if (res.data.code == 200) {
          var data = res.data.data;
          // 一元体验
          this.indexPopupBanner = data.mainBanner;
          if (this.indexPopupBanner.length > 0) {
            this.isShowIndexBanner = true;
          }
        }
      });
    },
      getSaleRankInfo () {
        let { brandId } = _getStorage("info");
        this.$axios.get('/extra/saleRankInfo',{
          params: {
            brandId
          },
        }).then((res)=>{
          if(res.data.code == 200){
            var data = res.data.data;
            this.isBuySaleRank = (data.status == 1)
            this.buyed = (!!data.endDate)
            this.showInfo = (data.showInfo == 1)
            this.getBannner()
          }
        })
      }
  },
  components:{
    // 传入组件
    Hello,countUp,
    'v-chart': ECharts,
  }
}
</script>

<style lang="scss" scoped>
/deep/.content0 .el-col-4{
  width: 14.2857%;
  // width: 25%;
}
.chartbox{
  position: relative;
  background-color: #fff;
  border: 1px solid #E7E7E7;
  border-radius: 8px;
  padding: 20px 20px 10px;
  margin-top: 20px;
  width: 100%;
  box-sizing: border-box;
  .notice{
      .chart_btn{
        display: inline-block;
        position: absolute;
        top: 20px;
        right: 70px;
      }
  }
}
.Indexbox{
  min-height: calc(100vh - 166px - 80px + 34px);
  width: 1220px;
}
.left-box {
  width: 380px !important;
  box-sizing: border-box;
}
.right-box {
  width: 820px !important;
  box-sizing: border-box;
}
.center-small-box {
  width: 600px !important;
  box-sizing: border-box;
}
.indexSaleRank {
  margin-top: 20px;
  border-radius: 8px;
}
.backc{
  background-color: #fff;
  border:1px solid #E7E7E7;
  height: 160px;
  border-radius: 8px;
  padding: 20px 20px 10px;
  box-sizing: border-box;
  .newTitle{
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
    .noticelist{
      float: right;
    }
  }
  .newText{
    line-height: 26px;
    font-size: 12px;

  }
  .moreBtn{
    float: right;
    .alink{
      color: #16A8E7;
         font-size: 12px;
    }
  }
}
.brandbox{
  display: flex;
  align-items: center;
  height: 110px;
  .brandimg{
    width: 66px;
    img{
      max-width: 100%;
    }
  }
  .btn{
    // background-color: #f60;
    color: #fff;
    // padding: 8px 8px;
    cursor: pointer;
  }
  .brandText{
    width: 130px;
    margin-left: 10px;
    .name{
      margin-bottom: 10px;
      font-weight: bold;
    }
    .type{
      width: 80px;
    }
    p{
      margin-top: 8px;
      font-size: 12px;
      color: #333;
    }

  }
}
.navBtn{
  display: flex;
  align-items: center;
  .alink{
    // padding-right: 11px;
    width: 25%;
    text-align: center;
    color: #16A8E7;
    font-size: 14px;
    cursor: pointer;
    &:last-child{
      padding-right:0;
    }
  }
}
.managesbox{
  border:1px solid #E7E7E7;
  border-radius: 4px;
  margin-top: 20px;
  &.left {
    width: 842px;
    margin-right: 22px;
  }
  &.right {
    width: 356px;
  }
  .title{
    padding:10px;
    background-color: #eee;
  }
  .content{
    .item{
      background-color: #ffffff;
      height: 158px;
      text-align: center;
      // margin-top: 10px;
      img{
        width: 50px;
        margin-top: 12px;
      }
      .num{
        font-weight: bold;
        font-size: 24px;
        padding: 11px 0;
      }
        &:hover{
        background-color: #f8f8f8;
      }
    }

  }

}

.alert-wrap {
  position: fixed;
  z-index: 999999999;
  top: 0;
  left: 0;

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    width: 100%;
    height: 100%;

  }
}
.mycontent {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999999;
  transform: translate(-50%, -50%);

  .indexBannerBox {
    width: 800px;
    height: 600px;
    text-align: center;

    ::v-deep .el-carousel__arrow {
      font-size: 28px;
      width: 46px;
      height: 46px;
    }

    ::v-deep .el-carousel__button {
      width: 46px;
      height: 6px;
      border-radius: 4px;
      background-color: #fff;
    }

    .close {
      display: block;
      width: 50px;
      position: absolute;
      right: -52px;
      top: -40px;
      cursor: pointer;
      border-radius: 50%;

      img {
        max-width: 100%;
      }
    }
  }
}
.justify-between {
  display: flex;
  justify-content: space-between;
}

.managesboxTop{
  margin-top: 0;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #E7E7E7;
  width: 200px;
  .title{
    padding:10px;
    background-color: #eee;
  }
  .contentTop{
    display: flex;
    align-items: center;
    height: 125px;
    text-align: center;
    .item{
      width: 50%;
      cursor: pointer;
      .num{
        font-weight: bold;
        color: #FF6800;
        font-size: 28px;
        margin-bottom: 16px;
      }
    }
  }
}
</style>
