<template>
  <view class="main">
    <view class="heard">
      <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/examine/leftArrowWhite.svg"></image>
            <text class="title">考评考核</text>
          </view>
        </view>
        <view :style="{height:menu.bottom+'px'}">

        </view>
        <!--  选择片区  -->
        <div class="picker">
          <div class="selectService" @click="handleShowPopup(1)">
            <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/fixed.svg"></image>
            <view class="select">
              <view class="name">{{selectAreaName}}</view>
              <p class="area">片区</p>
              <div style="width: 24px;height: 12px"></div>
              <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/headMore.svg"></image>
            </view>
          </div>
        </div>
                    <!--  选择月份  -->
        <view class="monthTabs">
          <scroll-view class="big" :show-scrollbar="false" scroll-with-animation  scroll-x="true" enable-flex :scrollIntoView="current" >
                            <div :id="'item'+item.value" :class="selectMonth===item.value?'monthItem selectItem':'monthItem'" v-for="(item,index) in monthList" :key="index" @click="handleSelectMonth(item.value)">{{item.label}}</div>
          </scroll-view>
                    </view>
                </view>
            </view>

            <view class="content">
                <view class="date" v-if="selectTab!==1">
                    <scroll-view class="dateList" :show-scrollbar="false" scroll-with-animation  scroll-x="true" enable-flex :scrollIntoView="currentDate">
                        <view :id="'item'+item.value" :class="selectDate===item.value?'dateItem selectDateItem':'dateItem'" v-for="(item,index) in dateList" :key="index" @click="handleChangeDate(item.value)">{{item.label}}</view>
                    </scroll-view>
                </view>
                <view style="height: 50px">
                    <view class="tab">
                        <view :class="selectTab===item.value?'tabItem selectItem':'tabItem'" v-for="(item,index) in tabList" :key="index" @click="handleChangeTab(item.value)">{{item.label}}</view>
                    </view>
                </view>
                <scroll-view scroll-y="true">
                  <view v-if="selectTab===1" class="serviceList" style="height:calc(100vh - 260px);">
                    <view v-if="serviceList.length>0">
                      <view class="serviceItem" v-for="(item,index) in serviceList" :key="index" @click="handleOpenDetail(item)">
                        <view class="itemTitle">
                          <span class="title">{{item.SERVERPART_NAME}}</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="detail" v-for="(subItem,subIndex) in item.list" :key="subIndex">
                          <view class="detailTop">
                            <view class="left">
                              <image class="icon" :src="subItem.REGION_NAME==='南' || subItem.REGION_NAME==='北'?'https://eshangtech.com/ShopICO/ahyd-BID/examine/NS.svg':'/static/images/examine/ES.svg'"></image>
                              <span class="type">{{subItem.REGION_NAME}}区</span>
                            </view>
                            <view class="right">
                              {{subItem.SERVERPARTList[0].EXAMINE_SCORE }}
                              <text class="unit">分</text>
                            </view>
                          </view>
                          <view class="detailMessage">
                            <view class="message" style="margin-bottom: 4px;display: flex;justify-content: space-between">
                                <div class="box">
                                    <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/time.svg"></image>
                                    <span class="value">{{subItem.SERVERPARTList[0].EXAMINE_DATE}}</span>
                                </div>
                                <div style="display: inline-block;width: 40px;height: 16px;display: flex;justify-content: flex-end" @click="handleShowPopup(4,subItem)" >
                                    <image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
                                </div>
                            </view>
                            <view class="message">
                              <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/user.svg"></image>
                              <span class="value">{{subItem.SERVERPARTList[0].EXAMINE_PERSON}}</span>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                    <view v-if="serviceList.length>0" class="load-more" style="height: 20px">
                      <text>{{'——— 我是有底线的 ———'}}</text>
                    </view>
                    <view class="noData" v-else>
                      <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/noData.svg"></image>
                      <p class="text">暂无数据</p>
                    </view>
                  </view>
                  <view v-if="selectTab===2" class="serviceList" style="height:calc(100vh - 300px);">
                    <view v-if="inspectionList.length && inspectionList.length>0  ">
                      <view class="dailyInspection" v-for="(item,index) in inspectionList" :key="index">
                        <view class="itemTitle">
                          <span class="title">{{item.SERVERPART_NAME}}</span>
                          <view class="more" @click="handleShowPopup(2,item)">
                            <span class="moreText">更多记录</span>
                            <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
                          </view>
                        </view>
                        <view class="detail" v-for="(subItem,subIndex) in item.list" :key="subIndex">
                          <view class="detailTop">
                            <view class="left">
                              <image class="icon" :src="subItem.REGION_NAME==='南' || subItem.REGION_NAME==='北'?'https://eshangtech.com/ShopICO/ahyd-BID/examine/NS.svg':'/static/images/examine/ES.svg'" />
                                <span class="type">{{subItem.REGION_NAME}}区</span>
                                <span class="number">({{subItem.SERVERPARTList.length}})</span>
                            </view>
                            <image class="right" :src="subItem.warning===true?'https://eshangtech.com/ShopICO/ahyd-BID/examine/success.svg':'/static/images/examine/warning.svg'"></image>
<!--                            <image v-if="subItem.SERVERPARTList[0].COMPLETE_STATE === 0" class="right" src="/static/images/examine/warning.svg"></image>-->
                          </view>
                          <view class="detailMessage">
                            <view class="person">
                              <p class="value">{{subItem.SERVERPARTList[0].PATROL_PERSON}}</p>
                              <p class="label">检查人</p>
                            </view>
                            <view class="person">
                              <p class="value">{{subItem.SERVERPARTList[0].PATROL_DATE}}</p>
                              <p class="label">检查日期</p>
                            </view>
                            <view class="person">
                              <p class="value">{{subItem.SERVERPARTList[0].PATROL_ROUTE}}</p>
                              <p class="label">路线</p>
                            </view>
                            <view class="person">
                              <image v-if="subItem.SERVERPARTList[0].PATROL_IMG" class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/haveImg.svg"></image>
                              <p v-if="subItem.SERVERPARTList[0].PATROL_IMG" class="label">图片</p>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                    <view v-if="inspectionList.length && inspectionList.length>0" class="load-more" style="height: 20px">
                      <text>{{'——— 我是有底线的 ———'}}</text>
                    </view>
                    <view class="noData" v-else>
                      <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/noData.svg"></image>
                      <p class="text">暂无数据</p>
                    </view>
                  </view>
                  <view v-if="selectTab===3" class="serviceList" style="height:calc(100vh - 300px);">
                    <view v-if="meetDetailList.length>0">
                      <view class="meeting" v-for="(item,index) in meetDetailList">
                        <p class="title">{{item.SERVERPART_NAME}}</p>
                        <view class="meetContent">
                          <view class="left">
                            <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/personList.svg"></image>
                            <span class="text">会议内容</span>
                          </view>
                          <view class="right">
                            <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/place.svg"></image>
                            <span class="text">{{item.list[0].SERVERPARTList[0].MEETING_PLACE}}</span>
                          </view>
                        </view>
                        <view class="noDataItem" v-if="!item.list[0].SERVERPARTList[0].MEETING_PERSONS && !item.list[0].SERVERPARTList[0].MEETING_CONTENT">
                          <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/noData.svg"></image>
                          <p class="text">暂无会议内容</p>
                        </view>
                        <view v-else>
                          <view class="detail">
                            <view class="message" style="margin-bottom: 6px">
                              <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/time.svg"></image>
                              <span class="value">{{item.list[0].SERVERPARTList[0].MEETING_DATE}}</span>
                            </view>
                            <view class="message" style="margin-bottom: 6px" @click="handleShowPopup(3,item)">
                              <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/user.svg"></image>
                              <span class="value" v-if="item.list[0].SERVERPARTList[0].MEETING_PERSONS.length>16">{{item.list[0].SERVERPARTList[0].MEETING_PERSONS.slice(0,16)}}{{`等${10}人`}}</span>
                              <image class="more" v-if="item.list[0].SERVERPARTList[0].MEETING_PERSONS.length>16" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/headMore.svg"></image>
                              <span class="value" v-if="item.list[0].SERVERPARTList[0].MEETING_PERSONS.length<=16">{{item.list[0].SERVERPARTList[0].MEETING_PERSONS}}</span>
                            </view>
                            <view class="other" @click="handleShowPopup(3,item)">
                              <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/detail.svg"></image>
                              <span class="value" v-if="item.list[0].SERVERPARTList[0].MEETING_CONTENT.length>40">{{item.list[0].SERVERPARTList[0].MEETING_CONTENT}}</span>
                              <image class="more" v-if="item.list[0].SERVERPARTList[0].MEETING_CONTENT.length>40" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/headMore.svg"></image>
                              <span class="value" v-if="item.list[0].SERVERPARTList[0].MEETING_CONTENT.length<=40">{{item.list[0].SERVERPARTList[0].MEETING_CONTENT}}</span>
                            </view>
                          </view>
                        </view>

                      </view>
                    </view>
                    <view v-if="meetDetailList.length>0" class="load-more" style="height: 20px">
                      <text>{{'——— 我是有底线的 ———'}}</text>
                    </view>
                    <view class="noData" v-else>
                      <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/noData.svg"></image>
                      <p class="text">暂无数据</p>
                    </view>
                  </view>
                </scroll-view>
            </view>

            <uniPopup type="bottom" :round="true" :showIndex="1" :show="showPop" @hidePopup="hidePopup">
                <view class="popup" :style="{height:selectTab!==2?'60vh':'78vh'}">
                    <view class="top">
                        <text class="popupTitle">{{ selectTab===1?popupShow===4?'':'选择片区':selectTab===2?`${popupServiceName}`:'会议内容' }}</text>
                        <image @click="hidePopup" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"></image>
                    </view>
                    <view class="areaList" v-if="popupShow===1">
                        <view @click="handleChangeArea(item)" :class="selectAreaValue===item.value?'selectItem item':'item'" v-for="(item,index) in areaList" :key="index">{{item.label}}<text class="unit">片区</text></view>
                    </view>
                    <view class="serviceList" v-if="popupShow===2">
                      <view class="tab">
                        <view :class="popupTabSelect===item.value?'tabItem selectTabItem':'tabItem'" v-for="(item,index) in popupTab" :key="index" @click="handleChangePopupTab(item.value)">{{item.label}}</view>
                      </view>
                      <scroll-view scroll-y="true" class="assessmentTable" v-if="popupServiceShowList.DetailList && popupServiceShowList.DetailList.length>0">
                        <view class="bigBox" v-for="(item,index) in popupServiceShowList.DetailList" :key="index" >
                          <view class="assessmentItem" @click="handleNoShow(item)" :style="{borderBottomWidth:!item.showChild?'0px':'1px'}">
                            <view class="left">{{item.PATROL_POSITION}}</view>
                            <view class="right">
                              <image :style="{transform:item.showChild?'':'rotate(-90deg)'}" class="more" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"/>
                            </view>
                          </view>
                          <view v-if="item.showChild">
                            <view class="smallItem" v-for="(subItem,subIndex) in item.PositionDetailList" :key="subIndex" :style="{borderBottomWidth:subIndex===item.PositionDetailList.length-1 ?'0px':'2px'}"  @click="handleShowImgDetail(subItem)">
                              <view class="top">
                                <view class="time">{{subItem.PATROL_DATE.split(' ')[1]}}</view>
                                <view class="label">检查人: <span class="name">{{subItem.PATROL_PERSON}}</span></view>
                              </view>
                              <view class="itemBox" v-if="subItem.PATROL_SITUATION" @click="changeDetail(subItem)">
                                <view class="detailItem">
                                  <view class="detailValue">
                                    <view class="detailText">{{ subItem.PATROL_SITUATION || "-"}}</view>
                                  </view>
                                  <view class="detailLabel">情况及问题</view>
                                </view>
                                <view class="detailItem">
                                  <view class="detailValue">{{ subItem.RECTIFICATION_PERIOD || "-" }}</view>
                                  <view class="detailLabel">整改期限</view>
                                </view>
                                <view class="detailItem">
                                  <view class="detailValue">{{ subItem.RECTIFICATION_RESULT || "-" }}</view>
                                  <view class="detailLabel">整改结果</view>
                                </view>
                              </view>
                            </view>
                          </view>
                        </view>
                      </scroll-view>
                      <view class="list" v-else>
                        <view class="item" v-for="(item,index) in popupServiceShowList.SERVERPARTList" :key="index">
                          <view class="person">
                            <p class="value">{{item.PATROL_PERSON}}</p>
                            <p class="label">检查人</p>
                          </view>
                          <view class="person">
                            <p class="value">{{item.PATROL_DATE}}</p>
                            <p class="label">检查日期</p>
                          </view>
                          <view class="person">
                            <p class="value">{{item.PATROL_ROUTE}}</p>
                            <p class="label">路线</p>
                          </view>
                          <view class="person">
                            <image v-if="item.PATROL_IMG && item.PATROL_IMG.length>0" class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/haveImg.svg"></image>
                            <p v-if="item.PATROL_IMG && item.PATROL_IMG.length>0" class="label">图片</p>
                          </view>
                        </view>
                      </view>
                    </view>
                    <view class="meetList" v-if="popupShow===3">
                        <view class="message" style="margin-bottom: 8px">
                            <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/time.svg"></image>
                            <span class="value">{{popupMeetDetail.MEETING_DATE}}</span>
                        </view>
                        <view class="message" style="margin-bottom: 8px" >
                            <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/user.svg"></image>
                            <span class="value" >{{popupMeetDetail.MEETING_PERSONS}}</span>
                        </view>
                        <view class="message">
                            <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/detail.svg"></image>
                            <span class="value">{{popupMeetDetail.MEETING_CONTENT}}</span>
                        </view>
                    </view>
                    <view class="examineList" v-if="popupShow===4">
                      <scroll-view scroll-y="true" style="height: calc(60vh - 40px)">
                        <view class="examineItem" v-for="(item,index) in examineList" :key="index">
                            <view class="itemTop">{{item.REGION_NAME}}<span style="margin-left: 4px">(<span style="color: red">{{`${item.mark}`}}</span>分)</span></view>
                            <div class="itemMessage" v-for="(subItem,subIndex) in item.SERVERPARTList" :key="subIndex" @click="handleChangeChild(subItem)">
                               {{subItem.EXAMINE_CONTENT}}<span style="margin-left: 4px">(<span style="color: red">{{subItem.DEDUCTION_SCORE}}</span>分)</span>
                                <view class="childItem" v-if="subItem.showChild">
                                    <span>{{subItem.DEDUCTION_REASON}}</span>
                                    <span>(<span style="color: red">{{subItem.DEDUCTION_SCORE}}</span>分;</span>
                                    <span style="margin-left: 4px">备注: {{subItem.EXAMINEDETAIL_DESC}})</span>
                                    <div class="imgList">
                                        <image v-for="(imgItem,imgIndex) in subItem.imgList" :key="imgIndex" class="img" :src="imgItem" :data-src="imgItem"  @click.stop="previewImage($event,subItem)"></image>
                                    </div>
                                </view>
                            </div>
                        </view>
                      </scroll-view>
                    </view>
                </view>
            </uniPopup>
          <uniPopup type="bottom" :round="true" :showIndex="2" :show="showImg" @hidePopup="hideShowImg"  style="z-index: 1001!important;">
            <view class="previewImg">
              <view class="top">
                <text class="popupTitle"></text>
                <image @click="hideShowImg" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"></image>
              </view>
              <view class="content">
                <view class="contentTitle">整改前</view>
                <image class="img" :src="showImgUrl.PATROLDETAIL_URL" @click="previewShowImage($event,showImgUrl)"/>
                <view class="contentTitle" v-if="showImgUrl.PATROLDEAL_URL">整改后</view>
                <image v-if="showImgUrl.PATROLDEAL_URL" class="img" :src="showImgUrl.PATROLDEAL_URL" @click="previewShowImage($event,showImgUrl)"/>
                <view class="contentTitle" v-if="!showImgUrl.PATROLDEAL_URL">暂未整改完成</view>
              </view>
            </view>
          </uniPopup>
    </view>
</template>
<script>
import request from '@/util/index.js'
import uniPopup from '@/components/uni-popup'
import Store from "../../store/store";
export default {
    components:{
        uniPopup
    },
    data(){
        return {
            searchTime:'',// 查询的时间默认是拿首页的时间
            lastDay:'',// 首页的时间
            monthList:[{label:'1月',value:'01'},{label:'2月',value:'02'},{label:'3月',value:'03'},{label:'4月',value:'04'},{label:'5月',value:'05'},{label:'6月',value:'06'},{label:'7月',value:'07'},
            {label:'8月',value:'08'},{label:'9月',value:'09'},{label:'10月',value:'10'},{label:'11月',value:'11'},{label:'12月',value:'12'}],
            selectMonth:0,
            current:'',
            menu:{},
            statusBarHeight:'',
            showPop:false,
            showImg:false,// 整改图片的弹出
            areaList:[],// 片区列表
            selectAreaValue:'',// 选择的片区value
            selectAreaName:'',// 选择的片区名字
            tabList:[{label:'考核管理',value:1},{label:'日常巡检',value:2},{label:'晨会管理',value:3}],// tab选项卡
            selectTab:1,// 选中的tab选项卡
            serviceList:[],// 服务区列表
            inspectionList:[],// 日常巡检列表
            meetDetailList:[],// 晨会管理列表
            scrollTop:0,// 页面整体滚动了多少
            windowHeight:0,// 页面高度
            dateList:[],// 日历滚动条
            selectDate:'',// 当前选中的日期
            currentDate:'',// 当前选中的月份
            popupShow:1,
            popupTab:[],// 弹出框中的选项卡
            popupTabSelect:0,// 选中的弹出框选项卡
            popupServiceList:[],// tab选中第二个的时候的点击更多记录全部表单
            popupServiceShowList:[],// 显示的表单内容
            popupServiceName:'',// 点击更多记录的表单名称
            popupMeetDetail:{},// 弹出框的会议详情内容
            come:'',// 来自首页还是用户页
            examineList:[],
            showImgUrl:{},// 展示的图片地址
            queryTime:'',// 传入的时间
        }
    },
    onLoad(query){
      console.log('query',query)
      this.come = query.come
      if (query.type){
        this.selectTab = Number(query.type)
      }
      if (query.time){
        this.queryTime = query.time
      }
      //  获取手机参数对页面进行适配
      let systemInfo = uni.getSystemInfoSync()
      this.windowHeight = systemInfo.windowHeight
      this.statusBarHeight = Number(systemInfo.statusBarHeight)
      this.menu = uni.getMenuButtonBoundingClientRect()
      // 先拿到首页的时间 作为调用接口的统一时间  存的lastDay存当前月份的具体日期切换回本月的日期判断有用
      this.searchTime = new Date()
      this.lastDay = uni.getStorageSync('lastDay')
      // 拿到当前时间
      const date = new Date()
      let month = date.getMonth() + 1
      // 滚动的月份列表
        let list = []
        this.monthList.forEach((item)=>{
            if (item.value<=month){
                list.push(item)
            }
        })
      this.monthList = list
      // 日历数组
      // this.dateList = this.$util.getThisMonthDateList(date)
      console.log('this.dateList',this.dateList)

    },
    onReady(){
      // 只有在页面已经渲染好了 才能把选中的日期 移到可视区域里面
        var _this = this;
        _this.getThisMonth()
    },
    methods:{
        handleOpenDetail(item){
            console.log('item',item)
        },
        // 拿到当前月份 用于页面一开始自动滚动到相对应的月份
        getThisMonth(){
          const date = this.queryTime ? new Date(this.queryTime): new Date()
          let year = date.getFullYear()
          let month = date.getMonth() + 1
          if (month<10){
              month = '0' + month
          }
          let day = date.getDate()
          let showDay = day - 4 >0?  day - 4:1
          if (showDay<10){
              showDay = '0'+showDay
          }
          // 月份选择器 拿到当前月份 和自动滚动到当前月份
          this.selectMonth = month
          this.current='item'+month
          // 日期选择器
          if (day<10){
            day = '0' + day
          }
          const realDate = new Date(this.lastDay)
          let realMonth = realDate.getMonth() + 1
          if (realMonth>month){
            // let d = this.$util.getThisMonthDay(`${year}-${month}`)
            this.selectDate = `${year}-${month}-01`
            this.dateList = this.$util.getThisMonthDateList(`${year}-${month}`)
            this.currentDate = 'item'+`${year}-${month}-01`
          }else{
            this.selectDate = `${year}-${month}-${day}`
            this.dateList = this.$util.getThisMonthDateList(`${year}-${month}`)
          }
          console.log('this.selectDate',this.selectDate)
          this.currentDate = 'item'+`${year}-${month}-${showDay}`
          // 获得片区列表
          this.getAreaList(`${year}-${month}-${day}`)
        },
        // 是否显示弹出框
        handleShowPopup(value,obj){
          console.log('value',value)
          console.log('obj',obj)
          this.popupShow = value
          if (value===2){
            // 是日常巡检时
            // 显示的服务区名称从点击的更多记录的那个item里面拿 方法的第二个形参就是item这个对象
            this.popupServiceName = obj.SERVERPART_NAME
            // 两个区一起的数组
            this.popupServiceList = obj.list
            this.popupServiceList.forEach(item=>{
              item.DetailList.forEach(subItem=>{
                subItem.showChild = true
              })
              // 反转给的考核列表 让时间从小到大
              // item.DetailList.reverse()
            })
            // 页面上展示的数组
            this.popupServiceShowList = this.popupServiceList[0]
            console.log('this.popupServiceShowList',this.popupServiceShowList)
            console.log('obj',obj)
            // 方位选项卡的数组判断
            let  list = []
            obj.list.forEach((item,index)=>{
              list.push({label:`${item.REGION_NAME}区`,value:index})
            })
            this.popupTab = list
          }else if (value===3){
            this.popupMeetDetail = obj.list[0].SERVERPARTList[0]
          }else if(value===4){
              this.handleGetExamineDetail(obj)
          }
          // 弹出框显示
          this.showPop = true
        },
        async handleGetExamineDetail(obj){
            const total = await request.$webGet(`CommercialApi/Examine/WeChat_GetExamineDetail`,{ExamineId: obj.SERVERPARTList[0].EXAMINE_ID})
            let list = total.Result_Data.List
            list.forEach(item=>{
                let mark = 0
                item.SERVERPARTList.forEach(subItem=>{
                    subItem.showChild = true
                    mark+=subItem.DEDUCTION_SCORE
                    subItem.imgList = subItem.EXAMINEDETAIL_URL.split(',')
                })
                item.mark = mark
            })
            console.log('list',list)
            this.examineList = list
        },
        handleChangeChild(subItem){
            console.log('subItem',subItem)
            subItem.showChild = !subItem.showChild
        },
        // 打开看整改图片的弹出框
        handleShowImgDetail(subItem){
            if (subItem.PATROL_SITUATION){
              this.showImg = true
            }
        },
        changeDetail(subItem){
          this.showImgUrl = subItem
          this.$forceUpdate()
        },
        previewImage(event,subItem){
            console.log('event',event)
            console.log('subItem',subItem)
          // 预览图片的方法
            wx.previewImage({
                current: event.currentTarget.dataset.src, // 当前显示图片的http链接
                urls: subItem.imgList // 需要预览的图片http链接列表 数组形式
            })
        },
        // 整改的预览图片
        previewShowImage(event,subItem){
          let _this = this
          wx.previewImage({
            current: event.currentTarget.dataset.src, // 当前显示图片的http链接
            urls: _this.showImgUrl.PATROLDEAL_URL?[_this.showImgUrl.PATROLDETAIL_URL,_this.showImgUrl.PATROLDEAL_URL]:[_this.showImgUrl.PATROLDETAIL_URL] // 需要预览的图片http链接列表
          })
        },
        // 弹出框点击蒙层关闭
        hidePopup(){
          this.showPop = false
          // 弹出框选择的选项卡变回默认
          this.popupTabSelect = 0
        },
        // 点击月份改变选中月份
        handleSelectMonth(value){
          this.selectMonth = value
          // 当前时间
          const nowDate = new Date()
          let nowMonth = nowDate.getMonth() + 1
          if (nowMonth<10){
              nowMonth = '0' + nowMonth
          }
          // 搜索时间
          const date = new Date(this.searchTime)
          let y = date.getFullYear()
          // 如果当前的时间 和 选中的时间一样 那么 搜索的时间就是当前时间的前一天 否则就是当前月份的最后一天
          if (nowMonth === this.selectMonth){
            // this.searchTime = this.lastDay
            this.searchTime = new Date()
          }else{
            let howDay = this.$util.getThisMonthDay(`${y}-${this.selectMonth}`)
            this.searchTime = `${y}-${this.selectMonth}-${howDay}`
          }
          let howDay = this.$util.getThisMonthDay(`${y}-${this.selectMonth}`)
          const listDate = new Date(`${y}-${this.selectMonth}`)
          let listY = listDate.getFullYear()
          let listM = listDate.getMonth() + 1
          let list = []
          for (let i = 0;i <= howDay,++i;) {
                if (i>howDay){
                    break
                }else{
                    list.push({label:`${listM}月${i}日`,value:`${listY}-${listM<10?'0'+listM:listM}-${i<10?'0'+i:i}`})
                }
            }
          // 月份改变之后 重新渲染选择日期的数组
          this.dateList = list
          // 当月份改变了之后 日期栏也会根据当前选中的时间  选择新月份默认的时间
          this.selectDate = this.$util.handleReduceAMonth(`${this.selectDate}`,`${y}-${this.selectMonth}`)
          // 日期的自动滚动设置
          const selectTime = new Date(this.selectDate)
          let selectY = selectTime.getFullYear()
          let selectM = selectTime.getMonth() + 1
          // 要让选中的日期展示在最右边 不展示最左边
          let selectD = selectTime.getDate() - 4 > 0?selectTime.getDate() - 4:1
          this.currentDate = 'item' + `${selectY}-${selectM<10?'0'+selectM:selectM}-${selectD<10?'0'+selectD:selectD}`

          if (this.selectTab===1){
            // 选中的是考核管理 调用拿到考核管理的列表
            this.getManagerList()
          }else if (this.selectTab===2){
            // 选中日常巡检 就调用拿到日常巡检的方法
            // 调用日常巡检的方法
            this.getDailyInspectionList()
          }else if(this.selectTab===3){
            // 选中日常巡检 就调用拿到日常巡检的方法
            // 晨会管理列表
            this.getMeetingDetail()
          }
        },
        // 点击选项卡改变选择的种类
        // 根据点击的 去请求这个种类下面的列表
        handleChangeTab(value){
          this.selectTab = value
          uni.showLoading({
            title: '正在加载...'
          })
          if (value===1){
            // 考核管理列表
            this.getManagerList()
          }else if(value===2){
            // 日常巡检列表
            this.getDailyInspectionList()
          }else if (value===3){
            // 晨会管理列表
            this.getMeetingDetail()
          }
        },
        // 返回按钮的方法
        handleBack(){
          if (this.come==='index'){
            uni.switchTab({
              url: '/pages/index/index'
            })
          }else{
            uni.navigateBack({
              delta: 1
            });
          }

        },
        // 选择日期的方法
        handleChangeDate(value){
          const date = new Date()
          let m = date.getMonth() +1
          let d = date.getDate()
          const selectDay = new Date(value)
          let selectM = selectDay.getMonth() +1
          let selectD = selectDay.getDate()
          if (d < selectD && m <= selectM){
            uni.showModal({
              title: `日常巡检仅支持查看${m}月${d}号及之前的数据`,
              icon:'none',
              showCancel: false,
              duration:3000
            })
          }else{
            uni.showLoading({
              title: '正在加载...'
            })
            this.selectDate = value
            // 切换日期日常巡检列表 选项卡为2的时候调用
            if (this.selectTab===2){
              this.getDailyInspectionList()
            }else if(this.selectTab===3){
              // 晨会管理列表
              this.getMeetingDetail()
            }
          }
        },
        // 搜索
        handleNoShow(item){
          console.log('item',item)
          item.showChild = !item.showChild
          this.$forceUpdate()
        },
        hideShowImg(){
          this.showImg = false
          this.showImgUrl = {}
        },
        // 改变弹出框中的选项卡
        handleChangePopupTab(value){
          this.popupTabSelect = value
          // 弹出框选项卡切换 表单内容切换
          this.popupServiceShowList = this.popupServiceList[this.popupTabSelect]
        },
        // 片区列表
        async getAreaList(date){
          const total = await request.$webGet(`CommercialApi/BaseInfo/GetSPRegionList`,{Province_Code:Store.state.userData.ProvinceCode})
          uni.hideLoading()
          if (total.Result_Code===100){
            let list = []
            total.Result_Data.List.forEach(item=>{
              list.push({label:item.name.split('片区')[0],value:item.value})
            })
            this.areaList = list
            // 默认选中第一个片区
            this.selectAreaValue = this.areaList[0].value
            this.selectAreaName = this.areaList[0].label
            // 只能先拿到 selectAreaValue 再去请求列表
            // 获得考核管理列表 第一次进度肯定是考核管理
            if (this.selectTab===1){
              // 考核管理列表
              this.getManagerList(date)
            }else if(this.selectTab===2){
              // 日常巡检列表
              this.getDailyInspectionList()
            }
          }
        },
        // 修改当前选中的片区
        handleChangeArea(item){
          // 选择的片区名称和片区id
          this.selectAreaValue = item.value
          this.selectAreaName = item.label
          uni.showLoading({
            title: '正在加载...'
          })
          if (this.selectTab===1){

            // 考核管理列表重新调用
            this.getManagerList()
          }else if (this.selectTab===2){
            // 日常巡检列表重新调用
            this.getDailyInspectionList()
          }else if(this.selectTab===3){
            // 晨会管理列表
            this.getMeetingDetail()
          }
          // 关闭弹出框方法
          this.hidePopup()
        },
        // 考核管理列表
        async getManagerList(time){
          console.log('time123',time)
          uni.showLoading({
            title: '正在加载...'
          })
          const realDate = new Date(this.lastDay)
          let realMonth = realDate.getMonth() + 1
          let realDay = realDate.getDate()

          const date = time ? new Date(time) :new Date(this.searchTime)
          let y = date.getFullYear()
          let m = date.getMonth() + 1
          let d = date.getDate()
          if (d<10){
            d = '0' + d
          }
          let startTime
          let endTime
          console.log('realMonth',realMonth)
          console.log('m',m)
          if (realMonth>m){
            if (m<10){
              m = '0' + m
            }
            let day = this.$util.getThisMonthDay(`${y}-${m}`)
            startTime=`${y}-${m}-01`
            endTime=`${y}-${m}-${day}`
          }else{
            if (m<10){
              m = '0' + m
            }
            startTime=`${y}-${m}-01`
            endTime=`${y}-${m}-${realDay}`
          }

          const res = await request.$webGet(`CommercialApi/Examine/WeChat_GetExamineList`,{
            SearchStartDate: startTime,// 考核日期（开始时间）
            SearchEndDate: endTime,// 考核日期（结束时间）
            SPRegionType_ID: this.selectAreaValue,// 片区内码，多个片区用","隔开
            Serverpart_ID:'',// 服务区内码，多个服务区用","隔开
          })
          this.serviceList = res.Result_Data
          uni.hideLoading()
        },
        // 日常巡检列表
        async getDailyInspectionList(){
          uni.showLoading({
            title: '正在加载...'
          })
          const res = await request.$webGet(`CommercialApi/Examine/WeChat_GetPatrolList`,{
            SearchStartDate:this.selectDate,// 巡检日期（开始时间）
            SearchEndDate:this.selectDate,// 巡检日期（结束时间）
            SPRegionType_ID:this.selectAreaValue,// 片区内码，多个片区用","隔开
            Serverpart_ID:'',// 服务区内码，多个服务区用","隔开
          })
          this.inspectionList = res.Result_Data

          this.inspectionList.forEach(item=>{
            item.list.forEach(subItem=>{
              let i = 0
              subItem.SERVERPARTList.forEach(thirdItem=>{
                if (thirdItem.COMPLETE_STATE===0){
                  i++
                }
              })
              if (i>0){
                subItem.warning=false
              }else{
                subItem.warning=true
              }
            })
          })

          console.log('inspectionList',this.inspectionList)
          uni.hideLoading()
        },
        // 晨会管理列表
        async getMeetingDetail(){
          const res = await request.$webGet(`CommercialApi/Examine/WeChat_GetMeetingList`,{
            SearchStartDate:this.selectDate,// 巡检日期（开始时间）
            SearchEndDate:this.selectDate,// 巡检日期（结束时间）
            SPRegionType_ID:this.selectAreaValue,// 片区内码，多个片区用","隔开
            Serverpart_ID:'',// 服务区内码，多个服务区用","隔开
          })
          this.meetDetailList = res.Result_Data
          uni.hideLoading()
        }
    }
}

</script>
<style scoped lang="scss">
@import '/static/public/font/stylesheet.css';
.main{
    width: 100%;
    height: calc(100vh - 80px);
    background: #fff;
    .heard{
        width: 100%;
        height: 185px;
        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;
                    justify-content: 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;
                    }
                }
            }
            .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: 366px;
            z-index: 1;
        }
    }
    .content{
        width: 100%;
        box-sizing: border-box;
        padding: 16px 16px 4px;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        position: relative;
        background: #fff;
        z-index:99;
        .date{
            width: 100%;
            height: 31px;
            border-bottom: 1px solid #F3F1F5;
            margin-bottom: 12px;
            .dateList{
                height: 100%;
                white-space: nowrap;
                .dateItem{
                    display: inline-block;
                    margin-right: 16px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                    line-height: 20px;
                }
                .selectDateItem{
                    font-size: 14px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #8441F3;
                    line-height: 20px;
                    position: relative;
                }
                .selectDateItem:after{
                    content:'';
                    display: block;
                    position: absolute;
                    width: 100%;
                    height: 3px;
                    background: rgba(132, 65, 243, 1);
                    bottom: -4px;
                }
            }
        }
        .tab{
            width: 100%;
            height: 38px;
            background: #F3F1F5;
            border-radius: 4px;
            box-sizing: border-box;
            padding: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .tabItem{
                width: 33%;
                height: 100%;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                text-align: center;
                line-height: 30px;
            }
            .selectItem{
                background: #fff;
                font-size: 14px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #8441F3;
                border-radius: 4px;
            }
        }
        .serviceList{
            width: 100%;
            .serviceItem{
                width: 100%;
                box-sizing: border-box;
                padding: 16px;
                border-radius: 8px;
                margin-bottom: 12px;
                background: linear-gradient(314deg, #FFF1F8 0%, #F2F2FF 32%, #FCFAFF 54%, #FCF6FF 70%, #F2EAFF 100%);
                .itemTitle{
                    display: flex;
                    align-items: center;
                    .title{
                        font-size: 18px;
                        font-family: Alimama ShuHeiTi;
                        color: #33077A;
                        line-height: 26px;
                    }
                    .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;
                    }
                }
                .detail{
                    margin-top: 18px;
                    .detailTop{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        border-bottom: 1px solid rgba(212, 196, 244, 0.2);
                        padding: 0 0 8px;
                        .left{
                            display: flex;
                            align-items: center;
                            .icon{
                                width: 22px;
                                height: 22px;
                            }
                            .type{
                                font-size: 14px;
                                font-family: PingFangSC-Semibold, PingFang SC;
                                font-weight: 600;
                                color: #160002;
                                line-height: 20px;
                                margin-left: 8px;
                            }
                        }
                        .right{
                            font-size: 22px;
                            font-family: DINAlternate-Bold, DINAlternate;
                            font-weight: bold;
                            color: #160002;
                            line-height: 22px;
                            .unit{
                                font-size: 12px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #786B6C;
                                line-height: 18px;
                                margin-left: 2px;
                            }
                        }
                    }
                    .detailMessage{
                        margin-top: 14px;
                        .message{
                            display: flex;
                            align-items: center;
                            .icon{
                                width: 16px;
                                height: 16px;
                            }
                            .value{
                                font-size: 14px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #160002;
                                line-height: 20px;
                                margin-left: 8px;
                                width: 90%;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                          .moreIcon{
                            width: 16px;
                            height: 16px;
                          }
                        }
                    }
                }
            }
            .dailyInspection{
                width: 100%;
                height: 267px;
                background: linear-gradient(314deg, #FFF1F8 0%, #F2F2FF 32%, #FCFAFF 54%, #FCF6FF 70%, #F2EAFF 100%);
                border-radius: 8px;
                margin-bottom: 12px;
                box-sizing: border-box;
                padding: 16px;
                .itemTitle{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .title{
                        font-size: 18px;
                        font-family: Alimama ShuHeiTi;
                        color: #33077A;
                        line-height: 26px;
                    }
                    .more{
                        display: flex;
                        align-items: center;
                        .moreText{
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #786B6C;
                            line-height: 20px;
                        }
                        .icon{
                            width: 15px;
                            height: 15px;
                            margin-left: 7px;
                        }
                    }
                }
                .detail{
                    margin-top: 19px;
                    .detailTop{
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .left{
                            display: flex;
                            align-items: center;
                            .icon{
                                width: 22px;
                                height: 22px;
                                margin-right: 8px;
                            }
                            .type{
                                font-size: 14px;
                                font-family: PingFangSC-Semibold, PingFang SC;
                                font-weight: 600;
                                color: #160002;
                                line-height: 20px;
                                margin-right: 4px;
                            }
                            .number{
                                font-size: 14px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #786B6C;
                                line-height: 20px;
                            }
                        }
                        .right{
                            width: 20px;
                            height: 20px;
                        }
                    }
                    .detailMessage{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding-bottom: 16px;
                        .person{
                            margin-top: 12px;
                            .value{
                                font-size: 14px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #160002;
                                line-height: 20px;
                                margin-bottom: 2px;
                            }
                            .label{
                                font-size: 12px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #786B6C;
                                line-height: 18px;
                            }
                            .icon{
                                margin-bottom:-2px;
                                width: 16px;
                                height: 19px;
                            }
                        }

                    }
                }
            }
            .meeting{
                width: 100%;
                height: 209px;
                background: linear-gradient(314deg, #FFF1F8 0%, #F2F2FF 32%, #FCFAFF 54%, #FCF6FF 70%, #F2EAFF 100%);
                border-radius: 8px;
                margin-bottom: 12px;
                box-sizing: border-box;
                padding: 16px;
                .title{
                    font-size: 18px;
                    font-family: Alimama ShuHeiTi;
                    color: #33077A;
                    line-height: 26px;
                    margin-bottom: 18px;
                }
                .meetContent{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding-bottom: 8px;
                    border-bottom: 1px solid rgba(212, 196, 244, 0.2);
                    .left{
                        display: flex;
                        align-items: center;
                        .icon{
                            width: 24px;
                            height: 24px;
                            margin-right: 8px;
                        }
                        .text{
                            font-size: 14px;
                            font-family: PingFangSC-Semibold, PingFang SC;
                            font-weight: 600;
                            color: #160002;
                            line-height: 20px;
                        }
                    }
                    .right{
                        display: flex;
                        align-items: center;
                        .icon{
                            width: 12px;
                            height: 12px;
                            margin-right: 4px;
                        }
                        .text{
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #160002;
                            line-height: 20px
                        }
                    }
                }
              .noDataItem{
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 6px;
                .img{
                  width: 80px;
                  height: 80px;
                }
                .text{
                  text-align: center;
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #A69E9F;
                }
              }
                .detail{
                    margin-top: 12px;
                    .message{
                        display: flex;
                        align-items: center;
                        position: relative;
                        .icon{
                            width: 16px;
                            height: 16px;
                        }
                        .value{
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #160002;
                            line-height: 20px;
                            margin-left: 8px;
                            width: 90%;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }
                        .more{
                            width: 12px;
                            height: 12px;
                            position: absolute;
                            right: 0;
                        }
                    }
                    .other{
                        display: flex;
                        align-items: flex-start;
                        position: relative;
                        .icon{
                            width: 16px;
                            height: 16px;
                            margin-top: 2px;
                        }
                        .value{
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #160002;
                            line-height: 20px;
                            margin-left: 8px;
                            width: 90%;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                        }
                        .more{
                            width: 12px;
                            height: 12px;
                            position: absolute;
                            right: 0;bottom: 3px;
                        }
                    }
                }
            }
            .noData{
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-top: 20vh;
              .img{
                width: 80px;
                height: 80px;
              }
              .text{
                text-align: center;
                font-size: 20px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #A69E9F;
                line-height: 20px;
                margin-top: 8px;
              }
            }
        }
    }
    .popup{
        width: 100%;
        box-sizing: border-box;
        padding: 16px;
        .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: 100%;
            height: calc(60vh - 70px);
            margin-top: 12px;
            overflow-y: scroll;
            .item{
                width: 100%;
                font-size: 14px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #160002;
                line-height: 20px;
                text-align: left;
                padding:9px 12px;
                box-sizing: border-box;
                .unit{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                    line-height: 18px;
                }
            }
            .selectItem{
                background: RGBA(243, 235, 255, 0.5);
            }
        }
        .serviceList{
          .assessmentTable{
            width: 100%;
            height: calc(78vh - 150px);
            box-sizing: border-box;
            overflow-y: scroll;
            .bigBox{
              border-radius: 16rpx;
              border: 2rpx solid #D9DBE0;
              margin-top: 12px;
              .assessmentItem{
                width: 100%;
                box-sizing: border-box;
                padding: 16px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: linear-gradient(314deg, #EAEFFF 0%, #F3F5FF 32%, #F5FCFF 50%, #F0F7FF 67%, #DBE5FF 100%);
                border-radius: 16rpx;
                border-bottom: 2rpx solid #D9DBE0;
                .left{
                  font-size: 16px;
                  font-family: AlimamaShuHeiTi;
                  color: #1A5FFF;
                  line-height: 22px;
                  background: rgba(26, 95, 255, 0.1);
                  border-radius: 14px;
                  padding: 4px 16px;
                  display: inline-block;
                }
                .right{
                  display: flex;
                  align-items: center;
                  .label{
                    font-size: 14px;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: 400;
                    color: #160002;
                    .name{
                      font-size: 16px;
                      font-family: DINAlternate-Bold, DINAlternate;
                      font-weight: 600;
                      color: #160002;
                      margin-left: 4px;
                    }
                  }
                  .more{
                    width: 14px;
                    height: 26px;
                    margin-left: 8px;
                  }
                }
              }
              .smallItem{
                box-sizing: border-box;
                padding: 16px;
                border-bottom: 2px solid #EEEEEE;
                .top{
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 12px;
                  .time{
                    font-size: 16px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                  }
                  .label{
                    font-size: 14px;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: 400;
                    color: #160002;
                    .name{
                      font-size: 16px;
                      font-family: DINAlternate-Bold, DINAlternate;
                      font-weight: 600;
                      color: #160002;
                      margin-left: 4px;
                    }
                  }
                }

                .itemBox{
                  width: 100%;
                  display: flex;
                  align-items: flex-end;
                  .detailItem{
                      width: 100%;
                      .detailValue{
                        .right{
                          width: 20px;
                          height: 20px;
                        }
                        .detailText{
                          font-size: 14px;
                          font-family: PingFangSC-Regular, PingFang SC;
                          font-weight: 400;
                          color: #160002;
                          line-height: 20px;
                        }
                      }
                      .detailLabel{
                        font-size: 24rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #786B6C;
                        line-height: 36rpx;
                      }
                  }
                }
              }

            }
          }
            .tab{
                width: 100%;
                height: 38px;
                background: #F3F1F5;
                border-radius: 4px;
                margin-top: 16px;
                box-sizing: border-box;
                padding: 4px;
                margin-bottom: 8px;
                .tabItem{
                    display: inline-block;
                    width: 50%;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                    line-height: 30px;
                }
                .selectTabItem{
                    background: #fff;
                    border-radius: 4px;
                }
            }
            .list{
                margin-top: 12px;
                height: calc(78vh - 130px);
                overflow-y: scroll;
                .item{
                    display: flex;
                    justify-content: space-between;
                    .person{
                        margin-top: 12px;
                        text-align: left;
                        .value{
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #160002;
                            line-height: 20px;
                            margin-bottom: 2px;
                        }
                        .label{
                            font-size: 12px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #786B6C;
                            line-height: 18px;
                        }
                        .icon{
                            margin-bottom:-2px;
                            width: 16px;
                            height: 19px;
                        }
                    }
                }
            }
        }
        .meetList{
            margin-top: 16px;
            height: calc(60vh - 80px);
            overflow-y: scroll;
            .message{
                display: flex;
                align-items: flex-start;
                .icon{
                    width: 16px;
                    height: 16px;
                    margin-top: 2px;
                }
                .value{
                    display: inline-block;
                    text-align: left;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #160002;
                    line-height: 20px;
                    margin-left: 8px;
                    width: 90%;
                }
            }
        }
        .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%;
                    .img{
                      width: 40px;
                      height: 40px;
                      margin-right: 8px;
                    }
                  }

                }
              }
            }
        }
    }
    .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>
