<template>
  <view class="main">
    <view class="heard">
      <view class="headerBg"></view>
      <!--      <image class="headerBg" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/bg.png"></image>-->
      <view class="contentHeard">
        <!--  顶部标题  -->
        <view class="top" :style="{ height: menu.bottom + 'px' }">
          <view class="titleModule" :style="{ height: (menu.bottom - menu.top) + 'px' }">
            <image @click="handleBack" class="img"
              src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"></image>
            <view class="selectDateBox">
              <image class="leftIcon" @click="handleAddDate(1)" style="transform: rotate(-180deg)"
                src="https://eshangtech.com/ShopICO/ahyd-BID/newExamine/rightIcon.svg" />
              <view class="dateBox">
                <image class="dateIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/1stDateTime.svg"></image>
                <picker v-if="selectTab === 2" mode="date" fields="day" :value="singleDay" :start="startDateDay"
                  :end="endData" @change="bindDateChange">
                  <view class="time">
                    <view class="dateText">{{ singleDay }}</view>
                  </view>
                </picker>

                <picker v-else mode="date" fields="month" :value="single" :start="startDate" :end="endData"
                  @change="bindDateChange">
                  <view class="time">
                    <view class="dateText">{{ $util.getThisMonthHaveHeng(single) }}</view>
                  </view>
                </picker>
              </view>
              <image class="leftIcon" @click="handleAddDate(2)"
                src="https://eshangtech.com/ShopICO/ahyd-BID/newExamine/rightIcon.svg" />
            </view>
          </view>
        </view>


        <view class="tabBox" :style="{ top: (menu.bottom + 18) + 'px' }" v-if="!(showIndex === 6 || showIndex === 7)">
          <view :class="selectTab === item.value ? 'tabItem bigItem' : 'tabItem'" v-for="(item, index) in tabList"
            :key="index" @click="handleChangeTab(item.value)">{{ item.label }}</view>
        </view>

        <view class="dataSummary" :style="{ top: (menu.bottom + 62) + 'px' }">
          <!--  考核管理  -->
          <view class="dataDetail" v-if="selectTab === 1">
            <view class="dataDetailTop">
              <image class="topIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/examinePosition.svg" />
              <text class="topTitle">数据汇总</text>
              <span class="unit">月度</span>
            </view>

            <view class="detailContent">
              <view class="contentItem">
                <image class="typeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/good.svg" />
                <view class="typeBox">
                  <text class="typeNum">{{ examineObj.A || '0' }}</text>
                  <text class="typeLabel">优秀<text class="typeUnit">/个</text></text>
                </view>
              </view>

              <view class="contentItem">
                <image class="typeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/normal.svg" />
                <view class="typeBox">
                  <text class="typeNum">{{ examineObj.B || '0' }}</text>
                  <text class="typeLabel">良好<text class="typeUnit">/个</text></text>
                </view>
              </view>

              <view class="contentItem">
                <image class="typeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/bad.svg" />
                <view class="typeBox">
                  <text class="typeNum">{{ examineObj.C || '0' }}</text>
                  <text class="typeLabel">一般<text class="typeUnit">/个</text></text>
                </view>
              </view>
            </view>
          </view>
          <!--  日常巡检  -->
          <view class="dataDetail" v-if="selectTab === 2">
            <view class="dataDetailTop">
              <image class="topIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/examineQuestion.svg" />
              <text class="topTitle">数据汇总</text>
            </view>
            <view class="detailDaily">
              <view class="dailyItem">
                <text class="itemValue">{{ dailyExamineObj.RectifyCount || '0' }}</text>
                <text class="itemLabel">已整改<text class="itemValue">/个</text></text>
              </view>
              <view class="dailyItem">
                <text class="itemValue">{{ dailyExamineObj.UnRectifyCount || '0' }}</text>
                <text class="itemLabel">未整改<text class="itemValue">/个</text></text>
              </view>
              <view class="otherItem">
                <view class="otherLeft" v-show="!showPop">
                  <YearCharts :success="rate" />
                </view>
                <view class="otherLeft" v-show="showPop"></view>
                <view class="otherDetail">
                  <text class="itemValue">{{ dailyExamineObj.CompleteRate ? dailyExamineObj.CompleteRate + '%' : '-'
                  }}</text>
                  <text class="itemLabel">达标率<text class="itemUnit">/全省</text></text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="pageContent">
      <!--  考核管理  -->
      <view class="contentBox" v-if="selectTab === 1">
        <view class="contentTop">
          <view>
            <text class="contentTitle">服务区排名</text>
            <text class="garyText">{{ serviceInfo.SERVERPART_NAME ? serviceInfo.SERVERPART_NAME === '安徽驿达' ? '' :
              serviceInfo.SERVERPART_NAME : '' }}</text>
          </view>
          <view class="sort" @click="handleSort">
            <text class="sortLabel">排序</text>
            <image class="sortIcon" :style="{ transform: `rotate(${sortType === 'sequence' ? '' : '180deg'})` }"
              src="https://eshangtech.com/ShopICO/ahyd-BID/newExamine/sort.svg" />
          </view>
        </view>

        <view style="display: flex;align-items: center;justify-content: space-between;margin-top: 32rpx;">
          <view class="contentTab">
            <view :class="selectContentTab === item.value ? 'selectItem contentTabItem' : 'contentTabItem'"
              v-for="(item, index) in contentTabList" :key="index" @click="handleChangeContentTab(item.value)">
              {{ item.label }}</view>
          </view>
          <view class="moreBox" @click="handleGoMoreExamine">
            <text class="moreText">更多详情</text>
            <image class="moreImg" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg" />
          </view>
        </view>


        <view class="contentList">
          <scroll-view class="big" :show-scrollbar="false" scroll-with-animation scroll-y="true" enable-flex>
            <view class="scrollItem" v-for="(item, index) in serviceList" :key="index"
              @click="handleDetail(item, index)">
              <view class="scrollItemTop">
                <view class="itemTopLeft">
                  <view class="index"
                    :style="{ backgroundImage: `url(${index === 0 ? 'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/fistBg.svg' : index === 1 ? 'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/secondBg.svg' : index === 2 ? 'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/thirdBg.svg' : 'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/otherBg.svg'})` }">
                    {{ index + 1 }}</view>
                  <text class="itemName">{{ item.SERVERPART_NAME }}</text>
                  <span :class="item.EXAMINE_MQUARTER !== '月度' ? 'secondUnit' : 'unit'">{{
                    `${item.EXAMINE_MYEAR}${item.EXAMINE_MONTH
                      < 10 ? '0' + item.EXAMINE_MONTH : item.EXAMINE_MONTH}`}}</span>
                </view>
                <image class="rightIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg" />
              </view>

              <view class="itemDetail">
                <template v-for="(subItem, subIndex) in item.list">
                  <view class="detailItem" v-for="(thirdItem, thirdIndex) in subItem.SERVERPARTList">
                    <view class="fixBox">{{ thirdItem.SERVERPART_REGION }}</view>
                    <view class="markBox">
                      <text class="markValue">{{ thirdItem.EXAMINE_SCORE }}<text class="markUnit">分</text></text>
                      <view class="progress">
                        <view class="have" :style="{ width: thirdItem.EXAMINE_SCORE + '%' }"></view>
                      </view>
                    </view>
                  </view>
                </template>

              </view>
            </view>
          </scroll-view>
        </view>
      </view>
      <!--  日常巡检  -->
      <view class="contentBox" v-if="selectTab === 2">
        <view class="contentTop">
          <view>
            <text class="contentTitle">服务区排名</text>
            <text class="garyText">{{ serviceInfo.SERVERPART_NAME ? serviceInfo.SERVERPART_NAME === '安徽驿达' ? '' :
              serviceInfo.SERVERPART_NAME : '' }}</text>
          </view>
          <view class="sort" @click="handleSort">
            <text class="sortLabel">排序</text>
            <image class="sortIcon" :style="{ transform: `rotate(${sortType === 'sequence' ? '' : '180deg'})` }"
              src="https://eshangtech.com/ShopICO/ahyd-BID/newExamine/sort.svg" />
          </view>
        </view>

        <view style="display: flex;align-items: center;justify-content: space-between;margin-top: 32rpx;">
          <view class="contentTab">
            <view :class="selectDaily === item.value ? 'selectItem contentTabItem' : 'contentTabItem'"
              v-for="(item, index) in dailyTabList" :key="index" @click="handleChangeDailyTab(item.value)">{{ item.label
              }}
            </view>
          </view>
          <view class="moreBox" @click="handleGoMoreExamine">
            <text class="moreText">更多详情</text>
            <image class="moreImg" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg" />
          </view>
        </view>
        <view style="margin-top: 12rpx">
          <text style="color: #A69E9F;font-size: 24rpx">{{ selectDaily === 1 ? '日常巡检中发现的问题已经整改完成' : '日常巡检中发现的问题未完成处理'
            }}</text>
        </view>

        <view class="dailyList">
          <scroll-view class="big" :show-scrollbar="false" scroll-with-animation scroll-y="true" enable-flex>
            <view class="scrollItem" v-for="(item, index) in dailyServiceList" :key="index"
              @click="handleOpenPopup(item, index)">
              <view class="scrollItemTop">
                <view class="scrollTopLeft">
                  <view class="index"
                    :style="{ backgroundImage: `url(${index === 0 ? 'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/fistBg.svg' : index === 1 ? 'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/secondBg.svg' : index === 2 ? 'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/thirdBg.svg' : 'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/otherBg.svg'})` }">
                    {{ index + 1 }}</view>
                  <text class="scrollName">{{ item.SERVERPART_NAME }}</text>
                  <image class="rightIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg" />
                </view>

                <view class="scrollTopRight">
                  <text class="scueessNum">{{ item.first }}</text>
                  <text class="all">/</text>
                  <text class="all">{{ item.second }}</text>
                </view>
              </view>

              <view class="detailMark">
                <text class="wordHeader">描述</text>
                <text class="wordValue">{{ item.EXAMINE_DESC }}</text>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>

    <uniPopup type="bottom" :round="true" :showIndex="1" :show="showPop" @hidePopup="hidePopup">
      <view class="popup" :style="{ height: '85vh' }">
        <view class="top">
          <text class="popupTitle">服务区详情</text>
          <image @click="hidePopup" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg">
          </image>
        </view>
        <view class="areaList">
          <view class="popupDetail">
            <view v-if="selectTab === 1">
              <scroll-view class="detailLeft" :show-scrollbar="false" scroll-y="true" enable-flex
                :scroll-into-view="'item' + selectMenu">
                <view :id="'item' + index"
                  :class="index === selectMenu ? 'serviceSelect currentSelect' : 'serviceSelect'"
                  v-for="(item, index) in serviceList" :key="index" @click="handleChangeMenu(index)">
                  {{ item.SERVERPART_NAME.split('服务区')[0] }}</view>
              </scroll-view>
            </view>
            <view v-if="selectTab === 2">
              <scroll-view class="detailLeft" :show-scrollbar="false" scroll-y="true" enable-flex
                :scroll-into-view="'item' + selectMenu">
                <view :id="'item' + index"
                  :class="index === selectMenu ? 'serviceSelect currentSelect' : 'serviceSelect'"
                  v-for="(item, index) in dailyServiceList" :key="index" @click="handleChangeMenu(index)">
                  {{ item.SERVERPART_NAME.split('服务区')[0] }}</view>
              </scroll-view>
            </view>


            <scroll-view scroll-y="true" class="serviceDetail">
              <view class="serviceDetailItem" v-for="(item, index) in currentObj.list" :key="index">
                <view class="detailItemTop">
                  <view class="fixedName">{{ item.REGION_NAME }}</view>
                  <view class="store" v-if="selectTab === 1">{{ item.EXAMINE_SCORE }}<text class="unit">分</text></view>
                </view>
                <view v-for="(subItem, subIndex) in item.SERVERPARTList" :key="subIndex"
                  :style="{ marginBottom: index === item.SERVERPARTList.length - 1 ? '24rpx' : '24rpx' }">


                  <view v-if="selectTab === 1">
                    <view class="messageItem" style="align-items: flex-start;text-align: left">
                      <image class="itemIcon" style="margin-top: 4rpx"
                        src="https://eshangtech.com/ShopICO/ahyd-BID/newExamine/userIcon.svg" />
                      <text class="itemValue">{{ subItem.EXAMINE_PERSON }}</text>
                    </view>
                    <view class="messageItem">
                      <image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newExamine/timeIcon.svg" />
                      <text class="itemValue">{{ subItem.EXAMINE_DATE }}</text>
                    </view>

                    <view class="detailItemMessage" v-for="(thirdItem, thirdIndex) in subItem.DetailList"
                      :key="thirdIndex">
                      <view class="messageBox">
                        <view class="messageBoxTop">
                          <view class="messageBoxTopLeft">
                            <image class="fixedIcon"
                              src="https://eshangtech.com/ShopICO/ahyd-BID/newExamine/fixedIcon.svg" />
                            <text class="name"
                              :style="{ fontSize: thirdItem.EXAMINE_POSITION && thirdItem.EXAMINE_POSITION.length > 7 ? '28rpx' : '32rpx' }">{{
                                thirdItem.EXAMINE_POSITION
                              || ''}}</text>
                          </view>
                          <view class="messageBoxTopRight">
                            <text class="mark">{{ thirdItem.EXAMINE_SCORE }}<text class="unit">分</text></text>
                          </view>
                        </view>
                        <view :style="{ marginBottom: forthIndex === thirdItem.DetailList.length - 1 ? '' : '12rpx' }"
                          v-for="(forthItem, forthIndex) in thirdItem.DetailList" :key="forthIndex">
                          <view class="desc">{{ forthItem.EXAMINEDETAIL_DESC }}</view>
                          <view class="imgList">
                            <image v-for="(fifthItem, fifthIndex) in forthItem.imgList" :key="fifthIndex" class="img"
                              :src="fifthItem" :data-src="forthItem.imgList" @click="previewImage($event, fifthIndex)">
                            </image>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>

                  <view v-if="selectTab === 2">

                    <view class="detailItemTop">
                      <view class="detailItemTopLeft">
                        <image class="leftIcon"
                          src="https://eshangtech.com/ShopICO/ahyd-BID/newExamine/fixedIcon.svg" />
                        <text class="leftName">{{ subItem.PATROL_POSITION }}</text>
                      </view>
                      <image class="rightIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newExamine/OK.svg" />
                    </view>

                    <view class="rectifyBox" v-for="(thirdItem, thirdIndex) in subItem.PositionDetailList"
                      :key="thirdIndex">
                      <view class="messageItem" style="align-items: flex-start;text-align: left">
                        <image class="itemIcon" style="margin-top: 4rpx"
                          src="https://eshangtech.com/ShopICO/ahyd-BID/newExamine/userIcon.svg" />
                        <text class="itemValue">{{ thirdItem.PATROL_PERSON }}</text>
                      </view>
                      <view class="messageItem">
                        <image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newExamine/timeIcon.svg" />
                        <text class="itemValue">{{ thirdItem.PATROL_DATE }}</text>
                      </view>
                      <view class="beforeText">{{ thirdItem.PATROL_SITUATION }}</view>

                      <view class="beforeTop">
                        <view class="beforeTitle">前</view>
                      </view>
                      <view class="imgList">
                        <image v-for="(imgItem, imgIndex) in thirdItem.imgList" :key="imgIndex" class="img"
                          :src="imgItem" :data-src="thirdItem.imgList" @click="previewImage($event, imgIndex)"></image>
                      </view>

                      <view class="afterTop">
                        <view class="afterTitle">后</view>
                        <!--                        <text class="afterTime">{{thirdItem.PATROL_DATE}}</text>-->
                      </view>
                      <!--                      <view class="afterText">这是整改前的问题描述,这是整改前的问题描述, 这是整改前的问题描述;   这是整改前的问题描述;  </view>-->
                      <view class="imgList">
                        <image v-for="(imgItem, imgIndex) in thirdItem.haveImgList" :key="imgIndex" class="img"
                          :src="imgItem" :data-src="thirdItem.haveImgList" @click="previewImage($event, imgIndex)">
                        </image>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </uniPopup>

  </view>
</template>
<script>
import request from '@/util/index.js'
import uniPopup from '@/components/uni-popup'
import YearCharts from "./components/newAmine/yearCharts.vue";
import { timestampToTimeMonth } from "../../../util/dateTime";
export default {
  components: {
    YearCharts,
    uniPopup
  },
  data() {
    return {
      lastDay: '',// 首页的时间
      selectMonth: 0,
      current: '',
      menu: {},
      statusBarHeight: '',
      showPop: false,
      showImg: false,// 整改图片的弹出
      areaList: [],// 片区列表
      tabList: [{ label: '考核管理', value: 1 }, { label: '日常巡检', value: 2 }],// tab选项卡  ,{label:'晨会管理',value:3}
      selectTab: 1,// 选中的tab选项卡
      serviceAllList: [],// 三种类型总的服务区考核信息
      serviceList: [],// 服务区列表
      inspectionList: [],// 日常巡检列表
      windowHeight: 0,// 页面高度
      selectDate: '',// 当前选中的日期
      popupShow: 1,
      popupTabSelect: 0,// 选中的弹出框选项卡
      come: '',// 来自首页还是用户页
      examineList: [],
      showImgUrl: {},// 展示的图片地址
      queryTime: '',// 传入的时间
      contentTabList: [{ label: '优秀', value: 1 }, { label: '良好', value: 2 }, { label: '一般', value: 3 }],
      dailyTabList: [{ label: '已整改', value: 1 }, { label: '整改中', value: 2 }],
      selectDaily: 1,
      selectContentTab: 1,
      rate: 0,
      currentObj: {},// 考核弹出框的内容
      selectMenu: 0,// 选中左侧菜单的第几个
      single: '', // 开始时间的月份
      singleDay: '',// 开始时间的日期
      singleMonth: '',// 年月日期
      startDate: '',
      startDateDay: '',
      endData: '',
      dailyExamineObj: {},//考核数据
      examineObj: {},
      useInfo: {},
      sortType: 'sequence',//  reverse倒序   sequence正序
      dailyServiceList: [],// 整改显示的列表
      dailyAllList: [], // 整改的全部列表
      dailyFlag: true,// 是否能调用巡检方法
      comePage: '',
      showIndex: 0,
      serviceInfo: {},// 当前的服务区信息
    }
  },
  props: {
    selectIndex: {
      type: Number,
      default: 0
    },
    pageType: {
      type: Number,
      default: 0
    },

  },
  watch: {
    selectIndex: {
      handler(value) {
        this.showIndex = value
        if (value === 6 || value === 7) {
          if (value === 6) {
            this.selectTab = 1
          } else if (value === 7) {
            this.selectTab = 2
          }
          this.handleGetPageData(value === 6 ? 1 : value === 7 ? 2 : '')
        }
      },
      immediate: true
    }
  },
  onLoad() {
    // // 判断从哪里点击进去的 首页 还是用户页面
    // this.come = query.come
    // // 首页跳转时带上的 判断是默认选中考核 还是巡检
    // if (query.type){
    //   this.selectTab = Number(query.type)
    // }
    // if (query.comePage){
    //  this.comePage = query.comePage
    // }
    //
    // //  获取手机参数对页面进行适配
    // let systemInfo = uni.getSystemInfoSync()
    // this.windowHeight = systemInfo.windowHeight
    // this.statusBarHeight = Number(systemInfo.statusBarHeight)
    // this.menu = uni.getMenuButtonBoundingClientRect()
    // this.lastDay = uni.getStorageSync('lastDay')
    // // 首页的时间
    // if (query.time){
    //   this.queryTime = query.time
    //   // 拿到传入的时间实例
    //   const date = new Date(this.queryTime)
    //   let y = date.getFullYear()
    //   this.selectMonth = date.getMonth() + 1
    //   this.single = this.queryTime
    //   // 正常的有效时间实例
    //   const realDate = new Date(this.lastDay)
    //   // 当前月份和真实月份一致时  拿到的时间以有效时间为主
    //   if (this.selectMonth === realDate.getMonth() + 1){
    //         let realDay = realDate.getDate()
    //         this.singleDay = `${y}-${this.selectMonth<10?'0'+this.selectMonth:this.selectMonth}-${realDay}`
    //     }else{
    //     // 当月份和真实月份不一致时 拿到这个月的最后一天
    //     // 因为限时了时间选择 不会选择超过当前月份的时间 所以都是过去的月份的最后一天
    //         let day = this.$util.getThisMonthDay(`${y}-${this.selectMonth<10?'0'+this.selectMonth:this.selectMonth}`)
    //         this.singleDay = `${y}-${this.selectMonth<10?'0'+this.selectMonth:this.selectMonth}-${day<10?'0'+day:day}`
    //     }
    // }else{
    //   // 首页没有传入时间时  用最近的有效时间进行初始化 两个时间
    //   const date = new Date(this.lastDay)
    //   this.selectMonth = date.getMonth() + 1
    //   // 顶部时间显示的月份的
    //   this.single = timestampToTimeMonth((new Date(this.lastDay).getTime()))
    //   // 顶部时间显示到日期的
    //   this.singleDay = this.lastDay
    // }
    // // 先拿到首页的时间 作为调用接口的统一时间  存的lastDay存当前月份的具体日期切换回本月的日期判断有用
    // // 顶部时间的开始时间
    // const start = new Date(this.lastDay)
    // this.startDate = `${start.getFullYear()}-01`
    // this.startDateDay = `${start.getFullYear()}-01-01`
    // // 时间选择器的结束时间
    // this.endData = this.$util.cutDate(new Date(),'YYYY-MM-DD')
    // // 拿到用户的信息
    // let userInfo = uni.getStorageSync('vuex')
    // userInfo = JSON.parse(userInfo)
    // this.useInfo = JSON.parse(JSON.stringify(userInfo))
    // uni.showLoading({
    //   title:'正在加载'
    // })
    // // 拿到顶部的巡检数据
    // this.handleGetDailyPatrol()
    // // 获取月度考核数据
    // this.handleGetExamine()
    // // 因为在 onLoad 里面 所以判断是要调用哪个接口
    // if (this.selectTab===1){
    //   this.handleNewGetExamine()
    // }else if(this.selectTab===2){
    //   this.handleNewGetPatrol()
    // }
  },
  methods: {
    // 监听器的防抖
    debounce(func, delay) {
      let timerId
      return function (...args) {
        clearTimeout(timerId)
        timerId = setTimeout(() => {
          func.apply(this, args)
        }, delay)
      }
    },
    // 获得页面数据
    handleGetPageData(type) {
      this.selectTab = this.pageType
      //  获取手机参数对页面进行适配
      let systemInfo = uni.getSystemInfoSync()
      this.windowHeight = systemInfo.windowHeight
      this.statusBarHeight = Number(systemInfo.statusBarHeight)
      this.menu = uni.getMenuButtonBoundingClientRect()
      this.lastDay = uni.getStorageSync('lastDay')
      this.serviceInfo = uni.getStorageSync('currentService')
      // 首页的时间
      if (this.lastDay) {
        this.queryTime = this.lastDay
        // 拿到传入的时间实例
        const date = new Date(this.lastDay)
        let y = date.getFullYear()
        this.selectMonth = date.getMonth() + 1
        this.single = this.lastDay
        // 正常的有效时间实例
        const realDate = new Date(this.lastDay)
        // 当前月份和真实月份一致时  拿到的时间以有效时间为主
        if (this.selectMonth === realDate.getMonth() + 1) {
          let realDay = realDate.getDate()
          this.singleDay = `${y}-${this.selectMonth < 10 ? '0' + this.selectMonth : this.selectMonth}-${realDay < 10 ? '0' + realDay : realDay}`
          this.singleMonth = `${y}-${this.selectMonth < 10 ? '0' + this.selectMonth : this.selectMonth}`
        } else {
          // 当月份和真实月份不一致时 拿到这个月的最后一天
          // 因为限时了时间选择 不会选择超过当前月份的时间 所以都是过去的月份的最后一天
          let day = this.$util.getThisMonthDay(`${y}-${this.selectMonth < 10 ? '0' + this.selectMonth : this.selectMonth}`)
          this.singleDay = `${y}-${this.selectMonth < 10 ? '0' + this.selectMonth : this.selectMonth}-${day < 10 ? '0' + day : day}`
          this.singleMonth = `${y}-${this.selectMonth < 10 ? '0' + this.selectMonth : this.selectMonth}`
        }
      } else {
        // 首页没有传入时间时  用最近的有效时间进行初始化 两个时间
        const date = new Date(this.lastDay)
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        if (m < 10) {
          m = '0' + m
        }
        this.selectMonth = date.getMonth() + 1
        // 顶部时间显示的月份的
        this.single = timestampToTimeMonth((new Date(this.lastDay).getTime()))
        // 顶部时间显示到日期的
        this.singleDay = this.lastDay
        this.singleMonth = `${y}-${m}`
      }
      // 先拿到首页的时间 作为调用接口的统一时间  存的lastDay存当前月份的具体日期切换回本月的日期判断有用
      // 顶部时间的开始时间
      const start = new Date(this.lastDay)
      this.startDate = `2023-01`
      this.startDateDay = `${start.getFullYear()}-01-01`
      // 时间选择器的结束时间
      this.endData = this.$util.cutDate(new Date(), 'YYYY-MM-DD')
      // 拿到用户的信息
      let userInfo = uni.getStorageSync('vuex')
      userInfo = JSON.parse(userInfo)
      this.useInfo = JSON.parse(JSON.stringify(userInfo))
      uni.showLoading({
        title: '正在加载'
      })
      // 拿到顶部的巡检数据
      this.handleGetDailyPatrol()
      // 获取月度考核数据
      this.handleGetExamine()
      // 因为在 onLoad 里面 所以判断是要调用哪个接口
      if (type === 1) {
        this.handleNewGetExamine()
      } else if (type === 2) {
        this.handleNewGetPatrol()
      }
    },
    handleGoMoreExamine() {
      uni.navigateTo({
        url: `/pages/examine/index?type=${this.selectTab}`
      })
    },
    handleSort() {
      //  reverse倒序   sequence正序
      // 当本身是倒序的时候变为正序 正序变倒序 根据选择的选项 来反转对应的数组  点击选项卡切换 默认变为正序
      if (this.sortType === 'sequence') {
        this.sortType = 'reverse'
        if (this.selectTab === 1) {
          this.serviceList = this.serviceList.reverse()
        } else if (this.selectTab === 2) {
          this.dailyServiceList = this.dailyServiceList.reverse()
        }
      } else {
        this.sortType = 'sequence'
        if (this.selectTab === 1) {
          this.serviceList = this.serviceList.reverse()
        } else if (this.selectTab === 2) {
          this.dailyServiceList = this.dailyServiceList.reverse()
        }
      }
    },
    // 考核的时候 拿到点击的是第几项 和 那一项的详情
    handleDetail(item, index) {
      this.selectMenu = index
      this.currentObj = item
      this.showPop = true
      this.$forceUpdate()
    },
    // 巡检的时候拿到点击的第几项 和 那一项的详情
    // 选中的第几项 会是弹出框左边的列表 默认选中第几项
    handleOpenPopup(item, index) {
      this.selectMenu = index
      this.currentObj = item
      this.showPop = true
      this.$forceUpdate()
    },
    // 拿到考核和巡检上面的详情
    handleGetDailyPatrol() {
      let req
      if (this.serviceInfo.SERVERPART_NAME === '安徽驿达') {
        req = {
          StartDate: this.singleDay,
          EndDate: this.singleDay,
          provinceCode: this.useInfo.userData.ProvinceCode || '340000'
        }
      } else {
        req = {
          StartDate: this.singleDay,
          EndDate: this.singleDay,
          provinceCode: this.useInfo.userData.ProvinceCode || '340000',
          ServerpartId: this.serviceInfo.Serverpart_ID,
        }
      }

      request.$webGet('CommercialApi/Examine/GetPatrolAnalysis', req).then(res => {
        this.dailyExamineObj = res.Result_Data
        // 给达标率的图表重新赋值
        this.rate = this.dailyExamineObj && this.dailyExamineObj.CompleteRate ? this.dailyExamineObj.CompleteRate : 0
      })
    },
    // 获取月度考核数据
    handleGetExamine() {
      let date = this.$util.cutDate(this.single, 'YYYYMM')
      let req
      if (this.serviceInfo.SERVERPART_NAME === '安徽驿达') {
        req = {
          DataType: 1,
          StartMonth: date,
          EndMonth: date,
          provinceCode: this.useInfo.userData.ProvinceCode || '340000'
        }
      } else {
        req = {
          DataType: 1,
          StartMonth: '202301',
          EndMonth: date,
          provinceCode: this.useInfo.userData.ProvinceCode || '340000',
          ServerpartId: this.serviceInfo.Serverpart_ID,
        }
      }
      request.$webGet('CommercialApi/Examine/GetExamineAnalysis', req).then(res => {
        let obj = {
          A: 0,
          B: 0,
          C: 0
        }
        res.Result_Data.List.forEach(item => {
          if (item.data === "A") {
            obj.A += Number(item.value)
          } else if (item.data === "B") {
            obj.B += Number(item.value)
          } else if (item.data === "C") {
            obj.C += Number(item.value)
          }
        })
        this.examineObj = obj
      })
    },
    // 拿到考核的列表数据
    handleNewGetExamine() {
      const time = this.$util.cutDate(this.single, 'YYYYMM')
      let req
      if (this.serviceInfo.SERVERPART_NAME === '安徽驿达') {
        req = {
          DataType: 1,
          StartMonth: time,
          EndMonth: time,
          provinceCode: this.useInfo.userData.ProvinceCode || '340000',
        }
      } else {
        req = {
          DataType: 1,
          StartMonth: '202301',
          EndMonth: time,
          provinceCode: this.useInfo.userData.ProvinceCode || '340000',
          ServerpartId: this.serviceInfo.Serverpart_ID
        }
      }
      request.$webGet('CommercialApi/Examine/GetExamineResultList', req).then(data => {
        let resList = JSON.parse(JSON.stringify(data.Result_Data.List))
        let allList = []
        let typeA = []
        let typeB = []
        let typeC = []
        resList.forEach(item => {
          item.list.forEach(subItem => {
            subItem.SERVERPARTList.forEach(thirdItem => {
              item.EXAMINE_MYEAR = thirdItem.EXAMINE_MYEAR
              item.EXAMINE_MONTH = thirdItem.EXAMINE_MONTH
              thirdItem.DetailList.forEach(fourthItem => {
                let sum = 0
                fourthItem.DetailList.forEach(fifthItem => {
                  sum += fifthItem.DEDUCTION_SCORE
                  fifthItem.imgList = fifthItem.EXAMINEDETAIL_URL.split(',')
                })
                fourthItem.EXAMINE_SCORE = sum
              })
            })
          })
          if (item.SERVERPART_TAG === 'A') {
            typeA.push(item)
          } else if (item.SERVERPART_TAG === 'B') {
            typeB.push(item)
          } else if (item.SERVERPART_TAG === 'C') {
            typeC.push(item)
          }
        })
        allList = [typeA, typeB, typeC]
        this.serviceAllList = allList
        this.serviceList = this.serviceAllList[this.selectContentTab - 1]
        uni.hideLoading()
      })
    },
    // 拿到巡检的列表数据
    handleNewGetPatrol() {
      let req
      if (this.serviceInfo.SERVERPART_NAME === '安徽驿达') {
        req = {
          StartDate: this.singleDay,
          EndDate: this.singleDay,
          provinceCode: this.useInfo.userData.ProvinceCode || '340000'
        }
      } else {
        req = {
          StartDate: this.singleDay,
          EndDate: this.singleDay,
          provinceCode: this.useInfo.userData.ProvinceCode || '340000',
          ServerpartId: this.serviceInfo.Serverpart_ID
        }
      }
      request.$webGet('CommercialApi/Examine/GetPatrolResultList', req).then(data => {
        let list = JSON.parse(JSON.stringify(data.Result_Data.List))
        let noList = []
        let peddingList = []
        let allList = []
        list.forEach(item => {
          item.first = item.EXAMINE_MQUARTER.split('/')[0]
          item.second = item.EXAMINE_MQUARTER.split('/')[1]
          if (item.SERVERPART_TAG === '整改中') {
            noList.push(item)
          } else if (item.SERVERPART_TAG === '已整改') {
            peddingList.push(item)
          }
          item.list.forEach(subItem => {
            subItem.SERVERPARTList.forEach(thirdItem => {
              thirdItem.PositionDetailList.forEach(fourthItem => {
                // 未处理
                if (fourthItem.PATROLDETAIL_URL) {
                  fourthItem.imgList = fourthItem.PATROLDETAIL_URL.split(',')
                }
                // 处理
                if (fourthItem.PATROLDEAL_URL) {
                  fourthItem.haveImgList = fourthItem.PATROLDEAL_URL.split(',')
                }
              })
            })
          })
        })
        allList = [peddingList, noList]
        this.dailyAllList = allList
        this.dailyServiceList = allList[this.selectDaily - 1]
        uni.hideLoading()
      })
    },
    // 改变时间的方法
    bindDateChange(e) {
      const date = new Date(e.detail.value)
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      if (m < 10) {
        m = '0' + m
      }
      let d = date.getDate()
      if (d < 10) {
        d = '0' + d
      }
      // 改变时间 考核的选择的项默认变为优秀
      this.selectContentTab = 1
      // 拿到修改时间后的月份
      this.selectMonth = date.getMonth() + 1
      uni.showLoading({
        title: '正在加载'
      })
      // 判断当前选中的是哪个选项 调用它相对应的拿到数据的两个方法
      if (this.selectTab === 1) {
        this.single = e.detail.value
        this.singleMonth = `${y}-${m}`
        this.handleGetExamine()
        this.handleNewGetExamine()
      } else if (this.selectTab === 2) {
        this.singleDay = `${y}-${m}-${d}`
        this.singleMonth = `${y}-${m}`
        this.handleGetDailyPatrol()
        this.handleNewGetPatrol()
      }
    },
    // 增加减少日期
    handleAddDate(type) {
      this.selectContentTab = 1
      const nowDate = new Date(this.lastDay)
      let nowYear = nowDate.getFullYear()
      let nowMonth = nowDate.getMonth() + 1
      let nowDay = nowDate.getDate()
      this.rate = null

      // 先判断是加 还是 减  再判断是哪个选项卡下面的 再调用方法
      // 1 是减  2是加
      if (type === 1) {
        if (this.selectTab === 1) {
          const date = new Date(this.single)
          let y = date.getFullYear()
          let m = date.getMonth() + 1
          if (m === 1) {
            this.single = `${y - 1}-12`
            this.singleMonth = `${y - 1}-12`
          } else {
            m = m - 1
            if (m < 10) {
              m = '0' + m
            }
            this.single = `${y}-${m}`
            this.singleMonth = `${y}-${m}`
          }
          uni.showLoading({
            title: '正在加载'
          })
          // 获取月度考核数据
          this.handleGetExamine()
          this.handleNewGetExamine()
        } else if (this.selectTab === 2) {
          const date = new Date(this.singleDay)
          let y = date.getFullYear()
          let m = date.getMonth() + 1
          let d = date.getDate()
          if (d === 1 && m === 1) {
            let day = this.$util.getThisMonthDay(`${y - 1}-12`)
            this.singleDay = `${y - 1}-12-${day}`
            this.singleMonth = `${y - 1}-12`
          } else if (d === 1) {
            let day = this.$util.getThisMonthDay(`${y}-${m - 1}`)
            if (m < 10) {
              m = '0' + m
            }
            this.singleDay = `${y}-${m}-${day}`
            this.singleMonth = `${y}-${m}`
          } else {
            d = d - 1
            if (m < 10) {
              m = '0' + m
            }
            if (d < 10) {
              d = '0' + d
            }
            this.singleDay = `${y}-${m}-${d}`
            this.singleMonth = `${y}-${m}`
          }
          uni.showLoading({
            title: '正在加载'
          })
          // 拿到顶部的巡检数据
          this.handleGetDailyPatrol()
          this.handleNewGetPatrol()
        }
      } else {
        if (this.selectTab === 1) {
          const date = new Date(this.single)
          let y = date.getFullYear()
          let m = date.getMonth() + 1
          if (m === 12) {
            this.single = `${y + 1}-01`
          } else {
            m = m + 1
            if (m > nowMonth && y >= nowYear) {
              uni.showToast({
                title: '不能超过当前时间',
                duration: 2000,
                icon: 'none'
              });
              return
            }
            if (m < 10) {
              m = '0' + m
            }
            this.single = `${y}-${m}`
          }
          // 获取月度考核数据
          uni.showLoading({
            title: '正在加载'
          })
          this.handleGetExamine()
          this.handleNewGetExamine()
        } else if (this.selectTab === 2) {
          const date = new Date(this.singleDay)
          let y = date.getFullYear()
          let m = date.getMonth() + 1
          let d = date.getDate()
          const nowDate = new Date(this.lastDay)
          let nowY = nowDate.getFullYear()
          let nowM = nowDate.getMonth() + 1
          let nowD = nowDate.getDate()
          let thisMonthDay = this.$util.getThisMonthDay(`${y}-${m}`)
          if (m >= nowMonth && y >= nowYear && d >= nowD) {
            uni.showToast({
              title: '不能超过当前时间',
              duration: 2000,
              icon: 'none'
            });
            return
          }
          if (thisMonthDay === d && m === 12) {
            this.singleDay = `${y + 1}-01-01`
            this.singleMonth = `${y + 1}-01`
          } else if (thisMonthDay === d) {
            m = m + 1
            if (m < 10) {
              m = '0' + m
            }
            this.singleDay = `${y}-${m}-01`
            this.singleMonth = `${y}-${m}`
          } else {
            d = d + 1
            if (m < 10) {
              m = '0' + m
            }
            if (d < 10) {
              d = '0' + d
            }
            this.singleDay = `${y}-${m}-${d}`
            this.singleMonth = `${y}-${m}`
          }
          // 拿到顶部的巡检数据
          this.handleGetDailyPatrol()
          this.handleNewGetPatrol()
        }
      }
    },
    previewImage(event, index) {
      this.isHandleOnShow = false
      // 预览图片的方法
      wx.previewImage({
        current: event.currentTarget.dataset.src[index], // 当前显示图片的http链接
        urls: event.currentTarget.dataset.src, // 需要预览的图片http链接列表 数组形式
        success: function (res) {
        }
      })
    },
    // 弹出框点击蒙层关闭
    hidePopup() {
      this.showPop = false
      // 弹出框选择的选项卡变回默认
      this.popupTabSelect = 0
    },
    // 点击 优秀 良好 一般的列表 改变展示数据 且都变回正序
    handleChangeContentTab(value) {
      this.selectContentTab = value
      this.sortType = 'sequence'
      this.serviceList = this.serviceAllList[value - 1]
    },
    // 考核弹出框点击左边拿到的该项的详情值 展示再右边
    handleChangeMenu(value) {
      this.selectMenu = value
      if (this.selectTab === 1) {
        this.currentObj = this.serviceList[value]
      } else if (this.selectTab === 2) {
        this.currentObj = this.dailyServiceList[value]
      }
    },
    // 巡检弹出框点击左边拿到的该项的详情值 展示再右边
    handleChangeDailyTab(value) {
      this.sortType = 'sequence'
      this.selectDaily = value
      this.dailyServiceList = this.dailyAllList[value - 1]
    },
    // 点击选项卡改变选择的种类
    // 根据点击的 去请求这个种类下面的列表
    handleChangeTab(value) {
      this.selectTab = value
      if (value === 2) {
        this.rate = null
        setTimeout(() => {
          this.rate = this.dailyExamineObj && this.dailyExamineObj.CompleteRate ? this.dailyExamineObj.CompleteRate : 0
        }, 100)
        this.handleNewGetPatrol()
      } else if (value === 1) {
        this.handleNewGetExamine()
      }
    },
    // 返回按钮的方法
    // 判断从首页 还是 我的页面进来 点击回去  可能推送所以这样写
    handleBack() {
      uni.navigateBack({
        delta: 1
      })
    },
  }
}

</script>
<style scoped lang="scss">
@import '/static/public/dataAll/stylesheet.css';

.main {
  width: 100%;
  height: calc(100vh);

  .heard {
    width: 100%;
    height: 666rpx;
    position: relative;

    .contentHeard {
      width: 100%;
      height: 100%;
      position: absolute;
      box-sizing: border-box;
      padding: 0 16px;
      top: 0;
      left: 0;
      z-index: 2;

      .top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;

        .titleModule {
          width: 100%;
          bottom: 0;
          position: absolute;
          display: flex;
          align-items: center;

          .img {
            width: 24px;
            height: 24px;
            position: absolute;
            left: 16px;
          }

          .title {
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 28px;
          }

          .selectDateBox {
            position: absolute;
            left: 112rpx;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 16rpx 30rpx;
            background: #FFFFFF;
            border-radius: 32rpx;

            .leftIcon {
              width: 36rpx;
              height: 36rpx;
            }

            .dateBox {
              margin: 0 24rpx;
              display: flex;
              align-items: center;

              .dateIcon {
                width: 30rpx;
                height: 30rpx;
                margin-right: 8rpx;
              }

              .dateText {
                font-size: 28rpx;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #EC6C00;
                line-height: 30rpx;
              }
            }
          }
        }
      }

      .tabBox {
        position: absolute;
        width: calc(100% - 64rpx);
        display: flex;
        align-items: center;

        .tabItem {
          margin-right: 40rpx;
          font-size: 32rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #160002;
          line-height: 44rpx;
        }

        .bigItem {
          font-size: 40rpx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #160002;
          line-height: 56rpx;
          position: relative;
        }

        .bigItem:after {
          content: url("https://eshangtech.com/ShopICO/ahyd-BID/newExamine/tabIcon.svg");
          width: 56rpx;
          height: 16rpx;
          position: absolute;
          left: 50%;
          bottom: 5px;
          transform: translateX(-50%);
        }
      }

      .dataSummary {
        width: calc(100% - 64rpx);
        height: 216rpx;
        background: #FFFFFF;
        border-radius: 20rpx;
        position: absolute;
        left: 32rpx;
        box-sizing: border-box;
        padding: 4rpx;

        .dataDetail {
          width: 100%;
          height: 100%;
          background: linear-gradient(180deg, #FEEDE5 0%, #FFFEFD 100%);
          border-radius: 16rpx;
          box-sizing: border-box;
          padding: 24rpx;

          .dataDetailTop {
            display: flex;
            align-items: center;

            .topIcon {
              width: 38rpx;
              height: 38rpx;
            }

            .topTitle {
              font-size: 32rpx;
              font-family: Alimama ShuHeiTi;
              font-weight: bold;
              color: #EC6C00;
              line-height: 40rpx;
              margin: 0 0 0 16rpx;
            }

            .unit {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #3B48E3;
              line-height: 12px;
              padding: 3px 4px;
              background: rgba(59, 72, 227, 0.1);
              margin-left: 8px;
              border-radius: 2px;
            }

            .secondUnit {
              background: rgba(0, 147, 46, 0.1);
              border-radius: 2px;
              font-size: 12px;
              padding: 3px 4px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #00932E;
              margin-left: 8px;
              line-height: 12px;
            }
          }

          .detailContent {
            width: 100%;
            height: 72rpx;
            margin-top: 40rpx;
            display: flex;

            .contentItem {
              width: 33.3%;
              height: 100%;
              display: flex;

              .typeIcon {
                width: 64rpx;
                height: 64rpx;
                margin-top: 8rpx;
                margin-right: 16rpx;
              }

              .typeBox {
                display: flex;
                flex-direction: column;

                .typeNum {
                  font-size: 36rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #160002;
                  line-height: 44rpx;
                }

                .typeLabel {
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 36rpx;

                  .typeUnit {
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #A69E9F;
                    line-height: 36rpx;
                  }
                }
              }
            }
          }

          .detailDaily {
            width: 100%;
            margin-top: 32rpx;
            display: flex;

            .dailyItem {
              width: 30%;
              display: flex;
              flex-direction: column;

              .itemValue {
                font-size: 36rpx;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #020E1A;
                line-height: 44rpx;
              }

              .itemLabel {
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 36rpx;

                .itemValue {
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #A69E9F;
                  line-height: 36rpx;
                  margin-left: 4rpx;
                }
              }
            }

            .otherItem {
              width: 40%;
              display: flex;
              align-items: center;

              .otherLeft {
                width: 56rpx;
                height: 56rpx;
                margin-right: 12rpx;
              }

              .otherDetail {
                display: flex;
                flex-direction: column;

                .itemValue {
                  font-size: 36rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #E83944;
                  line-height: 44rpx;
                }

                .itemLabel {
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 36rpx;

                  .itemUnit {
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #A69E9F;
                    line-height: 36rpx;
                    margin-left: 4rpx;
                  }
                }
              }
            }
          }
        }
      }





      .picker {
        .selectService {
          display: flex;
          align-items: center;

          .img {
            width: 40px;
            height: 40px;
            z-index: 2;
          }

          .select {
            height: 32px;
            min-width: 110px;
            background: #F8F8FA;
            border-radius: 0 16px 16px 0;
            transform: translateX(-20px);
            box-sizing: border-box;
            padding-left: 25px;
            display: flex;
            align-items: center;
            position: relative;

            .name {
              font-size: 14px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #160002;
            }

            .area {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #786B6C;
              margin-left: 2px;
            }

            .rightArrow {
              position: absolute;
              right: 2px;
              width: 24px;
              height: 12px;
            }

          }
        }
      }

      .monthTabs {
        width: 100%;
        height: 34px;
        border-radius: 17px;
        box-sizing: border-box;
        border: 1px solid #BF99FE;
        background: linear-gradient(180deg, #8338FF 0%, #A976FF 100%);
        overflow: hidden;
        padding: 2px 0;
        margin-top: 16px;

        .big {
          width: 100%;
          height: 100%;
          white-space: nowrap;

          .monthItem {
            display: inline-block;
            font-size: 14px;
            padding: 2px 16px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #B8C2FF;
            line-height: 24px;
            margin-right: 4px;
            text-align: center;
            border-radius: 12px;
          }

          .selectItem {
            background: #fff;
          }

          .monthItem:first-child {
            margin-left: 4px;
          }
        }
      }
    }

    .headerBg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 666rpx;
      background: linear-gradient(180deg, #FFC692 0%, rgba(255, 225, 193, 0) 100%);
      z-index: 1;

    }
  }

  .pageContent {
    position: relative;
    z-index: 9;
    width: 100%;
    height: calc(100vh - 536rpx);
    background: #fff;
    transform: translateY(-130rpx);
    border-radius: 32rpx 32rpx 6rpx 6rpx;
    box-sizing: border-box;
    padding: 24rpx 32rpx;

    .contentBox {
      width: 100%;
      height: 100%;

      .contentTop {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .contentTitle {
          font-size: 32rpx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #160002;
          line-height: 44rpx;
        }

        .garyText {
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #A69E9F;
          line-height: 36rpx;
          margin-left: 16rpx;
        }

        .sort {
          display: flex;
          align-items: center;

          .sortLabel {
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #786B6C;
            line-height: 40rpx;
          }

          .sortIcon {
            width: 30rpx;
            height: 30rpx;
            margin-left: 8rpx;
          }
        }
      }

      .contentTab {
        .contentTabItem {
          padding: 8rpx 44rpx;
          background: #F2F0EF;
          border-radius: 30rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #786B6C;
          line-height: 40rpx;
          display: inline-block;
          margin-right: 16rpx;
        }

        .selectItem {
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FEFFFE;
          line-height: 40rpx;
          background: #EC6C00;
        }
      }

      .moreBox {
        display: flex;
        align-items: center;

        .moreText {
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #A69E9F;
          line-height: 36rpx;
        }

        .moreImg {
          width: 24rpx;
          height: 48rpx;
        }
      }

      .contentList {
        width: 100%;
        height: calc(100% - 172rpx);
        margin-top: 24rpx;

        .big {
          width: 100%;
          height: 100%;

          .scrollItem {
            width: 100%;
            height: 208rpx;
            background: #F8F8F8;
            border-radius: 12rpx;
            box-sizing: border-box;
            padding: 24rpx;
            margin-bottom: 24rpx;

            .scrollItemTop {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .itemTopLeft {
                display: flex;
                align-items: center;

                .index {
                  display: inline-block;
                  font-size: 24rpx;
                  padding: 2rpx 12rpx 2rpx 8rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #FEFFFF;
                  line-height: 32rpx;
                  text-align: center;
                  box-sizing: border-box;
                  background-repeat: no-repeat;
                  background-size: 100% 100%;
                  background-position: 0 0;
                }

                .itemName {
                  font-size: 28rpx;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #160002;
                  line-height: 40rpx;
                  margin: 0 16rpx 0 8rpx;
                }

                .unit {
                  font-size: 12px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #3B48E3;
                  line-height: 12px;
                  padding: 3px 4px;
                  background: rgba(59, 72, 227, 0.1);
                  margin-left: 8px;
                  border-radius: 2px;
                }

                .secondUnit {
                  background: rgba(0, 147, 46, 0.1);
                  border-radius: 2px;
                  font-size: 12px;
                  padding: 3px 4px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #00932E;
                  margin-left: 8px;
                  line-height: 12px;
                }
              }

              .rightIcon {
                width: 30rpx;
                height: 30rpx;
              }
            }

            .itemDetail {
              width: 100%;
              height: 104rpx;
              background: #FFFFFF;
              border-radius: 12rpx;
              box-sizing: border-box;
              padding: 24rpx;
              margin-top: 20rpx;
              display: flex;

              .detailItem {
                width: 50%;
                height: 100%;
                display: flex;

                .fixBox {
                  width: 62rpx;
                  height: 62rpx;
                  background: rgba(236, 108, 0, 0.1);
                  margin-right: 16rpx;
                  border-radius: 10rpx;
                  font-size: 28rpx;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #EC6C00;
                  line-height: 40rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }

                .markBox {
                  width: 120rpx;

                  .markValue {
                    font-size: 36rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #160002;
                    line-height: 36rpx;

                    .markUnit {
                      margin-left: 4rpx;
                      font-size: 24rpx;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #A69E9F;
                      line-height: 36rpx;
                    }
                  }

                  .progress {
                    width: 100%;
                    height: 12rpx;
                    border-radius: 7rpx;
                    position: relative;
                    background: #FBE2CC;

                    .have {
                      position: absolute;
                      left: 0;
                      top: 0;
                      border-radius: 7rpx;
                      height: 100%;
                      background: #EC6C00;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .dailyList {
        width: 100%;
        height: calc(100% - 190rpx);
        margin-top: 12rpx;

        .big {
          width: 100%;
          height: 100%;

          .scrollItem {
            width: 100%;
            background: #F8F8F8;
            border-radius: 12rpx;
            margin-bottom: 24rpx;
            box-sizing: border-box;
            padding: 24rpx;

            .scrollItemTop {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .scrollTopLeft {
                display: flex;
                align-items: center;

                .index {
                  display: inline-block;
                  font-size: 24rpx;
                  padding: 2rpx 12rpx 2rpx 8rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #FEFFFF;
                  line-height: 32rpx;
                  text-align: center;
                  box-sizing: border-box;
                  background-repeat: no-repeat;
                  background-size: 100% 100%;
                  background-position: 0 0;
                }

                .scrollName {
                  font-size: 28rpx;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #160002;
                  line-height: 40rpx;
                  margin: 0 8rpx;
                }

                .rightIcon {
                  width: 30rpx;
                  height: 30rpx;
                  margin-left: 14rpx;
                }
              }

              .scrollTopRight {
                .scueessNum {
                  font-size: 36rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #EC6C00;
                  line-height: 40rpx;
                }

                .all {
                  font-size: 36rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #160002;
                  line-height: 40rpx;
                }
              }
            }

            .detailMark {
              width: 100%;
              box-sizing: border-box;
              padding: 24rpx 16rpx;
              margin-top: 20rpx;
              background: #FFFFFF;
              border-radius: 12rpx;

              .wordHeader {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #A69E9F;
                line-height: 40rpx;
              }

              .wordValue {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #160002;
                line-height: 36rpx;
                display: inline-block;
                margin-left: 16rpx;
              }
            }
          }
        }
      }
    }
  }

  .popup {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    position: relative;

    .top {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .popupTitle {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #160002;
        line-height: 22px;
      }

      .close {
        width: 20px;
        height: 20px;
      }
    }

    .areaList {
      width: 100vw;
      margin-top: 12px;
      overflow-y: scroll;
      position: absolute;
      left: 0;

      .popupDetail {
        width: 100%;
        height: 100%;
        display: flex;

        .detailLeft {
          width: 184rpx;
          height: calc(85vh - 148rpx);
          box-sizing: border-box;

          .serviceSelect {
            padding: 24rpx 32rpx;
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #160002;
            line-height: 44rpx;
            box-sizing: border-box;
            position: relative;
          }

          .currentSelect {
            box-sizing: border-box;
            font-weight: 500;
            color: #EC6C00;
            position: relative;
          }

          .currentSelect:before {
            content: '';
            display: inline-block;
            width: 6rpx;
            height: 32rpx;
            background: #EC6C00;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }

          ::-webkit-scrollbar {
            width: 4px;
            height: 4px;
            color: transparent;
          }

          /*定义滚动条轨道 内阴影+圆角*/
          ::-webkit-scrollbar-track {
            border-radius: 10px;
            background-color: transparent;
          }

          /*定义滑块 内阴影+圆角*/
          ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background-color: transparent;
          }

          .notice {
            font-size: 12px;
            color: gray;
          }
        }

        .serviceDetail {
          width: calc(100vw - 200rpx);
          height: calc(85vh - 148rpx);
          background: #fff;

          .serviceDetailItem {
            width: 100%;
            box-sizing: border-box;
            padding: 24rpx;
            background: #F8F8F8;
            border-radius: 12rpx;
            margin-bottom: 24rpx;

            .detailItemTop {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 16rpx;

              .fixedName {
                padding: 8rpx 14rpx;
                font-size: 28rpx;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #EC6C00;
                line-height: 40rpx;
                background: #F6E9DE;
                border-radius: 10rpx;
              }

              .store {
                font-size: 36rpx;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #160002;
                line-height: 44rpx;

                .unit {
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #A69E9F;
                  line-height: 36rpx;
                }
              }

              .detailItemTopLeft {
                display: flex;
                align-items: center;

                .leftIcon {
                  width: 27rpx;
                  height: 32rpx;
                  margin-right: 16rpx;
                }

                .leftName {
                  font-size: 32rpx;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #160002;
                  line-height: 44rpx;
                }
              }

              .rightIcon {
                width: 40rpx;
                height: 40rpx;
              }
            }

            .messageItem {
              display: flex;
              align-items: center;
              justify-content: flex-start;
              margin-bottom: 8rpx;

              .itemIcon {
                width: 32rpx;
                height: 32rpx;
                margin-right: 12rpx;
              }

              .itemValue {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 40rpx;
              }
            }

            .detailItemMessage {
              margin-top: 16rpx;
              background: #fff;
              box-sizing: border-box;
              padding: 22rpx 26rpx;
              border-radius: 8rpx;

              .messageBox {
                width: 100%;
                box-sizing: border-box;
                padding: 16rpx;
                margin-top: 8rpx;

                .messageBoxTop {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;

                  .messageBoxTopLeft {
                    display: flex;
                    align-items: center;

                    .fixedIcon {
                      width: 27rpx;
                      height: 32rpx;
                      margin-right: 12rpx;
                    }

                    .name {
                      font-size: 32rpx;
                      font-family: PingFangSC-Semibold, PingFang SC;
                      font-weight: 600;
                      color: #160002;
                      line-height: 44rpx;
                    }
                  }

                  .messageBoxTopRight {
                    .mark {
                      font-size: 36rpx;
                      font-family: DINAlternate-Bold, DINAlternate;
                      font-weight: bold;
                      color: #160002;
                      line-height: 44rpx;

                      .unit {
                        margin-left: 4rpx;
                        font-size: 24rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #A69E9F;
                        line-height: 36rpx;
                      }
                    }
                  }
                }

                .desc {
                  font-size: 28rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #160002;
                  line-height: 40rpx;
                  text-align: left;
                }

                .imgList {
                  width: 100%;
                  display: flex;
                  justify-content: flex-start;

                  .img {
                    width: 88rpx;
                    height: 88rpx;
                    margin-right: 16rpx;
                    margin-top: 12rpx;
                  }
                }
              }
            }

            .rectifyBox {
              width: 100%;
              box-sizing: border-box;
              padding: 24rpx;
              background: #fff;
              margin-top: 16rpx;

              .detailItemTop {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 16rpx;

                .fixedName {
                  padding: 8rpx 14rpx;
                  font-size: 28rpx;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #EC6C00;
                  line-height: 40rpx;
                  background: #F6E9DE;
                  border-radius: 10rpx;
                }

                .store {
                  font-size: 36rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #160002;
                  line-height: 44rpx;

                  .unit {
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #A69E9F;
                    line-height: 36rpx;
                  }
                }

                .detailItemTopLeft {
                  display: flex;
                  align-items: center;

                  .leftIcon {
                    width: 27rpx;
                    height: 32rpx;
                    margin-right: 16rpx;
                  }

                  .leftName {
                    font-size: 32rpx;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                    line-height: 44rpx;
                  }
                }

                .rightIcon {
                  width: 40rpx;
                  height: 40rpx;
                }
              }

              .beforeTop {
                width: 100%;
                display: flex;
                justify-content: flex-start;

                .beforeTitle {
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #FFFFFF;
                  line-height: 32rpx;
                  padding: 4rpx 8rpx;
                  background: #4D86F7;
                  border-radius: 10rpx;
                  display: inline-block;
                }
              }

              .beforeText {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 40rpx;
                margin-top: 8rpx;
                text-align: left;
              }

              .imgList {
                width: 100%;
                display: flex;
                justify-content: flex-start;

                .img {
                  width: 88rpx;
                  height: 88rpx;
                  margin-right: 16rpx;
                  margin-top: 12rpx;
                }
              }

              .afterTop {
                display: flex;
                align-items: center;
                margin: 32rpx 0 8rpx 0;

                .afterTitle {
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #FFFFFF;
                  line-height: 32rpx;
                  padding: 4rpx 8rpx;
                  background: #FF5000;
                  border-radius: 10rpx;
                  display: inline-block;
                  margin-right: 16rpx;
                }

                .afterTime {
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 32rpx;
                }
              }

              .afterText {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #160002;
                line-height: 40rpx;
                text-align: left;
              }
            }
          }
        }
      }
    }

    .examineList {
      .examineItem {
        width: 100%;

        background: #F5F2F2;
        box-sizing: border-box;
        text-align: left;
        border: 1px solid #ccc;
        margin-bottom: 12px;

        .itemTop {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000;
          line-height: 18px;
          box-sizing: border-box;
          padding: 8px;
          border-bottom: 1px solid #ccc;
        }

        .itemMessage {
          width: 100%;
          box-sizing: border-box;
          padding: 8px;
          border-bottom: 1px solid #ccc;

          .box {
            width: 100%;
          }

          .childItem {
            width: 100%;
            box-sizing: border-box;
            padding: 8px;
            background: #fff;

            .imgList {
              width: 100%;
              display: flex;
              justify-content: flex-start;

              .img {
                width: 88rpx;
                height: 88rpx;
                margin-right: 16rpx;
                margin-top: 12rpx;
              }
            }

          }
        }
      }
    }
  }

  .previewImg {
    width: 100%;
    height: 60vh;
    box-sizing: border-box;
    padding: 16px;

    .top {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .close {
        width: 20px;
        height: 20px;
      }
    }

    .content {
      width: 100%;
      height: 55vh;
      overflow-y: scroll;
    }
  }

  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    color: transparent;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: transparent;
  }

  .notice {
    font-size: 12px;
    color: gray;
  }
}
</style>
