<template>
  <view class="month-container">
    <u-navbar
      class="u-navbar"
      :title="monthPlanTitle"
      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" scroll-with-animation="true">
              <view
                :class="{ 'active-page': item == currentSwiper + 1 }"
                v-for="item in pagesTotal"
                :key="item"
                @tap="onChangePages(item)"
              >
                {{ item }}
              </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" require>
              <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">
          <swiper circular :autoplay="false" :current="currentSwiper" style="height: 700rpx" @change="onSwiperChange">
            <swiper-item v-for="(item, index) in monthParams" :key="index">
              <scroll-view scroll-y="true" class="scroll-Y" style="height: 100%">
                <uni-forms class="form-container" ref="form" :modelValue="item" label-position="top" label-width="200">
                  <uni-forms-item
                    v-for="(f, i) in monthPlanTitle === '基建月计划' ? infrastructureFormLabel : productionFormLabel"
                    :key="i"
                    :label="f.form_label"
                    :name="f.name"
                    required
                  >
                    <uni-easyinput
                      v-if="f.items_type === 'ipt'"
                      type="text"
                      v-model="item[f.name]"
                      placeholder="请填写"
                    />
                    <uni-data-select
                      v-model="item[f.name]"
                      :localdata="f.options"
                      v-if="f.items_type === 'sel'"
                    ></uni-data-select>
                  </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">
          <view>
            <uni-icons type="cloud-upload" size="20"></uni-icons>
            导入计划
          </view>
          <view @tap="onSaveSubmit">保存提交</view>
        </view>
      </view>

      <!-- 查看报表 -->
      <view v-show="activeIndex === '查看报表'" class="common-style">
        <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">
          <!-- <uni-pagination :show-icon="true" :total="1" /> -->
          <swiper circular :autoplay="false" :current="0" style="height: 700rpx" v-if="monthDataList.length > 0">
            <swiper-item v-for="item in monthDataList" :key="item.id">
              <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 monthPlanTitle === '基建月计划' ? infrastructureFormLabel : productionFormLabel"
                    :key="i"
                    :label="f.form_label"
                    :name="f.name"
                    required
                  >
                    <uni-easyinput
                      v-if="f.items_type === 'ipt'"
                      :clear="false"
                      type="text"
                      v-model="item[f.name]"
                      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-forms-item>
                </uni-forms>
              </scroll-view>
            </swiper-item>
          </swiper>
        </view>
      </view>

      <!-- 查看数据 -->
      <view v-show="activeIndex === '查看数据'" 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>
          <view class="month-list" v-for="item in viewMonthPlanList" :key="item.id">
            <view class="item-header">
              <text>可接受风险：1</text>
              <text>2024-4</text>
            </view>

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

            <view class="item-time">
              <text>提交人/提交时间</text>
              <text>{{ item.upUser }}/{{ item.planTime }}</text>
              <text>{{ item.state }}</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="onSearchProject">搜索</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-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>
  </view>
</template>

<script>
import TimeSelect from './components/time-select'
import {
  setMonthPlanApi,
  getProjectListApi,
  getViewDataListApi,
  getRiskLevelListApi,
  getMonthPlanDataApi,
  getControlLevelListApi
} from '../../../api/workPlan/monthPlan'
export default {
  components: {
    TimeSelect
  },
  data() {
    return {
      monthPlanTitle: '基建月计划',
      activeIndex: '发起提交',
      DateValue: this.$moment().format('YYYY-MM'),
      pagesTotal: 1,
      currentPage: 0,
      popupType: '',
      scrollHeight: 500,
      formData: {},
      isType: false,
      currentTime: this.$moment().format('YYYY-MM'),
      btnList: [
        { btn_title: '工作待办', isShow: ['24', '25'] },
        { btn_title: '发起提交', isShow: ['22', '23'] },
        { btn_title: '查看报表', isShow: ['22', '23'] },
        { btn_title: '查看数据', isShow: ['22', '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: '请填写' }]
        }
      },
      infrastructureFormLabel: [
        { form_label: '作业内容', items_type: 'ipt', name: 'zynr' },
        { form_label: '作业条件（人员、机具、图纸、物资等、气候条件对作业的影响）', items_type: 'ipt', name: 'zytj' },
        { form_label: '风险类别', items_type: 'ipt', name: 'fxlb' },
        { form_label: '管控措施', items_type: 'ipt', name: 'gkcs' },
        {
          form_label: '风险等级',
          items_type: 'sel',
          name: 'fxdj',
          options: []
        },
        {
          form_label: '管控级别',
          items_type: 'sel',
          name: 'gkcj',
          options: []
        },
        {
          form_label: '是否有危大/易造成人员较大伤亡作业',
          items_type: 'sel',
          name: 'wdgc',
          options: [
            { value: '1', text: '是' },
            { value: '0', text: '否' }
          ]
        },
        {
          form_label: '方案是否报审',
          items_type: 'sel',
          name: 'fasp',
          options: [
            { value: '1', text: '是' },
            { value: '0', text: '否' }
          ]
        },
        {
          form_label: '是否有涉网作业',
          items_type: 'sel',
          name: 'swzy',
          options: [
            { value: '1', text: '是' },
            { value: '0', text: '否' }
          ]
        },
        {
          form_label: '线路/设备停电计划是否上报',
          items_type: 'sel',
          name: 'sbtd',
          options: [
            { value: '1', text: '是' },
            { value: '0', text: '否' }
          ]
        },
        { form_label: '项目负责人/联系电话', items_type: 'ipt', name: 'xmfzr' },
        { form_label: '单位负责人/联系电话', items_type: 'ipt', name: 'dwfzr' },
        { form_label: '计划数量', items_type: 'ipt', name: 'planCount' }
      ],
      productionFormLabel: [
        { form_label: '作业内容', items_type: 'ipt' },
        { form_label: '实施单位', items_type: 'ipt' },
        { form_label: '实施部门', items_type: 'ipt' },
        { form_label: '任务来源', items_type: 'ipt' },
        {
          form_label: '作业类型',
          items_type: 'sel',
          options: [
            { value: 0, text: '检修' },
            { value: 1, text: '维护' }
          ]
        },
        { form_label: '计划开始时间', items_type: 'sel' },
        { form_label: '计划结束时间', items_type: 'sel' },
        {
          form_label: '是否停电',
          items_type: 'sel',
          options: [
            { value: 1, text: '是' },
            { value: 0, text: '否' }
          ]
        },
        { form_label: '停电设备（作业场所）', items_type: 'ipt' },
        { form_label: '作业监督人/联系电话', items_type: 'ipt' },
        { form_label: '作业负责人/联系电话', items_type: 'ipt' },
        {
          form_label: '管控级别',
          items_type: 'sel',
          options: []
        },
        {
          form_label: '风险等级',
          items_type: 'sel',
          options: [
            { value: 0, text: '可接受风险' },
            { value: 1, text: '低风险' },
            { value: 2, text: '中风险' },
            { value: 2, text: '高风险' },
            { value: 2, text: '特高风险' }
          ]
        },
        {
          form_label: '管控方式（根据作业内容在作业文件栏中选择"是"、"否"）',
          items_type: 'sel',
          options: [
            { value: 0, text: '过程管控' },
            { value: 1, text: '巡视管控' },
            { value: 2, text: '驻点管控' },
            { value: 2, text: '节点管控' }
          ]
        },
        {
          form_label: '施工方案',
          items_type: 'sel',
          options: [
            { value: 1, text: '是' },
            { value: 0, text: '否' }
          ]
        },
        {
          form_label: '作业指导书',
          items_type: 'sel',
          options: [
            { value: 0, text: '是' },
            { value: 1, text: '否' }
          ]
        },
        {
          form_label: '作业表单',
          items_type: 'sel',
          options: [
            { value: 0, text: '是' },
            { value: 1, text: '否' }
          ]
        },
        {
          form_label: '工作票',
          items_type: 'sel',
          options: [
            { value: 0, text: '是' },
            { value: 1, text: '否' }
          ]
        },
        { form_label: '备注', items_type: 'ipt' },
        { form_label: '计划数量', items_type: 'ipt' }
      ],
      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: '',
        fxlb: '',
        gkcs: '',
        fxdj: '',
        gkcj: '',
        wdgc: '',
        fasp: '',
        swzy: '',
        sbtd: '',
        xmfzr: '',
        dwfzr: '',
        planCount: ''
      },
      monthParams: [
        {
          proName: '',
          month: '',
          zynr: '',
          zytj: '',
          fxlb: '',
          gkcs: '',
          fxdj: '',
          gkcj: '',
          wdgc: '',
          fasp: '',
          swzy: '',
          sbtd: '',
          xmfzr: '',
          dwfzr: '',
          planCount: ''
        }
      ],
      monthDataList: [],
      projectInPopupName: '',
      projectQueryType: '',
      queryDataParamsNew: {
        proId: '',
        month: '',
        state: '',
        keyword: ''
      },
      viewMonthPlanList: []
    }
  },
  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()

    // console.log('this.scrollHeight', this.scrollHeight)
    // this.getProjectListData()
    this.projectList = this.$store.state.workPlan.projectList

    // 获取工程
    this.getProjectListData()
    // 获取风险等级
    this.getRiskLevelListData()
    // 获取管控层级
    this.getControlLevelListData()
  },
  methods: {
    leftClick() {
      uni.navigateBack()
    },

    onTapCheck(i) {
      this.activeIndex = i
    },
    onReducePages() {
      if (this.pagesTotal > 1) {
        this.pagesTotal -= 1
      }
    },
    onAddPages() {
      this.pagesTotal += 1
    },
    onSelectProject() {
      this.$refs.popup.open('center')
      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() {
      console.log('保存提交')
      console.log('this.monthParams--', this.monthParams)

      this.monthParams.forEach(e => {
        e.proName = this.projectId
        e.month = this.DateValue
      })

      const saveParams = {
        id: JSON.stringify(this.monthParams),
        user: '',
        state: '1'
      }

      console.log('saveParams保存参数', saveParams)

      const res = await setMonthPlanApi(saveParams)

      if (res.resMsg === '') console.log('res提交结果', res)
    },
    onChangePages(num) {
      this.currentSwiper = num - 1
      // if (num > 1) {
      //   console.log('居中')
      // }
    },
    onReduceMonth() {
      this.currentTime = this.$moment(this.currentTime).subtract(1, 'year').format('YYYY-MM')
      this.getMonthPlanData()
    },
    onReduceDay() {
      this.currentTime = this.$moment(this.currentTime).subtract(1, 'months').format('YYYY-MM')
      this.getMonthPlanData()
    },
    onAddMonth() {
      this.currentTime = this.$moment(this.currentTime).add(1, 'year').format('YYYY-MM')
      this.getMonthPlanData()
    },
    onAddDay() {
      this.currentTime = this.$moment(this.currentTime).add(1, 'months').format('YYYY-MM')
      this.getMonthPlanData()
    },
    onBackToday() {
      this.currentTime = this.$moment().format('YYYY-MM')
      this.getMonthPlanData()
    },
    iconClick() {
      this.getViewDataList()
    },
    onChangeCurrentData(e) {
      this.currentTime = 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()
    },
    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 getProjectListApi(this.projectQueryParams)
      this.projectList = res.obj
    },
    onDateChange(e) {
      this.DateValue = e.detail.value
    },
    /* 查看报表数据 */
    async getMonthPlanData() {
      this.queryDataParams.month = this.currentTime
      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
    },
    /* 查看报表页面工程选择事件 */
    onChangeProjectSel(value) {
      this.queryDataParams.proId = value
      this.getMonthPlanData()
    },
    /* 获取工程列表 */
    async getProjectListData() {
      const res = await getProjectListApi({
        planTime: this.$moment().format('YYYY-MM-DD'),
        type: 3,
        state: ''
      })
      this.projectListSel = res.obj.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
    }
  },
  onLoad(options) {
    if (options.type == 1) {
      this.monthPlanTitle = '基建月计划'
    } else {
      this.monthPlanTitle = '生产月计划'
    }
  }
}
</script>

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

  .month-content {
    position: relative;

    .bottom-btn {
      width: 100%;
      height: 80rpx;
      position: fixed;
      bottom: 12rpx;
      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%;
  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;
  }
}
</style>
