<template>
  <view class="content">
    <headersVue :titles="titles"  style="position: static !important;">
      <u-icon name="arrow-left" color="#fff" size="18"></u-icon>
    </headersVue>
    <view class="ail">
      <view class="ahhh">
        <uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick"/>
      </view>

      <!-- ↓ 新增 -->


      <!-- <view class="ping-bottom">
        <view class="dinga">客户来源统计</view>
        <view class="dinga">更多<uni-icons type="right" size="12"></uni-icons></view>
      </view> -->
      <view v-if="id == 1">
        <view class="jsy" v-if="datas.length == 0">
          <image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
        </view>
        <view class="top-box" v-for="(item,index) in datas" :key="index">
          <view class="t-top">
            <view class="sys">
              <view class="t-title">客户来源</view>
              <view class="t-num">{{ item.customerSource || '' }}</view>

            </view>
            <view class="sys">
              <view class="t-title">车型</view>
              <view class="t-num">{{ item.goodsTitle || '' }}</view>

            </view>
            <view class="sys">
              <view class="t-title">数量</view>
              <view class="t-num">{{ item.theNum || '' }}</view>

            </view>
            <view class="sys">
              <view class="t-title">公示金额</view>
              <view class="t-num">{{ item.theAmount || '' }}</view>


            </view>
          </view>
        </view>
      </view>
      <view v-if="id == 2">
        <view class="jsy" v-if="datas.length == 0">
          <image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
        </view>
        <view class="waigg">
          <view class="top-boxx" v-for="(item,index) in datas" :key="index">
            <view class="t-top">

              <view class="t-title">{{ item.goodsTitle || '' }}</view>
              <view class="t-num">{{ item.theNum || '' }}</view>


            </view>
          </view>
        </view>

      </view>


      <view v-if="id == 3">
        <view class="jsy" v-if="datas.length == 0">
          <image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
        </view>
        <view class="waigg">
          <view class="top-boxx" v-for="(item,index) in datas" :key="index">
            <view class="t-top">

              <view class="t-title" style="display: flex; align-items: center; ">{{ item.theName || '' }}:</view>
              <view class="t-num">{{ item.theAmount || '' }}</view>


            </view>
          </view>
        </view>

      </view>

      <view v-if="id == 4">
        <view class="jsy" v-if="datas.length == 0">
          <image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
        </view>
        <view class="waigg">
          <view class="top-boxx" v-for="(item,index) in datas" :key="index">
            <view class="t-top">

              <view class="t-title" style="display: flex; align-items: center; ">{{ item.skuName || '' }}:</view>
              <view class="t-num">{{ item.orderCount || '' }}</view>


            </view>
          </view>
        </view>

      </view>


    </view>


  </view>
</template>

<script>
import config from '@/config'
import request from '../../utils/request';
import headersVue from "@/components/header/headers.vue";

export default {
  components: {headersVue},
  data() {
    return {
      id: 1,
      datas: [],
      remark: '未知类别',
      range: ['2023-9-28', '2023-10-7'],
      titles:''
    }

  },
  watch: {
    range(newval) {
      if (this.id == 1) {
        this.getone()
      }
      if (this.id == 2) {
        this.gettwo()
      }
      if (this.id == 3) {
        this.getthree()
      }
      if (this.id == 4) {
        this.getfour()
      }
    },
  },
  onLoad(option) {
    this.gettime()
    this.id = option.id
    if (this.id == 1) {
      this.remark = option.remark
      this.getone()
      this.titles = '客户来源统计'
    }
    if (this.id == 2) {
      this.gettwo()
      this.titles = '检测车型统计'
    }
    if (this.id == 3) {
      this.getthree()
      this.titles = '代收款'
    }
    if (this.id == 4) {
      this.getfour()
      this.titles = '检测类型统计'
    }
  },
  onShow() {

  },
  methods: {
    gettime() {
      // 获取当前时间
      var now = new Date();

      // 获取年份
      var year = now.getFullYear();

      // 获取月份
      var month = now.getMonth() + 1; // 月份从 0 开始，需要加 1
      if (month < 10) {
        var month = "0" + month
      }

      // 获取日期
      var date = now.getDate();

      // 格式化时间
      var currentTime = year + '-' + month + '-' + date
      this.range[0] = currentTime
      this.range[1] = currentTime

    },
    async getone() {
      let data = {
        startTime: this.range[0],
        endTime: this.range[1],
        remark: this.remark
      }
      let res = await request({
        url: '/partnerOwn/partner/staticsTable3Detail',
        method: 'get',
        params: data
      })
      this.datas = res.data
    },
    async gettwo() {
      let data = {
        startTime: this.range[0],
        endTime: this.range[1]
      }
      let res = await request({
        url: '/partnerOwn/partner/staticsTable4',
        method: 'get',
        params: data
      })
      this.datas = res.data

    },
    async getthree() {
      let data = {
        startTime: this.range[0],
        endTime: this.range[1]
      }
      let res = await request({
        url: '/partnerOwn/partner/staticsTable5',
        method: 'get',
        params: data
      })
      this.datas = res.data

    },
    async getfour() {
      let data = {
        startTime: this.range[0],
        endTime: this.range[1]
      }
      let res = await request({
        url: '/partnerOwn/partner/queryInspectionSkuList',
        method: 'get',
        params: data
      })
      this.datas = res.data

    },
    maskClick(e) {
    },
    getback() {
      uni.navigateBack()
    }
  },
}
</script>

<style scoped lang="scss">
.jsy {
  width: 90%;
  margin: 40px auto;
}

.content {
  width: 100%;
  height: calc(100vh);
  background-color: #F7F8FC;
  box-sizing: border-box;
  // padding-top: 45px;
}

.ping-bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0px 15px;
}

.c-top {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  padding-top: 55px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
}

.c-title {
  font-size: 18px;
  font-weight: bold
}

.ail {
  width: 100%;
  background-color: #F6F6F6;
  box-sizing: border-box;
  padding-bottom: 20px;
}

.top-box {
  width: 95%;
  border-radius: 5px;
  box-sizing: border-box;
  // padding: 18px;
  background-color: white;
  margin: 10px auto;
}

.top-boxx {
  width: 47%;
  border-radius: 5px;
  box-sizing: border-box;
  // padding: 18px;
  background-color: white;
  margin-top: 10px;


}

.cont-box {
  width: 100%;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 18px;
  background-color: white;
  margin: 10px auto;
}

.charts-box {
  width: 100%;
  height: 300px;
}

.t-bottom {
  width: 100%;
  height: 130px;
  border-top: 1px solid #EEEEEE;
  box-sizing: border-box;
  // padding: 20px;
}

.t-top {
  width: 100%;
  // height: 130px;
  display: flex;

  justify-content: center;
  box-sizing: border-box;
  padding: 15px;
}

.sis {
  width: 33%;
}

.dinga {
  // margin-left: 25px;
  font-size: 14px;
  font-weight: bold;
}

.sys {
  width: 25%;
}

.t-title {
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  line-height: 14px;
}

.t-num {
  width: 100%;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  color: #0D2E8D;
  line-height: 26px;
  margin: 5px auto;
}

.cont-title {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}

.charts-box {
  width: 100%;
  height: 300px;
}

.wrap-box {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin: 10px auto;
}

.w-box {
  width: 33%;
  box-sizing: border-box;
  text-align: center;
  margin-bottom: 10px;
}

.imgicon {
  width: 33px;
  height: 28px;
  margin: 0 auto;

  image {
    width: 100%;
    height: 100%;
  }
}

.t-zhong {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  margin: 3px auto;
}

.lanbnum {
  font-size: 26px;
  font-weight: bold;
  color: #0D2E8D;
}

.b-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  margin-bottom: 10px;
}

.b-zuo {
  width: 20%;
}

.b-zhong {
  text-align: left;
  width: 60%;
  display: flex;
  align-items: center;
}

.b-you {
  width: 20%;
}

.touxiang {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: salmon;
  overflow: hidden;
  margin-right: 10px;

  image {
    width: 100%;
    height: 100%;
  }
}

.one {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FEB947;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;

}

.dis-t {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px auto;
}

.lank {
  width: 102px;
  height: 27px;
  border-radius: 14px;
  border: 1px solid #0D2E8D;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 400;
  color: #0D2E8D;
}

.lan-you {
  display: flex;
  align-items: center;
}

.yi {
  font-size: 15px;
  font-weight: 400;
  color: #666666;
  line-height: 15px;
  margin-right: 15px;
}

.er {
  width: 25px;
  height: 25px;
  background: #0D2E8D;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white !important;
}

// ----------------------
.popup-box {
  overflow: hidden;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 15px;
  width: 100%;
  background-color: white;
}

.sousuo {
  width: 95%;
  margin: 0 auto;
  margin-left: 0px;
  height: 30px;
  background: #F0F0F0;
  border-radius: 50px;
  color: #999999;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  input {
    width: 80%;
  }
}

.list-box {
  width: 100%;
  height: 300px;
  overflow: hidden;
  box-sizing: border-box;

}

.list_scroll {
  height: 100%; // 需设置高度
  display: flex;
  flex-direction: column;

}

.list-qiu {
  width: 95%;
  border-bottom: 1px solid #EEEEEE;
  box-sizing: border-box;
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tel {
  margin-left: 5px;
  font-size: 15px;
  font-weight: 400;
  color: #666666;
}

.ahhh {
  width: 90%;
  margin: 10px auto;
}

.waigg {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 10px;
}
</style>