<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" style="transform: rotate(-180deg)" src="/static/images/newExamine/rightIcon.svg"/>
              <view class="dateBox">
                <image class="dateIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/1stDateTime.svg"></image>
                <text class="dateText">2023/08/09</text>
              </view>
              <image class="leftIcon" src="/static/images/newExamine/rightIcon.svg"/>
            </view>
          </view>
        </view>


        <view class="tabBox" :style="{top:(menu.bottom+18)+'px'}">
          <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">92</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">92</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">92</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">17</text>
                <text class="itemLabel">整改中<text class="itemValue">/个</text></text>
              </view>
              <view class="dailyItem">
                <text class="itemValue">6</text>
                <text class="itemLabel">未整改<text class="itemValue">/个</text></text>
              </view>
              <view class="otherItem">
                <view class="otherLeft">
                  <YearCharts :success="rate"/>
                </view>
                <view class="otherDetail">
                  <text class="itemValue">92.81%</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">
            <text class="sortLabel">排序</text>
            <image class="sortIcon" src="/static/images/newExamine/sort.svg"/>
          </view>
        </view>

        <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="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">
                  <text class="itemName">{{item.SERVERPART_NAME}}</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>
                <image class="rightIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
              </view>

              <view class="itemDetail">
                <view class="detailItem" v-for="(subItem,subIndex) in item.list">
                  <view class="fixBox">{{ subItem.REGION_NAME }}</view>
                  <view class="markBox">
                    <text class="markValue">{{subItem.SERVERPARTList[0].EXAMINE_SCORE}}<text class="markUnit">分</text></text>
                    <view class="progress">
                      <view class="have" :style="{width: subItem.SERVERPARTList[0].EXAMINE_SCORE+'%'}"></view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
      <!--  日常巡检  -->
      <view class="contentBox" v-if="selectTab===2">
        <view class="contentTop">
          <text class="contentTitle">服务区排名</text>
          <view class="sort">
            <text class="sortLabel">排序</text>
            <image class="sortIcon" src="/static/images/newExamine/sort.svg"/>
          </view>
        </view>

        <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="dailyList">
          <scroll-view class="big" :show-scrollbar="false" scroll-with-animation  scroll-y="true" enable-flex>
            <view class="scrollItem" v-for="(item,index) in 20" :key="index">
              <view class="scrollItemTop">
                <view class="scrollTopLeft">
                  <text class="scrollName">黄山服务区</text>
                  <image class="rightIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
                </view>

                <view class="scrollTopRight">
                  <text class="scueessNum">1</text>
                  <text class="all">/6</text>
                </view>
              </view>

              <view class="detailMark">
                <text class="wordHeader">描述</text>
                <text class="wordValue">广场、洗漱台、绿化带、宣传栏、标识标牌、垃圾桶、玻璃门窗、镜面保洁</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">{{ 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">
          <view class="popupDetail">
            <scroll-view :show-scrollbar="false" scroll-with-animation  scroll-y="true" enable-flex class="detailLeft" :scrollIntoView="selectMenu">
              <view :id="index" :class="index===selectMenu?'serviceSelect currentSelect':'serviceSelect'" v-for="(item,index) in serviceList" :key="index" @click="handleChangeMenu(index,item)">{{item.SERVERPART_NAME.split('服务区')[0]}}</view>
            </scroll-view>

            <view 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"><text class="unit">分</text></view>
                </view>

                <view class="detailItemMessage" v-for="(subItem,subIndex) in item.SERVERPARTList" :key="subIndex">
                  <view class="messageItem">
                    <image class="itemIcon" src="/static/images/newExamine/userIcon.svg"/>
                    <text class="itemValue">{{subItem.EXAMINE_PERSON}}</text>
                  </view>
                  <view class="messageItem">
                    <image class="itemIcon" src="/static/images/newExamine/timeIcon.svg"/>
                    <text class="itemValue">{{subItem.EXAMINE_OPERATEDATE}}</text>
                  </view>
                  <view class="messageBox">
                    <view class="messageBoxTop">
                      <view class="messageBoxTopLeft">
                        <image class="fixedIcon" src="/static/images/newExamine/fixedIcon.svg"/>
                        <text class="name">便利店</text>
                      </view>
                      <view class="messageBoxTopRight">
                        <text class="mark">-2<text class="unit">分</text></text>
                      </view>
                    </view>
                    <view class="desc">便利店标签内容与信息不符, 酒类商品无温馨提示; </view>
                    <view 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>-->
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </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";
import YearCharts from "./component/yearCharts.vue";
export default {
  components:{
    YearCharts,
    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}],// tab选项卡  ,{label:'晨会管理',value:3}
      selectTab:1,// 选中的tab选项卡
      serviceAllList:[],// 三种类型总的服务区考核信息
      serviceList:[],// 服务区列表
      inspectionList:[],// 日常巡检列表
      meetDetailList:[],// 晨会管理列表
      scrollTop:0,// 页面整体滚动了多少
      windowHeight:0,// 页面高度
      dateList:[],// 日历滚动条
      selectDate:'',// 当前选中的日期
      currentDate:'',// 当前选中的月份
      popupShow:1,
      popupTab:[],// 弹出框中的选项卡
      popupTabSelect:0,// 选中的弹出框选项卡
      popupServiceList:[],// tab选中第二个的时候的点击更多记录全部表单
      popupServiceShowList:[],// 显示的表单内容
      popupServiceName:'',// 点击更多记录的表单名称
      popupMeetDetail:{},// 弹出框的会议详情内容
      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,// 选中左侧菜单的第几个
    }
  },
  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)
    setTimeout(()=>{
      this.rate = 92.81
    },100)
  },
  onReady(){
    // 只有在页面已经渲染好了 才能把选中的日期 移到可视区域里面
    var _this = this;
    _this.getThisMonth()
  },
  methods:{
    handleDetail(item,index){
      this.selectMenu = index
      console.log(item)
      this.handleGetExamineDetail(item.list[0],true)
    },
    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}`)
      if (this.selectTab===1){
        // 考核管理列表
        this.getManagerList(date)
      }else if(this.selectTab===2){
        // 日常巡检列表
        this.getDailyInspectionList()
      }
    },
    // 是否显示弹出框
    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,type){
      uni.showLoading({
        title: '正在加载...'
      })
      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
      uni.hideLoading()
      if (type){
        this.showPop = true
      }
    },
    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()
      }
    },
    handleChangeContentTab(value){
      this.selectContentTab = value
      this.serviceList = this.serviceAllList[value - 1]
    },
    handleChangeMenu(value,obj){
      this.selectMenu = value
      this.currentObj = obj
      console.log('obj',this.currentObj)
    },
    handleChangeDailyTab(value){
      this.selectDaily = value
    },
    // 点击选项卡改变选择的种类
    // 根据点击的 去请求这个种类下面的列表
    handleChangeTab(value){
      this.selectTab = value
      uni.showLoading({
        title: '正在加载...'
      })
      if (value===1){
        // 考核管理列表
        this.getManagerList()
      }else if(value===2){
        // 日常巡检列表
        this.getDailyInspectionList()
      }
    },
    // 返回按钮的方法
    handleBack(){
      if (this.come==='index'){
        uni.switchTab({
          url: '/pages/index/index'
        })
      }else{
        uni.switchTab({
          url: '/pages/userCenter/userCenter'
        })
      }

    },
    // 选择日期的方法
    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

      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}-${d}`
      }

      const res = await request.$webGet(`CommercialApi/Examine/WeChat_GetExamineList`,{
        // SearchStartDate: startTime,// 考核日期（开始时间）
        // SearchEndDate: endTime,// 考核日期（结束时间）
        SearchStartDate: '2023-07-01',
        SearchEndDate: '2023-07-31'
      })
      let list = []
      let good = []
      let normal = []
      let bad = []
      res.Result_Data.forEach(item=>{
        item.list.forEach(subItem=>{
          subItem.SERVERPARTList.forEach(thirdItem=>{
            if (thirdItem.EXAMINE_SCORE>=90){
              good.push(item)
            }else if(thirdItem.EXAMINE_SCORE>=80 && thirdItem.EXAMINE_SCORE<90){
              normal.push(item)
            }else if (thirdItem.EXAMINE_SCORE<80){
              bad.push(item)
            }
          })
        })
      })
      console.log('res',res)
      list = [good,normal,bad]
      this.serviceAllList = JSON.parse(JSON.stringify(list))
      this.serviceList = this.serviceAllList[this.selectContentTab - 1]
      console.log('this.serviceAllList',this.serviceAllList)
      console.log('this.serviceList',this.serviceList)
      uni.hideLoading()
    },
    // 日常巡检列表
    async getDailyInspectionList(){
      const res = await request.$webGet(`CommercialApi/Examine/WeChat_GetPatrolList`,{
        SearchStartDate:this.selectDate,// 巡检日期（开始时间）
        SearchEndDate:this.selectDate,// 巡检日期（结束时间）
      })
      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);
  .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: 26rpx;
              height: 26rpx;
            }
            .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: 100%;
        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("/static/images/newExamine/tabIcon.svg");
          width: 56rpx;
          height: 16rpx;
          position: absolute;
          left: 50%;bottom: -4px;
          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{
        margin-top: 32rpx;
        .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;
        }
      }

      .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;
                .itemName{
                  font-size: 28rpx;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #160002;
                  line-height: 40rpx;
                  margin-right: 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;
                }
              }
              .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% - 172rpx);
        margin-top: 24rpx;
        .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;
                .scrollName{
                  font-size: 28rpx;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #160002;
                  line-height: 40rpx;
                }
                .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;
              }
            }
          }
        }
      }
    }
  }





  .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;
    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(100vh - 108rpx);
          .serviceSelect{
            padding:24rpx 32rpx;
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #160002;
            line-height: 44rpx
          }
          .currentSelect{
            font-size: 32rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #EC6C00;
            line-height: 44rpx;
            position: relative;
          }
          .currentSelect:before{
            content:'';
            display: inline-block;
            width: 6rpx;
            height: 32rpx;
            background: #EC6C00;
            position: absolute;
            left: 0;top: 50%;
            transform: translateY(-50%);
          }
        }

        .serviceDetail{
          width: calc(100vw - 184rpx);
          height: calc(100vh - 108rpx);
          .serviceDetailItem{
            width: 100%;
            box-sizing: border-box;
            padding: 24rpx;
            .detailItemTop{
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .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;
                }
              }
            }
            .detailItemMessage{
              margin-top: 16rpx;
              .messageItem{
                display: flex;
                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;
                }
              }
              .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;
                    .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{
                        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;
                }
                .imgList{
                  width: 100%;
                  .img{
                    width: 88rpx;
                    height: 88rpx;
                    margin-right: 16rpx;
                  }
                }
              }
            }
          }
        }
      }
    }
    .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>
