<template>
  <div class="advanced-search">
    <!-- 展开/收起按钮 -->
    <button class="toggle-button" @click="toggleSearch">
      {{ isExpanded ? '收起' : '展开' }}高级搜索
    </button>

    <!-- 高级搜索面板 -->
    <div v-if="isExpanded" class="search-panel">
      <el-form label-width="100px">
        <el-form-item class="custom-label" label="所在指挥部">
          <el-checkbox-group v-model="departmentChecks" style="display: inline-block">
            <el-checkbox v-for="item in departmentList" :key="item" :label="item" @change="checkChange">{{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="方向">
          <el-checkbox-group v-model="providentFundChecks" style="display: inline-block">
            <el-checkbox v-for="item in directionList" :key="item" :label="item" @change="checkChange">{{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="桥梁类型">
          <el-checkbox-group v-model="socialSecurityChecks" style="display: inline-block">
            <el-checkbox v-for="item in cityList" :key="item" :label="item" @change="checkChange">{{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>

      <!-- 应用筛选按钮 -->
      <!--      <button class="apply-button" @click="applyFilters">应用筛选</button>-->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      departmentChecks: [],
      socialSecurityChecks: [],
      providentFundChecks: [],
      departmentList: ['重庆指挥部', '四川指挥部', '云南指挥部', '贵州指挥部'],
      cityList: ['特大桥', '大桥', '中桥', '小桥'],
      directionList: ['上行方向', '下行方向', '上下双向', '闸道'],
      isExpanded: false, // 控制展开/收起
    };
  },
  methods: {
    // 切换展开/收起
    toggleSearch() {
      this.isExpanded = !this.isExpanded;
    },
    // 应用筛选逻辑
    applyFilters() {
      console.log('应用筛选条件:', {
        // commands: this.selectedCommands,
        // directions: this.selectedDirections,
        // bridgeTypes: this.selectedBridgeTypes,
      });
      alert('筛选条件已应用，请查看控制台输出。');
    },
  },
};
</script>

<style scoped>
.advanced-search {
  font-family: Arial, sans-serif;
  //max-width: 400px;
  //margin: 20px auto;
}

.toggle-button {
  background-color: #409eff;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.toggle-button:hover {
  background-color: #66b1ff;
}

.search-panel {
  margin-top: 5px;
  padding-left: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
}

.checkbox-group input {
  margin-right: 5px;
}

.apply-button {
  background-color: #67c23a;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.apply-button:hover {
  background-color: #85ce61;
}

.el-form {
  margin-top: 15px;
}

::v-deep .el-form-item__label {
  color: #303133;
  font-size: 16px;
  font-weight: 700;
  //float: left;
}

.el-form-item {
  margin-bottom: 10px;
}
</style>
