<template>
  <view class="content">
    <headersVue :titles="titles">
      <u-icon name="arrow-left" color="#fff" size="18"></u-icon>
    </headersVue>
    <view class="container">
      <view class="title_">检测数量统计</view>
      <view class="box_">
        <uni-datetime-picker v-model="ranges" type="daterange" @maskClick="maskClick"/>
        <view class="d_b"
              style="border-top: 1px solid #F5F5F5; margin-top: 30rpx;box-sizing: border-box;padding-top: 30rpx;">
          <view class="three_" @click="goOrderList">
            <view class="text_">订单数量</view>
            <view class="">{{ data2.allNum || 0 }}</view>
          </view>
          <view class="three_">
            <view class="text_">完成数量</view>
            <view class="">{{ data2.ywcNum || 0 }}</view>
          </view>
          <view class="three_">
            <view class="text_">检测中数量</view>
            <view class="">{{ data2.jxzNum || 0 }}</view>
          </view>
        </view>
      </view>
      <view class="title_">营业额统计</view>
      <view class="box_">
        <uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick"/>
        <view class="d_b"
              style="border-top: 1px solid #F5F5F5; margin-top: 30rpx;box-sizing: border-box;padding-top: 30rpx;">
          <view class="four_">
            <view class="text_">公示价格</view>
            <view class="">{{ data1.gsAmount || 0 }}</view>
          </view>
          <view class="four_">
            <view class="text_">应收款</view>
            <view class="">{{ data1.ysAmount || 0 }}</view>
          </view>
          <view class="four_">
            <view class="text_">已收款</view>
            <view class="">{{ data1.yjsAmount || 0 }}</view>
          </view>
          <view class="four_">
            <view class="text_">待收款</view>
            <view class="">{{ data1.ysAmount - data1.yjsAmount || 0 }}</view>
          </view>
        </view>
      </view>
      <view class="title_">客户来源统计</view>
      <view class="box_" v-if="data3.length > 0">
        <view class="box_top">
          <view class="l_">客户来源</view>
          <view class="n_">数量</view>
          <view class="r_">公示金额</view>
        </view>
        <view class="box_cont" v-for="(item,index) in data3">
          <view class="hang_">
            <view class="l_">
              <view :class="'jt_' + (index % 4)">{{ item.remark || '' }}</view>
            </view>
            <view class="n_">{{ item.theNum || '' }}</view>
            <view class="r_">{{ item.theAmount || '' }}</view>
          </view>
        </view>
      </view>
      <view class="box_" v-else>
        暂无数据…
      </view>
      <view class="title_d">检测车型统计
        <view class="sm_" @click="goxiangqing(2)">更多 ></view>
      </view>
      <view class="box_">
        <view class="d_b" v-if="data4.length > 0">
          <view class="four_t" v-for="(item,index) in data4">
            <view class="text_">{{ item.goodsTitle || '' }}</view>
            <view class="">{{ item.theNum || '' }}</view>
          </view>
        </view>
        <view class="d_b" v-else>
          暂无数据…
        </view>
      </view>
      <view class="title_d">检测类型统计
        <view class="sm_" @click="goxiangqing(4)">更多 ></view>
      </view>
      <view class="box_">
        <view class="d_b" style="display: flex; flex-wrap: wrap;" v-if="skuList.length > 0">
          <view class="three_" v-for="(skuData) in skuList">
            <view class="text_">{{ skuData.skuName }}</view>
            <view class=""> {{ skuData.orderCount || 0 }}</view>
          </view>
        </view>
        <view class="d_b" v-else>
          暂无数据…
        </view>
      </view>
      <view class="title_d">代收款
        <view class="sm_" @click="goxiangqing(3)">更多 ></view>
      </view>
      <view class="box_" v-if="data5.length == 0">暂无数据…</view>
      <view class="sys" v-for="(item) in data5" v-else>
        <view class="t-title">{{ item.theName || '' }}</view>
        <view class="t-num">{{ item.theAmount || '' }}</view>
      </view>
      <view class="title_">成交金额（已收款）</view>
      <view class="box_">
        <qiun-data-charts type="area" :opts="opts" :ontouch='true' :chartData="chartData"/>
      </view>
      <view class="title_">检测数量</view>
      <view class="box_">
        <qiun-data-charts type="area" :opts="opts2" :chartData="chartData1"/>
      </view>
      <view class="title_">已收款金额</view>
      <view class="lan-you">
        <view class="yi" :class="{'er' : qhindex2 == index}" v-for="(item,index) in zilist" :key="index"
              @click="gbindex2(index,item.unit)"> {{ item.text }}
        </view>
      </view>
      <view class="box_">
        <qiun-data-charts type="line" :opts="opts1" :chartData="chartData2"/>
      </view>

    </view>
    <u-datetime-picker :show="show" v-model="value1" mode="date"></u-datetime-picker>
  </view>
</template>

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

export default {
  data() {
    return {
      data1: '',
      data2: '',
      data3: [],
      data4: '',
      data5: '',
      range: ['2023-9-28', '2023-10-7'],
      ranges: ['2023-9-28', '2023-10-7'],
      //检测类型统计
      skuList: [],
      unit: 'week',
      unit1: 'week',
      unit2: 'week',
      qhindex2: 0,
      zilist: [
        {text: '日', unit: 'day'},
        {text: '周', unit: 'week'},
        {text: '月', unit: 'month'},
        {text: '年', unit: 'year'},

      ],

      titles: "业务统计",
      value1: Number(new Date()),
      List: [],
      show: false,
      status: 'loading',
      chartData: {},
      chartData1: {},
      chartData2: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
          "#ea7ccc"
        ],
        padding: [15, 15, 0, 15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
          labelCount: 4, //默认显示个数
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2
        },
        extra: {
          area: {
            type: "curve",
            opacity: 0.2,
            addLine: true,
            width: 2,
            gradient: true,
            activeType: "hollow"
          }
        }
      },
      opts1: {
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
          "#ea7ccc"
        ],
        padding: [15, 10, 0, 15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
          labelCount: 3, //默认显示个数
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2
        },
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow"
          }
        }
      },
      opts2: {
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
          "#ea7ccc"
        ],
        padding: [15, 15, 0, 15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
          labelCount: 1, //默认显示个数
        },
        yAxis: {
          gridType: "dash",
          dashLength: 4
        },
        extra: {
          area: {
            type: "curve",
            opacity: 0.2,
            addLine: true,
            width: 2,
            gradient: true,
            activeType: "hollow"
          }
        }
      },
    }
  },
  components: {
    headersVue
  },
  mounted() {
    // this.getServerData();
  },
  watch: {
    range(newval) {
      this.getfive()
    },
    ranges(newval) {
      this.getfive()
    },
  },
  onLoad() {
    this.gettime()
    this.partnerId = uni.getStorageSync('partnerId')
    // this.getServerData();
    this.getServerData1();
    this.getServerData2();
    this.getServerData3();
    this.chartLineInspectionAmount()
    this.chartLineInspectionNum()
    this.getInspectionSku()
    // this.sanxiang()
    this.getfive()
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
          series: [{
            name: "近7天",
            data: [35, 8, 25, 37, 4, 20]
          },
          ],
          xAxis: {
            disableGrid: true, // 不绘制纵向网格(即默认绘制网格)
            scrollShow: true, // 不显示滚动条
            scrollColor: '#08B66D',
            itemCount: 6, // x轴显示数据个数
            fontColor: '#8C8C8C',
            axisLineColor: "#828282",
            gridColor: "#828282",
            // x轴文字倾斜
            rotateLabel: true
          },
        };
        let res1 = {
          categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
          series: [{
            name: "总数量",
            data: [35, 8, 25, 37, 4, 20]
          },
            {
              name: "合格数",
              data: [100, 80, 95, 150, 112, 132]
            }

          ]
        };
        let res2 = {
          categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
          series: [{
            name: "小型汽车",
            data: [35, 8, 25, 37, 4, 20]
          },
            {
              name: "中型汽车",
              data: [70, 40, 65, 100, 44, 68]
            },
            {
              name: "大型汽车",
              data: [100, 80, 95, 150, 112, 132]
            }
          ]
        };
        // this.chartData = JSON.parse(JSON.stringify(res));
        // this.chartData1 = JSON.parse(JSON.stringify(res1));
        // this.chartData2 = JSON.parse(JSON.stringify(res2));
      }, 500);
    },
    goCustomerDetail(remark) {
      uni.navigateTo({
        url: '/pages/statistics/statislist?id=1&remark=' + remark
      })
    },
    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
      this.ranges[0] = currentTime
      this.ranges[1] = currentTime
    },
    // 五条
    async getfive() {

      let data1 = {
        startTime: this.range[0],
        endTime: this.range[1]
      }
      let res1 = await request({
        url: '/partnerOwn/partner/staticsTable1',
        method: 'get',
        params: data1
      })
      this.data1 = res1.data
      // 2
      let data2 = {
        startTime: this.ranges[0],
        endTime: this.ranges[1]
      }
      let res2 = await request({
        url: '/partnerOwn/partner/staticsTable2',
        method: 'get',
        params: data2
      })
      this.data2 = res2.data
      // 3
      let data3 = {
        startTime: '',
        endTime: ''
      }
      let res3 = await request({
        url: '/partnerOwn/partner/staticsTable3',
        method: 'get',
        params: data3
      })
      this.data3 = res3.data
      // 4
      let data4 = {
        startTime: '',
        endTime: ''
      }
      let res4 = await request({
        url: '/partnerOwn/partner/staticsTable4',
        method: 'get',
        params: data4
      })
      this.data4 = res4.data
      // 5
      let data5 = {
        startTime: '',
        endTime: ''
      }
      let res5 = await request({
        url: '/partnerOwn/partner/staticsTable5',
        method: 'get',
        params: data5
      })
      this.data5 = res5.data

    },
    //
    goxiangqing(id) {
      uni.navigateTo({
        url: '/pages/statistics/statislist?id=' + id
      })
    },
    goOrderList() {
      uni.navigateTo({
        url: '/pages/index/ordermanage'
      })
    },
    // 检测类型统计
    getInspectionSku() {
      let data = {
        startTime: this.partnerId,
        unit: this.unit,
      }
      request({
        url: '/partnerOwn/partner/queryInspectionSkuList',
        method: 'get',
        // params: data
      }).then((res) => {
        this.skuList = res.data
      })
    },
    maskClick(e) {
    },
    // 折线图
    async chartLineInspectionAmount() {
      let data = {
        partnerId: this.partnerId,
        unit: this.unit,
      }
      let rex = await request({
        url: '/partnerOwn/partner/chartLineInspectionAmount',
        method: 'get',
        params: data
      })
      let res = rex.data

      this.chartData = JSON.parse(JSON.stringify(res));
      this.opts.xAxis.itemCount = res.categories.length  //x轴数据的长度

    },
    // 折线图
    async chartLineInspectionNum() {
      let data = {
        partnerId: this.partnerId,
        unit: this.unit,
      }
      let rex = await request({
        url: '/partnerOwn/partner/chartLineInspectionNum',
        method: 'get',
        params: data
      })
      let res = rex.data

      this.chartData1 = JSON.parse(JSON.stringify(res));

    },

    gbindex(index, unit) {
      this.qhindex = index
      this.unit = unit
      this.getServerData1()
    },
    gbindex1(index, unit) {
      this.qhindex1 = index
      this.unit1 = unit
      this.getServerData2()
    },
    gbindex2(index, unit) {
      this.qhindex2 = index
      this.unit = unit
      this.getServerData1()
    },
    getback() {
      uni.navigateBack()
    },
    xinxuanze(name) {
      this.name = name
      this.xling = false
      this.getServerData1()

    },
    async sanxiang() {
      let res = await request({
        url: '/partnerOwn/partner/statisticsInfo?partnerId=' + this.partnerId,
        method: 'get',
      })
      let nums = {
        orderAmount: Math.trunc(res.data.orderAmount / 100),
        orderNum: res.data.orderNum,
        todayOrderAmount: res.data.todayOrderAmount / 100,
        todayOrderNum: res.data.todayOrderNum,
        workedNum: res.data.workedNum,
        workingNum: res.data.workingNum
      }
      this.threenum = nums
    },
    async getstatisticsTop() {
      let res = await request({
        url: '/appInspection/order/statisticsTop',
        method: 'get',
      })
      // this.chartData.series[0].data =  res.data.list
    },
    async getstatisticsMid() {
      let res = await request({
        url: '/appInspection/order/statisticsMid',
        method: 'get',
      })
      this.carlist = res.data
    },


    async getgetPartnerList() {
      let data = {
        partnerName: this.searchValue
      }
      let res = await request({
        url: '/appInspection/order/getPartnerList',
        method: 'get',
        params: data
      })
      this.qubu = res.data

    },
    async getstatisticsZXT() {
      let data = {
        partnerId: this.partnerId,
        type: this.value
      }
      let res = await request({
        url: '/appInspection/order/statisticsZXT',
        method: 'get',
        params: data
      })

    },
    async getstatisticsOrder() {
      let res = await request({
        url: '/appInspection/order/statisticsOrder',
        method: 'get',
      })
      this.phb = res.data

    },
    // 123123
    closexl(e) {
      this.xling = false

    },
    openxl(e) {
    },

    // 金额
    async getServerData1() {
      let data = {
        partnerId: this.partnerId,
        unit: this.unit,
      }
      let rex = await request({
        url: '/partnerOwn/partner/chartInfoAmount',
        method: 'get',
        params: data
      })
      let res = rex.data

      this.chartData2 = JSON.parse(JSON.stringify(res));
      this.opts1.xAxis.itemCount = res.categories.length

    },
    // 数量
    async getServerData2() {
      let data = {
        partnerId: this.partnerId,
        unit: this.unit1,
      }
      let rex = await request({
        url: '/partnerOwn/partner/chartInfoNum',
        method: 'get',
        params: data
      })
      let res = rex.data

      this.chartData2 = JSON.parse(JSON.stringify(res));

    },
    // 合格率
    async getServerData3() {
      let data = {
        partnerId: this.partnerId,
        unit: this.unit2,
      }
      let rex = await request({
        url: '/partnerOwn/partner/chartInfoRatio',
        method: 'get',
        params: data
      })
      let res = rex.data

      this.chartData3 = JSON.parse(JSON.stringify(res));

    },
  }

}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  box-sizing: border-box;
  padding-top: 200rpx;
  background: #f4f5f6;
  height: 100vh;
}

.container {
  box-sizing: border-box;
  padding: 30rpx;
  background: #f4f5f6;
}

.title_ {
  font-size: 32rpx;
  color: #101A3E;
  margin: 30rpx 0px;
}

.title_d {
  font-size: 32rpx;
  color: #101A3E;
  margin: 30rpx 0px;
  display: flex;
  justify-content: space-between;
}

.box_ {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background: #FFFFFF;
  border-radius: 12rpx;
}

.box_cont {
  box-sizing: border-box;
  padding: 20rpx;
  background: #F7F8FC;
  border-radius: 0rpx 0rpx 12rpx 12rpx;
}

.sm_ {
  font-size: 24rpx;
  color: #8D90A6;
}

.hang_ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 15rpx 0px;
  margin: 15rpx 0rpx;
  border-bottom: 1px solid #E3ECFB;
  font-size: 32rpx;
  color: #101A3E;
}

.box_top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24rpx;
  color: #101A3E;
  box-sizing: border-box;
  padding: 20rpx;
  background: #F7F8FC;
  border-radius: 12rpx 12rpx 0rpx 0rpx;

}

.d_b {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.d_s {
  display: flex;
  align-items: center;
}

.icon_ {
  width: 38rpx;
  height: 38rpx;

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

.three_ {
  width: 196rpx;
  height: 116rpx;
  background: #F7F8FC;
  text-align: center;
  font-size: 24rpx;
  color: #101A3E;
  margin-bottom: 10rpx;
}

.three_k {
  width: 196rpx;
  height: 116rpx;
}

.four_ {
  width: 142rpx;
  height: 116rpx;
  background: #F7F8FC;
  text-align: center;
  font-size: 24rpx;
  color: #101A3E;
}

.four_t {
  width: 142rpx;
  height: 190rpx;
  box-sizing: border-box;
  padding: 15rpx;
  background: #F7F8FC;
  text-align: center;
  font-size: 24rpx;
  color: #101A3E;
}

.text_ {
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}

.l_ {
  width: 33%;
}

.n_ {
  width: 33%;
  text-align: center;
}

.r_ {
  width: 33%;
  text-align: right;
}

.jt_0 {
  width: 144rpx;
  height: 48rpx;
  background: #f6f0e5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #101A3E;
  border-radius: 8px;
}

.jt_1 {
  width: 144rpx;
  height: 48rpx;
  background: #e6e6f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #101A3E;
  border-radius: 8px;
}

.jt_2 {
  width: 144rpx;
  height: 48rpx;
  background: #e2ebfb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #101A3E;
  border-radius: 8px;
}

.jt_3 {
  width: 144rpx;
  height: 48rpx;
  background: #e4eff1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #101A3E;
  border-radius: 8px;
}

.charts-box {
  width: 100%;
  height: 452rpx;
}

.yi {
  font-size: 15px;
  font-weight: 400;
  color: #666666;
  line-height: 15px;
  padding: 5rpx;
  border: 2rpx solid #74A1E5;
}

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

.lan-you {
  display: flex;
  align-items: center;
}
</style>