<script setup>
  import {
    reactive,
    ref
  } from 'vue';

  import {
    onLoad,
    onUnload,
    onPullDownRefresh,
    onReachBottom,
    onPageScroll
  } from "@dcloudio/uni-app";

  import {
    getProjectBLList,
    getAmtCount
  } from "@/api/work/projectInfo.js";

  import {
    addFocus,
    cancelFocus
  } from "@/api/work/focus.js";
  import {
    getInfo,
  } from "@/api/login.js"

  import {
    getJSDDlist,
    getZJLYlist,
    getHYFLlist,
  } from "@/api/work/projectInfo.js"

  import {
    getXMXZlist,

  } from "@/api/home.js"
  import store from '@/store'
  import {
    timeFormat
  } from "@/utils/timeFormatter.js"

  function backToBefore() {
    uni.reLaunch({
      url: "/pages/index"
    });
  };
  let title = ref('分管项目')
  let scrollTop = ref(0)
  let loading = ref(true)

  // 统计
  let countShow = ref(false);
  let firstGetCount = true;
  let countList = ref([{
    title: "年度计划投资（万元）",
    key: "sumYearAmt",
    value: 0,
    color: ""
  }, {
    title: "全年占比",
    key: "yearRt",
    value: 0,
    color: "",
    isRate: true,
  }, {
    title: "当月完成金额（万元）",
    key: "sumMonthAmtSj",
    value: 0,
    color: "count-special-value"
  }, {
    title: "当月占比",
    key: "monthRt",
    value: 0,
    color: "count-special-value",
    isRate: true,
  }]);




  const getAmtCountValue = paramsOrginal => {
    getAmtCount(paramsOrginal).then(res => {
      firstGetCount = false;
      for (let i in countList.value) {
        countList.value[i].value = res.data[countList.value[i].key] ?? 0;
      }
    })
  };

  let orderBy = reactive({
    text: "amt",
    amtTotalStatus: null,
    yearAmtStatus: null
  })

  const changeOrderByStatus = type => {
    // 改变状态
    if (type === "amt") {
      orderBy.yearAmtStatus = null;
      orderBy.text = "amt";
      if (orderBy.amtTotalStatus === "desc") {
        orderBy.amtTotalStatus = "asc"
      } else if (orderBy.amtTotalStatus === "asc") {
        orderBy.amtTotalStatus = null
      } else {
        orderBy.amtTotalStatus = "desc"
      }
    } else {
      orderBy.amtTotalStatus = null;
      orderBy.text = "year";
      if (orderBy.yearAmtStatus === "desc") {
        orderBy.yearAmtStatus = "asc"
      } else if (orderBy.yearAmtStatus === "asc") {
        orderBy.yearAmtStatus = null
      } else {
        orderBy.yearAmtStatus = "desc"
      }
    }
    searchInfo.value.pageNo = 1;
    projectList.value = [];
    listTotal.value = 0;
    moreListFlag = true;
    getList()
  }

  // 参数
  let searchInfo = ref({
    pageNo: 1,
    pageSize: 10,
    beginDateStart: null,
    beginDateEnd: null,
  })

  // 触底加载flag
  let moreListFlag = true

  // 获取列表
  let projectList = ref([]);
  let listTotal = ref(0);

  function getList() {
    if (searchInfo.value.pageNo == 1) {
      loading.value = true
    }

    let params = Object.assign({
      orderBy: orderBy.text === "amt" ? "amtTotal" : "yearAmt",
      orderType: orderBy.text === "amt" ? orderBy.amtTotalStatus : orderBy.yearAmtStatus
    }, searchInfo.value)

    if (countShow.value && firstGetCount) getAmtCountValue(params);

    getProjectBLList(params).then(res => {
      console.log(res.data.list);
      loading.value = false
      projectList.value = projectList.value.concat(res.data.list);
      listTotal.value = res.data.total;
      if (res.data.total == searchInfo.value.pageNo * searchInfo.value.pageSize - (10 - res.data.list
          .length)) moreListFlag = false;
      console.log(projectList.value);
    }).catch(() => {
      loading.value = false
    })
  }

  function goToDetail(id, subName) {
    uni.navigateTo({
      url: `/pages/projectInfo/detail/index?id=${id}&subName=${subName}`
    })
  }

  function goToPage(url) {
    uni.navigateTo({
      url
    })
  }

  function goToReport(type, val) {
    console.log(val, '列表数据');
    if (type === 'wtdb') {
      uni.navigateTo({
        url: `/pages/problemSupervision/index?type=${type}&subId=${val.id}&subName=${val.subName}`
      })
    } else if (type === 'qtldjbm') {
      uni.navigateTo({
        url: `/pages/leadersList/index?type=${type}&subId=${val.id}&subName=${val.subName}`
      })
    } else if (type === 'xcyx') {
      uni.navigateTo({
        url: `/pages/projectImageAndVideo/index?type=${type}&subId=${val.id}&subName=${val.subName}`
      })
    } else if (type === 'more') {
      uni.navigateTo({
        url: `/pages/morePage/index?type=${type}&subId=${val.id}&subName=${val.subName}`
      })

    } else {
      uni.navigateTo({
        url: `/pages/projectInfo/report/index?type=${type}&subId=${val.id}&subName=${val.subName}&unitName=${val.unitName}`
      })
    }
  }

  // 折叠/展开
  const changeFoldItem = (status, id) => {
    let item = projectList.value.find(item => item.id === id);
    item.unfold = status;
  }

  // 收藏/取消
  function changeFocus(id, status) {
    let item = projectList.value.find(item => item.id === id);

    if (status) {
      cancelFocus({
        subId: id
      }).then(res => {
        if (res.code === 200) {
          item.isAttention = 0;
        }
      }).catch(() => {
        uni.showToast({
          title: "更改收藏状态失败。",
          icon: "none",
          duration: 2000
        })
      })
    } else {
      addFocus({
        subId: id
      }).then(res => {
        if (res.code === 200) {
          item.isAttention = 1;
        }
      }).catch(() => {
        uni.showToast({
          title: "更改收藏状态失败。",
          icon: "none",
          duration: 2000
        })
      })
    }
  }
  let seachFalg = ref(true)

  function searchClick() {
    goToPage('/pages/projectInfo/search/index')
  }



  onUnload(() => {
    uni.$off('projectInfoSearch');
  })

  onPageScroll((e) => {
    scrollTop.value = e.scrollTop
  })

  onPullDownRefresh(() => {
    searchInfo.value.pageNo = 1;
    projectList.value = [];
    moreListFlag = true;
    firstGetCount = true;
    try {
      getList();
    } finally {
      uni.stopPullDownRefresh()
    }
  })


  //是否展开筛选条件
  let isUnfold = ref(false)
  //投资分析帅选条件
  let investmentAnalysisFrom = ref({
    kind: ''
  })

  let cardCurrut = ref(0)

  function onChangeCard(e) {
    if (cardCurrut.value == e) {
      projectList.value[cardCurrut.value].isOpen = !projectList.value[cardCurrut.value].isOpen
    } else {
      projectList.value[cardCurrut.value].isOpen = false
      projectList.value[e].isOpen = true
      cardCurrut.value = e
    }


  }


  let lightList = ref([{
    name: '红灯'
  }, {
    name: '黄灯'
  }, {
    name: '绿灯'
  }])


  let pageForm = ref({
    beginDateStart: null,
    beginDateEnd: null,
    kind: null,
    indusKind: null,
    propKind: null,
    subjectId: null,
    status: null,
    subName: null,
    startAmt: null,
    endAmt: null,
    isHide: null,
    light: ['红灯', '黄灯', '绿灯'],
  })
  // ====================================选择开始时间
  let beginDateStart = ref(null)
  let beginTimeShow = ref(false)

  function showBeginTimeChoose() {
    beginTimeShow.value = true
  }

  function beginTimeClose(e) {
    if (e) {
      let time = timeFormat(e.value)
      pageForm.value.beginDateStart = time
    }
    beginTimeShow.value = false
  }

  // ====================================选择结束时间
  let beginDateEnd = ref(null)
  let endTimeShow = ref(false)

  function showEndTimeChoose() {
    endTimeShow.value = true
  }

  function endTimeClose(e) {
    if (e) {
      let time = timeFormat(e.value)
      pageForm.value.beginDateEnd = time
    }
    endTimeShow.value = false
  }

  // ====================================选择项目类型
  let kindShow = ref(false);
  let kindColumns = ref([]);

  function showKindChoose() {
    kindShow.value = true
  }

  function kindClose(e) {
    if (e) pageForm.value.kind = e.value[0];
    kindShow.value = false;
  }

  let kindFull = [];
  const getXMLX = function() {
    getZJLYlist().then(res => {
      kindFull = res.data.list;
      kindFull.unshift({
        key: null,
        value: "所有来源"
      });

      kindColumns.value = [res.data.list.map(item => item.value)];
    })
  };

  // ====================================选择行业分类
  let industKindOrgin = []
  let IndustKindList = ref([])
  let IndustKindShow = ref(false)

  function showIndustKindChoose() {
    IndustKindShow.value = true
  }

  function IndustKindClose(e) {
    if (e) pageForm.value.indusKind = e.value[0];
    IndustKindShow.value = false
  }

  // ====================================选择行业状态
  // let statusList = ref([
  // 	["请选择", "暂存", "项目申报", "待审批", "审批中", "核准备案中", "计划编制", "待开工", "施工中", "年度竣工", "不同意", "已竣工"]
  // ])
  let statusList = ref([
    ["请选择", "暂存", "项目前期", "待开工", "施工中", "暂停施工", "已竣工"]
  ])

  let statusShow = ref(false)

  function showStatusChoose() {
    statusShow.value = true
  }

  function statusClose(e) {
    if (e) pageForm.value.status = e.value[0];
    statusShow.value = false;
  }

  // ====================================选择隐藏状态
  let isHideNameList = ref([
    ["请选择",
      "正常",
      "隐藏"
    ]
  ])
  let isHideNameShow = ref(false)

  function showIsHideNameChoose() {
    isHideNameShow.value = true
  }

  function isHideNameClose(e) {
    if (e) pageForm.value.isHideName = e.value[0];
    isHideNameShow.value = false;
  }

  // =====================================地点
  let areaShow = ref(false);
  let areaColumns = ref([]);
  const showAreaChoose = function() {
    areaShow.value = true;
  }
  const areaClose = function(e) {
    if (e) pageForm.value.subjectId = e.value[0];
    areaShow.value = false;
  }
  let jsddFull = [];

  const getJSDD = function() {
    getJSDDlist().then(res => {
      jsddFull = res.data.list;
      jsddFull.push({
        key: null,
        value: "所有地区"
      });

      areaColumns.value = [res.data.list.map(item => item.value)];
      areaColumns.value[0].unshift("所有地区");
    })
  };

  // =====================================性质
  let xmxzShow = ref(false);
  let xmxzColumns = ref([]);
  const showXmxzChoose = function() {
    xmxzShow.value = true;
  }
  const xmxzClose = function(e) {
    if (e) pageForm.value.propKind = e.value[0];
    xmxzShow.value = false;
  }
  let xmxzFull = [];

  const getXMXZ = function() {
    getXMXZlist().then(res => {
      xmxzFull = res.data.list;
      xmxzFull.unshift({
        key: null,
        value: "所有性质"
      });

      xmxzColumns.value = [res.data.list.map(item => item.value)];
    })
  };

  // =====================================灯
  let lightShow = ref(false);
  const kindUnit = store.getters && store.getters.kindUnit;

  function judgeLightShow() {
    if ((kindUnit ?? '') === '') {
      // 为空就请求一下
      getInfo().then(res => {
        lightShow.value = res?.data?.user?.kindUnit === "1";
      })
    } else {
      lightShow.value = kindUnit === "1";
    }
  }


  function confirmParams() {

    // let statusObj = {
    // 	"请选择": "",
    // 	"暂存": "0",
    // 	"项目申报": "1",
    // 	"待审批": "2",
    // 	"审批中": "3",
    // 	"核准备案中": "4",
    // 	"计划编制": "5",
    // 	"待开工": "6",
    // 	"施工中": "7",
    // 	"不同意": "8",
    // 	"年度竣工": "9",
    // 	"已竣工": "A"
    // }
    let statusObj = {
      "请选择": "",
      "暂存": "0",
      "项目前期": "1",
      "未开工": "6",
      "施工中": "7",
      "暂停施工": "8",
      //"年度竣工": "9",
      "已竣工": "A"
    }

    let isHideNameObj = {
      "请选择": "",
      "正常": "0",
      "隐藏": "1",
    }

    let lightObj = {
      "绿灯": "0",
      "黄灯": "1",
      "红灯": "2"
    }
    let lightText = ""
    for (let i in pageForm.value.light) {
      lightText += lightObj[pageForm.value.light[i]] + ","
    }
    if (lightText.length > 0) lightText = lightText.substr(0, lightText.length - 1);
    let paramsData = {
      "beginDateStart": pageForm.value.beginDateStart,
      "beginDateEnd": pageForm.value.beginDateEnd,
      "zjly": kindFull.find(item => item.value === pageForm.value.kind)?.key,
      "indusKind": industKindOrgin.find(item => item.value === pageForm.value.indusKind)?.key,
      "subjectId": jsddFull.find(item => item.value === pageForm.value.subjectId)?.key,
      "propKind": xmxzFull.find(item => item.value === pageForm.value.propKind)?.key,
      "status": statusObj[pageForm.value.status],
      "subName": pageForm.value.subName,
      "startAmt": pageForm.value.startAmt,
      "endAmt": pageForm.value.endAmt,
      "isHide": isHideNameObj[pageForm.value.isHideName],
      "light": lightText
    }
    searchInfo.value = Object.assign(searchInfo.value, paramsData);
    searchInfo.value.pageNo = 1;
    projectList.value = [];
    listTotal.value = 0;
    moreListFlag = true;
    console.log(searchInfo.value, '请求参数');
    getList();

  }

  onLoad(async (options) => {
    countShow.value = options.type === "home";
    let now = new Date();
    let year = now.getFullYear();
    // 开始时间
    // beginDateStart.value = pageForm.value.beginDateStart = year + "/01/01";
    // 结束时间
    // beginDateEnd.value = pageForm.value.beginDateEnd = year + "/12/31";
    // 行业分类列表
    const res = await getHYFLlist()
    industKindOrgin = res.data.list
    let titleList = res.data.list.map(item => item.value)
    titleList.unshift("请选择")
    IndustKindList.value = [titleList]
    getJSDD(); // 建设地点列表
    getXMXZ(); // 项目性质列表
    getXMLX(); // 项目类型列表
    judgeLightShow()
    if (options.name === "储备项目") countShow.value = false;

    if (options?.type == 'home') {
      title.value = `分管项目(${options?.name})`
      seachFalg.value = false
      searchInfo.value = Object.assign(searchInfo.value, options)
      pageForm.value.status = options.name
      searchInfo.value.beginDateStart = '';
      searchInfo.value.beginDateEnd = ''
      getList();
    } else if (options?.type !== 'all') {
      seachFalg.value = false
      searchInfo.value = Object.assign(searchInfo.value, options)
      searchInfo.value.beginDateStart = `${options?.year}/01/01`;
      searchInfo.value.beginDateEnd = `${options?.year}/12/31`;
      getList();
    } else {
      let year = new Date().getFullYear();
      searchInfo.value.beginDateStart = `${year}/01/01`;
      searchInfo.value.beginDateEnd = `${year}/12/31`;
      uni.$on('projectInfoSearch', resolve => {
        searchInfo.value = Object.assign(searchInfo.value, resolve);
        searchInfo.value.pageNo = 1;
        projectList.value = [];
        listTotal.value = 0;
        moreListFlag = true;
        getList();
      });
      getList();
    }


  });
  onReachBottom(() => {
    if (!moreListFlag) {
      return uni.showToast({
        title: "已经到底了。",
        icon: "none",
        duration: 2000
      })
    }
    searchInfo.value.pageNo++;
    getList();
  })
</script>

<template>
  <view class="container">
    <page-title @searchClick='searchClick'>{{title}}({{listTotal}})</page-title>
    <view class="stats-layer-next">
      <view class="condition-btn">
        <view class="text">
          2024
        </view>
        <image src="../../static/open-btn.png" mode="" :class="isUnfold ? 'open-btn':''" @click="isUnfold = !isUnfold">
        </image>
      </view>

      <view class="condition-from" :style="isUnfold ? {height:'800rpx'} :''">
        <view class="item">
          <view class="item-label">开始日期</view>
          <view class="item-text" @click="showBeginTimeChoose()">
            <view v-if="pageForm.beginDateStart">{{pageForm.beginDateStart}}</view>
            <view v-else class="text">请选择开始日期</view>
            <u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon>
          </view>
        </view>
        <view class="item">
          <view class="item-label">结束日期</view>
          <view class="item-text" @click="showEndTimeChoose()">
            <view v-if="pageForm.beginDateEnd">{{pageForm.beginDateEnd}}</view>
            <view v-else class="text">请选择结束日期</view>
            <u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon>
          </view>
        </view>
        <view class="item">
          <view class="item-label">资金来源</view>
          <view class="item-text" @click="showKindChoose()">
            <view v-if="pageForm.kind">{{pageForm.kind}}</view>
            <view v-else class="text">请选择类型</view>
            <u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon>
          </view>
        </view>
        <view class="item" v-if="seachFalg">
          <view class="item-label">项目性质</view>
          <view class="item-text" @click="showXmxzChoose()">
            <view v-if="pageForm.propKind">{{pageForm.propKind}}</view>
            <view v-else class="text">请选择行业分类</view>
            <u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon>
          </view>
        </view>
        <view class="item">
          <view class="item-label">建设地点</view>
          <view class="item-text" @click="showAreaChoose()">
            <view v-if="pageForm.subjectId">{{pageForm.subjectId}}</view>
            <view v-else class="text">请选择建设地点</view>
            <u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon>
          </view>
        </view>
        <view class="item">
          <view class="item-label">行业分类</view>
          <view class="item-text" @click="showIndustKindChoose()">
            <view v-if="pageForm.indusKind">{{pageForm.indusKind}}</view>
            <view v-else class="text">请选择行业分类</view>
            <u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon>
          </view>
        </view>
        <view class="item" v-if="seachFalg">
          <view class="item-label">状态</view>
          <view class="item-text" @click="showStatusChoose()">
            <view v-if="pageForm.status">{{pageForm.status}}</view>
            <view v-else class="text">请选择状态</view>
            <u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon>
          </view>
        </view>
        <view class="item">
          <view class="item-label">隐藏状态</view>
          <view class="item-text" @click="showIsHideNameChoose()">
            <view v-if="pageForm.isHideName">{{pageForm.isHideName}}</view>
            <view v-else class="text">请选择隐藏状态</view>
            <u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon>
          </view>
        </view>
        <view class="item">
          <view class="item-label">金额范围</view>
          <view class="card-item-range">
            <input v-model="pageForm.startAmt" class="card-item-input center-input" placeholder="最小值"
              placeholder-style="color: #D8D8D8" maxlength="20" type="number" />
            ~
            <input v-model="pageForm.endAmt" class="card-item-input center-input" placeholder="最大值"
              placeholder-style="color: #D8D8D8" maxlength="20" type="number" />
          </view>
        </view>
        <view class="item">
          <view class="item-label">项目名称</view>
          <view class="card-item-range">
            <input v-model="pageForm.subName" class="card-item-input center-input" placeholder="请输入项目名称"
              placeholder-style="color: #D8D8D8" maxlength="20" type="number" />
          </view>
        </view>
        <!-- 红黄绿灯 -->
        <view style="margin-top: 20rpx;">
          <u-checkbox-group v-model="pageForm.light" style="width: 500rpx">
            <u-checkbox :customStyle="{display:'flex',justifyContent:'space-evenly',width:'32%'}" label-size="16px"
              iconColor='#fff' activeColor='#002F69' v-for="(item, index) in lightList" :key="index" :label="item.name"
              :name="item.name">
            </u-checkbox>
          </u-checkbox-group>
        </view>
        <view class="form-confrom" style="margin-top: 20rpx;" @click="confirmParams()">
          确定
        </view>
      </view>

    </view>
      <view class="cards-list" :style="isUnfold ? {marginTop:'30rpx'} :''">
        <view v-for="(item,index) in projectList" :key="index">
          <view class="card">
            <!-- <view class="">
            </view> -->
            <view class="project-layer" :style="!item.isOpen ? {border:'none'}:''">
              <text class="card-name-num">{{(index+1<10?'0'+(index+1):index+1)}}</text>
              <view class="name">
                {{item.subName ?? "--"}}
              </view>
            </view>
            <view class="card-status" @click="onChangeCard(index)">
              <image class="status-light" src="../../static/images/red.svg" mode="" v-if="item.status_fgw=='2'"></image>
              <image class="status-light" src="../../static/images/green.svg" mode=""
                v-if="item.status_fgw=='0'||item.status_fgw==null"></image>
              <image class="status-light" src="../../static/images/yellow.svg" mode="" v-if="item.status_fgw=='1'">
              </image>
              <view class="" style="white-space: nowrap;">
                {{item.status ?? "--"}}
              </view>

              <image src="../../static/images/liaghtUp.svg" mode="" :class="item.isOpen ?'card-status-icon-change' :''">
              </image>
            </view>

            <view class="card-content-box" :style="item.isOpen ? {height:'250rpx'} :''">
              <view class="card-item" style="margin-top: 5rpx;">
                <view class="card-item-name">总 投 资 金 额</view>
                <view class="card-item-content">{{item.amtTotal ?? "--"}}万</view>
              </view>

              <!-- 年度计划投资-申报单位（万元） -->
              <view class="card-item">
                <view class="card-item-name">年度计划投资</view>
                <view class="card-item-content">{{item.yearAmt ?? "--"}}万</view>
              </view>

              <!-- 已完成投资（万元）-->
              <view class="card-item">
                <view class="card-item-name">年度完成投资</view>
                <view class="card-item-content">{{item.yearAmtSj ?? "--"}}万</view>
              </view>
              <!-- 当前状态 -->
              <view class="card-item">
                <view class="card-item-name">项目状态</view>
                <view class="card-item-content content-red">{{item.status ?? "--"}}</view>
              </view>
              <view class="card-btn-list">
                <view class="button" @click="goToReport('weekly',item)">
                  周报
                </view>
                <view class="button" @click="goToReport('monthly',item)">
                  月报
                </view>
                <view class="button" v-if="!item.isAttention" @click="changeFocus(item.id,item.isAttention)">
                  关注
                </view>
                <view class="button" @click="changeFocus(item.id,item.isAttention)" v-else>
                  取消关注
                </view>
                <view class="button" v-if="item.usersub == 1" @click="goToDetail(item.id,item.subName)">
                  项目详情
                </view>
                <view class="button" v-else @click="goToDetail(item.id,item.subName)">
                  查看
                </view>
                <view class="button" @click="goToReport('more',item)">
                  更多
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="no-list" v-if="projectList.length===0">
          <image src="@/static/text-nocontent.png" mode=""></image>
          <text>未搜索到相关内容</text>
        </view>
      </view>


      <u-back-top :scroll-top="scrollTop"></u-back-top>

      <u-loading-page :loading="loading"></u-loading-page>




    <!-- 开始时间 -->
    <u-datetime-picker :show="beginTimeShow" @confirm="beginTimeClose" @cancel="beginTimeClose" @close="beginTimeClose"
      v-model="beginDateStart" mode="date" closeOnClickOverlay></u-datetime-picker>
    <!-- 结束时间 -->
    <u-datetime-picker :show="endTimeShow" @confirm="endTimeClose" @cancel="endTimeClose" @close="endTimeClose"
      v-model="beginDateEnd" mode="date" closeOnClickOverlay></u-datetime-picker>
    <!-- 行业分类 -->
    <u-picker :show="IndustKindShow" :columns="IndustKindList" @confirm="IndustKindClose" @cancel="IndustKindClose"
      @close="IndustKindClose" closeOnClickOverlay></u-picker>
    <!-- 行业状态 -->
    <u-picker :show="statusShow" :columns="statusList" @confirm="statusClose" @cancel="statusClose" @close="statusClose"
      closeOnClickOverlay></u-picker>
    <!-- 地点选择 -->
    <u-picker :show="areaShow" :columns="areaColumns" @confirm="areaClose" @cancel="areaClose" @close="areaClose"
      closeOnClickOverlay></u-picker>
    <!-- 性质选择 -->
    <u-picker :show="xmxzShow" :columns="xmxzColumns" @confirm="xmxzClose" @cancel="xmxzClose" @close="xmxzClose"
      closeOnClickOverlay></u-picker>
    <!-- 项目类型 -->
    <u-picker :show="kindShow" :columns="kindColumns" @confirm="kindClose" @cancel="kindClose" @close="kindClose"
      closeOnClickOverlay></u-picker>
    <!-- 隐藏状态 -->
    <u-picker :show="isHideNameShow" :columns="isHideNameList" @confirm="isHideNameClose" @cancel="isHideNameClose"
      @close="isHideNameClose" closeOnClickOverlay></u-picker>
  </view>
</template>

<style lang="scss" scoped>
  .bg {
    margin-top: calc(var(--status-bar-height) + 100rpx);
    left: 0;
    width: 100%;
    min-height: 95%;
    // padding-top: 14rpx;
    // border-radius: 40rpx 40rpx 0rpx 0rpx;
    // background-color: #fff;
  }

  .count-value {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 200rpx;
    margin-bottom: 20rpx;
    background: linear-gradient(180deg, #FFFFFF 2%, #A5C6FF 100%);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    opacity: 1;
    border: 4rpx solid #fff;

    .count-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 50%;
      height: 50%;
      text-align: center;

      .count-item-value {
        margin-bottom: 8rpx;
        font-size: 34rpx;
        font-weight: 500;
        color: #FF4000;
      }

      .count-special-value {
        color: #330DDF;
      }

      .count-item-description {
        font-size: 24rpx;
        color: #343437;
      }
    }
  }


  .order-by {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 106rpx;
    margin-bottom: 34rpx;
    padding: 0 40rpx;
    border-radius: 40rpx;
    background: #FFF;

    .order-by-item {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      color: #343437;

      .order-by-icon {
        width: 22rpx;
        height: 46rpx;
        margin-left: 24rpx;
        background-image: url("@/static/orderBy-none.png");
        background-size: 100% 100%;
      }

      .desc {
        background-image: url("@/static/orderBy-desc.png");
      }

      .asc {
        background-image: url("@/static/orderBy-asc.png");
      }
    }
  }

  .card-box {
    padding: 0 36rpx 36rpx 36rpx;
    border-radius: 28rpx 28rpx 28rpx 28rpx;
    border: 2rpx solid #C2C9D4;
  }

  .project-btn {
    width: 48% !important;
    background: #1869F6;
  }

  .focus-btn {
    width: 48% !important;
    background-color: #fff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    border: 3rpx solid #1869F6;
    color: #1869F6;
  }

  .focus-btn-no {
    width: 48% !important;
    background-color: #fff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    border: 3rpx solid #FF2D2D;
    color: #FF2D2D;
  }

  .lamp {
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      width: 72rpx;
      height: 72rpx;
      margin-right: 20rpx;
    }

    text {
      font-size: 32rpx;
    }
  }

  .card-box2 {
    padding: 0 0 36rpx 0;
    border-radius: 28rpx 28rpx 28rpx 28rpx;
  }

  .focusText {
    font-size: 12rpx;
    margin-right: 12rpx;
  }

  .card {
    padding-top: 0;
    // overflow: hidden;
  }

  .light-item {
    margin-bottom: 32rpx;
  }

  .card-light {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card-light-bottom {
    width: 122rpx;
    height: 44rpx;
    margin: auto 0;
    background-size: 100% 100%;
  }

  .light-red {
    background-image: url('@/static/icon-light-red.png');
  }

  .light-yellow {
    background-image: url('@/static/icon-light-yellow.png');
  }

  .light-green {
    background-image: url('@/static/icon-light-green.png');
  }

  .focus {
    width: 46rpx;
    height: 40rpx;
    background-image: url("@/static/focus-off.png");
    background-size: 100% 100%;
  }

  .focus-on {
    background-image: url("@/static/focus-on.png");
  }

  .more-btn {
    background-color: #fff;
    color: #1869F6;
    font-size: 32rpx;
  }

  .special-btn {
    width: 48% !important;
    background: linear-gradient(225deg, #2428F1 0%, #12C8C2 94%);
  }

  .bottom-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    row-gap: 20rpx;
    margin-bottom: 64rpx;
  }

  .card-value {
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translate(50%);
    width: 255rpx;
    height: 68rpx;
    padding-right: 22rpx;
    text-align: center;
    line-height: 68rpx;
    color: #1869F6;
    font-size: 32rpx;
    background: linear-gradient(90deg, rgba(211, 227, 255, 0) 0%, rgba(178, 206, 255, 0.5548) 54%, rgba(219, 232, 255, 0) 100%);
  }

  .card-fold {
    position: relative;
    width: 100%;
    min-height: 152rpx;
    margin-bottom: 20rpx;
    padding: 24rpx 30rpx 52rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 40rpx;
    overflow: hidden;
  }

  .card-fold-option {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 38rpx;
    padding: 0 40rpx;
    box-sizing: border-box;
    background: linear-gradient(270deg, #CADDFF 4%, rgba(219, 232, 255, 0) 100%);
    z-index: 999;

    .card-fold-count {
      flex: 1;
      font-size: 28rpx;
      color: #1869F6;
    }

    .card-fold-center {
      flex: 1;

      .card-fold-btn {
        width: 32rpx;
        height: 20rpx;
        margin: 0 auto;
        background-image: url("@/static/icon-fold.png");
        background-size: 100% 100%;
      }

      .card-unfold-btn {
        transform: rotate(180deg);
      }
    }

    .card-fold-chaos {
      flex: 1;
    }
  }

  .card-fold-red {
    background: linear-gradient(270deg, #FF8080 0%, rgba(219, 232, 255, 0) 100%);

    .card-fold-count {
      color: #FF0000;
    }

    .card-fold-center {
      .card-fold-btn {
        background-image: url("@/static/icon-fold-red.png");
      }
    }
  }

  .card-fold-yellow {
    background: linear-gradient(270deg, #FFAA00 4%, rgba(219, 232, 255, 0) 100%);

    .card-fold-count {
      color: #E19703;
    }

    .card-fold-center {
      .card-fold-btn {
        background-image: url("@/static/icon-fold-yellow.png");
      }
    }
  }

  .card-name-num {
    width: 64rpx;
    height: 64rpx;
    border-radius: 4rpx;
    border: 2rpx solid #F4F4F4;
    font-size: 24rpx;
    color: #B5B5B5;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card .project-layer {
    justify-content: flex-start;

    .name {
      padding-right: 160rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #222222;

    }
  }

  .card {
    padding-top: 20rpx !important;
  }

  .card .card-status {
    position: absolute;
    top: 20rpx;
    height: 96rpx;
    right: 0;
    width: 140rpx;
    background: #F2F7FF;
    font-weight: 500;
    font-size: 12px;
    color: #98B7DC;
    border-radius: 24rpx 0 0 24rpx;
  }

  .status-light {
    width: 60rpx !important;
    height: 60rpx !important;
    position: absolute !important;
    right: 0;
    top: -204rpx !important;
  }

  .card-item {
    .card-item-name {
      font-weight: 500;
      font-size: 24rpx;
      color: #999999;
    }

    .card-item-content {
      font-weight: 500;
      font-size: 24rpx;
      color: #444444;
    }

    .content-red {
      color: #E02020 !important;
    }
  }
</style>