<template>
  <!-- 基建月计划 -->
  <view class="month-container">
    <u-navbar
      class="u-navbar"
      title="基建涉网计划"
      placeholder
      @leftClick="leftClick"
      leftIconColor="#fff"
      bgColor="#00337A"
      :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
    />

    <view class="month-content">
      <view class="btn-header" id="btnHeaderRef">
        <button
          :key="index"
          @tap="onTapCheck(item.btn_title)"
          v-for="(item, index) in btnList"
          :class="{ active: item.btn_title === activeIndex }"
          v-show="item.isShow.includes(roles)"
        >
          {{ item.btn_title }}
        </button>
      </view>

      <!-- 发起提交 -->
      <view class="content-2" v-show="activeIndex === '发起提交'">
        <view class="pages-add" id="pagesAddRef">
          <view style="text-align: right; width: 30%">
            <image
              style="width: 50rpx; height: 50rpx; margin: 13rpx 20rpx 13rpx 0"
              src="../../../static/images/workPlan/delete.png"
              @tap="onReducePages"
            ></image>
          </view>
          <view class="num-content">
            <!-- <uni-pagination :show-icon="true" :total="pagesTotal" :pageSize="1" /> -->

            <scroll-view
              scroll-x="true"
              class="scroll-x head__scroll"
              scroll-with-animation="true"
              :scroll-left="scrollLeft"
            >
              <view
                :class="{ 'active-page': index == currentSwiper }"
                v-for="(item, index) in monthParams"
                :key="index"
                class="item head__scroll_item"
                :ref="'item' + index"
                @tap="onChangePages(item, index)"
              >
                {{ index + 1 }}
              </view>
            </scroll-view>
          </view>
          <view style="text-align: left; width: 30%">
            <image
              style="width: 50rpx; height: 50rpx; margin: 13rpx 0 13rpx 20rpx"
              src="../../../static/images/workPlan/add.png"
              @tap="onAddPages"
            ></image>
          </view>
        </view>
        <view>
          <uni-forms
            class="form-container"
            ref="form"
            :modelValue="formData"
            :rules="rules"
            label-position="top"
            label-width="200"
          >
            <uni-forms-item label="工程名称" style="margin-bottom: 2rpx" required>
              <view class="time-container" @tap="onSelectProject">
                <view>{{ projectName ? projectName : '请选择' }}</view>
                <text v-if="!projectName">&gt;</text>
              </view>
            </uni-forms-item>
            <uni-forms-item label="选择时间" required style="margin-bottom: 2rpx">
              <view>
                <!-- <TimeSelect /> -->
                <picker mode="date" fields="month" @change="onDateChange" :value="DateValue">
                  <view class="time-container">
                    <view class="date-picker">{{ DateValue }}</view>
                    <text>&gt;</text>
                  </view>
                </picker>
              </view>
            </uni-forms-item>
          </uni-forms>
        </view>

        <!-- <scroll-view :scroll-y="true" style="height: 340px">
         
        </scroll-view> -->

        <view style="background-color: #fff" :style="{ height: scrollHeight_1 + 'px' }" class="scroll-content-1">
          <swiper
            circular
            :autoplay="false"
            :current="currentSwiper"
            :style="{ height: scrollHeight_1 + 'px' }"
            @change="onSwiperChange"
          >
            <swiper-item v-for="(item, index) in monthParams" :key="index" :style="{ height: scrollHeight_1 + 'px' }">
              <scroll-view scroll-y="true" class="scroll-Y" :style="{ height: scrollHeight_1 + 'px' }">
                <uni-forms
                  class="form-container"
                  :ref="`monthPlanFormRef_${index}`"
                  :rules="monthPlanFormRules"
                  :model="item"
                  label-position="top"
                  label-width="200"
                >
                  <uni-forms-item
                    v-for="(f, i) in infrastructureFormLabel"
                    :key="i"
                    :label="f.form_label"
                    :name="f.name"
                    :required="f.required"
                  >
                    <u--textarea
                      v-if="f.items_type === 'area'"
                      v-model="item[f.name]"
                      placeholder="请填写"
                      autoHeight
                    ></u--textarea>
                    <u--input
                      v-if="f.items_type === 'ipt'"
                      :type="f.isType ? f.isType : 'text'"
                      v-model="item[f.name]"
                      placeholder="请填写"
                      @input="handleInput($event, f.isType, index, f.name)"
                    />
                    <uni-data-select
                      v-model="item[f.name]"
                      :localdata="f.options"
                      v-if="f.items_type === 'sel'"
                    ></uni-data-select>
                    <uni-datetime-picker
                      v-if="f.items_type === 'date'"
                      :type="f.date_type"
                      @maskClick="maskClick"
                      @change="onChangeTimeSelect($event, index)"
                    />
                  </uni-forms-item>
                </uni-forms>
              </scroll-view>
            </swiper-item>
          </swiper>

          <!-- <view class="submit-btn">
            <button>导入计划</button>
            <button @tap="onSaveSubmit">保存提交</button>
          </view> -->
        </view>

        <view class="bottom-btn bottom-1">
          <view @tap="onImportMonthPlan">
            <uni-icons type="cloud-upload" size="20"></uni-icons>
            导入计划
          </view>
          <view @tap="onSaveSubmit">保存提交</view>
        </view>
      </view>

      <!-- 查看报表  填报人和上报人 -->
      <view v-show="activeIndex === '查看报表' && roles == 23" class="common-style">
        <view class="report-form-header" v-if="monthDataList.length > 0">
          <view>
            <scroll-view scroll-x class="header-left">
              <text
                :class="{ 'active-form-page': activeFormPages === index }"
                v-for="(item, index) in monthDataList"
                :key="index"
                @tap="onChangeFormPages(index)"
              >
                {{ index + 1 }}
              </text>
            </scroll-view>
          </view>
          <view class="header-right">
            <!-- <scroll-view scroll-x style="width: 100%; white-space: nowrap; font-size: 22rpx">
             
            </scroll-view> -->
            <text v-if="kjsAmount > 0" style="color: #06bd36">可接受风险:{{ kjsAmount }}</text>
            <text v-if="dfxAmount > 0" style="color: #06bd36">低风险:{{ dfxAmount }}</text>
            <text v-if="zfxAmount > 0" style="color: #f28b00">中风险:{{ zfxAmount }}</text>
            <text v-if="gfxAmount > 0" style="color: #ff4e4b">高风险:{{ gfxAmount }}</text>
            <text v-if="tfxAmount > 0" style="color: #ff4e4b">特高风险:{{ tfxAmount }}</text>
          </view>
        </view>
        <uni-forms ref="form-b" label-position="top" label-width="200">
          <uni-forms-item label="工程名称" required>
            <!-- <view class="time-container" @tap="onSelectProject">
              <view>请选择</view>
              <text>&gt;</text>
            </view> -->
            <uni-data-select
              :clear="false"
              :localdata="projectListSel"
              @change="onChangeProjectSel"
              :v-model="queryDataParams.proId"
            ></uni-data-select>
          </uni-forms-item>
        </uni-forms>

        <view class="icon-search-time">
          <text style="fon-size: 30rpx; margin-right: 25rpx" @tap="onReduceMonth">《</text>
          <uni-icons type="left" size="20" @tap="onReduceDay"></uni-icons>

          <view class="view-time">
            <picker mode="date" @change="onChangeCurrentData" v-model="currentTime">
              <view class="date-picker">{{ currentTime }}</view>
            </picker>
          </view>

          <uni-icons type="right" size="20" @tap="onAddDay"></uni-icons>
          <text style="fon-size: 30rpx; margin-left: 25rpx" @tap="onAddMonth">》</text>

          <button @tap="onBackToday">返回本月</button>
        </view>

        <view class="pages scroll-content-2" :style="{ height: scrollHeight_2 + 'px' }">
          <!-- <uni-pagination :show-icon="true" :total="1" /> -->
          <swiper
            circular
            :autoplay="false"
            :current="activeFormPages"
            :style="{ height: scrollHeight_2 + 'px' }"
            @change="onSwiperChangeForms"
            v-if="monthDataList.length > 0"
          >
            <swiper-item v-for="(item, index) in monthDataList" :key="index" :style="{ height: scrollHeight_2 + 'px' }">
              <scroll-view scroll-y="true" class="scroll-Y" style="height: 100%">
                <uni-forms class="form-container" label-position="top" label-width="200">
                  <uni-forms-item
                    v-for="(f, i) in infrastructureFormLabel"
                    :key="i"
                    :label="f.form_label"
                    :name="f.name"
                    :required="f.required"
                  >
                    <u--textarea
                      v-if="f.items_type === 'area' || f.items_type === 'date'"
                      v-model="item[f.name]"
                      placeholder="请填写"
                      autoHeight
                      disabled
                    ></u--textarea>
                    <u--input
                      v-if="f.items_type === 'ipt'"
                      :type="f.isType ? f.isType : 'text'"
                      v-model="item[f.name]"
                      placeholder="请填写"
                      disabled
                    />
                    <uni-data-select
                      v-model="item[f.name]"
                      :localdata="f.options"
                      disabled
                      :clear="false"
                      v-if="f.items_type === 'sel'"
                    ></uni-data-select>
                    <!-- <uni-datetime-picker
                      v-if="f.items_type === 'date'"
                      :type="f.date_type"
                      v-model="item.viewTime"
                      @maskClick="maskClick"
                      disabled
                    /> -->
                  </uni-forms-item>
                </uni-forms>
              </scroll-view>
            </swiper-item>
          </swiper>
        </view>
      </view>

      <view v-show="roles == 24 || roles == 25" class="common-style">
        <uni-easyinput
          prefixIcon="search"
          v-model="queryDataParamsNew.keyword"
          placeholder="搜索"
          @iconClick="iconClickLeft"
        ></uni-easyinput>
        <uni-forms ref="form-b" label-position="top" label-width="200">
          <uni-forms-item label="工程名称" required>
            <!-- <view class="time-container" @tap="onSelectProject">
              <view>请选择</view>
              <text>&gt;</text>
            </view> -->
            <uni-data-select
              :clear="false"
              :localdata="projectListSel"
              @change="onChangeProjectSelNew"
              :v-model="queryDataParamsNew.proId"
            ></uni-data-select>
          </uni-forms-item>
        </uni-forms>

        <scroll-view scroll-y class="scroll-content-3" :style="{ height: scrollHeight_3 + 'px' }">
          <view class="month-list" v-for="item in viewMonthPlanList" :key="item.id" @tap="onViewDetails(item)">
            <view class="item-header">
              <text v-if="item.kjsfx > 0" style="color: #06bd36">可接受风险:{{ item.kjsfx }}</text>
              <text v-if="item.dfx > 0" style="color: #06bd36">低风险:{{ item.dfx }}</text>
              <text v-if="item.zfx > 0" style="color: #f28b00">中风险:{{ item.zfx }}</text>
              <text v-if="item.gfx > 0" style="color: #ff4e4b">高风险:{{ item.gfx }}</text>
              <text v-if="item.tgfx > 0" style="color: #ff4e4b">特高风险:{{ item.tgfx }}</text>

              <text>{{ item.planTime }}</text>
            </view>

            <view class="item-num">
              <text>计划数量</text>
              <text>{{ item.planCount }}</text>
            </view>

            <view class="item-time">
              <text>提交人/提交时间</text>
              <text>{{ item.upUser }}/{{ item.upTime }}</text>
              <text class="style_text_1">项目部已提交</text>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 查看数据 -->
      <view v-show="activeIndex === '查看数据' && roles == 23" class="common-style">
        <uni-easyinput
          prefixIcon="search"
          v-model="queryDataParamsNew.keyword"
          placeholder="搜索"
          @iconClick="iconClick"
        ></uni-easyinput>

        <uni-forms ref="form-b" label-position="top" label-width="200">
          <uni-forms-item label="工程名称" required>
            <view class="time-container" @tap="onViewSelectProject">
              <view>{{ projectInPopupName ? projectInPopupName : '请选择' }}</view>
              <text v-if="projectInPopupName">&gt;</text>
            </view>
          </uni-forms-item>
          <uni-forms-item label="全部状态" required>
            <view class="time-container" @tap="onSelectAllType">
              <view>{{ projectQueryType ? projectQueryType : '请选择' }}</view>
              <text v-if="projectQueryType">&gt;</text>
            </view>
          </uni-forms-item>
        </uni-forms>

        <scroll-view scroll-y class="scroll-content-3" :style="{ height: scrollHeight_3 + 'px' }">
          <view class="month-list" v-for="item in viewMonthPlanList" :key="item.id" @tap="onViewDetails(item)">
            <view class="item-header">
              <text v-if="item.kjsfx > 0" style="color: #06bd36">可接受风险:{{ item.kjsfx }}</text>
              <text v-if="item.dfx > 0" style="color: #06bd36">低风险:{{ item.dfx }}</text>
              <text v-if="item.zfx > 0" style="color: #f28b00">中风险:{{ item.zfx }}</text>
              <text v-if="item.gfx > 0" style="color: #ff4e4b">高风险:{{ item.gfx }}</text>
              <text v-if="item.tgfx > 0" style="color: #ff4e4b">特高风险:{{ item.tgfx }}</text>

              <text>{{ item.planTime }}</text>
            </view>

            <view class="item-num">
              <text>计划数量</text>
              <text>{{ item.planCount }}</text>
            </view>

            <view class="item-time">
              <text>提交人/提交时间</text>
              <text>{{ item.upUser }}/{{ item.upTime }}</text>
              <text class="style_text_1">项目部已提交</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 弹框 -->
    <uni-popup ref="popup" background-color="#fff">
      <!-- <view class="popup-content" v-if="popupType === 'center'">
        <view class="flex-style">
          <text style="font-size: 16px">选择工程</text>
          <uni-icons type="closeempty" size="30" @tap="onClosePopup"></uni-icons>
        </view>
        <view>{{ projectQueryParams.planTime }}</view>
        <view class="search">
          <view class="select">
            <uni-data-select
              v-model="projectQueryParams.state"
              @change="onProjectChange"
              :localdata="projectRange"
            ></uni-data-select>
          </view>
          <button @tap="getProjectListData">搜索</button>
        </view>

        <scroll-view scroll-y class="project-content">
          <view v-for="item in projectList" :key="item.id" @tap="onChangeProject(item.id, item.name)">
            {{ item.name }}
          </view>
        </scroll-view>
      </view> -->

      <view v-if="popupType === 'center'" class="popup-bottom-content">
        <view class="bottom-title">
          <text>请选择</text>
          <text>请选择</text>
          <uni-icons type="closeempty" size="20" @tap="onClosePopup"></uni-icons>
        </view>

        <view class="scroll-select">
          <scroll-view scroll-y="true" style="height: 100%">
            <view
              class="select-item"
              v-for="item in projectListSel"
              :key="item.value"
              @tap="onChangeProject(item.value, item.text)"
            >
              {{ item.text }}
            </view>
          </scroll-view>
        </view>
      </view>

      <view v-else class="popup-bottom-content">
        <view class="bottom-title">
          <text>请选择</text>
          <text>请选择</text>
          <uni-icons type="closeempty" size="20" @tap="onClosePopup"></uni-icons>
        </view>

        <view v-if="isType">
          <view class="select-item" v-for="item in isAUditingList" :key="item.title" @tap="onCheckAuditing(item)">
            {{ item.title }}
          </view>
        </view>

        <view v-else class="scroll-select">
          <scroll-view scroll-y="true" style="height: 100%">
            <view
              class="select-item"
              v-for="item in projectListSel"
              :key="item.value"
              @tap="onChangeProjectInPopup(item)"
            >
              {{ item.text }}
            </view>
          </scroll-view>
        </view>
      </view>
    </uni-popup>

    <!-- 审核人弹框 -->
    <uni-popup ref="popupAuditing" background-color="#fff">
      <view class="auditing-content">
        <view class="auditing-title">
          <view class="title">
            <text style="margin-left: 15rpx">请选择计划审核人</text>
          </view>
          <view class="search">
            <view class="search-ipt">
              <uni-easyinput :clear="false" type="text" placeholder="请输入关键字" v-model="searchUserName" />
            </view>
            <view class="search-btn" @tap="onSearchUserInfo">搜索</view>
          </view>
        </view>

        <view class="user-info">
          <view class="user-title">
            <view style="width: 8%"></view>
            <view style="width: 12%">序号</view>
            <view style="width: 30%">姓名</view>
            <view style="width: 50%">岗位</view>
          </view>

          <scroll-view :scroll-y="true" style="height: 33vh">
            <view class="user-content" v-for="(item, index) in auditingUserList" :key="item.id">
              <view style="width: 8%">
                <label>
                  <checkbox
                    :checked="item.isChecked"
                    color="#fff"
                    borderColor="#ccc"
                    backgroundColor="#fff"
                    activeBorderColor="#003778"
                    activeBackgroundColor="#003778"
                    style="transform: scale(0.7)"
                    @tap="onCheckBoxChange(item)"
                  />
                </label>
              </view>
              <view style="width: 12%">{{ index + 1 }}</view>
              <view style="width: 30%">{{ item.name }}</view>
              <view style="width: 50%">{{ item.orgName }}</view>
            </view>
          </scroll-view>
        </view>

        <view class="user-btn">
          <view class="btn-cancel" @tap="onHandlerCancel">取消</view>
          <view class="btn-submit" @tap="onHandlerSubmit">确定</view>
        </view>
      </view>
    </uni-popup>

    <!-- 弹框 查看工程 -->
    <uni-popup ref="popupViewProject" background-color="#fff">
      <view class="popup-view">
        <view class="popup-view-title">
          <text>查看工程</text>
          <uni-icons type="closeempty" size="32" @tap="onCloseViewPopup"></uni-icons>
        </view>

        <view class="search-container">
          <view class="search-box">
            <view class="view-search-ipt">
              <uni-easyinput
                :clear="false"
                type="text"
                placeholder="请输入关键字"
                v-model="getWorkWaitProjectParams.keyword"
              />
            </view>
            <view class="view-search-btn" @tap="onSearchWorkWaitProject">搜索</view>
          </view>
        </view>
        <view class="view-project-list">
          <scroll-view :scroll-y="true" class="view-project-item">
            <view v-for="item in workWaitProjectList" :key="item.id" @tap="onViewAuditingDetails(item)">
              {{ item.proName }}
            </view>
          </scroll-view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import TimeSelect from './components/time-select'
import {
  setMonthPlanApi, // 1
  getViewDataListApi, // 2
  getRiskLevelListApi,
  getMonthPlanDataApi,
  getProjectList_1Api,
  getProjectList_2Api,
  getControlLevelListApi,
  getIsPlanApi,
  getAUditingUserInfoApi,
  getWorkWaitListApi,
  getWorkWaitProjectApi,
  getReportFormListApi,
  getImportMonthPlanApi
} from '../../../api/workPlan/networkPlan'
export default {
  components: {
    TimeSelect
  },
  data() {
    return {
      activeIndex: '',
      DateValue: this.$moment(this.$moment().format('YYYY-MM')).add(1, 'months').format('YYYY-MM'),
      pagesTotal: 1,
      currentPage: 0,
      popupType: '',
      scrollHeight: 500,
      formData: {},
      isType: false,
      currentTime: this.$moment().format('YYYY-MM'),
      currentTimeNew: this.$moment().format('YYYY-MM'),
      btnList: [
        // { btn_title: '工作待办', isShow: ['24', '25'] },
        { btn_title: '发起提交', isShow: ['23'] },
        { btn_title: '查看报表', isShow: ['23'] },
        { btn_title: '查看数据', isShow: ['23'] }
      ],
      rules: {
        name: {
          rules: [{ required: true, errorMessage: '请填写' }]
        },
        gk: {
          rules: [{ required: true, errorMessage: '请填写' }]
        },
        jd: {
          rules: [{ required: true, errorMessage: '请填写' }]
        },
        nr: {
          rules: [{ required: true, errorMessage: '请填写' }]
        },
        dj: {
          rules: [{ required: true, errorMessage: '请填写' }]
        }
      },
      monthPlanFormRules: {
        zynr: {
          rules: [{ required: true, errorMessage: '请填写涉网作业内容' }]
        },
        fxdj: {
          rules: [{ required: true, errorMessage: '请选择风险等级' }]
        },
        tdsj: {
          rules: [{ required: true, errorMessage: '请填写计划停电时间' }]
        },
        tdsb: {
          rules: [{ required: true, errorMessage: '请填写停电线路(设备)名称' }]
        },
        ssgdj: {
          rules: [{ required: true, errorMessage: '请填写停电负责人及电话' }]
        },
        fzr: {
          rules: [{ required: true, errorMessage: '请填写停电负责人及电话' }]
        }
      },
      infrastructureFormLabel: [
        { form_label: '涉网作业内容', items_type: 'area', name: 'zynr', required: true },
        {
          form_label: '风险等级',
          items_type: 'sel',
          name: 'fxdj',
          required: true,
          options: []
        },
        { form_label: '计划停电时间', items_type: 'date', date_type: 'daterange', name: 'tdsj', required: true },
        { form_label: '停电线路(设备)名称', items_type: 'area', name: 'tdsb', required: true },
        { form_label: '停电线路所属供电局', items_type: 'area', name: 'ssgdj', required: true },
        { form_label: '停电负责人及电话', items_type: 'ipt', name: 'fzr', required: true },
        { form_label: '备注', items_type: 'area', name: 'bz' }
      ],

      currentSwiper: 0,
      projectQueryParams: {
        planTime: this.$moment().format('YYYY-MM-DD'),
        type: 3,
        state: ''
      },
      projectRange: [
        { value: '', text: '全部' },
        { value: '0', text: '未填报' },
        { value: '1', text: '已填报' }
      ],
      isAUditingList: [
        { title: '未审核', value: '2' },
        { title: '已审核', value: '1' }
      ],
      searchValue: '',
      projectList: [],
      projectListSel: [],
      queryDataParams: {
        proId: '',
        month: ''
      },
      projectName: '',
      projectId: '',
      roles: uni.getStorageSync('wkRole'),
      paramsItem: {
        proName: '',
        month: '',
        zynr: '',
        zytj: '',
        tdsj: '',
        tdsb: '',
        ssgdj: '',
        fzr: '',
        bz: ''
      },
      monthParams: [
        {
          proName: '',
          month: '',
          zynr: '',
          zytj: '',
          tdsj: '',
          tdsb: '',
          ssgdj: '',
          fzr: '',
          bz: ''
        }
      ],
      monthDataList: [],
      projectInPopupName: '',
      projectQueryType: '',
      queryDataParamsNew: {
        proId: '',
        month: '',
        state: '',
        keyword: ''
      },
      viewMonthPlanList: [],
      scrollLeft: 0,
      activeFormPages: 0,
      kjsAmount: 0,
      dfxAmount: 0,
      zfxAmount: 0,
      gfxAmount: 0,
      tfxAmount: 0,
      scrollHeight_1: 0,
      scrollHeight_2: 0,
      scrollHeight_3: 0,
      searchUserName: '',
      auditingUserList: [],

      workWaitList: [],
      workWaitListNew: [],
      // 获取工作待办列表数据
      getWorkWaitParams: {
        planTime: this.$moment().format('YYYY-MM'),
        type: '1'
      },
      getWorkWaitParamsNew: {
        planTime: this.$moment().format('YYYY-MM'),
        type: '2'
      },
      searchProjectName: '',
      getWorkWaitProjectParams: {
        planTime: '',
        reportType: '',
        keyword: ''
      },
      workWaitProjectList: [],
      auditingDetailsFlg: true,
      isView: false
    }
  },
  mounted() {
    // console.log('this.$refs.btnHeaderRef', this.$refs.btnHeaderRef, this.$refs.pagesAddRef)
    const query = uni.createSelectorQuery()
    query
      .select('#btnHeaderRef')
      .boundingClientRect(data => {
        this.scrollHeight += data.height
      })
      .exec()
    query
      .select('#pagesAddRef')
      .boundingClientRect(data => {
        this.scrollHeight += data.height
      })
      .exec()
    // 获取工程
    this.getProjectListData()
    this.getProjectListData_2()
    // 获取风险等级
    this.getRiskLevelListData()
    // 获取管控层级
    this.getControlLevelListData()

    // 获取工作待办列表数据
    if (this.roles == 24 || this.roles == 25) {
      // this.getWorkWaitListData()
      this.getViewDataList()
    }

    const this_ = this
    uni.$on('update', function () {
      this_.getViewDataList()
    })
    uni.$on('updateView', function () {
      this_.onCloseViewPopup()
      // this_.getWorkWaitListData()
    })

    if (this.roles == 22 || this.roles == 23) {
      this.activeIndex = '发起提交'
    }
    if (this.roles == 24 || this.roles == 25) {
      this.activeIndex = '工作待办'
    }

    this.$nextTick(() => {
      this.calcScrollHeight('.scroll-content-1', '.bottom-1').then(res => {
        // console.log('res---', res)

        this.scrollHeight_1 = res
      })
    })
  },

  onUnload() {
    uni.$off('update')
    uni.$off('updateView')
  },
  methods: {
    leftClick() {
      uni.navigateBack()
    },

    onTapCheck(i) {
      this.activeIndex = i

      if (i == '查看报表' && (this.roles == 24 || this.roles == 25)) {
        this.getReportFormList()
      }
    },
    /* 减少页数 */
    onReducePages() {
      if (this.pagesTotal > 1) {
        if (this.currentSwiper + 1 === this.pagesTotal) {
          this.currentSwiper -= 1
        }
        this.pagesTotal -= 1
        this.monthParams.splice(this.monthParams.length - 1, 1)
      }
    },
    /* 增加页数 */
    onAddPages() {
      this.pagesTotal += 1
      // this.monthParams.push(this.paramsItem)
      // this.monthParams.splice(this.pagesTotal - 1, 0, this.paramsItem)
      this.monthParams.push({ ...this.paramsItem })
    },
    /* 页码数字点击 */
    // onChangePages(num) {
    //   this.currentSwiper = num - 1
    //   // if (num > 1) {
    //   //   console.log('居中')
    //   // }
    // },
    onSelectProject() {
      this.$refs.popup.open('bottom')
      this.popupType = 'center'
    },
    onClosePopup() {
      this.$refs.popup.close()
      if (this.isType) {
        this.isType = !this.isType
      }
    },
    onSwiperChange(e) {
      // this.currentPage = e.detail.current + 1

      this.currentSwiper = e.detail.current
    },
    onCheckAuditing(val) {
      // console.log(val, '----')
      this.projectQueryType = val.title
      this.queryDataParamsNew.state = val.value
      this.getViewDataList()
      this.onClosePopup()
    },
    /* 保存提交 */
    async onSaveSubmit() {
      // this.$refs.popupAuditing.open('center')
      // if (true) return
      // 表单校验
      if (!this.projectId) {
        uni.showToast({ icon: 'none', title: '请选择工程！' })
        return
      }
      try {
        const validateForms = async () => {
          for (let index = 0; index < this.monthParams.length; index++) {
            const valid = await new Promise(resolve => {
              this.$refs[`monthPlanFormRef_${index}`][0].validate(resolve)
            })

            if (valid) {
              uni.showToast({ title: `第${index + 1}页有数据未完！`, icon: 'none' })
              this.currentSwiper = index
              throw new Error()
            }
          }
        }
        validateForms()
          .then(async res => {
            this.monthParams.forEach(e => {
              e.proName = this.projectId
              e.month = this.DateValue
            })

            // if (this.roles != '22') {
            //   this.getAUditingUserInfoData()
            //   this.$refs.popupAuditing.open('center')
            // } else {

            // }

            const saveParams = {
              id: JSON.stringify(this.monthParams)
            }
            console.log('saveParams保存参数', saveParams)

            uni.showLoading({
              title: '正在提交，请勿重复点击',
              mask: true
            })

            const result = await setMonthPlanApi(saveParams)
            uni.hideLoading({})
            if (result.res == 1) {
              uni.showToast({ icon: 'none', title: '保存成功！' })
              setTimeout(() => {
                uni.navigateBack()
              }, 500)
            } else {
              uni.showToast({ icon: 'none', title: `保存失败，${result.resMsg}` })
            }
          })
          .catch(error => {
            console.log('校验未通过！')
          })
      } catch (error) {}
    },

    onReduceMonth() {
      this.currentTime = this.$moment(this.currentTime).subtract(1, 'year').format('YYYY-MM')
      this.getMonthPlanData()
    },
    onReduceMonthNew() {
      this.currentTimeNew = this.$moment(this.currentTimeNew).subtract(1, 'year').format('YYYY-MM')
      this.getWorkWaitProjectParams.planTime = this.currentTimeNew
      this.getReportFormList()
    },
    onReduceDay() {
      this.currentTime = this.$moment(this.currentTime).subtract(1, 'months').format('YYYY-MM')
      this.getMonthPlanData()
    },
    onReduceDayNew() {
      this.currentTimeNew = this.$moment(this.currentTimeNew).subtract(1, 'months').format('YYYY-MM')
      this.getWorkWaitProjectParams.planTime = this.currentTimeNew
      this.getReportFormList()
    },
    onAddMonth() {
      this.currentTime = this.$moment(this.currentTime).add(1, 'year').format('YYYY-MM')
      this.getMonthPlanData()
    },
    onAddMonthNew() {
      this.currentTimeNew = this.$moment(this.currentTimeNew).add(1, 'year').format('YYYY-MM')
      this.getWorkWaitProjectParams.planTime = this.currentTimeNew
      this.getReportFormList()
    },
    onAddDay() {
      this.currentTime = this.$moment(this.currentTime).add(1, 'months').format('YYYY-MM')
      this.getMonthPlanData()
    },
    onAddDayNew() {
      this.currentTimeNew = this.$moment(this.currentTimeNew).add(1, 'months').format('YYYY-MM')
      this.getWorkWaitProjectParams.planTime = this.currentTimeNew
      this.getReportFormList()
    },
    onBackToday() {
      this.currentTime = this.$moment().format('YYYY-MM')
      this.getMonthPlanData()
    },
    onBackTodayNew() {
      this.currentTimeNew = this.$moment().format('YYYY-MM')
      this.getWorkWaitProjectParams.planTime = this.currentTimeNew
      this.getReportFormList()
    },
    iconClick() {
      this.getViewDataList()
    },
    onChangeCurrentData(e) {
      this.currentTime = e.detail.value
    },
    onChangeCurrentDataNew(e) {
      this.currentTimeNew = e.detail.value
    },
    onViewSelectProject() {
      this.$refs.popup.open('bottom')
      this.popupType = 'bottom'
    },
    onSelectAllType() {
      this.$refs.popup.open('bottom')
      this.popupType = 'bottom'
      this.isType = true
    },
    onProjectChange() {
      console.log('jjj')
    },
    onChangeProject(id, name) {
      this.projectName = name
      this.projectId = id
      this.onClosePopup()
      // this.getIsPlanData()
    },
    async getRiskLevelListData() {
      const res = await getRiskLevelListApi()

      try {
        this.infrastructureFormLabel.forEach(e => {
          if (e.form_label === '风险等级') {
            e.options = res.map(e => {
              return {
                value: e.id,
                text: e.name
              }
            })

            throw new Error()
          }
        })
      } catch (error) {}
    },
    async getControlLevelListData() {
      const res = await getControlLevelListApi()
      // console.log('管控层级', res)
      try {
        this.infrastructureFormLabel.forEach(e => {
          if (e.form_label === '管控级别') {
            e.options = res.map(e => {
              return {
                value: e.id,
                text: e.name
              }
            })

            throw new Error()
          }
        })
      } catch (error) {}
    },
    /* 搜索工程 */
    // async onSearchProject() {
    //   const res = await getProjectList_1Api(this.projectQueryParams)
    //   this.projectList = res.obj
    // },
    onDateChange(e) {
      this.DateValue = e.detail.value
      // this.getIsPlanData()
    },
    /* 查看报表数据 */
    async getMonthPlanData() {
      this.queryDataParams.month = this.currentTime
      if (this.queryDataParamsNew.proId == '') {
        uni.showToast({ icon: 'none', title: '请选择工程！' })
        return
      }
      console.log('this.queryDataParams查询报表的参数', this.queryDataParams)
      const res = await getMonthPlanDataApi(this.queryDataParams)
      console.log('res---查看的报表数据', res)

      if (res.obj.length < 1) {
        uni.showToast({ icon: 'none', title: '暂无涉网计划！' })
      }
      this.monthDataList = res.obj

      // this.monthDataList.forEach(e => {
      //   this.$set(e, 'viewTime', [])
      //   e.viewTime = e.tdsj.split('~')
      // })
      this.activeFormPages = 0

      if (this.monthDataList.length > 0) {
        this.kjsAmount = 0
        this.dfxAmount = 0
        this.zfxAmount = 0
        this.gfxAmount = 0
        this.tfxAmount = 0
        // this.monthDataList.forEach(e => {
        //   this.kjsAmount = this.kjsAmount + e.kjsfx * 1
        //   this.dfxAmount = this.dfxAmount + e.dfx * 1
        //   this.zfxAmount = this.zfxAmount + e.zfx * 1
        //   this.gfxAmount = this.gfxAmount + e.gfx * 1
        //   this.tfxAmount = this.tfxAmount + e.tgfx * 1
        // })

        this.kjsAmount = this.monthDataList[0].kjsfx * 1
        this.dfxAmount = this.monthDataList[0].dfx * 1
        this.zfxAmount = this.monthDataList[0].zfx * 1
        this.gfxAmount = this.monthDataList[0].gfx * 1
        this.tfxAmount = this.monthDataList[0].tgfx * 1
      }

      if (this.scrollHeight_2 === 0) {
        this.calcScrollHeight('.scroll-content-2', null).then(res => {
          this.scrollHeight_2 = res
        })
      }
    },
    /* 查看报表页面工程选择事件 */
    onChangeProjectSel(value) {
      this.queryDataParamsNew.proId = value
      // this.queryDataParams.proId = value
      this.getMonthPlanData()
    },
    onChangeProjectSelNew(value) {
      this.queryDataParamsNew.proId = value
      // this.queryDataParams.proId = value
      this.getViewDataList()
    },
    iconClickLeft() {
      this.getViewDataList()
    },
    /* 获取工程列表 其一 */
    async getProjectListData() {
      const res = await getProjectList_1Api(this.projectQueryParams)
      this.projectList = res.obj
    },
    /* 获取工程列表 其二 */
    async getProjectListData_2() {
      const res = await getProjectList_2Api({ type: '基建' })

      console.log('res工程列表其二', res)
      this.projectListSel = res.map(e => {
        return {
          text: e.name,
          value: e.id
        }
      })
    },
    onChangeProjectInPopup(item) {
      this.projectInPopupName = item.text
      this.queryDataParamsNew.proId = item.value
      this.getViewDataList()
      this.onClosePopup()
    },
    /* 获取查看数据中的数据 */
    async getViewDataList() {
      console.log('搜索参数', this.queryDataParamsNew)
      const res = await getViewDataListApi(this.queryDataParamsNew)
      console.log('res查看数据中的数据', res)
      this.viewMonthPlanList = res.obj
      if (this.scrollHeight_3 === 0) {
        this.calcScrollHeight('.scroll-content-3', null).then(res => {
          this.scrollHeight_3 = res
        })
      }
    },
    /* 处理枚举状态 */
    onTypeChange(type) {
      let typeString = ''
      switch (type) {
        case '0':
          typeString = '填报待提交'
          break
        case '1':
          typeString = '填报已撤回'
          break
        case '2':
          if (this.roles == 22) {
            typeString = '填报已提交'
          }
          if (this.roles == 23) {
            typeString = '项目部待提交'
          }

          break
        case '3':
          typeString = '项目部已撤回'
          break
        case '4':
          typeString = '分公司审核中'
          break
        case '5':
          typeString = '分公司未通过'
          break
        case '6':
          typeString = '分公司通过'
          break
        case '7':
          typeString = '总公司审核中'
          break
        case '8':
          typeString = '总公司未通过'
          break
        case '9':
          typeString = '总公司通过'
          break
        case '10':
          typeString = '总公司全部通过'
          break
      }

      return typeString
    },
    /* 查看数据点击进入详情 */
    onViewDetails(item) {
      console.log('点击跳转', item)
      uni.navigateTo({
        url: `/pages/workPlan/networkPlanDetails/inf-index?id=${item.proId}&state=${item.state}&month=${item.month}`
      })
    },
    maskClick() {},
    /* 元素居中 */
    onChangePages(value, ind) {
      this.currentSwiper = ind
      // this.currentSwiper = num - 1
      // 获取当前选中元素的位置
      const query = uni.createSelectorQuery().in(this)
      query
        .select(`.item:nth-child(${ind + 1})`)
        .boundingClientRect(rect => {
          const viewWidth = uni.getSystemInfoSync().windowWidth // 获取视图宽度
          const itemWidth = rect.width // 选中元素的宽度
          const itemLeft = rect.left // 选中元素的左边距

          // 计算滚动位置，使选中元素居中
          const targetScrollLeft = itemLeft - viewWidth / 2 + itemWidth / 2
          this.scrollLeft = targetScrollLeft < 0 ? 0 : targetScrollLeft // 防止超出边界
        })
        .exec()
    },
    onChangeFormPages(index) {
      this.activeFormPages = index
    },
    onSwiperChangeForms(e) {
      this.activeFormPages = e.detail.current
    },
    maskClick() {},
    /* 计算高度 */
    async calcScrollHeight(dom, bottom) {
      let that = this
      let scrollHeight = 0

      // 使用 Promise 包裹 uni.getSystemInfo 的异步调用
      const result = await new Promise((resolve, reject) => {
        uni.getSystemInfo({
          success(res) {
            that._data.pH = res.windowHeight
            let titleH = uni.createSelectorQuery().select(dom)

            if (bottom) {
              let bottomDom = uni.createSelectorQuery().select(bottom)
              bottomDom
                .boundingClientRect(bottomRes => {
                  const bottomHeight = bottomRes.height
                  console.log('bottomHeight', bottomHeight, bottom, bottomRes)
                  titleH
                    .boundingClientRect(data => {
                      scrollHeight = that._data.pH - data.top - bottomHeight
                      resolve(scrollHeight)
                    })
                    .exec()
                })
                .exec()
            } else {
              titleH
                .boundingClientRect(data => {
                  scrollHeight = that._data.pH - data.top
                  resolve(scrollHeight)
                })
                .exec()
            }
          },
          fail(err) {
            reject(err) // 处理获取系统信息失败的情况
          }
        })
      })

      return result // 返回计算的高度
    },
    /* 获取审核人接口 */
    async getAUditingUserInfoData() {
      const res = await getAUditingUserInfoApi({ name: this.searchUserName })

      this.auditingUserList = res.map(e => {
        this.$set(e, 'isChecked', false)
        return e
      })

      console.log('this.auditingUserList已处理', this.auditingUserList)
    },
    /* 搜索审核人员 */
    onSearchUserInfo() {
      console.log(this.searchUserName, '99999999')
      this.getAUditingUserInfoData()
    },
    /* 取消 */
    onHandlerCancel() {
      this.$refs.popupAuditing.close()
      this.searchUserName = ''
    },
    /* 确定 */
    async onHandlerSubmit() {
      const ids = this.auditingUserList.map(e => {
        if (e.isChecked) return e.id
      })

      let idsStr = ids.filter(e => e != null).join(',')

      const saveParams = {
        id: JSON.stringify(this.monthParams),
        user: idsStr,
        state: '2'
      }
      console.log('saveParams保存参数', saveParams)

      const result = await setMonthPlanApi(saveParams)
      if (result.res == 1) {
        uni.showToast({ icon: 'none', title: '保存成功！' })
        this.$refs.popupAuditing.close()
        setTimeout(() => {
          uni.navigateBack()
        }, 500)
      } else {
        uni.showToast({ icon: 'none', title: `保存失败，${result.resMsg}` })
      }
    },
    /* 判断计划是否上传 */
    async getIsPlanData() {
      const params = {
        proId: this.projectId,
        month: this.DateValue
      }
      const res = await getIsPlanApi(params)
      if (res.res == 0) {
        uni.showToast({
          title: '计划已存在，请重新选择！',
          icon: 'none'
        })
      }
    },
    /* 复选框事件 */
    onCheckBoxChange(item) {
      console.log(item, '*****')
      item.isChecked = !item.isChecked
    },
    /* 获取工作待办列表 */
    async getWorkWaitListData() {
      console.log('this.getWorkWaitParams', this.getWorkWaitParams)
      const res = await getWorkWaitListApi(this.getWorkWaitParams)

      console.log('工作待办列表', res)

      this.workWaitList = res.obj

      if (res.obj.length < 1) {
        uni.showToast({
          title: '未查询到计划！',
          icon: 'none'
        })
      }
    },
    onWorkWaitTimeReduce() {
      this.getWorkWaitParams.planTime = this.$moment(this.getWorkWaitParams.planTime)
        .subtract(1, 'months')
        .format('YYYY-MM')
      this.getWorkWaitListData()
    },
    onWorkWaitTimeAdd() {
      this.getWorkWaitParams.planTime = this.$moment(this.getWorkWaitParams.planTime).add(1, 'months').format('YYYY-MM')
      this.getWorkWaitListData()
    },
    /* 查看工程数 */
    onViewProjectNum(type) {
      switch (type) {
        case 1:
          this.getWorkWaitProjectParams.reportType = '1'
          break
        case 2:
          this.getWorkWaitProjectParams.reportType = '2'
          break
        case 3:
          this.getWorkWaitProjectParams.reportType = '3'
          break
        case 4:
          this.getWorkWaitProjectParams.reportType = '4'
          break
      }
      if (type === 4) {
        this.auditingDetailsFlg = true
        this.isView = false
      } else {
        this.auditingDetailsFlg = false
      }

      this.getWorkWaitProjectParams.planTime = this.getWorkWaitParams.planTime
      this.getWorkWaitProjectParams.keyword = ''
      this.getWorkWaitProjectData()
      this.$refs.popupViewProject.open('center')
    },
    /* 查看工程数 */
    onViewProjectNumNew(type) {
      switch (type) {
        case 1:
          this.getWorkWaitProjectParams.reportType = '1'
          break
        case 2:
          this.getWorkWaitProjectParams.reportType = '2'
          break
        case 3:
          this.getWorkWaitProjectParams.reportType = '3'
          break
        case 4:
          this.getWorkWaitProjectParams.reportType = '4'
          break
        case 5:
          this.getWorkWaitProjectParams.reportType = '5'
          break
      }
      if (type === 5) {
        this.auditingDetailsFlg = true
        this.isView = true
      } else {
        this.auditingDetailsFlg = false
        this.isView = false
      }
      this.getWorkWaitProjectParams.planTime = this.getWorkWaitParamsNew.planTime
      this.getWorkWaitProjectParams.keyword = ''
      this.getWorkWaitProjectData()
      this.$refs.popupViewProject.open('center')
    },

    onSearchWorkWaitProject() {
      this.getWorkWaitProjectData()
    },
    /* 获取工程 */
    async getWorkWaitProjectData() {
      const res = await getWorkWaitProjectApi(this.getWorkWaitProjectParams)
      console.log('工程信息列表', res)
      this.workWaitProjectList = res.obj
    },
    onCloseViewPopup() {
      this.$refs.popupViewProject.close()
    },
    /* 查看审核详情 */
    onViewAuditingDetails(item) {
      if (this.auditingDetailsFlg) {
        console.log('打开审核详情', item)

        uni.navigateTo({
          url: `/pages/workPlan/monthPlanAuditingDetails/inf-index?id=${item.id}&month=${this.getWorkWaitProjectParams.planTime}&isView=${this.isView}`
        })
      }
    },
    /* 获取报表数据 */
    async getReportFormList() {
      this.getWorkWaitParamsNew.planTime = this.currentTimeNew
      console.log(this.getWorkWaitParamsNew, 'this.getWorkWaitParamsNew')
      const res = await getReportFormListApi(this.getWorkWaitParamsNew)
      console.log('res报表数据', res)
      this.workWaitListNew = res.obj

      if (res.obj.length < 1) {
        uni.showToast({
          title: '未查询到计划！',
          icon: 'none'
        })
      }
    },
    /* 导入计划 */
    async onImportMonthPlan() {
      if (!this.projectId) {
        uni.showToast({ title: '请选择工程', icon: 'none' })

        return
      }
      const params = {
        proId: this.projectId,
        month: this.DateValue
      }

      console.log(params, 'params')
      const res = await getImportMonthPlanApi(params)
      console.log('导入计划的结果', res)
      if (res.res == 0) {
        uni.showToast({ title: '获取失败，该日期上月无计划', icon: 'none' })
        this.monthParams = []
        this.monthParams.push(this.paramsItem)
        return
      } else {
        this.monthParams = res.obj
      }
    },
    onChangeTimeSelect(e, index) {
      console.log(e, index, '******')

      this.monthParams[index].tdsj = `${e[0]}~${e[1]}`
    },
    handleInput(e, type, index, name) {
      if (type == 'number') {
        const regex = /^[1-9]\d*$/
        if (!regex.test(e)) {
          // console.log('不符合要求', typeof e)
          this.$nextTick(() => {
            this.monthParams[index][name] = ''
            e = ''
          })
        } else {
          this.$nextTick(() => {
            this.monthParams[index][name] = e
          })
        }
      }
    }
  },

  onReady() {},
  computed: {
    getTYpeStyle() {
      return state => {
        if (state == 2 || state == 6 || state == 9 || state == 10) return 'style_text_1'
        if (state == 4 || state == 7) return 'style_text_2'
        if (state == 1 || state == 3 || state == 5 || state == 8) return 'style_text_3'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.month-container {
  height: 100vh;

  .month-content {
    position: relative;

    .bottom-btn {
      width: 100%;
      height: 80rpx;
      position: fixed;
      bottom: 6px;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
    }
    .bottom-btn view:first-child {
      display: flex;
      flex-direction: column;
      margin-left: 30rpx;
      // justify-content: center;
      align-items: center;
      font-size: 14px;
    }
    .bottom-btn view:last-child {
      width: 75%;
      height: 60rpx;
      margin-right: 40rpx;
      line-height: 60rpx;
      text-align: center;
      color: #fff;
      background-color: #003778;
      border-radius: 14rpx;
    }
    .btn-header {
      display: flex;
      width: 100%;
      button {
        flex: 1;
        height: 120rpx;
        color: #2c2b2b;
        font-size: 26rpx;
        line-height: 120rpx;
        text-align: center;
        border-radius: 0;
        background-color: #fff;
      }

      button::after {
        border: none;
      }
      .active {
        border-bottom: 2px solid #00337a;
      }
    }

    .content-2 {
      width: 100%;
      .pages-add {
        width: 100%;
        height: 76rpx;
        display: flex;
        align-items: center;
        background-color: #ccc;

        view {
          height: 76rpx;
        }

        .num-content {
          flex: 1;
          background-color: #fff;

          .scroll-x {
            width: 100%;
            white-space: nowrap;

            view {
              width: 50%;
              display: inline-block;
              height: 76rpx;
              text-align: center;
              line-height: 76rpx;
              color: #003778;
            }
            .active-page {
              border-bottom: 1px solid #003778;
            }
          }
        }
      }

      .time-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 38rpx;
      }
      .form-container {
        padding: 10rpx 20rpx;
      }
      .submit-btn {
        margin: 15rpx 0;
      }
    }
  }

  .common-style {
    padding: 15rpx;
  }
  .time-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10rpx 38rpx;
  }

  // 弹框样式
  .popup-content {
    width: 90vw;
    padding: 20rpx;
    background-color: #eeeeee;

    .search {
      width: 100%;
      height: 90rpx;
      margin-bottom: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      .select {
        height: 68rpx;
        width: 65%;
        margin-left: 10rpx;
      }

      button {
        height: 60rpx;
        width: 25%;
        line-height: 60rpx;
        font-size: 28rpx;
        background-color: #003777;
        color: #fff;
        border-radius: 12rpx;
      }
    }

    .project-content {
      height: 460rpx;
      width: 97%;
      margin: 0 auto;
      background-color: #fff;
      text-align: center;

      view {
        padding: 16rpx 0;
        border: 1px solid #eee;
      }
    }
  }
}

.flex-style {
  display: flex;
  align-content: center;
  justify-content: space-between;
}

.icon-search-time {
  width: 100%;
  height: 68rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;

  button {
    margin-right: 60rpx;
    height: 65rpx;
    background-color: #003777;
    color: #fff;
    line-height: 65rpx;
    font-weight: normal;
    font-size: 30rpx;
  }

  .view-time {
    margin: 0 35rpx;
  }
}
.popup-content {
  width: 90vw;
  padding: 20rpx;
  background-color: #eeeeee;

  .search {
    width: 100%;
    height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #eeeeee;
    .select {
      height: 68rpx;
      width: 65%;
      margin: 0;
    }

    button {
      height: 68rpx;
      width: 30%;
      line-height: 68rpx;
      font-size: 32rpx;
      background-color: #003777;
      color: #fff;
      border-radius: 12rpx;
    }
  }

  .project-content {
    height: 460rpx;
    width: 97%;
    margin: 0 auto;
    background-color: #fff;
  }
}
.select-item {
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  border-bottom: 1px solid #ccc;
}
.select-item:hover {
  background-color: rgb(224, 239, 249);
}
.popup-bottom-content {
  height: 50vh;

  .bottom-title {
    height: 90rpx;
    padding-right: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
  }
  .bottom-title text:first-child {
    color: transparent;
  }

  .scroll-select {
    height: calc(50vh - 90rpx);
  }

  .select-item {
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    border-bottom: 1px solid #ccc;
  }
  .select-item:hover {
    background-color: rgb(224, 239, 249);
  }
}
::v-deep .uni-input-input:disabled {
  -webkit-text-fill-color: #333;
}

.month-list {
  width: 100%;
  margin-top: 16rpx;
  background-color: #fff;
  .item-header {
    width: 96%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx 0;
    font-size: 22rpx;
    border-bottom: 1px solid #ccc;
  }

  .item-num,
  .item-time {
    width: 96%;
    margin: 0 auto;
    padding: 12rpx 0;
    display: flex;
    // align-items: center;
    justify-content: space-between;
    font-size: 26rpx;
  }
  .item-num {
    margin-top: 18rpx;
  }
  .item-num text:last-child {
    width: 60%;
    text-align: left;
  }
  .item-num text:first-child .item-time text:first-child {
    width: 30%;
  }
  .item-time text {
    width: 30%;
  }
  .item-time text:last-child {
    text-align: right;
  }
}

.report-form-header {
  display: flex;
  align-items: center;

  view {
    width: 70%;
  }

  .header-right {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    text {
      // margin-left: 16rpx;
      padding: 12rpx 0;
    }
  }
}

.report-form-header view:first-child {
  width: 30%;
  background-color: #fff;

  .header-left {
    width: 100%;
    display: flex;
    white-space: nowrap;

    text {
      width: 50%;
      padding: 12rpx 0;
      text-align: center;
      display: inline-block;
      color: #ccc;
    }
  }

  .active-form-page {
    border-bottom: 1px solid #003778;
    color: #003778 !important;
  }
}

.auditing-content {
  width: 95vw;
  height: 60vh;
  background-color: #eee;

  .auditing-title {
    width: 100%;
    padding-bottom: 4rpx;
    margin-bottom: 16rpx;
    background-color: #fff;

    .title {
      width: 93%;
      margin: 20rpx auto;
      padding: 13rpx 0;
      border: 1px solid #ccc;
      font-size: 26rpx;
      color: #333;
      border-radius: 5rpx;
      box-sizing: border-box;
    }

    .search {
      width: 93%;
      margin: 20rpx auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .search-ipt {
        width: 65%;
      }

      .search-btn {
        width: 25%;
        height: 60rpx;
        text-align: center;
        line-height: 60rpx;
        color: #fff;
        border-radius: 12rpx;
        background-color: #003778;
      }
    }
  }

  .user-info {
    width: 93%;
    margin: 0 auto;
    box-sizing: content-box;
    background-color: #fff;
    .user-title,
    .user-content {
      display: flex;
      align-items: center;
      margin-bottom: 8rpx;

      view {
        text-align: center;
      }
    }

    .user-content {
      padding: 15rpx 0;
      border-bottom: 1px solid #ccc;
    }
  }

  .user-btn {
    width: 93%;
    margin: 0 auto;
    padding-top: 28rpx;
    display: flex;
    justify-content: space-around;

    view {
      width: 40%;
      height: 82rpx;
      text-align: center;
      line-height: 82rpx;
      border-radius: 12rpx;
    }
    .btn-cancel {
      background-color: #ccc !important;
      color: #000;
    }

    .btn-submit {
      color: #fff;
      background-color: #003778 !important;
    }
  }
}

.time-select {
  width: 100%;
  padding: 10rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  text {
    font-weight: bold;
    color: #000;
  }
}

.view-data-auditing {
  width: 100%;
  margin: 10rpx auto;
  background-color: #fff;

  .auditing-item {
    width: 98%;
    margin: 0 auto;
    display: flex;

    align-items: center;
    padding: 8rpx 0;

    .item_1 {
      width: 25%;
    }
    .item_2 {
      width: 10%;
    }
    .item_3 {
      width: 65%;
      text-align: right;

      text {
        margin-right: 10rpx;
        display: inline-block;
        width: 260rpx;
        height: 48rpx;
        border-radius: 12rpx;
        line-height: 48rpx;
        text-align: center;
        color: #fff;
        background-color: #00337a;
      }
    }
  }

  .have-bottom {
    border-bottom: 1px solid #ccc;
  }
}

.popup-view {
  height: 60vh;
  width: 95vw;
  display: flex;
  flex-direction: column;
  background-color: #ccc;

  .popup-view-title {
    width: 94%;
    margin: 0 auto;
    padding: 30rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    text {
      color: #333;
      font-size: 38rpx;
      font-weight: bold;
    }
  }

  .search-container {
    width: 100%;
    padding: 28rpx 0;
    background-color: #fff;
    .search-box {
      width: 94%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .view-search-ipt {
        width: 65%;
      }

      .view-search-btn {
        width: 27%;
        height: 68rpx;
        text-align: center;
        line-height: 68rpx;
        color: #fff;
        background-color: #00337a;
        border-radius: 12rpx;
      }
    }
  }

  .view-project-list {
    flex: 1;
    overflow: hidden;

    .view-project-item {
      width: 96%;
      height: 96%;
      margin: 2% auto;
      background-color: #fff;

      view {
        width: 100%;
        padding-top: 13rpx;
        padding-bottom: 6rpx;
        text-align: center;
        border-bottom: 1px solid #ccc;
        box-sizing: border-box;
      }
    }
  }
}

.style_text_1 {
  color: #0bd51c;
}
.style_text_2 {
  color: #f7991e;
}
.style_text_3 {
  color: #fe2c29;
}
::v-deep .uni-forms-item__label {
  font-weight: bold;
  color: #000;
  font-size: 26rpx;
}
</style>
