<template>
	<view class="rf-index">
		<view class="index">
			<view class="header">
				<view class="header-warp">
					<view class="header-left">
						<view class="uni-list">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker @change="bindPickerChange" :value="index" :range="shopArray" range-key="name">
										<view class="uni-input" >{{ shopArray[index].name }}</view>
									</picker>
									<image src="../../static/images/downicon.png" mode="" class="icon"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="header-bar header-center">首页</view>
					<view class="header-right">
						<image src="../../static/images/seticon.png" mode="" class="icon" @tap="tosetting"></image>
					</view>
				</view>
				<view class="user">
          <!-- #ifdef MP-WEIXIN -->
					<view class="user-left">
            <open-data type="userAvatarUrl" class="usericon"></open-data>
						<view class="message">
              <open-data type="userNickName" class="name"></open-data>
							<view class="tele"></view>
						</view>
					</view>
          <!-- #endif -->
          
          <!-- #ifndef MP-WEIXIN -->
          <view class="user-left">
            <view class="usericon">
              	<image src="../../static/missing-face.png" mode="widthFix"></image>
            </view>
						<view class="message">
              <view class="name"></view>
							<view class="tele"></view>
						</view>
					</view>
					<!-- #endif -->

					<view class="user-right" @tap="scanCode">
						<image src="../../static/images/scan.png" mode="" class="sacnicon"></image>
						<view class="txt">
							验证码核销
						</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 284upx;"></view>

      <!-- 输入框 -->
      <view class="input-code">
        <input type="text" v-model="ordernum" maxlength="-1" placeholder-style="color:#b8bbbb;font-size:28upx;" class="code" placeholder="请输入兑换码或者订单号">
        <view class="search" @tap="searchOrder">搜索</view>
      </view>
			<view class="index-content">
				<!-- 关键指数 -->
				<view class="exponent">
					<view class="title-warp">
						<view class="name">
							关键指数
						</view>
						<view class="time">
							数据截至：{{ this_day }}
						</view>
					</view>
					<view class="exponent-list">
						<view class="item seale">
							<view class="left">
								<view class="title">
									销售总额
								</view>
								<view class="num">
									{{sellSun.num}}
								</view>
								<view class="ratio">
									<view class="detail">
										<image src="../../static/images/down.png" class="icon" v-if="sellSun.yesnum >= sellSun.todaynum">
										<image src="../../static/images/up.png" class="icon" v-if="sellSun.yesnum < sellSun.todaynum">
                     {{ sellSun.percent }}% 
                     <!-- <text class="compare">{{ sellSun.status ? '无增长' :'同比上月' }}</text> -->
                     <text class="compare">同比上月</text>
									</view>
								</view>
							</view>
							<view class="right">
								<image src="../../static/images/sealenum.png" mode="" class="logoicon"></image>
							</view>
						</view>
						<view class="item order">
							<view class="left">
								<view class="title">
									订单总量
								</view>
								<view class="num">
									{{parseInt(orderSun.num *100)}}
								</view>
								<view class="ratio">
									<view class="detail">
										<image src="../../static/images/down.png" class="icon" v-if="orderSun.yesnum >=orderSun.todaynum">
										<image src="../../static/images/up.png" class="icon" v-if="orderSun.yesnum < orderSun.todaynum"> {{ orderSun.percent }}% 
                    <!-- <text class="compare">{{ orderSun.status ? '无增长' :'同比上月' }}</text> -->
                    <text class="compare">同比上月</text>
									</view>
								</view>
							</view>
							<view class="right">
								<image src="../../static/images/ordernum.png" mode="" class="logoicon"></image>
							</view>
						</view>
						<view class="item todayseale">
							<view class="left">
								<view class="title">
									今日销售额
								</view>
								<view class="num">
									{{todaysellSun.num}}
								</view>
								<view class="ratio">
									<view class="detail">
										<image src="../../static/images/down.png" class="icon" v-if="todaysellSun.yesnum >= todaysellSun.todaynum">
										<image src="../../static/images/up.png" class="icon" v-if="todaysellSun.yesnum < todaysellSun.todaynum"> {{ todaysellSun.percent }}%
                   <!-- <text class="compare">{{ todaysellSun.status ? '无增长' :'同比昨日' }}</text> -->
                   <text class="compare">同比昨日</text>
									</view>
								</view>
							</view>
							<view class="right">
								<image src="../../static/images/purse.png" mode="" class="logoicon"></image>
							</view>
						</view>
						<view class="item todayorder">
							<view class="left">
								<view class="title">
									今日订单量
								</view>
								<view class="num">
									{{todayorderSun.num*100}}
								</view>
								<view class="ratio">
									<view class="detail">
                    <image src="../../static/images/down.png" class="icon" v-if="todayorderSun.yesnum >=todayorderSun.todaynum">
										<image src="../../static/images/up.png" class="icon" v-if="todayorderSun.yesnum < todayorderSun.todaynum"> {{ todayorderSun.percent }}% 
                    <!-- <text class="compare">{{ todayorderSun.status ? '无增长' :'同比上月' }}</text> -->
                    <text class="compare">同比昨日</text>
									</view>
								</view>
							</view>
							<view class="right">
								<image src="../../static/images/todayordernum.png" mode="" class="logoicon"></image>
							</view>
						</view>
					</view>
				</view>

				<!-- 待处理事物 -->
				<view class="something">
					<view class="title">
						待处理事物
					</view>
					<view class="todo-list">
						<view class="item">
							<view class="title">
								待审核店铺
							</view>
							<view class="num">
								{{ pendingData.store }}
							</view>
						</view>
						<view class="item">
							<view class="title">
								待审核商品
							</view>
							<view class="num">
							  {{ pendingData.shop }}
							</view>
						</view>
						<view class="item">
							<view class="title">
								待上架产品
							</view>
							<view class="num">
  							{{ pendingData.shelf }}
							</view>
						</view>
            	<view class="item">
							<view class="title">
								待退款订单
							</view>
							<view class="num">
								{{ pendingData.refund }}
							</view>
						</view>
						<view class="item ">
							<view class="title">
								已支付订单
							</view>
							<view class="num">
								{{ pendingData.payorder }}
							</view>
						</view>

					</view>
				</view>

				<!-- 数据概况 -->
				<view class="data">
					<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
						<view class="qiun-title-dot-light">数据概况</view>
					</view>
          <!-- 产品销售数量走势 -->
					<view class="echarts shopsell">
						<view class="title">
							<view class="left">
								<text class="future">产品销售数量走势
								</text>
							</view>
							<view class="right">
                <view class="today-icon"></view><text class="title">今日</text>
								<view class="yesterday-icon"></view><text class="title">昨日</text>
							</view>
						</view>
						<view class="qiun-charts">
							<canvas canvas-id="shopsellEcharts" id="shopsellEcharts" class="shopsellEcharts" disable-scroll=true  @touchend="shopSellEndTouch"></canvas>
              <text class="loadingMore" v-if="loadingMore1">加载中...</text>
              <image class="shopsellimg" :src="shopsellimg" v-if="!loadingMore1"></image>
						</view>
					</view>
          <!-- 产品销售金额走势 -->
					<view class="echarts shopmoney">
						<view class="title">
							<view class="left">
								<text class="future">产品销售金额走势
								</text>
							</view>
							<view class="right">
								<view class="today-icon"></view><text class="title">今日</text>
								<view class="yesterday-icon"></view><text class="title">昨日</text>
							</view>
						</view>
						<view class="qiun-charts">
							<canvas canvas-id="shopmoneyEcharts" id="shopmoneyEcharts" class="shopmoneyEcharts" @touchstart="shopMoneyTouch"></canvas>
              <text class="loadingMore" v-if="loadingMore2">加载中...</text>
              <image class="shopmoneyimg" :src="shopmoneyimg" v-if="!loadingMore2"></image>
						</view>
					</view>
          <!-- 未来7天预定 -->
					<view class="echarts future">
						<view class="title">
							<view class="left">
								<text class="future">未来七天预定</text>
							</view>
							<view class="right">
								<view class="today-icon"></view><text class="title">今日</text>
							</view>
						</view>
						<view class="qiun-charts">
							<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
              <text class="loadingMore" v-if="loadingMore3">加载中...</text>
              <image class="futureimg" :src="futureimg" v-if="!loadingMore3"></image>
						</view>
					</view>
				</view>

				<!-- 商品销售占比 -->
				<view class="shop-echarts-warp">
					<view class="title">
						商品销售占比
					</view>
					<view class="shop-echarts">
						<canvas canvas-id="shopecharts" id="shopecharts" class="shopecharts" @touchstart="touchPie"></canvas>
            <text class="loadingMore" v-if="loadingMore4">加载中...</text>
            <image class="shopimg" :src="shopimg" v-if="!loadingMore4"></image>
					</view>
				</view>

        <view id="testecharts"></view>
			</view>

      <tabBar :currentIndex="typeNum"></tabBar>
		</view>
    <mask :txt="masktxt" :iconShow="iconShow" v-if="isShowMask" @isSureConver="isSureConver"></mask>
		<rf-loading v-if="loading"></rf-loading>
	</view>
</template>
<script>
import uCharts from '../../js_sdk/u-charts/u-charts/u-charts';
import moment from '@/common/moment';
import mask from '../components/mask';

let _self;
let canvaLineA = null;
let canvaPie = null;
let shopSellLine = null;
let shopMoneyLine = null;
let getDataBuyTime = null;
export default {
  name: 'Header',
  components: {
    mask,
  },
  data() {
    return {
      // tabbar
      typeNum: 0,
      

      loadingMore1: true,
      loadingMore2: true,
      loadingMore3: true,
      loadingMore4: true,
      //用户信息
      userInfo: uni.getStorageSync('wechatUserInfo'),
      loading: true,

      // 遮罩层
      isShowMask: false,
      iconShow: false,
      masktxt: '',

      shopArray: [{ name: '全部', id: 0 }],
      shopID: 0,
      index: 0,
      // 商品销售走势
      shopwidth: '',
      shopheight: '',

      // 销售金额走势
      moneywidth: '',
      moneyheight: '',

      // 未来七天
      cWidth: '',
      cHeight: '',

      // 饼图数据
      bWidth: '',
      bHeight: '',

      pixelRatio: 1, // 像素比
      ordernum: '', // 订单号

      orderMessage: {},

      todayforday: moment().format('YYYY-MM-DD HH:mm:ss'),
      today: moment().format('YYYY-MM-DD'),
      this_day: moment().format('YYYY.MM.DD'),

      // 数据还可以优化
      sellSun: {
        num: 0,
        percent: 0,
        status: null,
        yesnum: 0,
        todaynum: 0,
      },
      todaysellSun: {
        num: 0,
        percent: 0,
        status: null,
        yesnum: 0,
        todaynum: 0,
      },
      orderSun: {
        num: 0,
        percent: 0,
        status: null,
        yesnum: 0,
        todaynum: 0,
      },
      todayorderSun: {
        num: 0,
        percent: 0,
        status: null,
        yesnum: 0,
        todaynum: 0,
      },

      // 待处理事物
      pendingData: {
        store: 0,
        shop: 0,
        shelf: 0,
        payorder: 0,
        refund: 0,
      },
      shopsellimg: '',
      shopmoneyimg: '',
      futureimg: '',
      shopimg: '',
    };
  },

  // 此处定义传入的数据
  props: {
    shoplist: {
      type: Object,
      value: null,
    },
  },
  onLoad () {
  },
  onShow() {
    this.todayforday = moment().format('YYYY-MM-DD HH:mm:ss')
    _self = this;
    this.cWidth = uni.upx2px(690); // upx2px 转换为px
    this.cHeight = uni.upx2px(300);
    this.bWidth = uni.upx2px(690);
    this.bHeight = uni.upx2px(300);

    this.getShopList();
    this.loading = false;

    getDataBuyTime = setInterval(() => {
      this.todayforday = moment().format('YYYY-MM-DD HH:mm:ss')
      this.loading = false;
      this.getShopList();
      this.$mHelper.toast(`自动更新数据${moment().format('h:mm:ss')}`);
    }, 1000 * 60 * 5);
  },
  onHide() {
    clearInterval(getDataBuyTime);
  },
  methods: {
    // 监听遮罩层行为
    isSureConver(e) {
      this.isShowMask = false;
      this.$mRouter.back();
    },
    // 扫码订单
    scanCode() {
      // 允许从相机和相册扫码
      uni.scanCode({
        success: function (res) {
          if (res.result.indexOf('XDY_') !== 0) {
            _self.$mHelper.toast('您扫描的不是兑换码！');
            return;
          }
          _self.ordernum = res.result;
          _self.searchOrder();
        },
      });
    },
    // 搜索框根据订单号查询订单
    searchOrder() {
      this.loading = true;
      if (this.ordernum.length === 0) {
        this.$mHelper.toast('请输入正确的兑换码或者订单号进行兑换，不能为空！');
        this.loading = false;
        return;
      }
      this.$http
        .get('/orders/getOrdersByNo/' + this.ordernum)
        .then((res) => {
          if (res.code === 200) {
            this.ordernum = '';
            uni.setStorageSync('orderDetail', res.data);
            this.$mRouter.push({ route: '/pages/index/conversion' });
            this.orderMessage = res.data;
            this.loading = false;
          }
        })
        .catch((error) => {
          this.ordernum = '';
          this.loading = false;
        });
    },

    // 选择商铺
    bindPickerChange(e) {
      this.loading = true;
      this.shopID = null;
      this.index = e.detail.value;
      this.shopID = this.shopArray[this.index].id;
      this.getExponentData();
      this.getPendingData();
      this.futureDayData();
      this.shopSellData();
      this.shopSellTrend();
      this.shopSellMoneyTrend();
      this.loading = false;
    },

    // 跳转设置页
    tosetting() {
      this.$mRouter.push({ route: '/pages/index/setting/setting' });
    },

    // 获取店铺列表
    async getShopList() {
      this.loading = true
      await this.$http.get('/homePage/getShopByMerId').then((res) => {
        if (res.data && res.code === 200) {
          let newarr = [{ name: '全部', id: 0 }];
          this.shopArray = newarr.concat(res.data);
          this.getExponentData();
          this.getPendingData();
          this.shopSellTrend();
          this.shopSellMoneyTrend();
          this.futureDayData();
          this.shopSellData();
          this.loading = false
        }
      })
    },
    // 关键指数
    async getExponentData() {
      if (this.shopID === 0) {
        this.shopID = '';
      }
      await this.$http
        .get('/homePage/gjzs', {
          date: this.todayforday,
          shopId: this.shopID,
        })
        .then(async (res) => {
          if (res.code === 200 && res.data) {
            // 销售总额
            this.dataDo(res.data.xsze, this.sellSun);
            // 今日销售总额
            this.dataDODO(res.data.jrxxe, this.todaysellSun);
            // 订单总量
            this.dataDo(res.data.ddzl, this.orderSun);
            // 今日订单总量
            this.dataDODO(res.data.jrdds, this.todayorderSun);
          }
        });
    },
    // 指数数据处理
    dataDo(data, itemEle) {
      let todaynum = 0;
      let yesnum = 0;
      data.forEach((element) => {
        if (element.time === 'all') {
          itemEle.num = (element.num / 100).toFixed(2);
        } else if (element.time === 'dy') {
          todaynum = element.num;
          itemEle.todaynum = element.num;
        } else if (element.time === 'sy') {
          yesnum = element.num;
          itemEle.yesnum = element.num;
        }
      });
      if (yesnum === 0) {
        itemEle.percent = 100;
      } else {
        itemEle.percent = (((todaynum - yesnum) / yesnum) * 100).toFixed(2);
      }
      if (yesnum === todaynum) {
        itemEle.percent = 0;
        itemEle.status = true;
      } else {
        itemEle.status = false;
      }
      return itemEle;
    },
    dataDODO(data, itemEle) {
      let todaynum = 0;
      let yesnum = 0;
      data.forEach((element) => {
        if (element.time === 'jr') {
          itemEle.num = (element.num / 100).toFixed(2);
          todaynum = element.num;
          itemEle.todaynum = element.num;
        } else if (element.time === 'zr') {
          yesnum = element.num;
          itemEle.yesnum = element.num;
        }
      });

      let per = (((todaynum - yesnum) / yesnum) * 100).toFixed(2);
      if (todaynum >= yesnum) {
        itemEle.percent = per.split('-')[0];
      } else {
        itemEle.percent = per.split('-')[1];
      }
      
      if (yesnum === todaynum) {
        itemEle.percent = 0;
        itemEle.status = true;
      } else {
        itemEle.status = false;
      }

      if (yesnum === 0) {
        itemEle.percent = 100;
      }
      return itemEle;
    },
    // 待处理事物
    async getPendingData() {
      if (this.shopID === 0) {
        this.shopID = '';
      }
      await this.$http
        .get('/homePage/pendingTransaction', {
          date: this.todayforday,
          shopId: this.shopID,
        })
        .then(async (res) => {
          if (res.data) {
            this.pendingData.store = res.data.shopCheck;
            this.pendingData.shop = res.data.goodsCheck;
            this.pendingData.shelf = res.data.upGoods;
            this.pendingData.payorder = res.data.payNum;
            this.pendingData.refund = res.data.refundNum;
          }
        });
    },

    // 商品销售数量走势
    async shopSellTrend() {
      this.loadingMore1 = true;
      if (this.shopID === 0) {
        this.shopI = '';
      }
      await this.$http
        .get('/homePage/getData2', {
          date: this.todayforday,
          shopId: this.shopID,
        })
        .then(async (res) => {
          if (res.data) {
            let shopSellData = {
              xdata: [],
              jrdata: [],
              zrdata: [],
            };

            res.data.forEach((ele) => {
              shopSellData.xdata.push(ele.time);
              shopSellData.jrdata.push(ele.jr);
              shopSellData.zrdata.push(ele.zr);
            });
            _self.shopSellEcharts('shopsellEcharts', shopSellData);
          }
        });
    },
    shopSellEcharts(id, echartsData) {
      shopSellLine = new uCharts({
        $this: _self,
        canvasId: id,
        type: 'line',
        fontSize: 12,
        legend: {
          show: false,
        },
        dataLabel: true,
        duration: 500,
        dataPointShape: false, // 折点
        animation: false,
        background: '#FFFFFF',
        pixelRatio: _self.pixelRatio,
        categories: echartsData.xdata, // x轴数据
        series: [
          {
            textColor: '#ffcc01',
            color: '#ffcc01',
            data: echartsData.jrdata,
            name: '今日',
            pointShape: 'circle',
            show: true,
            type: 'line',
          },
          {
            color: '#7d66f3',
            textColor: '#7d66f3',
            data: echartsData.zrdata,
            name: '昨日',
            pointShape: 'circle',
            show: true,
            type: 'line',
          },
        ], // 值
        // enableScroll: true,
        xAxis: {
          type: 'grid',
          disableGrid: true,
          labelCount: 7,
        },
        yAxis: {
          gridType: 'solid',
          gridColor: '#cccccc',
          min: 0,
          max: 180,
          data: [
            {
              axisLine: false,
              format: (val) => {
                return val.toFixed(0);
              },
            },
          ],
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        padding: [15, 15, 4, 15],
        extra: {
          line: {
            type: 'curve', // 平滑曲线； straight直线
          },
        },
      });
      setTimeout(() => {
        uni.canvasToTempFilePath(
          {
            //将图表转成图片
            x: 0,
            y: 0,
            width: _self.cWidth * _self.pixelRatio,
            height: _self.cHeight * _self.pixelRatio,
            fileType: 'png',
            canvasId: id,
            success: function (res) {
              _self.loadingMore1 = false;
              _self.shopsellimg = res.tempFilePath;
            },
            fail: function (res) {},
          },
          _self
        );
      }, 1000);
    },
    shopSellEndTouch(e) {
      shopSellLine.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data;
        },
      });
    },

    // 商品销售金额走势
    async shopSellMoneyTrend() {
      this.loadingMore2 = true;
      if (this.shopID === 0) {
        this.shopI = '';
      }
      await this.$http
        .get('/homePage/getData3', {
          date: this.todayforday,
          shopId: this.shopID,
        })
        .then(async (res) => {
          if (res.data) {
            let shopMoney = {
              xdata: [],
              jrdata: [],
              zrdata: [],
            };

            res.data.forEach((ele) => {
              shopMoney.xdata.push(ele.time);
              shopMoney.jrdata.push(ele.jr);
              shopMoney.zrdata.push(ele.zr);
            });
            _self.shopMoneyEcharts('shopmoneyEcharts', shopMoney);
          }
        });
    },
    shopMoneyEcharts(id, echartsData) {
      shopMoneyLine = new uCharts({
        $this: _self,
        canvasId: id,
        type: 'line',
        fontSize: 12,
        legend: {
          show: false,
        },
        dataLabel: true, // 图表中是否显示数据
        duration: 500,
        dataPointShape: false, // 折点
        background: '#FFFFFF',
        pixelRatio: _self.pixelRatio,
        categories: echartsData.xdata, // x轴数据
        series: [
          {
            textColor: '#f79554',
            color: '#f79554',
            data: echartsData.jrdata,
            name: '今日',
            pointShape: 'circle',
            show: true,
            type: 'line',
          },
          {
            color: '#2ad3a1',
            textColor: '#2ad3a1',
            data: echartsData.zrdata,
            name: '昨日',
            pointShape: 'circle',
            show: true,
            type: 'line',
          },
        ], // 值
        animation: false,
        xAxis: {
          type: 'grid',
          disableGrid: true,
          labelCount: 7,
        },
        yAxis: {
          gridType: 'solid',
          gridColor: '#CCCCCC',
          min: 0,
          max: 180,
          data: [
            {
              axisLine: false,
              format: (val) => {
                return val.toFixed(2);
              },
            },
          ],
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        padding: [15, 15, 4, 15],
        extra: {
          line: {
            type: 'curve', // 平滑曲线； straight直线
          },
        },
      });
      setTimeout(() => {
        uni.canvasToTempFilePath(
          {
            //将图表转成图片
            x: 0,
            y: 0,
            width: _self.cWidth * _self.pixelRatio,
            height: _self.cHeight * _self.pixelRatio,
            fileType: 'png',
            canvasId: id,
            success: function (res) {
              _self.loadingMore2 = false;
              _self.shopmoneyimg = res.tempFilePath;
            },
            fail: function (res) {},
          },
          _self
        );
      }, 1000);
    },
    shopMoneyTouch(e) {
      shopMoneyLine.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data;
        },
      });
    },

    // 未来七天
    async futureDayData() {
      this.loadingMore3 = true;
      if (this.shopID === 0) {
        this.shopID = '';
      }
      await this.$http
        .get('/homePage/getData0', {
          date: this.todayforday,
          shopId: this.shopID,
        })
        .then(async (res) => {
          if (res.data) {
            let LineA = {
              categories: [],
              series: [],
            };
            res.data.forEach((ele) => {
              LineA.series.push(ele.num);
              LineA.categories.push(ele.date.slice(5));
            });
            _self.showLineA('canvasLineA', LineA);
          }
        });
    },
    showLineA(canvasId, chartData) {
      canvaLineA = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: 'line',
        fontSize: 12,
        legend: {
          show: false,
        },
        dataLabel: true, // 图表中是否显示数据
        duration: 500,
        dataPointShape: false, // 折点
        pixelRatio: _self.pixelRatio,
        categories: chartData.categories, // x轴数据
        series: [
          {
            textColor: '#ed70c1',
            color: '#ed70c1',
            data: chartData.series,
            name: '人次',
            pointShape: 'circle',
            show: true,
            type: 'line',
          },
        ], // 值
        animation: false,
        xAxis: {
          type: 'grid',
          disableGrid: true,
        },
        yAxis: {
          gridType: 'solid',
          gridColor: '#CCCCCC',
          min: 0,
          max: 180,
          data: [
            {
              axisLine: false,
              format: (val) => {
                return val.toFixed(0);
              },
            },
          ],
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        padding: [15, 15, 4, 15],
        extra: {
          line: {
            type: 'curve', // 平滑曲线； straight直线
          },
        },
      });
      setTimeout(() => {
        uni.canvasToTempFilePath(
          {
            //将图表转成图片
            x: 0,
            y: 0,
            width: _self.cWidth * _self.pixelRatio,
            height: _self.cHeight * _self.pixelRatio,
            fileType: 'png',
            canvasId: canvasId,
            success: function (res) {
              _self.loadingMore3 = false;
              _self.futureimg = res.tempFilePath;
            },
            fail: function (res) {},
          },
          _self
        );
      }, 1000);
    },
    touchLineA(e) {
      canvaLineA.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data;
        },
      });
    },

    // 商品销售占比
    async shopSellData() {
      this.loadingMore4 = true;
      await this.$http
        .get('/homePage/getData1', {
          date: this.todayforday,
          shopId: this.shopID,
        })
        .then(async (res) => {
          let pie = {
            series: [],
          };
          if (res.data.length > 0) {
            for (let i = 0; i < res.data.length; i++) {
              let element = res.data[i];
              pie.series.push({ name: element.name, data: element.value });
            }
            _self.showPie('shopecharts', pie);
          } else {
            pie.series = [{ name: '无数据', data: 0 }];
            _self.showPie('shopecharts', pie);
          }
        });
    },
    // 饼图
    showPie(canvasId, chartData) {
      canvaPie = new uCharts({
        $this: _self,
        colors: ['#FFBC3C', '#F25051', '#FE7DDE', '#4880FF', '#47EDFB'],
        canvasId: canvasId,
        type: 'pie',
        fontSize: 12,
        legend: {
          show: true,
          position: 'left',
          float: 'center',
          itemGap: 10,
          padding: 5,
          lineHeight: 20,
          margin: 5,
          borderWidth: 1,
        },
        background: '#FFFFFF',
        pixelRatio: _self.pixelRatio,
        series: chartData.series,
        animation: false,
        width: _self.bWidth * _self.pixelRatio,
        height: _self.bHeight * _self.pixelRatio,
        dataLabel: true,
        extra: {
          pie: {
            lableWidth: 15,
          },
        },
      });
      setTimeout(() => {
        uni.canvasToTempFilePath(
          {
            //将图表转成图片
            x: 0,
            y: 0,
            width: _self.cWidth * _self.pixelRatio,
            height: _self.cHeight * _self.pixelRatio,
            fileType: 'png',
            canvasId: canvasId,
            success: function (res) {
              _self.loadingMore4 = false;
              _self.shopimg = res.tempFilePath;
            },
            fail: function (res) {},
          },
          _self
        );
      }, 1000);
    },
    touchPie(e) {
      canvaPie.showToolTip(e, {
        format: function (item) {
          return item.name + ':' + item.data;
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
canvas {
  position: absolute;
  left: -999999upx;
}
.shopsellimg,
.shopmoneyimg,
.futureimg,
.shopimg {
  width: 690upx;
  height: 300upx;
}

.header {
  width: 100%;
  padding: 0 30rpx;
  background-color: $barColor;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  z-index: 99;

  .header-warp {
    display: flex;
    height: 80rpx;
    color: #231726;
    background-color: #ffcc01;
    position: relative;
    .header-left {
      position: absolute;
      font-size: 28rpx;
      .uni-list:after {
        border-color: transparent;
      }
      .uni-list-cell-db {
        height: 80rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: $barColor;

        .icon {
          width: 17rpx;
          height: 12rpx;
          margin-left: 10rpx;
        }
      }
    }

    .header-center {
      flex: 1;
      font-size: 36rpx;
      font-weight: 700;
      text-align: center;
      line-height: 80rpx;
    }

    .header-right {
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -20upx;
      .icon {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }

  .user {
    padding: 30upx 30upx 75upx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .user-left {
      display: flex;
      justify-content: center;
      align-items: center;

      .usericon {
        width: 100upx;
        height: 100upx;
        border-radius: 50%;
        background-color: #ffffff;
        overflow: hidden;
      }

      .message {
        margin-left: 32rpx;
        color: #2c1b0a;

        .name {
          font-size: 30rpx;
          font-weight: 700;
        }

        .tele {
          font-size: 24rpx;
        }
      }
    }

    .user-right {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .sacnicon {
        width: 40rpx;
        height: 40rpx;
      }

      .txt {
        font-size: 24rpx;
        margin-top: 20rpx;
      }
    }
  }
}

.input-code {
  position: fixed;
  left: 50%;
  margin-left: -344upx;
  top: 234upx;
  background-color: #fff;
  width: 686upx;
  padding: 0 38upx;
  box-shadow: 0 10upx 10upx rgba($color: #f4f4f4, $alpha: 0.1);
  z-index: 100;
  border-radius: 10upx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .code {
    flex: 1;
    height: 100upx;
  }
  .search {
    width: 60upx;
    height: 100upx;
    line-height: 100upx;
    font-size: 28upx;
    color: #ffcd00;
    margin-left: 20upx;
  }
}
.heiden {
  transition: all 0.5s linear;
  opacity: 0;
}
.index {
  background-color: #fafafa;
  padding-bottom: 50upx;

  .index-content {
    padding: 85upx 33rpx 41upx;

    .exponent {
      .title-warp {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;

        .name {
          font-size: 32rpx;
          font-weight: 700;
        }

        .time {
          font-size: 24rpx;
          color: #191919;

          .hour {
            margin-left: 15rpx;
          }
        }
      }

      .exponent-list {
        display: flex;
        flex-wrap: wrap;

        .item {
          position: relative;
          width: 320rpx;
          border-radius: 10rpx;
          color: #ffffff;
          // display: flex;
          // justify-content: space-between;
          // align-items: center;
          padding: 25rpx;
          box-sizing: border-box;
          margin-bottom: 32rpx;

          &:nth-child(odd) {
            margin-right: 44rpx;
          }

          &:nth-child(3),
          &:nth-child(4) {
            margin-bottom: 0;
          }

          .left {
            .title {
              font-size: 24rpx;
            }

            .num {
              font-size: 36rpx;
              font-weight: 700;
              margin-top: 5rpx;
            }

            .ratio {
              margin-top: 10rpx;
              font-size: 20rpx;

              .detail {
                display: flex;
                align-items: center;

                .icon {
                  width: 12rpx;
                  height: 16rpx;
                  margin-right: 5rpx;
                }

                .compare {
                  margin-left: 10rpx;
                  font-size: 20rpx;
                }
              }
            }
          }

          .right {
            position: absolute;
            right: 32upx;
            top: 29upx;
            width: 90rpx;
            height: 90rpx;
            border-radius: 50%;
            background-color: rgba($color: #ffffff, $alpha: 0.2);
            display: flex;
            justify-content: center;
            align-items: center;

            .logoicon {
              width: 44rpx;
              height: 53rpx;
            }
          }
        }

        .seale {
          background-image: linear-gradient(to top right, #e379d0, #f767b1);
        }

        .order {
          background-image: linear-gradient(to top right, #f38867, #fca43d);
        }

        .todayseale {
          background-image: linear-gradient(to top right, #9859fd, #d98afa);
        }

        .todayorder {
          background-image: linear-gradient(to top right, #17c1b1, #40e98f);
        }
      }
    }

    .something {
      margin-top: 30rpx;

      .title {
        font-size: 32rpx;
        font-weight: 700;
        color: $titleColor;
      }

      .todo-list {
        display: flex;
        // justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 30rpx;
        background-color: #ffffff;
        box-sizing: border-box;
        padding: 43rpx 30rpx;
        border-radius: 10rpx;

        .item {
          width: 33.33%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          margin-bottom: 30upx;

          .title {
            color: $subheadColor;
            font-size: 30rpx;
          }

          .num {
            color: $titleColor;
          }
        }
      }
    }

    .data {
      margin-top: 40rpx;

      .echarts {
        background-color: #ffffff;
        border-radius: 10rpx;
        margin-bottom: 30upx;
      }
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #333333;
        padding-top: 20rpx;
        padding-left: 15rpx;
        padding-bottom: 20rpx;
        box-sizing: border-box;
        .left {
          .future {
            font-size: 28rpx;
            .num {
              font-size: 30rpx;
            }
            .yesterday {
              margin-left: 10rpx;
            }
          }
        }
        .right {
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          .today-icon {
            width: 20rpx;
            height: 9rpx;
            background-color: #ff9c2f;
            margin-right: 10rpx;
          }
          .title {
            font-size: 20rpx;
            margin-right: 20rpx;
          }
          .yesterday-icon {
            width: 20rpx;
            height: 9rpx;
            background-color: #b15cfa;
            margin-left: 10rpx;
          }

          .title {
            font-size: 20rpx;
          }
        }
      }

      .qiun-title-dot-light {
        color: $titleColor;
        font-size: 32rpx;
        font-weight: 700;
        padding-bottom: 25rpx;
      }

      /* 样式的width和height一定要与定义的cWidth和cHeight相对应 */
      .qiun-charts {
        position: relative;
        width: 690rpx;
        height: 300rpx;
        .loadingMore {
          position: absolute;
          left: 0;
          top: 0;
          width: 690rpx;
          height: 300rpx;
          text-align: center;
          line-height: 300upx;
          font-size: 28upx;
          color: #cccece;
        }
      }

      .charts {
        width: 690rpx;
        height: 300rpx;
      }

      .shopsell {
        .shopsellEcharts {
          width: 690rpx;
          height: 300rpx;
        }
        .title {
          .right {
            .today-icon {
              background-color: #ffcc01;
            }
            .yesterday-icon {
              background-color: #7d66f3;
            }
          }
        }
      }
      .shopmoney {
        .shopmoneyEcharts {
          width: 690rpx;
          height: 300rpx;
        }
        .title {
          .right {
            .today-icon {
              background-color: #f79554;
            }
            .yesterday-icon {
              background-color: #2ad3a1;
            }
          }
        }
      }
      .future {
        .title {
          .right {
            .today-icon {
              background-color: #ed70c1;
            }
          }
        }
      }
    }

    .shop-echarts-warp {
      background-color: #ffffff;
      border-radius: 10rpx;
      margin-top: 40rpx;

      .title {
        padding: 40rpx 24rpx 30rpx;
        font-size: 26rpx;
        color: $titleColor;
      }

      .shop-echarts {
        position: relative;
        width: 690rpx;
        height: 300rpx;
        .loadingMore {
          position: absolute;
          left: 0;
          top: 0;
          width: 690rpx;
          height: 300rpx;
          text-align: center;
          line-height: 300upx;
          font-size: 28upx;
          color: #cccece;
        }
      }

      .shopecharts {
        width: 690rpx;
        height: 300rpx;
      }
    }
  }
}
</style>
