<template>
  <page-meta :page-style="themeColor"></page-meta>

  <div class="index">
    <!-- <u-navbar bgColor="rgba(82, 191, 251,0)" title="" :autoBack="true" leftIconSize="0" placeholder> -->
    <!-- <u-icon name="list" slot="right" color="#333333" size="24" @click="$refs.selectPopup.start()"></u-icon> -->
    <!-- </u-navbar> -->
    <u-navbar bgColor="rgb(55,178,247)" title="" :autoBack="true" leftIconSize="0" placeholder>
      <!-- <u-icon name="list" slot="right" color="#333333" size="24" @click="$refs.selectPopup.start()"></u-icon> -->
    </u-navbar>
    <u-navbar title=" " :autoBack="false" bgColor="transparent" placeholder leftIconSize="0">
    </u-navbar>

    <z-paging ref="paging" v-model="statisticsList" @query="gethomeStat">
      <!-- <view class="booooo">

      </view> -->
      <div class="user" @click="userClick">

        <view class="" v-if="headimg.length > 0">
          <image style="margin-right: 18rpx;" :src="$util.img(headimg)" mode="aspectFill"></image>
        </view>
        <view class="tumin" v-else>

        </view>
        {{ nickname }}
      </div>

      <div class="statistics-list">
        <u-row gutter="30" style="flex-wrap: wrap;">
          <u-col span="4" v-for="(item, index) in statisticsList" :key="index"
                 @click="toCol(item.url, item.page_param, item.value)" class="line_Bottom">
            <view class="statistics-item">
              <div class="value">{{ item.value | filterCo }}</div>
              <div style="text-align: center;">{{ item.label }}</div>
            </view>
          </u-col>
        </u-row>
        <div class="line"></div>
        <div class="line1"></div>
      </div>
      <!-- 工作台 -->

      <div class="workbench" :class="ationList.length == 0 ? 'zhanwei' : ''">
        <div class="title">
          <div>工作台</div>
          <div class="df">
            <!-- <div v-if="ationList.length==0" class="edit" style="margin-right: 24rpx;">请编辑自己的权限</div> -->
            <div class="edit" @click="workbenchEdit">编辑</div>
          </div>
        </div>
        <div class="operation">
          <u-row style="flex-wrap: wrap;" gutter="38">
            <u-col span="3" v-for="(item, index) in box ? operationList : ationList" :key="index"
                   @click="toPage(item.url)">
              <div class="operation-item" @click="btn(index)">
                <div class="badge" v-if="item.con">{{ item.con | filterCount }}</div>
                <image :src="$util.img(item.img)"></image>
                <div>{{ item.name }}</div>
              </div>

            </u-col>
          </u-row>
        </div>
      </div>

      <u-gap height="12" bgColor="#F7F7F7"></u-gap>

      <!-- 营收简报 -->
      <!-- 	<div class="revenue">
      <div class="title">
        <div>营收简报</div>
        <uni-datetime-picker v-model="revenueRange" type="daterange">
          <div class="daterange">
            <div>{{revenueRange[0]}} ~ {{revenueRange[1]}}</div>
            <u-icon size="14" name="arrow-down" color="#c7c7c7" style="margin-left: 8rpx;"></u-icon>
          </div>
        </uni-datetime-picker>
      </div>
      <div class="data_show">
        <div class="item">
          <div class="top">订单量</div>
          <div class="middle">1345.34</div>
          <div class="bottom" style="color: #F33B50">比上周期上升12%</div>
        </div>
        <div class="item">
          <div class="top">订单金额(元)</div>
          <div class="middle">3455.34</div>
          <div class="bottom" style="color: #30C197">比上周期下降8%</div>
        </div>
        <div class="item">
          <div class="top">收款金额(元)</div>
          <div class="middle">1238.77</div>
          <div class="bottom" style="color: #F33B50">比上周期上升66%</div>
        </div>
      </div>
      <div class="subsection">
        <u-subsection style="height: 64rpx;" activeColor="#21BBF3" inactiveColor="#21BBF3" :list="list"
          mode="subsection" :current="sbValue" @change="sbChange"></u-subsection>
      </div>

      <lineChart ref="lineChart" style="margin-top: 50rpx;"></lineChart>
    </div>

    <u-gap height="12" bgColor="#F7F7F7"></u-gap>
    <! 我的客户 -->
      <!-- <div class="client">
      <div class="title">
        <div>我的客户</div>
        <uni-datetime-picker v-model="revenueRange" type="daterange">
          <div class="daterange">
            <div>{{revenueRange[0]}} ~ {{revenueRange[1]}}</div>
            <u-icon size="14" name="arrow-down" color="#c7c7c7" style="margin-left: 8rpx;"></u-icon>
          </div>
        </uni-datetime-picker>
      </div>
      <u-row gutter="15" class="client_box" style="flex-wrap: wrap;">
        <u-col :span="6">
          <div class="item">
            <div class="client_desc">本期活跃客户</div>
            <div class="client_number">668</div>
          </div>
        </u-col>
        <u-col :span="6">
          <div class="item">
            <div class="client_desc">本期下单客户</div>
            <div class="client_number">5321</div>
          </div>
        </u-col>
        <u-col :span="6">
          <div class="item">
            <div class="client_desc">本期拉新客户</div>
            <div class="client_number">5321</div>
          </div>
        </u-col>
        <u-col :span="6">
          <div class="item">
            <div class="client_desc">本期拉新佣金</div>
            <div class="client_number"><span class="rmb">￥</span>5326.35</div>
          </div>
        </u-col>
      </u-row>
    </div>

    <u-gap height="12" bgColor="#F7F7F7"></u-gap>
    <! 我的回款 -->
      <!-- <div class="client">
      <div class="title">
        <div>我的回款</div>
        <uni-datetime-picker v-model="revenueRange" type="daterange">
          <div class="daterange">
            <div>{{revenueRange[0]}} ~ {{revenueRange[1]}}</div>
            <u-icon size="14" name="arrow-down" color="#c7c7c7" style="margin-left: 8rpx;"></u-icon>
          </div>
        </uni-datetime-picker>
      </div>
      <u-row gutter="15" class="client_box" style="flex-wrap: wrap;">
        <u-col :span="6">
          <div class="item">
            <div class="client_desc">当前额度</div>
            <div class="client_number"><span class="rmb">￥</span>100000.00</div>
          </div>
        </u-col>
        <u-col :span="6">
          <div class="item">
            <div class="client_desc">待回款金额</div>
            <div class="client_number"><span class="rmb">￥</span>5326.35</div>
          </div>
        </u-col>
      </u-row>
    </div>
     -->
    </z-paging>
    <userPopup ref="userPopup"></userPopup>

    <tabbar></tabbar>

  </div>
</template>

<script>
import lineChart from "../components/lineChart/lineChart.vue"
import tabbar from "@/components/pageSalesman/tabbar/tabbar.vue"
import userPopup from "./components/userPopup.vue"
import APPUpdate from '@/config/appUpdate.js';
import uniDatetimePicker from "../components/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue"
export default {
  components: {
    lineChart,
    tabbar,
    userPopup,
    uniDatetimePicker
  },
  data() {
    return {
      dataList: [{}, {}, {}],
      sbValue: 0,
      list: ['订单量', '订单金额', '收款金额'],
      revenueRange: ['2023-01-20', '2023-02-01'],
      operationList: [],
      ationList: [],
      headimg: '',
      box: false,
      uid: '',
      nickname: '',
      statisticsList: []
    }
  },
  onReady() {},
  onLoad() {
    // #ifdef APP-PLUS

    // #endif
    APPUpdate(true, true);
  },
  onShow() {
    let _this = this

    uni.removeStorage({
      key: 'salasman',
      success: function(res) {
        console.log(res, '移除成功');
      }
    });
    // this.gethomeStat();
    this.getInfo();
  },
  // onPullDownRefresh() {
  // 	this.gethomeStat();
  // },
  methods: {
    gethomeStat() {
      this.$api.sendRequest({
        url: '/api/salasmanorder/homeStat',
        data: {},
        success: res => {
          console.log(res, '统计数字');
          // uni.stopPullDownRefresh()
          let statisticsList = []
          for (let key in res.data) {
            if (res.data.hasOwnProperty(key)) { // 确保属性是对象自身的属性，而不是继承自原型链的
              let item = res.data[key];
              let url = '';
              let page_param = '';

              // 将每个内部对象转换为具有新属性的新对象
              statisticsList.push({
                type: key,
                label: item.name,
                value: item.num.toString(), // 将数字转换为字符串
                url,
                page_param
              });
              statisticsList.forEach(item => {
                switch (item.type) {
                  case 'adjust_money':
                    item.url = '';
                    item.page_param = '';
                    break;
                  case 'coupon_money':
                    item.url = '';
                    item.page_param = '';
                    break;
                  case 'sales_money':
                    item.url = '';
                    item.page_param = '';
                    break;
                  case 'today_member_hy_num':
                    item.url =
                        '/page_salesman_index/index/top_info/revenue_overview';
                    item.page_param = 'active'
                    break;
                  case 'today_member_new_num':
                    item.url =
                        '/page_salesman_index/index/top_info/revenue_overview';
                    item.page_param = 'new'
                    break;
                  case 'today_order_get_money':
                    item.url =
                        '/page_salesman_index/index/top_info/revenue_overview';
                    item.page_param = 'get'
                    break;
                  case 'today_order_money':
                    item.url =
                        '/page_salesman_index/index/top_info/order_count';
                    item.page_param = 'money_count'
                    break;
                  case 'today_order_num':
                    item.url =
                        '/page_salesman_index/index/top_info/order_count';
                    item.page_param = 'quantity_count'
                    break;
                  case 'today_order_refund_money':
                    item.url =
                        '/page_salesman_index/index/top_info/revenue_overview';
                    item.page_param = 'lose'
                    break;
                  default:
                    break;
                }
              })
              this.$refs.paging.complete(statisticsList);
              // console.log(this.statisticsList);
            }
          }

        }
      })
    },
    getInfo() {
      let _this = this
      this.$api.sendRequest({
        url: '/api/salasman/info',
        data: {},
        success: res => {
          this.uid = res.data.uid
          const authList = uni.getStorageSync("auth" + String(res.data.uid))
          this.headimg = res.data.headimg
          this.nickname = res.data.realname

          if (!authList || authList.length <= 0) {
            //权限设置
            this.box = true
            this.$api.sendRequest({
              url: '/api/salasman/myauthlists',
              data: {},
              success: res => {
                console.log(res, '权限');
                let q = []
                this.$api.sendRequest({
                  url: '/api/salasmanorder/homeRedtotal',
                  data: {},
                  success: restwo => {
                    console.log(restwo.data, '红点');
                    q = restwo.data
                    let a = []
                    res.data.forEach((item, i) => {
                      const id2conFiled = {
                        15: 'order_pay_no',
                        1: 'order_sales_status_no',
                        2: 'order_delivery_no',
                        16: 'order_comment_no',
                        14: 'order_delivery_recive_no',
                        4: 'order_wait_no',
                        3: 'order_refund_no',
                        13: 'message_no',
                        23: (item) => {
                          item
                              .sort =
                              16;
                          return item
                        }
                      }
                      const getField =
                          id2conFiled[
                              item.id]
                      if (getField) {
                        if (typeof getField ===
                            'function') {
                          item =
                              getField(
                                  item)
                        } else {
                          item.con = q[
                              getField
                              ]
                        }
                      }
                      a.push(item)

                    })
                    _this.operationList = a
                    uni.setStorageSync('operationList',
                        res
                            .data);
                    _this.quanxiashez()
                  }
                })

              }
            })
            return
          }

          //红点设置
          let q = []
          this.$api.sendRequest({
            url: '/api/salasmanorder/homeRedtotal',
            data: {},
            success: restwo => {
              console.log(restwo.data, '红点');
              q = restwo.data
              let a = []
              // console.log(q,'红点11');
              authList.forEach((
                  item,
                  i) => {
                // console.log(item,'itemitem');
                // "order_sales_status_no": 49,// 待审核1
                //         "order_pay_no": 0,// 待付款1
                //         "order_delivery_no": 113,// 待发货1
                //         "order_delivery_recive_no": 15,// 待收货1
                //         "order_comment_no": 27,// 待评价
                //         "order_wait_no": 16,// 待确认收款 1
                //         "order_wait_yes": 2, // 已确认收款
                //         "order_refund_no": 2, // 退款售后
                //         "message_no": 2, // 消息通知
                const id2conFiled = {
                  15: 'order_pay_no',
                  1: 'order_sales_status_no',
                  2: 'order_delivery_no',
                  16: 'order_comment_no',
                  14: 'order_delivery_recive_no',
                  4: 'order_wait_no',
                  3: 'order_refund_no',
                  13: 'message_no',
                  23: (item) => {
                    item.sort =
                        16;
                    return item
                  }
                }
                const getField = id2conFiled[item.id]
                if (getField) {
                  if (typeof getField === 'function') {
                    item = getField(item)
                  } else {
                    item.con = q[getField]
                  }
                }
                a.push(item)

              })
              _this.ationList = a
            }
          })

        }
      })
    },
    queryList(pageNo, pageSize) {
      this.getInfo()
      this.$api.sendRequest({
        url: '/api/salasmanorder/homeStat',
        data: {},
        success: res => {
          console.log(res, '统计数字');
          this.statisticsList[5].value = res.data.today_member_hy_num.num
          this.statisticsList[4].value = res.data.today_order_money.num
          this.statisticsList[3].value = res.data.today_order_refund_money.num
          this.statisticsList[2].value = res.data.today_member_new_num.num
          this.statisticsList[1].value = res.data.today_order_num.num
          this.statisticsList[0].value = res.data.today_order_get_money.num
          // this.statisticsList[5].label=res.data.today_member_hy_num.name
        }
      })
      this.$refs.paging.complete(this.statisticsList);
    },
    btn(index) {
      console.log(index);
      // uni.navigateTo({
      // 	url: this.operationList[index].url
      // })
    },
    userClick() {
      this.$refs.userPopup.start()
    },
    workbenchEdit() {
      uni.navigateTo({
        url: `/page_salesman_index/index/edit_workbench/edit_workbench?id=${this.uid}`
      })
    },
    sbChange(item) {
      this.sbValue = item
    },
    toPage(url, page_type = '', value = '') {
      console.log(url)
      setTimeout(() => {
        uni.$emit('val', value)
      }, 500)
      uni.$u.route({
        url,
        params: {
          page_type
        }
      })
    },
    toCol(url, page_type = '', value = '') {
      console.log(url, page_type, value);
      // if (value) {
      console.log(url)
      setTimeout(() => {
        uni.$emit('val', value)
      }, 500)
      uni.$u.route({
        url,
        params: {
          page_type
        }
      })
      // }
    },
    quanxiashez() {
      this.ationList = uni.getStorageSync('auth' + String(this.uid))
      // uni.getStorage({
      // 	key: String(_this.uid),
      // 	success: (res) => {
      // 		console.log(res, 'res444444444444444444444444');
      // 		// console.log(JSON.parse(res.data), '编辑自己的权限6666666666666');
      // 		this.ationList = JSON.parse(res.data)
      // 	},

      // });
    }


  },
  filters: {
    filterCount(num) {
      return num > 100 ? 99 : num
    },
    filterCo(num) {
      // let num;
      // if (num >= 10000) {
      //    return (Math.round(num / 100) / 100).toFixed(2) + 'w';
      //  } else if (num >= 1) {
      //    return num.toFixed(0);
      //  } else if (num > 0) {
      //    return num.toFixed(2);
      //  } else {
      //    return '0';
      //  }

      return num
    },
  }
}
</script>

<style lang="scss" scoped>
.zhanwei {
  height: 280rpx;
}

.booooo {
  width: 750rpx;
  height: 330rpx;
}

::v-deep {
  .zp-paging-container-content {
    margin-top: 50rpx;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .zp-l-text {
    display: none;
  }
}

.tumin {
  width: 70rpx;
  height: 70rpx;
  border: 2rpx solid #ccc;
}

.index {
  // -margin-top: 200rpx;
  min-height: 900rpx;
  background: rgb(92, 195, 252);
  // margin-top: 40rpx;
  position: relative;
  display: flex;

  ::v-deep {
    .u-row {
      flex-wrap: wrap;

    }
  }

  .title {
    display: flex;
    justify-content: space-between;
    font-size: 32rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #222222;
    margin-bottom: 40rpx;

    .edit {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }

    .daterange {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      display: flex;
      align-items: center;
      background: #F6F6F6;
      border-radius: 8rpx;
      height: 44rpx;
      width: 340rpx;
      padding: 0 14rpx 0 20rpx;
    }

    ::v-deep {
      .uni-date {
        flex: 0;
      }

      .uni-calendar-item__weeks-box .uni-calendar-item--checked,
      .uni-datetime-picker--btn,
      .uni-calendar-item--multiple .uni-calendar-item--before-checked[data-v-39ec3f8e],
      .uni-calendar-item--multiple .uni-calendar-item--after-checked {
        background-color: #21BBF3;
      }
    }
  }

  .revenue {
    background-color: #fff;
    padding: 48rpx 40rpx;

    .data_show {
      display: flex;
      justify-content: space-between;

      .item {
        width: 28%;
        height: 180rpx;
        padding: 10rpx;
        background: #F7F7F7;
        border-radius: 16rpx;
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
        align-items: center;

        .top {
          height: 28rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }

        .middle {
          height: 52rpx;
          font-size: 44rpx;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #222222;
        }

        .bottom {
          font-size: 20rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
        }
      }
    }
  }

  .client {
    background: #fff;
    padding: 48rpx 40rpx;

    .client_box {
      .item {
        box-sizing: border-box;
        padding: 24rpx 40rpx;
        width: 328rpx;
        background: #F7F7F7;
        border-radius: 16rpx;
        margin-bottom: 32rpx;

        .client_desc {
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }

        .client_number {
          font-size: 44rpx;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #222222;

          .rmb {
            font-size: 28rpx;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #222222;
          }
        }
      }
    }

  }

  .subsection {
    margin-top: 40rpx;

    ::v-deep {
      .u-subsection__item__text {
        height: 40rpx;
        font-size: 28rpx !important;
        font-weight: 400 !important;
        color: #FFFFFF;
        line-heigsht: 40rpx;
      }
    }
  }

  .workbench {
    // height: 940rpx;
    background-color: #fff;
    border-radius: 24rpx 24rpx 0px 0px;
    padding: 32rpx 40rpx 0 40rpx;
    box-sizing: border-box;
    flex: 1;
    margin-bottom: 60rpx;
    box-sizing: border-box;

    // margin-top: 660rpx;
    .operation {
      ::v-deep {
        .u-col-3 {
          padding: 0 !important;
        }
      }

      .operation-item {
        position: relative;
        text-align: center;


        image {
          width: 100rpx;
          height: 100rpx;
          margin-bottom: 16rpx;
        }

        margin-bottom: 48rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular,
        PingFang SC;
        font-weight: 400;
        color: #222222;

        .badge {
          z-index: 1;
          border-radius: 50%;
          font-size: 24rpx;
          position: absolute;
          color: #fff;
          text-align: center;
          line-height: 40rpx;
          right: 20rpx;
          top: -14rpx;
          width: 40rpx;
          height: 40rpx;
          background: #F33B50;
          border: 2rpx solid #FFFFFF;

        }

      }
    }


  }

  .statistics-list {
    position: relative;
    margin-bottom: 12rpx;
    padding: 0 32rpx;
    // height: 60rpx;
    background-color: rgb(92, 195, 252);

    .line ,.line1{
      position: absolute;
      width: 90%;
      height: 1px;
      background-color: #fff;
      top: 30%;
      opacity: 0.3;
      left: 50%;
      transform: translate(-50%, -0);
    }
    .line1{
      top: 70%;
    }


    .statistics-item {
      padding-left: 32rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 34rpx;
      margin: 32rpx 0;

      .value {
        font-size: 44rpx;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #FFFFFF;
        margin-bottom: 14rpx;
        text-align: center;
      }

    }
  }


  .user {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 32rpx;
    padding: 0 32rpx;
    margin-top: 160rpx;

    image {
      width: 70rpx;
      height: 70rpx;
      border-radius: 50%;
    }
  }
}
</style>