<template>
  <view class="content">
    <headersVue :titles="titles">
      <u-icon name="arrow-left" color="#fff" size="18"></u-icon>
    </headersVue>
    <view class="top_">
      <view class="t_left" @click="isShowPop = true">全部订单
        <u-icon name="arrow-down-fill" color="#327DFB" size="14"></u-icon>
      </view>
      <view class="" style="display:flex;" @click="cleanSelectTime" v-if="queryParams.startTime">
        清除时间
        <u-icon
            name="close-circle"
            size="24"
            color="#327DFB"
            style="margin-left: 10rpx"
        ></u-icon>
      </view>
    </view>

    <view class="container" v-if="tableData">
      <view class="box_" v-for="(records, date) in tableData" :key="date">
        <view class="title_" @click="show = true">{{ formatDateChinese(date) }}
          <u-icon name="arrow-down" size="14"></u-icon>
        </view>
        <view class="box_cont">
          <view class="box_hang" v-for="(item, index) in records" :key="item.id">
            <view class="d_s">
              <view class="num_">{{ index + 1 }}</view>
              <view class="name_">{{ item.carNum }}</view>
              <view class="icon_" v-if="item.carModel">{{ item.carModel }}</view>
            </view>
            <view class="d_b">
              <view class="d_s">
                <view class="h_">业务来源：</view>
                <view class="n_">{{ item.customerSource }}</view>
              </view>
              <view class="d_s">
                <view class="h_">检测状态：</view>
                <view class="n_">{{ item.status }}</view>
              </view>
              <view class="d_s">
                <view class="h_">支付方式：</view>
                <view class="n_">{{ item.pay == '未支付' ? item.pay : getPayType(item.payType) }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="container" v-else style="margin: 430rpx 0">
      <u-empty
          mode="order"
      >
      </u-empty>
    </view>
    <u-popup round="55" :show="isShowPop" @close="closePop" @open="openPop" :key="windowsHeight">
      <view class="popup-content"  :style="{'height':windowsHeight + 'px'}">
        <view class="popup-header">
          <text>选择筛选项</text>

          <view style="display: flex;justify-content: space-between" @click="clearSelection">
            <u-icon
                name="close-circle"
                size="18"
                color="#327DFB"
            ></u-icon>
            <text  style="color:#327DFB;">清除筛选项</text>
          </view>
        </view>
        <u-search placeholder="请输入车辆品牌或车牌号" v-model="queryParams.carModelOrCarYear" @custom="search"
                  @search="search"></u-search>
        <scroll-view scroll-y="true" class="scroll_view_style">
          <view class="popup-body">
            <view style="display: flex;justify-content: space-between">
              <!-- 客户来源选择 -->
              <view class="filter-section">
                <text>客户来源</text>
                <view class="options" @click="handleClick">
                  <text>
                    {{ queryParams.customerSource || '请选择客户来源' }}
                  </text>
                  <u-icon
                      v-if="queryParams.customerSource"
                      name="close-circle"
                      size="24"
                      color="#327DFB"
                  ></u-icon>
                  <u-icon
                      v-else
                      name="arrow-down"
                      size="14"
                      color="#327DFB"
                  ></u-icon>
                </view>
              </view>
              <!-- 车型选择 -->
              <view class="filter-section">
                <text>车型</text>
                <view class="options" @click="handleGoodsClick">
                  <text>
                    {{ goodsName || '请选择车型' }}
                  </text>
                  <u-icon
                      v-if="queryParams.goods"
                      name="close-circle"
                      size="24"
                      color="#327DFB"
                  ></u-icon>
                  <u-icon
                      v-else
                      name="arrow-down"
                      size="14"
                      color="#327DFB"
                  ></u-icon>
                </view>
              </view>
            </view>
            <!-- 车龄选择 -->
            <view class="filter-section">
              <text>车龄选择</text>
              <u-number-box v-model="queryParams.carYear" :min="0" :max="100"></u-number-box>
            </view>
            <!-- 支付方式选择 -->
            <view class="filter-section">
              <text>支付方式</text>
              <view class="options">
                <text
                    class="options_content"
                    v-for="(item, index) in payTypes"
                    :key="index"
                    @click="selectPayType(item.value)"
                    :class="{ selected: queryParams.payType === item.value }"
                >
                  {{ item.label }}
                </text>
              </view>
            </view>
            <!-- 检测状态选择 -->
            <view class="filter-section">
              <text>检测状态</text>
              <view class="options">
                <text
                    class="options_content"
                    v-for="(item, index) in inspectionStatus"
                    :key="index"
                    @click="selectInspectionStatus(item.value)"
                    :class="{ selected: queryParams.chooseStatus === item.value }"
                >
                  {{ item.label }}
                </text>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="popup-footer">
          <u-button @click="closePop" style="background: #F7F8FC;color: black">取消</u-button>
          <u-button @click="submitPop">确定</u-button>
        </view>
      </view>
    </u-popup>
    <u-picker
        :show="isShowCustomer"
        :columns="[customerSource]"
        keyName="label"
        closeOnClickOverlay
        @cancel="isShowCustomer = false"
        @close="isShowCustomer = false"
        @confirm="handleCustomerSourceConfirm"
        :overlay-style="{ zIndex: '10080' }"
        style="z-index: 10072"
    ></u-picker>
    <u-picker
        :show="isShowGoods"
        :columns="[goodsList]"
        keyName="label"
        closeOnClickOverlay
        @cancel="isShowGoods = false"
        @close="isShowGoods = false"
        @confirm="handleGoodsConfirm"
        :overlay-style="{ zIndex: '10080' }"
        style="z-index: 10072"
    ></u-picker>
    <u-datetime-picker
        :show="show"
        v-model="selectTime"
        mode="date"
        @close="show = false"
        @cancel="show = false"
        closeOnClickOverlay
        @confirm="confirmTime"
    ></u-datetime-picker>
  </view>
</template>

<script>
import headersVue from '../../components/header/headers.vue';
import request from "@/utils/request";
import {formatDate, formatDateChinese, formatDateTimeToMinute, getDictDataByType} from "@/utils/utils";

export default {
  data() {
    return {
      titles: "订单统计",
      msg: "1",
      List: [],
      show: false,
      status: 'loading',
      columns: [
        ['选项', '选项', '选项']
      ],
      queryParams: {
        queryTime: null,
        pageNum: 1,
        pageSize: 50,
        chooseStatus: "1",
        payType: "",
        startTime: null,
        endTime: null,
        carModelOrCarYear: null,
        customerSource: null,
        goods: null,
        carYear: 0,
      },
      loading: false, // 加载更多时的标志位
      tableData: {},
      pages: 0,
      isShowPop: false,
      isShowCustomer: false,
      payTypes: [],
      inspectionStatus: [
        {
          label: "全部",
          value: "1",
        },
        {
          label: "检测中",
          value: "2",
        },
        {
          label: "已完成",
          value: "3",
        },
      ],
      selectedPayType: null, // 选中的支付方式
      selectedInspectionStatus: null, // 选中的检测状态
      customerSource: [],
      selectedCustomerSource: null, // 选中的客户来源
      selectTime: new Date().toString(),
      goodsList: [],
      isShowGoods: false,
      goodsName: null,
      windowsHeight:600,
    }
  },
  onReachBottom() { // 当用户滚动到底部时触发
    if (!this.loading && this.queryParams.pageNum < this.pages) {
      this.queryParams.pageNum += 1;
      this.getTableData(true);
    } else {
      uni.showToast({
        title: '没有下一页数据',
        icon: 'none'
      })
    }
  },
  components: {
    headersVue
  },
  onReady() {
    uni.getSystemInfo({
      success: function(res) {
        this.windowsHeight = res.windowHeight;
        console.log('屏幕高度：', res.windowHeight);
      }
    });
    this.getTableData();
    this.getDictData();
    this.getCustomerSource();
    // this.disabledScroll()
  },
  methods: {
    formatDateChinese,
    getTableData(isLoadMore = false) {
      this.loading = true; // 开始加载更多
      request({
        url: '/partnerOwn/partner/getOrderByDate',
        method: 'get',
        params: this.queryParams
      }).then(res => {
        this.pages = res.data.pages
        let newData = res.data.records || [];
        if (isLoadMore) {
          newData = newData.concat(this.extractAllEntries(this.tableData))
          this.tableData = this.groupByDate(newData); // 合并新旧数据
        } else {
          this.tableData = null
          if (newData.length !== 0) {
            this.tableData = newData; // 初始加载或搜索时替换数据
            this.tableData = this.groupByDate(this.tableData)
          }
        }
        this.loading = false; // 完成加载
      }).catch(err => {
        console.error('获取订单数据失败', err);
        this.loading = false; // 出错也停止加载
      });
    },
    getPayType(type) {
      if (!this.payTypes || this.payTypes.length === 0) {
        this.getDictData()
      }
      if (type) {
        const index = this.payTypes.findIndex(item => item.value === type)
        if (index !== -1) {
          return this.payTypes[index].label
        }
      }
    },
    async getDictData() {
      if (!this.payTypes || this.payTypes.length === 0) {
        this.payTypes = [
          {
            label: "全部",
            value: "",
          }
        ]
        this.payTypes = this.payTypes.concat(await getDictDataByType("pay_type"))
      }
    },
    groupByDate(records) {
      return Object.entries(records.reduce((acc, item) => {
        const dateKey = item.createTime.split(" ")[0]; // 取 "yyyy-MM-dd"
        if (!acc[dateKey]) {
          acc[dateKey] = [];
        }
        acc[dateKey].push(item);
        return acc;
      }, {}))
          .sort(([a], [b]) => b.localeCompare(a)) // 根据 dateKey 倒序排序
          .reduce((sortedAcc, [key, value]) => {
            sortedAcc[key] = value;
            return sortedAcc;
          }, {});
    },
    extractAllEntries(data) {
      return Object.values(data).flat(); // 提取所有子数组并展平为一个大数组
    },
    closePop() {
      this.isShowPop = false;
      this.queryParams.payType = "";
      this.queryParams.chooseStatus = "1";
      this.queryParams.carModelOrCarYear = null;
    },
    submitPop() {
      this.queryParams.pageNum = 1;
      this.tableData = null
      this.getTableData();
      this.isShowPop = false;
    },
    openPop() {
      this.isShowPop = true;
    },
    selectPayType(value) {
      this.queryParams.payType = value;
    },
    selectInspectionStatus(value) {
      this.queryParams.chooseStatus = value;
    },
    async getCustomerSource() {
      let res = await request({
        url: '/partnerOwn/partner/getCustomerSource',
        method: 'get',
      })
      this.customerSource = res.data

      //商品类型
      let resx = await request({
        url: '/system/inspectionGoods/partnerGoodsListCol',
        method: 'get',
      })
      this.goodsList = resx.data.goodsList
    },
    handleCustomerSourceConfirm(e) {
      this.queryParams.customerSource = e.value[0].value; // 获取用户选择的客户来源
      this.isShowCustomer = false; // 关闭选择器
    },
    handleGoodsConfirm(e) {
      this.queryParams.goods = e.value[0].value; // 获取用户选择的客户来源
      this.goodsName = e.value[0].label; // 获取用户选择的客户来源
      this.isShowGoods = false; // 关闭选择器
    },
    search() {
      this.getTableData();
      this.isShowPop = false;
    },
    clearCustomerSource() {
      this.$nextTick(() => {
        this.queryParams.customerSource = null;  // 清空客户来源
      })
    },
    handleClick() {
      if (this.queryParams.customerSource) {
        this.clearCustomerSource();
      } else {
        this.isShowCustomer = true;
      }
    },
    handleGoodsClick() {
      if (this.queryParams.goods) {
        this.queryParams.goods = null;
        this.goodsName = null
      } else {
        this.isShowGoods = true;
      }
    },
    confirmTime(e) {
      const time = formatDate(e.value)
      this.queryParams.startTime = time
      this.queryParams.endTime = time
      this.getTableData()
      this.show = false
    },
    cleanSelectTime() {
      this.queryParams.startTime = null
      this.queryParams.endTime = null
      this.getTableData()
    },
    clearSelection() {
      this.queryParams = {
        queryTime: null,
        pageNum: 1,
        pageSize: 10,
        chooseStatus: "1",
        payType: "",
        startTime: null,
        endTime: null,
        carModelOrCarYear: null,
        customerSource: null,
        goods: null,
        carYear: 0,
      }
      this.getTableData()
      this.isShowPop = false
    },
    // disabledScroll(){
    //   const container = document.querySelector('.content');  content.scrollTop = 0;
    //   console.log('container',container)
    // },
  }
}
</script>

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

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

.t_left {
  width: 200rpx;
  border: 2px solid #327DFB;
  background: #e3ecfb;
  color: #327DFB;
  font-size: 28rpx;
  box-sizing: border-box;
  padding: 5px 10px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30rpx;
}

.title_ {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 32rpx;
  color: #101A3E;
  padding-left: 15rpx;
}

.box_ {
  margin-bottom: 30rpx;
}

.box_cont {
  box-sizing: border-box;
  padding: 30rpx;
  border-radius: 8px;
  background: #fff;
  width: 100%;
  margin-top: 30rpx;
}

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

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

.num_ {
  width: 36rpx;
  height: 36rpx;
  background: #327DFB;
  color: #fff;
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  margin-right: 10px;
}

.name_ {
  margin-right: 10px;
  font-size: 32rpx;
  color: #101A3E;
}

.icon_ {
  background: #e3ecfb;
  color: #327DFB;
  font-size: 28rpx;
  box-sizing: border-box;
  padding: 5rpx 20rpx;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.h_ {
  font-size: 28rpx;
  color: #8D90A6;
}

.n_ {
  font-size: 28rpx;
  color: #101A3E;
  display: inline-block;
  max-width: 3em; /* 约等于4个汉字的宽度 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.box_hang {
  box-sizing: border-box;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #F5F5F5;
  margin-bottom: 20rpx;
}

.popup-content {
  padding: 20rpx 20rpx 20rpx 20rpx;
  overflow-y: scroll;
  background: white;
  border-radius: 20rpx;
  //height: 80vh;
}

.popup-header {
  font-size: 32rpx;
  color: #101A3E;
  margin-bottom: 40rpx;
  display: flex;
  justify-content: space-between;
}

.popup-body {
  font-size: 28rpx;
  color: #101A3E;
}

.filter-section {
  margin-top: 30rpx;
}

.filter-section text {
  display: block;
  margin-bottom: 10rpx;
}

.options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  //justify-content: space-between;
  margin-top: 30rpx;
}

.options text {
  margin-right: 20rpx;
  margin-bottom: 10rpx;
}

.popup-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 60rpx;
  margin-bottom: 30rpx;
}

.popup-footer button {
  padding: 10rpx 20rpx;
  margin: 0 10rpx;
  border-radius: 5px;
  background-color: #327DFB;
  color: #fff;
  border: none;
}

.options_content {
  background: #F7F8FC;
  border-radius: 15rpx;
  width: 210rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  border: 2rpx solid transparent;
  margin-top: 10rpx;
  transition: all 0.3s ease;

  &.selected {
    border-color: #327DFB;
    background-color: rgba(50, 125, 251, 0.1);
    color: #327DFB;
  }
}

.filter-section .options u-icon {
  margin-left: 10rpx;
}

.top_ {
  display: flex;
  justify-content: space-between;
  align-items: center;
  //position: fixed;
  //background: coral;
  width: 100%;
  //margin-bottom: 1rpx;
}
</style>