<template>
  <div class="Indexbox">
    <el-row :gutter="20">
      <el-col :span="7">
        <div class="backc">
         <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>
         <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>
      </el-col>
      <el-col :span="10">
         <div class="managesboxTop">
          <div class="title">售后工单</div>
          <div class="contentTop">
              <div class="item" @click="goPage3(1,(index + 1))" 
              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>
      </el-col>
       <el-col :span="7">
         <div class="managesboxTop managesboxTop2">
          <div class="title">订单-快捷处理</div>
          <div class="contentTop">
              <div class="item" @click="goPage(1,'/order/orderlist/' +item.tabIndex)" 
              v-for="(item,index) in goodsArr4" :key="index">
                  <div class="num"><countUp :delay="1000" :endVal="~~item.num || 0"/></div>
                  <span>{{item.text}}</span>
              </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 统计 -->
    <div class="centerboxBig">
      <div class="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 class="rightbox">
        <div class="backc boxPro">
          <div class="newTitle">
            {{noticeData.title}}
            </div>
            <div class="newText ellipsis_6" v-html="noticeData.content"></div>
            <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>
        <!-- 暂时隐藏广告入口 -->
        <!-- <img src="https://edspicserver.oss-cn-hangzhou.aliyuncs.com/ROOT/ETao/gl/static/advimg.jpg" alt=""> -->
        <!-- <div class="advImg" @click="goPage(4,'/marketing/advert')">
          <img :src="advImgData.iconPath" alt="">
        </div> -->
        
      </div>
    </div>
    <div class="managebox_big">

    <div class="managesbox managesbox0">
      <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="item.imgUrl" alt=""> -->
                  <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 managesbox1">
      <div class="title">商品管理</div>
      <div class="content content1">
           <el-row :gutter="10">
            <el-col :span="4" v-for="(item,index) in goodsArr2" :key="index">
              <div class="item" @click="goPage2(2,index)">
                  <img :src="'../static/img/index/goods'+ 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>

    <!-- <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 {
      options: {
        useEasing: true,//设置宽松
        useGrouping: false,//是否使用千位分隔符
        separator: '',//千位分隔符
        decimal: '.',//小数点分隔符
        decimalPlaces: 0, //小数点位数
        prefix: '',//前缀符
        suffix: '',//后缀付，可以加单位
      },
      first:true,//首次弹出续费
      brandId:'',
      noticeData:{},
      brandInfo:'',
      orderArr:[
          {
            num:'0',
            text:'待付款',
            tabIndex:0
          },
          // {
          //   num:'0',
          //   text:'待确认'
          // },
          // {
          //   num:'0',
          //   text:'待发货'
          // },
          {
            num:'0',
            text:'已发货',
            tabIndex:3
          },{
            num:'0',
            text:'交易成功',
            tabIndex:4
          },{
            num:'0',
            text:'已关闭',
            tabIndex:5
          },
          // {
          //   num:'0',
          //   text:'退款中'
          // }
      ],
      goodsArr2:[
          {
            num:'0',
            text:'SPU出售中'
          },
          {
            num:'0',
            text:'SKU库存预警'
          },
          {
            num:'0',
            text:'SKU已售完'
          },
          {
            num:'0',
            text:'SPU仓库中'
          },
          {
            num:'0',
            text:'SPU审核中'
          }
      ],
      goodsArr3:[
          {
            count:'0',
            status:'待确认',
            tabIndex:1
          },
          {
            count:'0',
            status:'待处理',
            tabIndex:2
          },
          {
            count:'0',
            status:'已处理',
            tabIndex:3
          },
          {
            count:'0',
            status:'已结束',
            tabIndex:4
          },
      ],
      goodsArr4:[
          {
            num:'0',
            text:'待确认',
            tabIndex:1
          },
          {
            num:'0',
            text:'待发货',
            tabIndex:2
          },
          {
            num:'0',
            text:'退款中',
            tabIndex:6
          }
      ],
      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:{}
    }
  },
  props:{
    //接收参数
  },
  mounted() {
    // 时间钩子
    // this.init();
    // this.open()
    let { brandId } = _getStorage('info');
    this.brandId =brandId;
    this.getbrandInfo();
    this.getNoticeInfo();
    this.getOrderInfo();
    this.getGoodsInfo();
    if(this.$route.query.isShowPay){
      this.payOk()
    }
    this.getadvImgInfo()
        //图表
    this.changeCharts(1);
  },
  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 || index ==2){
              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 && data.length>0 ? data:[]
            }
        })
      },
      getadvImgInfo(){
        this.$axios.get('/index/resource/picture').then((res)=>{
          let {code,data} =res.data;
            if(code ==200){
                this.advImgData =data?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
                    }
                })
                this.goodsArr4.map(res=>{
                  switch(res.text)
                    {
                        case '待确认':
                            res.num = this.dataOrder.waitConfirm
                            break;
                        case '待发货':
                            res.num = this.dataOrder.waitDeliver
                            break;
                        case '退款中':
                            res.num = this.dataOrder.refunding
                            break;
                        default:
                    }
                })
                this.getAfterSaleInfo()
            }
        })
      },
      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:
                    }
                })
            }
        })
      },
  },
  components:{
    // 传入组件
    Hello,countUp,
    'v-chart': ECharts,
  }
}
</script>

<style lang="scss" scoped>
/deep/.content0 .el-col-4{
  // width: 14.2857%;
  width: 25%;
}
/deep/.content1 .el-col-4{
  width: 20%;
}
.centerboxBig{
  display: flex;
  align-items: top;
  margin-top: 20px;
  .rightbox{
    width: 34%;
    box-sizing: border-box;
    margin-left: 20px;
    .advImg{
      width: 100%;
      height: 160px;
      border-radius: 8px;
      margin-top: 10px;
      border: 1px solid #E7E7E7;
      box-sizing: border-box;
      cursor: pointer;
      img{
        max-width: 100%;
        max-height: 100%;
        border-radius: 8px;
      }
    }
  }
}
.chartbox{
  width: 66%;
  max-width: 66%;
  box-sizing: border-box;
  position: relative;
  background-color: #fff;
  border: 1px solid #E7E7E7;
  border-radius: 8px;
  padding: 20px 20px 10px;
  .notice{
      .chart_btn{
        display: inline-block;
        position: absolute;
        top: 20px;
        right: 70px;
      }
  }
}
.Indexbox{
  min-height: calc(100vh - 166px - 80px + 34px);
}
.backc{
  background-color: #fff;
  border:1px solid #E7E7E7;
  // height: 160px;
  height: 100%;
  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;
    }
  }
}
.boxPro{
  position: relative;
  .moreBtn{
    position: absolute;
    bottom: 10px;
    right: 20px;
  }
}
.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: 150px;
    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;
    }
  }
}
.managebox_big{
  display: flex;
  .managesbox0{
    width: 44.3%;
  }
  .managesbox1{
    width: 55.7%;
    margin-left: 20px;
    box-sizing: border-box;
  }
}
.managesbox{
  border:1px solid #E7E7E7;
  border-radius: 4px;
  margin-top: 20px;
  .title{
    padding:10px;
    background-color: #eee;
  }
  .content{
    .item{
      background-color: #ffffff;
      height: 208px;
      text-align: center;
      // margin-top: 10px;
      img{
        width: 58px;
        margin-top: 34px;
      }
      .num{
        font-weight: bold;
        font-size: 28px;
        padding: 20px 0;
      }
        &:hover{
        background-color: #f8f8f8;
      }
    }

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