<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>
<!--              <span :class="item.EXAMINE_MQUARTER!=='0'?'secondUnit':'unit'">{{item.EXAMINE_MQUARTER!=='0'?item.EXAMINE_MQUARTER==='1'?'一'+'季度':item.EXAMINE_MQUARTER==='2'?'二'+'季度':item.EXAMINE_MQUARTER==='3'?'三'+'季度':'四' + '季度':'月度'}}</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">
          <text class="contentTitle">服务区排名</text>
          <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="unit">月度</span>-->
<!--                  <span :class="item.EXAMINE_MQUARTER!=='月度'?'secondUnit':'unit'">{{item.EXAMINE_MQUARTER}}</span>-->
                  <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">
          <text class="contentTitle">服务区排名</text>
          <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){
        console.log('byssiness',value)
        this.showIndex = value
        if (value===6 || value===7){
          this.handleGetPageData()
        }
      },
      immediate:true
    }
  },
  onLoad(){
    // console.log('query',query)
    // // 判断从哪里点击进去的 首页 还是用户页面
    // 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:{
    // 获得页面数据
    handleGetPageData(){
      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 (this.selectTab===1){
        this.handleNewGetExamine()
      }else if(this.selectTab===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]
        console.log('serviceList',this.serviceList)
        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()
      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){
          console.log('single',this.single)
          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){
          console.log('this.singleDay',this.singleDay)
          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) {
          console.log('res',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;
        }
        .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>
