<template>
<div>
   <div class="home-con" v-if="platform">
    <Row :gutter="12">
        <ul class="head-info" style="height:200px">
        <li class="head-item">
            <img src="../../assets/images/编组 5@2x.png" class="head-img">
            <div class="info">
              <p class="iten-info">{{inforCardData.userNum.count}}</p>
              <p class="item-label">累计用户数</p>
            </div>
        </li>
        <li class="head-item">
            <img src="../../assets/images/编组 6@2x.png" class="head-img">
            <div class="info">
              <p class="iten-info">{{inforCardData.yesterdayNewAddUserNum.count}}</p>
              <p class="item-label">昨日新增用户数</p>
            </div>
        </li>
        <li class="head-item">
            <img src="../../assets/images/编组 7@2x.png" class="head-img">
            <div class="info">
              <p class="iten-info">{{inforCardData.merchantNum.count}}</p>
              <p class="item-label">累计商户数</p>
            </div>
        </li>
        <li class="head-item">
            <img src="../../assets/images/编组 8@2x.png" class="head-img">
            <div class="info">
              <p class="iten-info">{{inforCardData.yesterdayNewAddMerchantNum.count}}</p>
              <p class="item-label">昨日新增商户数</p>
            </div>
        </li>
        <li class="head-item">
            <img src="../../assets/images/编组 9@2x.png" class="head-img">
            <div class="info">
              <p class="iten-info">{{inforCardData.spuNum.count}}</p>
              <p class="item-label">累计商品数</p>
            </div>
        </li>
          <li class="head-item">
            <img src="../../assets/images/编组 14@2x.png" class="head-img">
            <div class="info">
              <p class="iten-info">{{inforCardData.yesterdayNewAddSpuNum.count}}</p>
              <p class="item-label">昨日新增商品数</p>
            </div>
        </li>
        <li class="head-item">
            <img src="../../assets/images/编组 13@2x.png" class="head-img">
            <div class="info">
              <p class="iten-info">{{inforCardData.orderNum.count}}</p>
              <p class="item-label">累计订单量</p>
            </div>
        </li>
          <li class="head-item">
            <img src="../../assets/images/编组 12@2x.png" class="head-img">
            <div class="info">
              <p class="iten-info">{{inforCardData.yesterdayNewAddOrderNum.count}}</p>
              <p class="item-label">昨日新增订单量</p>
            </div>
        </li>
        <li class="head-item">
            <img src="../../assets/images/编组 11@2x.png" class="head-img">
            <div class="info">
              <p class="iten-info">{{inforCardData.gmv.count}}</p>
              <p class="item-label">累计GMV</p>
            </div>
        </li>
        <li class="head-item">
            <img src="../../assets/images/编组 10@2x.png" class="head-img">
            <div class="info">
              <p class="iten-info">{{inforCardData.yesterdayNewAddGmv.count}}</p>
              <p class="item-label">昨日新增GMV</p>
            </div>
        </li>

      </ul>
    </Row>
    <Row :gutter="10">
      <i-col
        :xs="24"
        :md="24"
        :sm="24"
        :lg="12"
        :xl="12"
        :xxl="12"
        style="margin-bottom: 10px"
      >
        <Card>
          <chart-line
            style="height: 360px"
            :value="lineData"
            text="销量趋势"
            ref="chartLine"
          ></chart-line>
        </Card>
      </i-col>
      <i-col
        :xs="24"
        :md="24"
        :sm="24"
        :lg="12"
        :xl="12"
        :xxl="12"
        style="margin-bottom: 10px"
      >
      <Card>
          <chart-bar
            style="height: 360px"
            :value="barData"
            text="销量统计"
            ref="chartLine"
          ></chart-bar>
      </Card>
      </i-col>
    </Row>
  </div>
  <div v-else>
    <Row>
      <ul class="head-info">
        <li class="head-item">
            <img src="../../assets/images/编组 7@2x.png" class="head-img">
            <div class="info">
              <p class="iten-info">{{inforCardShop.spuNum.count}}</p>
              <p class="item-label">累计商品数</p>
            </div>
        </li>
        <li class="head-item">
            <img src="../../assets/images/编组 13@2x.png" class="head-img">
            <div class="info">
              <p class="iten-info">{{inforCardShop.orderNum.count}}</p>
              <p class="item-label">累计订单数</p>
            </div>
        </li>
        <li class="head-item">
            <img src="../../assets/images/编组 11@2x.png" class="head-img">
            <div class="info">
              <p class="iten-info">{{inforCardShop.salesNum.count}}</p>
              <p class="item-label">累计销量</p>
            </div>
        </li>
        <li class="head-item">
            <img src="../../assets/images/编组 12@2x.png" class="head-img">
            <div class="info">
              <p class="iten-info">{{inforCardShop.yesterdayNewAddSalesNum.count}}</p>
              <p class="item-label">昨日新增销量</p>
            </div>
        </li>
        <li class="head-item">
            <img src="../../assets/images/编组 8@2x.png" class="head-img">
            <div class="info">
              <p class="iten-info">{{inforCardShop.storeCollections.count}}</p>
              <p class="item-label">店铺收藏数</p>
            </div>
        </li>
      </ul>
    </Row>
    <div class="main" style=" min-width: 800px;min-height: 600px; display: grid;
  grid-template-columns: 58% 38.8%;
  grid-row-gap: 20px;
  grid-column-gap: 20px;">
    <Row :gutter="10">
      <i-col

        style="margin-bottom: 10px;"
      >
        <Card>
          <chart-line
            style="height: 280px"
            :value="lineData"
            text="销售额 单位(元)"
            ref="chartLine"
          ></chart-line>
        </Card>
      </i-col>
      <i-col
        style="margin-bottom: 10px;"
      >
      <Card>
          <chart-bar
            style="height: 300px"
            :value="barData"
            text="订单量"
            ref="chartLine"
          ></chart-bar>
      </Card>
      </i-col>

    </Row>
    <Row>
      <Card style="margin-bottom: 10px;">
        <div style="height:280px;width:100%;">
        <h3>今日数据</h3>
      <div class="today-main">
        <ul class="today-info">
          <li class="today-item">
            <img src="../../assets/images/成交额@2x.png" class="img">
            <div class="info">
              <p class="item-label">成交额</p>
              <p class="iten-info">{{todayCardShop.todayTurnover.count}}</p>
            </div>

          </li>
          <li class="today-item">
            <img src="../../assets/images/订单数@2x.png" class="img">
            <div class="info">
              <p class="item-label">订单数</p>
              <p class="iten-info">{{todayCardShop.todayOrderNum.count}}</p>
            </div>

          </li>
          <li class="today-item">
            <img src="../../assets/images/浏览量@2x.png" class="img">
            <div class="info">
              <p class="item-label">浏览量</p>
              <p class="iten-info">{{todayCardShop.todayViews.count}}</p>
            </div>

          </li>
          <li class="today-item">
            <img src="../../assets/images/待付款@2x.png" class="img">
            <div class="info">
              <p class="item-label">待付款订单</p>
              <p class="iten-info">{{todayCardShop.todayWaitPayOrderNum.count}}</p>
            </div>

          </li>
        </ul>
      </div>
      </div>
    </Card>
    <Card>
      <div class="sales-volume">
          <h3 style="margin-bottom:15px">销量TOP10</h3>
          <div class="title">
            <span class="title-ranking">排名</span>
            <span class="title-commodity">商品</span>
            <span class="title-sales">销量</span>
          </div>

          <ul v-for="(item,i) in saleTop10" :key="i">
            <li class="commodity-info">
              <span class="title-ranking">{{item.sort}}</span>
              <span class="title-commodity">{{item.goodsName}}</span>
              <span class="title-sales">{{item.sales}}</span>
            </li>
          </ul>
      </div>
    </Card>
    </Row>

    </div>

  </div>
</div>

</template>

<script>
import InforCard from '_c/info-card'
import RichInfoCard from '_c/rich-info-card'
import CountTo from '_c/count-to'
import OneBoxOneWord from '_c/one-box-one-word'
import { ChartPie, ChartBar, ChartLine } from '_c/charts'
import AssetsInfo from './assets-info'
import { formatTime } from '@/libs/tools'
import SalesTrend from './sales-trend'
import SalesStatistics from './sales-statistics'
import AreaStatistics from './area-statistics'
import StoreMap from './store-map'

export default {
  name: 'home',
  components: {
    InforCard,
    RichInfoCard,
    CountTo,
    ChartPie,
    ChartBar,
    ChartLine,
    OneBoxOneWord,
    AssetsInfo,
    SalesTrend,
    SalesStatistics,
    AreaStatistics,
    StoreMap
  },
  computed: {
    isBrand () {
      return this.$store.getters.isBrand
    },
    hasBindCard () {
      return this.cardInfo != null
    },
    platform () {
      return this.$store.state.admin.type == 1 || this.$store.state.admin.type == 4
    }
  },
  data () {
    return {
      inforCardData: {
        userNum: {
          title: '累计用户数',
          icon: 'md-add',
          count: 0,
          color: '#2b85e4',
          decimal: 0
        },
        yesterdayNewAddUserNum: {
          title: '昨日新增用户数',
          icon: 'logo-usd',
          count: 0,
          color: '#ff9900',
          decimal: 0
        },
        merchantNum: {
          title: '累计商户数',
          icon: 'md-basket',
          count: 0,
          color: '#808695',
          decimal: 0
        },
        yesterdayNewAddMerchantNum: {
          title: '昨日新增商户数',
          icon: 'md-basket',
          count: 0,
          color: '#808695',
          decimal: 0
        },
        spuNum: {
          title: '累计商品数',
          icon: 'md-podium',
          count: 0,
          color: '#2db7f5',
          decimal: 0
        },
        yesterdayNewAddSpuNum: {
          title: '昨日新增商品数',
          icon: 'md-list-box',
          count: 0,
          color: '#2db7f5',
          decimal: 0
        },
        orderNum: {
          title: '累计订单量',
          icon: 'md-list-box',
          count: 0,
          color: '#2db7f5',
          decimal: 0
        },

        yesterdayNewAddOrderNum: {
          title: '昨日新增订单量',
          icon: 'md-person',
          count: 0,
          color: '#2b85e4',
          decimal: 0,
          hidden: false
        },
        gmv: {
          title: '累计GMV',
          icon: 'md-person-add',
          count: 0,
          color: '#2b85e4',
          decimal: 0,
          hidden: false
        },

        yesterdayNewAddGmv: {
          title: '昨日新增GMV',
          icon: 'md-home',
          count: 0,
          color: '#19be6b',
          decimal: 0
        }
      },
      inforCardShop: {
        spuNum: {
          title: '累计商品数',
          icon: 'md-add',
          count: 0,
          color: '#2b85e4',
          decimal: 0
        },
        orderNum: {
          title: '累计订单数',
          icon: 'logo-usd',
          count: 0,
          color: '#ff9900',
          decimal: 0
        },
        salesNum: {
          title: '累计销量',
          icon: 'md-basket',
          count: 0,
          color: '#808695',
          decimal: 0
        },
        yesterdayNewAddSalesNum: {
          title: '昨日新增销量',
          icon: 'md-basket',
          count: 0,
          color: '#808695',
          decimal: 0
        },
        storeCollections: {
          title: '店铺收藏数',
          icon: 'md-podium',
          count: 0,
          color: '#2db7f5',
          decimal: 0
        }
      },
      todayCardShop: {
        todayTurnover: {
          title: '成交额',
          icon: 'md-add',
          count: 0,
          color: '#2b85e4',
          decimal: 0
        },
        todayOrderNum: {
          title: '订单数',
          icon: 'logo-usd',
          count: 0,
          color: '#ff9900',
          decimal: 0
        },
        todayViews: {
          title: '浏览量',
          icon: 'md-basket',
          count: 0,
          color: '#808695',
          decimal: 0
        },
        todayWaitPayOrderNum: {
          title: '待付款订单',
          icon: 'md-basket',
          count: 0,
          color: '#808695',
          decimal: 0
        }
      },
      lineData: {
        xAxisData: [],
        seriesData: []
      },
      goodList: [],
      brandList: [],
      provinceList: [],
      cityList: [],

      barLoading: true,
      barData: {
        xAxisData: [],
        seriesData: []
        // legend: []
      },
      barReq: {
        goodsNo: '',
        province: '',
        city: '',

        provinceCode: '',
        cityCode: ''
      },
      saleTop10: ''
    }
  },
  methods: {
    requestData () {
      this.requestCountInfo()
      if (!this.isBrand) {
        this.requestBrandList()
      }
    },
    requestCountInfo () {
      if (this.platform) {
        this.api({
          apiName: 'getHomeData',
          success: (res) => {
            console.log(res)
            let {
              gmv,
              merchantNum,
              orderNum,
              spuNum,
              userNum,
              yesterdayNewAddGmv,
              yesterdayNewAddMerchantNum,
              yesterdayNewAddOrderNum,
              yesterdayNewAddSpuNum,
              yesterdayNewAddUserNum
            } = res.data
            this.inforCardData.userNum.count = userNum
            this.inforCardData.yesterdayNewAddUserNum.count = yesterdayNewAddUserNum
            this.inforCardData.merchantNum.count = merchantNum
            this.inforCardData.yesterdayNewAddMerchantNum.count = yesterdayNewAddMerchantNum
            this.inforCardData.spuNum.count = spuNum
            this.inforCardData.yesterdayNewAddSpuNum.count = yesterdayNewAddSpuNum
            this.inforCardData.orderNum.count = orderNum
            this.inforCardData.yesterdayNewAddOrderNum.count = yesterdayNewAddOrderNum
            this.inforCardData.gmv.count = gmv
            this.inforCardData.yesterdayNewAddGmv.count = yesterdayNewAddGmv
            let totalNum = []
            let totalSales = []
            JSON.parse(res.data.salesTrend.y).forEach(item => {
              totalNum.push(item.totalNum)
              totalSales.push(item.totalSales)
            })
            let xAxisData = []
            JSON.parse(res.data.salesTrend.x)
              .forEach(item => {
                xAxisData.push(`${item}月`)
              })
            this.lineData = {
              xAxisData: xAxisData,
              totalNum: totalNum,
              totalSales: totalSales
            }
            let xAxisDataS = []
            JSON.parse(res.data.salesStatistics.x)
              .forEach(item => {
                xAxisDataS.push(`${item}月`)
              })
            this.barData = {
              xAxisData: xAxisDataS,
              seriesData: JSON.parse(res.data.salesStatistics.y)
            }
          }
        })
      } else {
        this.api({
          apiName: 'merchantStatistics',
          success: (res) => {
            // console.log('1', res)
            let {
              spuNum,
              orderNum,
              salesNum,
              yesterdayNewAddSalesNum,
              storeCollections,
              todayTurnover,
              todayOrderNum,
              todayViews,
              todayWaitPayOrderNum,
              saleTop10
            } = res.data
            this.inforCardShop.spuNum.count = spuNum
            this.inforCardShop.orderNum.count = orderNum
            this.inforCardShop.salesNum.count = salesNum
            this.inforCardShop.yesterdayNewAddSalesNum.count = yesterdayNewAddSalesNum
            this.inforCardShop.storeCollections.count = storeCollections
            this.todayCardShop.todayTurnover.count = todayTurnover
            this.todayCardShop.todayOrderNum.count = todayOrderNum
            this.todayCardShop.todayViews.count = todayViews
            this.todayCardShop.todayWaitPayOrderNum.count = todayWaitPayOrderNum
            let totalNum = []
            let totalSales = []
            JSON.parse(res.data.salesVolume.y).forEach(item => {
              totalNum.push(item.totalNum)
              totalSales.push(item.totalSales)
            })
            let xAxisData = []
            JSON.parse(res.data.salesVolume.x)
              .forEach(item => {
                xAxisData.push(`${item}月`)
              })
            this.lineData = {
              xAxisData: xAxisData,
              totalSales: JSON.parse(res.data.salesVolume.y)
            }
            let xAxisDataS = []
            JSON.parse(res.data.orderNumMonth.x)
              .forEach(item => {
                xAxisDataS.push(`${item}月`)
              })
            this.barData = {
              xAxisData: xAxisDataS,
              seriesData: JSON.parse(res.data.orderNumMonth.y)
            }
            this.saleTop10 = saleTop10
          }
        })
      }
    },
    requestBrandList () {
      this.api({
        apiName: 'getAllBrand',
        success: (res) => {
          this.brandList = res.data || []
        }
      })
    }
  },
  mounted () {
    this.requestData()
  }
}
</script>

<style lang="less">
.count-style {
  font-size: 22px;
  font-weight: bold;
}
.count-error-style {
  font-size: 22px;
  font-weight: bold;
  color: #ed4014;
}
.home-con {
  .chart-opt {
    position: absolute;
    z-index: 6;
    right: 16px;
    top: 16px;
  }
  .chart-opt .good-select {
    width: 160px;
    margin-right: 5px;
  }
  .chart-opt .address-select {
    width: 140px;
    margin-right: 5px;
  }

}
.today-main {
    // min-width: 1000px;
    // min-height: 600px;
    margin-top: 20px;
    padding: 30px;
    .today-info{
      width: 100%;
      height: 100%;
      display: flex;
      // flex: 1;
      flex-wrap:wrap;
      .today-item{
        margin-bottom: 40px;
        list-style: none;
        width: 48%;
        text-align: center;
        // overflow: hidden;
        display: flex;
        .img{
          // float: left;
          width: 48px;
          margin-right: 10px;
          // text-align: center;
        }
        .info{
          // float: left;
          // text-align: center;
          .item-label{
            // width: 22px;
            // height: 9px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 20px;
                      }
          .iten-info{
            // width: 27px;
            // height: 14px;
            font-size: 20px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #140603;
            line-height: 30px;
          }
        }
      }

    }

}
.sales-volume{
  height:300px;
  width:100%;
  .title{
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
    .title-ranking{
      width:10%;
      text-align:center;
      display:block;
      // height: 9px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #140603;
      line-height: 14px;
    }
    .title-commodity{
      width:50%;
      text-align:center;
      display:block;
      // height: 9px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #140603;
      line-height: 14px;
    }
    .title-sales{
      width:25%;
      text-align:center;
      display:block;
      // height: 9px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #140603;
      line-height: 14px;
    }
  }
  .commodity-info{
    width: 100%;
    // height: 100%;
    display: flex;
    justify-content: space-between;
    height: 25px;
    .title-ranking{
      width:10%;

      display:block;
      text-align:center;
    }
    .title-commodity{
      width:50%;
      text-align:center;
      display:block;
    }
    .title-sales{
      width:25%;
      text-align:center;
      display:block;
    }
  }
}
 .head-info{
      width: 100%;
      height: 100%;
      // display: flex;
      // // flex: 1;
      // flex-wrap:wrap;
      display: grid;
      // grid-template-columns: 17% 17% 17% 17% 17%;
      // grid-template-rows: 50px 50px 50px 50px 50px;
      grid-template-columns: repeat(auto-fill, 18% );
      height: 110px;
      grid-row-gap: 2%;
      grid-column-gap: 2%;
      .head-item{
        // margin-bottom: 40px;
        list-style: none;
        // width: 17%;
        border-radius: 10px;
        height: 80px;
        background-color: #FFFFFF;
        text-align: center;
        // overflow: hidden;
        display: flex;
        .head-img{
          // float: left;
          width: 60px;
          height: 60px;
          margin: 10px ;
          // text-align: center;
        }
        .info{
          // float: left;
          // text-align: center;
          .item-label{
            // width: 22px;
            // height: 9px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 20px;
                      }
          .iten-info{
            // width: 27px;
            // height: 14px;
            margin-top: 10px;
            font-size: 20px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #140603;
            line-height: 30px;
          }
        }
      }

    }
</style>
