<template>
  <view class="project">
    <!-- Tabs栏 -->
    <view class="tabs">
      <view class="tab" :class="{'active': activeTab === 0}" @click="changeTab(0)">
        <view class="tab-text">监督检查</view>
      </view>
      <view class="tab" :class="{'active': activeTab === 1}" @click="changeTab(1)">
        <view class="tab-text">草稿</view>
      </view>
    </view>

    <!-- 搜索框 -->
    <view class="cc-search search-bar">
      <view class="search-box">
        <image src="/static/images/icon/search.png" />
        <input v-model="searchQuery" type="text" placeholder="请输入项目名称或项目编号" />
      </view>
    </view>

    <!-- 行政区划和项目类型下拉框 -->
    <view class="cc-query-dropdowns dropdowns">
      <picker mode="selector" :range="districts" v-model="selectedDistrict">
        <view class="dropdown">行政区划<image src="/static/images/icon/down.png" /></view>
      </picker>
    </view>

    <!-- 项目列表 -->
    <view class="project-list">
      <view v-for="(project, index) in projectCheckList" :key="index" class="project-card">
        <view class="attr-item project-title">{{ project.projectName }}</view>
        <view class="attr-item">
          <view class="attr-title">项目编号</view>
          <view class="attr-value">{{ project.proCode }}</view>
        </view>
        <view class="attr-item">
          <view class="attr-title">行政区划</view>
          <view class="attr-value">{{ project.adcdName }}</view>
        </view>
        <view v-if="activeTab===0" class="attr-item">
          <view class="attr-title">检查次数</view>
          <view class="attr-value">{{ project.checkNum }}</view>
        </view>
        <view v-if="activeTab===0" class="attr-item">
          <view class="attr-title">发现问题数</view>
          <view class="attr-value">{{ project.problemTotal }}</view>
        </view>
        <view v-if="activeTab===0" class="attr-item">
          <view class="attr-title">未更改总数</view>
          <view class="attr-value">{{ project.notRectifiedNum }}</view>
        </view>
        <view v-if="activeTab===0" class="attr-item">
          <view class="attr-title">涉及责任单位数</view>
          <view class="attr-value">{{ project.liabilityUnitsNum }}</view>
        </view>
        <view v-if="activeTab===1" class="attr-item">
          <view class="attr-title">检查类型</view>
          <view class="attr-value">{{ project.district }}</view>
        </view>
        <view class="operate-buttons">
          <view class="buttons-group">
            <view v-if="activeTab===0" class="primary-button__text button" @click="handleSeeProblem(project)">查看</view>
            <view v-if="activeTab==1" class="primary-button__text button" @click="handleEditProject(project)">编辑</view>
            <view v-if="activeTab==1" class="error-button__text button" @click="handleEditProject(project)">删除</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view v-if="activeTab===0" class="operation-buttons">
      <view class="buttons-group">
        <view class="primary-button button" @click="handleAddCheck()">新增检查</view>
      </view>
    </view>
  </view>
</template>

<script>
import { projectCheckListApi } from '@/api/system/project'
import { addressList } from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/cityData.js'
export default {
  data() {
    return {
      activeTab: 0,  // 当前选中的Tab索引
      searchQuery: '',  // 搜索框的内容
      selectedDistrict: 0,  // 行政区划选择的索引
      selectedProjectType: 0,  // 项目类型选择的索引
      districts: ['请选择', '北京市', '上海市', '广州市'],  // 行政区划数据
      projectTypes: ['请选择', '建筑', 'IT', '教育'],  // 项目类型数据
      // 省市区数据
      addressTreeList: addressList,
      addressList: [],
      projects: [  // 项目列表
        { name: '项目1', code: 'P001', district: '北京市', type: '建筑', status: 1 },
        { name: '项目2', code: 'P002', district: '上海市', type: 'IT', status: 0},
        { name: '项目3', code: 'P003', district: '广州市', type: '教育', status: 1},
        { name: '项目4', code: 'P004', district: '北京市', type: '建筑', status: 1}
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        params: {orderBy: "create_time", sortBy: "desc"},
        data: {}
      },
      projectCheckList: []
    };
  },
  computed: {
    // filteredProjects() {
    //   return this.projects.filter(project => {
    //     // 根据搜索内容、行政区划和项目类型进行筛选
    //     const matchesSearch = project.name.toLowerCase().includes(this.searchQuery.toLowerCase());
    //     const matchesDistrict = this.selectedDistrict === 0 || project.district === this.districts[this.selectedDistrict];
    //     const matchesType = this.selectedProjectType === 0 || project.type === this.projectTypes[this.selectedProjectType];
    //     return matchesSearch && matchesDistrict && matchesType;
    //   });
    // }
  },
  created() {
    this.handleAddressTreeData()
    this.getProjectCheckList()
  },
  onReachBottom() {
    if (this.queryParams.pageNum < this.pages) {
      this.queryParams.pageNum++; // 页码加1
      this.getProjectCheckList()
    }
  },
  methods: {
    changeTab(index) {
      this.activeTab = index;
    },

    // 获取项目列表
    getProjectCheckList() {
      uni.showLoading({
        title: '加载中...',
        mask: true
      })
      projectCheckListApi(this.queryParams).then(res => {
        this.projectCheckList = [...this.projectCheckList, ...res.records]
        this.pages = res.pages
        this.projectCheckList.forEach(projectItem => {
          projectItem.adcdName = this.formatAdcd(projectItem)
        })
        uni.hideLoading()
      })
    },

    // 将省市区的树状数据分解成列表,并在后面补零
    handleAddressTreeData() {
      let result = [];
      function traverse(node) {
        result.push({ code: node.code, name: node.name, dictLabel: node.name, dictValue: node.code}); // 将当前节点添加到结果中
        if (node.children) {
          node.children.forEach(child => traverse(child)); // 递归遍历子节点
        }
      }
      this.addressTreeList.forEach(node => traverse(node)); // 遍历树的每个根节点
      this.addressList = result
      this.addressList.forEach(item => {
        if (item.code.length===2) {
          item.code = item.dictValue = item.code + '0000'
        }
        if (item.code.length===4) {
          item.code = item.dictValue = item.code + '00'
        }
      })
    },

    // 处理省市区显示
    formatAdcd(row) {
      if (row.adcd) {
        let provinceCode = row.adcd.slice(0, 2)+"0000";
        let cityCode = row.adcd.slice(0, 4)+"00";
        let areaCode = row.adcd;
        let s="";
        if (areaCode.length > 2) {
            s=this.areaCodeFormat(provinceCode)
            if (cityCode!=provinceCode){
              s+="-"+this.areaCodeFormat(cityCode)
            }
            if (areaCode!=cityCode){
              s+="-" + this.areaCodeFormat(areaCode)
            }
         }
        return s
      }
    },

    //行政区划字典
    areaCodeFormat(adcd, column) {
      return this.selectDictLabel(
        this.addressList,
        adcd
      );
    },

    handleAddCheck() {
      // 跳转到新增项目页面
      this.$tab.navigateTo(`/pages/monitoring/edit/index`);
    },
    handleSeeProblem() {
      // 跳转到查看问题页面
      this.$tab.navigateTo(`/pages/monitoring/problem/list`);
    }
  }
};
</script>

<style lang="scss" scoped>
.project {
  // padding: 20px;
  .tabs {
    height: 48px;
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    .tab {
      flex: 1;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      color: #595959;
      cursor: pointer;
      &.active {
        color: #00B39D;
        .tab-text {
          position: relative;
          height: 100%;
          display: flex;
          align-items: center;
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: #00B39D;
          }
        }
      }
    }
  }
  // .search-bar {
  //   padding: 12px 25px;
  //   background: #fff;
  //   border-top: 1px solid #f0f0f0;
  //   border-bottom: 1px solid #f0f0f0;
  //   .search-box {
  //     padding: 8px 20px;
  //     background: #f7f8fa;
  //     border-radius: 8px;
  //   }
  //   input {
  //     width: 100%;
  //     border: none;
  //     border-radius: 5px;
  //   }
  // }
  .dropdowns {
    height: 48px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    uni-picker {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .dropdown {
      flex: 1;
    }
  }
  .project-list {
    padding: 0 20px 95px;
    .project-card {
      background-color: #fff;
      padding: 20px 0 0 0;
      margin-top: 10px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      margin-top: 15px;
      .attr-item {
        display: flex;
        justify-content: space-between;
        color: #262626;
        padding: 0 20px 20px 20px;
        padding-bottom: 15px;
        .attr-title {
          font-size: 16px;
          color: #595959;
        }
        .attr-value {
          &.no-done {
            color: #FF0000;
          }
        }
      }
      .operate-buttons {
        border-top: 1px solid #f0f0f0;
        display: flex;
        height: 48px;
        box-sizing: border-box;
        .buttons-group {
          width: 100%;
          height: 100%;
          display: flex;
          &:nth-child(1) {
            .button {
              border-right: 1px solid #f0f0f0;
              &:nth-last-child(1) {
                border-right: 0;
              }
            }
          }
        }
        .button {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          &.primary-button__text {
            color: #00B39D;
          }
          &.error-button__text {
            color: #E04040;
          }
        }
      }
    }
    .project-title {
      font-size: 18px;
    }
  }
  .operation-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    padding: 16px 20px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    .buttons-group {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .button {
        cursor: pointer;
      }
      .primary-button {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background-color: #00B39D;
        border-radius: 8px;
      }
    }
  }
}
</style>