<template>
  <view>
    <!-- 排序栏 -->
    <view class="sort-filter-bar">
      <view
        class="sort-item"
        v-for="(sort, index) in sortOptions"
        :key="index"
        @click="handleSort(sort.field)"
      >
        <text
          :class="{
            'sort-text': true,
            'active-sort': sort.field === queryParams.sortField,
          }"
        >
          {{ sort.name }}
        </text>
        <template v-if="sort.hasArrow && sort.field === queryParams.sortField">
          <uni-icons
            :type="queryParams.sortOrder === 'asc' ? 'arrowup' : 'arrowdown'"
            size="16"
            color="#007aff"
          ></uni-icons>
          <text class="sort-direction-text">
            {{ queryParams.sortOrder === 'asc' ? '正序' : '倒序' }}
          </text>
        </template>
      </view>
      <view class="filter-btn" @click="showPopup">
        <text class="filter-text">筛选</text>
        <uni-icons type="bottom" size="16"></uni-icons>
      </view>
    </view>

    <!-- 筛选弹窗 -->
    <uni-popup
      type="bottom"
      ref="popup"
    >
      <view class="popup-content">
        <view class="popup-title">筛选条件</view>
        
        <uni-section title="项目信息" type="line" class="filter-section">
          <view class="filter-item">
            <text class="filter-label">项目名称</text>
            <input
              type="text"
              v-model="queryParams.projectName"
              placeholder="输入项目名称"
              class="filter-input"
            />
          </view>
          <view class="filter-item">
            <text class="filter-label">项目编号</text>
            <input
              type="text"
              v-model="queryParams.projectNum"
              placeholder="输入项目编号"
              class="filter-input"
            />
          </view>
        </uni-section>
        
        <uni-section title="项目状态" type="line" class="filter-section">
					<view class="filter-item">
						<view class="filter-label">
							项目状态
						</view>
						<uni-data-checkbox
							v-model="radioProjectStatus" 
							:localdata="projectStatusOptions"
							@change="handleStatusChange"
							mode="button"
						></uni-data-checkbox>
					</view>
        </uni-section>
        
        <uni-section title="贸易属性" type="line" class="filter-section">
					<view class="filter-item">
						<view class="filter-label">
							贸易类型
						</view>
						<uni-data-checkbox
							mode="button"
						  v-model="radioDomestic" 
						  :localdata="domesticOptions"
						  @change="handleDomesticChange"
						></uni-data-checkbox>
					</view>
        </uni-section>
        
        <uni-section title="金额筛选" type="line" class="filter-section">
          <view class="filter-item">
            <text class="filter-label">合同金额区间</text>
            <input
              type="number"
              v-model="queryParams.minContractAmount"
              placeholder="最小"
              class="filter-input"
            />
            <text class="range-text">-</text>
            <input
              type="number"
              v-model="queryParams.maxContractAmount"
              placeholder="最大"
              class="filter-input"
            />
          </view>
          <view class="filter-item">
            <text class="filter-label">盈亏金额区间</text>
            <input
              type="number"
              v-model="queryParams.minProfitLoss"
              placeholder="最小"
              class="filter-input"
            />
            <text class="range-text">-</text>
            <input
              type="number"
              v-model="queryParams.maxProfitLoss"
              placeholder="最大"
              class="filter-input"
            />
          </view>
        </uni-section>
        
        <uni-section title="时间筛选" type="line" class="filter-section">
          <view class="filter-item">
            <text class="filter-label">启动时间</text>
            <uni-datetime-picker
              type="daterange"
              v-model="dateRange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleDateChange"
            ></uni-datetime-picker>
          </view>
        </uni-section>
        
        <uni-section title="盈亏类型" type="line" class="filter-section">
					<view class="filter-item">
						<view class="filter-label">
							盈亏类型
						</view>
						<uni-data-checkbox
							mode="button"
						  v-model="radioProfitType" 
						  :localdata="profitTypeOptions"
						  @change="handleProfitTypeChange"
						></uni-data-checkbox>
					</view>
        </uni-section>
        
        <view class="popup-btns">
          <button class="btn-reset" @click="resetFilter">重置</button>
          <button class="btn-confirm" @click="confirmFilter">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showFilter: false,
      dateRange: [],
      dateRangeText: '',
      // 单选框绑定值（非数组类型，用于单选）
      radioProjectStatus: '', // 项目状态单选值
      radioDomestic: '', // 贸易属性单选值
      radioProfitType: '', // 盈亏类型单选值
      queryParams: {
        projectName: '',
        projectNum: '',
        projectStatus: '', // 保持字符串类型（单选）
        isDomestic: '', // 保持字符串类型（单选）
        minContractAmount: '',
        maxContractAmount: '',
        minProfitLoss: '',
        maxProfitLoss: '',
        beginTimeStart: '',
        beginTimeEnd: '',
        profitType: '', // 保持字符串类型（单选）
        sortField: 'profitLoss',
        sortOrder: 'desc', // 默认倒序
				pageSize: 9999,
				pageNum: 1
      },
      // 排序选项
      sortOptions: [
        { name: '盈亏额', field: 'profitLoss', hasArrow: true },
        { name: '启动时间', field: 'beginTime', hasArrow: true },
      ],
      // 项目状态选项（包含"全部"）
      projectStatusOptions: [
        { text: '全部状态', value: '' },
        { text: '进行中', value: '0' },
        { text: '完结', value: '1' },
      ],
      // 国内/国外选项（包含"全部"）
      domesticOptions: [
        { text: '全部', value: '' },
        { text: '国内', value: '0' },
        { text: '国外', value: '1' },
      ],
      // 盈亏类型选项（包含"全部"）
      profitTypeOptions: [
        { text: '全部类型', value: '' },
        { text: '盈利', value: 'profit' },
        { text: '亏损', value: 'loss' },
      ],
    };
  },
  methods: {
    // 处理日期范围变化
    handleDateChange(e) {
      this.dateRange = e;
      if (e.length === 2) {
        this.queryParams.beginTimeStart = e[0];
        this.queryParams.beginTimeEnd = e[1];
        this.dateRangeText = `${e[0]} - ${e[1]}`;
      } else {
        this.queryParams.beginTimeStart = '';
        this.queryParams.beginTimeEnd = '';
        this.dateRangeText = '';
      }
    },
    
    // 重置筛选条件
    resetFilter() {
      this.queryParams = {
        ...this.queryParams,
        projectName: '',
        projectNum: '',
        projectStatus: '',
        profitType: '',
        beginTimeStart: '',
        beginTimeEnd: '',
        minContractAmount: '',
        maxContractAmount: '',
        minProfitLoss: '',
        maxProfitLoss: '',
        isDomestic: '',
      };
      // 重置单选框绑定值
      this.radioProjectStatus = '';
      this.radioDomestic = '';
      this.radioProfitType = '';
      this.dateRange = [];
      this.dateRangeText = '';
    },
    
    // 确认筛选条件
    confirmFilter() {
      this.$refs.popup.close();
      this.$emit('filter-change', { ...this.queryParams });
    },
    
    // 处理排序
    handleSort(field) {
      if (this.queryParams.sortField === field) {
        this.queryParams.sortOrder = this.queryParams.sortOrder === 'asc' ? 'desc' : 'asc';
      } else {
        this.queryParams.sortField = field;
        this.queryParams.sortOrder = 'desc';
      }
      this.$emit('filter-change', { ...this.queryParams });
    },
    
    // 处理项目状态变化（单选）
    handleStatusChange(value) {
			console.log(value)
      this.queryParams.projectStatus = value.detail.value;
    },
    
    // 处理国内/国外状态变化（单选）
    handleDomesticChange(value) {
			console.log(value)
      this.queryParams.tradeType = value.detail.value;
    },
    
    // 处理盈亏类型变化（单选）
    handleProfitTypeChange(value) {
			console.log(value)
      this.queryParams.profitType = value.detail.value;
    },
    
    // 显示筛选弹窗
    showPopup() {
      this.$refs.popup.open();
    },
  },
};
</script>

<style scoped>
/* 排序和筛选栏样式 */
.sort-filter-bar {
  display: flex;
  align-items: center;
  height: 40px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 10px;
}

.sort-filter-bar::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

.sort-item {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 100%;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.sort-item:active {
  background-color: #f5f5f5;
}

.active-sort {
  color: #007aff;
  font-weight: bold;
}

.sort-direction-text {
  margin-left: 4px;
  font-size: 12px;
  color: #007aff;
}

.filter-btn {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 100%;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  margin-left: auto; /* 推到最右侧 */
}

.filter-btn:active {
  background-color: #f5f5f5;
}

/* 筛选弹窗样式 */
.popup-content {
  background-color: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding-bottom: 20px;
  overflow-y: auto;
  height: 100%;
}

.popup-title {
  padding: 15px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  position: relative;
  text-align: center;
}

.popup-title::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background-color: #007aff;
}

.filter-section {
  margin-bottom: 10px;
}

.filter-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  padding: 0 15px;
}

.filter-label {
  font-size: 14px;
  color: #666;
  width: 100px;
  flex-shrink: 0;
}

.filter-input {
  flex: 1;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 14px;
  height: 36px;
  box-sizing: border-box;
}

.filter-input:focus {
  border-color: #007aff;
  outline: none;
}

.range-text {
  margin: 0 8px;
  color: #999;
}

/* 弹窗按钮样式 */
.popup-btns {
  display: flex;
  padding: 10px 15px;
  border-top: 1px solid #eee;
  margin-top: 10px;
}

.btn-reset,
.btn-confirm {
  flex: 1;
  height: 40px;
  line-height: 40px;
  border-radius: 6px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.btn-reset {
  background-color: #f5f5f5;
  color: #333;
  margin-right: 10px;
}

.btn-confirm {
  background-color: #007aff;
  color: #fff;
}

/* 解决uni组件样式冲突 */
::v-deep .uni-data-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 5px 0;
}

::v-deep .uni-data-checkbox .uni-checkbox-item {
  margin-right: 15px;
}

::v-deep .uni-datetime-picker {
  flex: 1;
}

::v-deep .uni-popup {
  z-index: 999;
}

::v-deep .uni-section__content {
  padding: 5px 0;
}
</style>