<template>
  <view class="main">
<!--    <div style="position: fixed;right: 0;top: 5%;z-index:99999999999">-->
<!--      &lt;!&ndash;  组件通过传入的have去判断组件在哪个页面 然后哪个页面的标志就不显示  &ndash;&gt;-->
<!--      <commercial-type :have="6" :time="time"/>-->
<!--    </div>-->
    <view class="headerBox" :style="{top:menu.top  + 'px',height:menu.height+'px'}">
      <image class="arrowIcon" @click="handleBack" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"/>
      <!--            <view class="center">{{type===1?'考核考评':'日常巡检'}}</view>-->
      <div class="pickerTop" @click="handleGoSelectService">
        <div class="selectService">
          <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
          <view class="select">
            <view class="content">
              <view class="uni-input">{{serviceInfo.SERVERPART_NAME}}</view>
              <p class="area" v-if="serviceInfo.Serverpart_ID">{{serviceInfo.SPREGIONTYPE_NAME}}</p>
              <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg" ></image>
            </view>
          </view>
        </div>
      </div>
      <view class="right"></view>
    </view>
    <swiper class="swiperBox" :current="currentSwiper" @change="changeSwiper">
      <swiper-item class="swiperItem" v-for="(item,index) in carSwiperList" :key="index">
        <view v-if="item!=='previous' && item!=='next'" class="header" :style="{background:`url(${item})`}">
          <view class="sliderBox" :style="{top:(menu.bottom + 24)  + 'px'}">
            <SliderPage :index="type===1?6:7"/>
          </view>
        </view>
        <view v-else></view>
      </swiper-item>
    </swiper>

<!--    <view class="bigContent" :style="{top: menu.bottom + 100 + 'px'}">-->
    <view class="bigContent" style="top: 324px">
      <view class="contentTop">
        <view class="nameTop">{{type===1?'考核考评':'日常巡检'}}</view>
        <view class="timeBox">{{time}}</view>
      </view>
      <view class="content">
        <view v-if="type===1"  class="serviceList" style="height:calc(100vh - 260px);">
          <view v-if="serviceList && serviceList.length>0">
            <view class="serviceItem" v-for="(item,index) in serviceList" :key="index" >
              <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(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 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="type===2" class="serviceList" style="height:calc(100vh - 300px);">
          <view v-if="inspectionList && 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(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 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>
    </view>

    <uniPopup type="bottom" :round="true" :showIndex="1" :show="showPop" @hidePopup="hidePopup">
      <view class="popup" :style="{height:type===1?'60vh':'78vh'}">
        <view class="top">
          <text class="popupTitle">{{ type===1?'考核考评':`${popupServiceName}` }}</text>
          <image @click="hidePopup" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"></image>
        </view>
        <view class="examineList" v-if="type===1" style="margin-top: 30rpx">
          <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 class="serviceList" v-if="type===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>
    </uniPopup>
  </view>
</template>

<script >
import request from '@/util/index.js'
import uniPopup from '@/components/uni-popup'
import CommercialType from "./commercialType.vue";
import SliderPage from "./sliderPage.vue";
export default {
  components:{
    SliderPage,
    CommercialType,
    uniPopup
  },
  data(){
    return {
      serviceList:[],
      inspectionList:[],// 日常巡检列表
      examineList:[],
      popupServiceShowList: {},
      currentService:{},
      time: '',
      showPop:false,
      type:1,
      popupServiceName:'',
      popupServiceList:[],
      popupTab:[],
      popupTabSelect:0,// 选中的弹出框选项卡
      statusBarHeight:'',
      menu:{},
      carSwiperList:['previous','https://eshangtech.com/ShopICO/ahyd-BID/examine/bg.png','next'],
      currentSwiper:1,
      serviceInfo:''
    }
  },
  onLoad(query){
    // 获取手机参数对页面进行适配 主要是用于拿到胶囊的位置
    let systemInfo = uni.getSystemInfoSync()
    this.menu = uni.getMenuButtonBoundingClientRect()
    console.log('this.menu',this.menu)

    let currentService = uni.getStorageSync('currentService')
    let lastDay = uni.getStorageSync('lastDay')
    this.currentService = currentService
    this.time = lastDay
    this.type = Number(query.type)
    if (this.type===1){
      this.handleGetExamineList()
    }else{
      this.getDailyInspectionList()
    }
    console.log('query',query)
  },
  onShow(){
    let storeServiceInfo = uni.getStorageSync('currentService')
    this.serviceInfo = storeServiceInfo
    uni.setNavigationBarTitle({
      title: this.type===1?'考核考评':'日常巡检'
    });
  },
  methods:{
    handleBack(){
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    //跳转到地图
    handleGoSelectService() {
      uni.navigateTo({
        url:`/pages/map/index?chartType=${true}&page=/pages/examine/detail&serviceInfo=${JSON.stringify(this.serviceInfo)}`
      })
    },
    // 滚动轮播图
    changeSwiper(e){
      console.log('e',e)
      this.currentSwiper = e.detail.current
      let value = this.carSwiperList[Number(e.detail.current)]
      if (this.type===1){
        if (value==='previous'){
          uni.redirectTo({
            url:`/pages/commercialBI/formatPortraitBI`
          })
        }else if(value==='next'){
          uni.redirectTo({
            url:`/pages/examine/detail?type=${2}`
          })
        }
      }else{
        if (value==='previous'){
          uni.redirectTo({
            url:`/pages/examine/detail?type=${1}`
          })
        }else if(value==='next'){
          uni.redirectTo({
            url:`/pages/map/detail`
          })
        }
      }
    },
    handleChangeChild(subItem){
      console.log('subItem',subItem)
      subItem.showChild = !subItem.showChild
    },
    previewImage(event,subItem){
      console.log('event',event)
      console.log('subItem',subItem)
      // 预览图片的方法
      wx.previewImage({
        current: event.currentTarget.dataset.src, // 当前显示图片的http链接
        urls: subItem.imgList // 需要预览的图片http链接列表 数组形式
      })
    },
    // 弹出框点击蒙层关闭
    hidePopup(){
      this.showPop = false
      // 弹出框选择的选项卡变回默认
      this.popupTabSelect = 0
    },
    async handleGetExamineList(){
      uni.showLoading({
        title: '正在加载...'
      })
      const date = new Date(this.time)
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()
      if (m<10){
        m = '0'+m
      }
      if (d<10){
        d = '0'+d
      }
      let req
      if (this.currentService.SERVERPART_NAME==='安徽驿达'){
        req = {
          SearchStartDate:`${y}-${m}-01`,
          SearchEndDate:`${y}-${m}-${d}`,
        }
      }else{
        req = {
          SearchStartDate:`${y}-${m}-01`,
          SearchEndDate:`${y}-${m}-${d}`,
          Serverpart_ID:this.currentService.Serverpart_ID
        }
      }
      const total = await request.$webGet(`CommercialApi/Examine/WeChat_GetExamineList`,req)
      this.serviceList = total.Result_Data
      uni.hideLoading()
    },
    // 搜索
    handleNoShow(item){
      console.log('item',item)
      item.showChild = !item.showChild
      this.$forceUpdate()
    },
    // 改变弹出框中的选项卡
    handleChangePopupTab(value){
      this.popupTabSelect = value
      // 弹出框选项卡切换 表单内容切换
      this.popupServiceShowList = this.popupServiceList[this.popupTabSelect]
    },
    handleShowPopup(obj){
      this.showPop = true
      if (this.type===1){
        this.handleGetExamineDetail(obj)
      }else{
        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)
        // 方位选项卡的数组判断
        let  list = []
        obj.list.forEach((item,index)=>{
          list.push({label:`${item.REGION_NAME}区`,value:index})
        })
        this.popupTab = list
      }

    },
    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
    },
    // 打开看整改图片的弹出框
    handleShowImgDetail(subItem){
      if (subItem.PATROL_SITUATION){
        this.showImg = true
      }
    },
    // 日常巡检列表
    async getDailyInspectionList(){
      uni.showLoading({
        title: '正在加载...'
      })
      const date = new Date(this.time)
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()
      if (m<10){
        m = '0'+m
      }
      if (d<10){
        d = '0'+d
      }
      let req
      if (this.currentService.SERVERPART_NAME==='安徽驿达'){
        req = {
          SearchStartDate:`${y}-${m}-01`,// 巡检日期（开始时间）
          SearchEndDate:`${y}-${m}-${d}`,// 巡检日期（结束时间）
          SPRegionType_ID:'',// 片区内码，多个片区用","隔开
        }
      }else{
        req = {
          SearchStartDate:`${y}-${m}-01`,// 巡检日期（开始时间）
          SearchEndDate:`${y}-${m}-${d}`,// 巡检日期（结束时间）
          SPRegionType_ID:'',// 片区内码，多个片区用","隔开
          Serverpart_ID:this.currentService.Serverpart_ID,// 服务区内码，多个服务区用","隔开
        }
      }

      const res = await request.$webGet(`CommercialApi/Examine/WeChat_GetPatrolList`,req)
      this.inspectionList = res.Result_Data
      if (this.inspectionList && this.inspectionList.length>0){
        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()
    },
  }
}
</script>



<style scoped lang="scss">
.main{
  width: 100%;
  height: 100vh;
  position: relative;
  .headerBox{
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    padding: 0 32rpx;
    display: flex;
    align-items: center;
    z-index: 3;
    .arrowIcon{
      width: 48rpx;
      height: 48rpx;
    }
    .pickerTop{
      margin-left: 16rpx;
      .selectService{
        display: flex;
        align-items: center;
        .img{
          width: 40px;
          height: 40px;
          z-index: 2;
        }
        .select{
          height: 32px;
          background: #F8F8FA;
          border-radius: 0 16px 16px 0;
          transform: translateX(-20px);
          box-sizing: border-box;
          padding-left: 25px;
          display: flex;
          align-items: center;
          .content{
            display: flex;
            align-items: center;
            .uni-input{
              padding: 0;
              background: transparent;
              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;
              line-height: 40px;
              margin-left: 4px;
            }
            .rightArrow{
              width: 24px;
              height: 12px;
            }
          }

        }
      }
    }
  }
  .swiperBox{
    width:100%;
    height: 340px;
    position: relative;
    .swiperItem{
      width:100%;
      height: 340px;
      //background: url("https://eshangtech.com/ShopICO/ahyd-BID/examine/bg.png")no-repeat;
      .header {
        width: 100%;
        height: 340px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;

        .sliderBox {
          position: absolute;
          left: 0;
          width: 100%;
          background: #E5D5FF;
          padding-bottom: 12rpx;
        }
      }
    }
  }
  .bigContent{
    width: 100%;
    position: absolute;
    z-index:2;
    background: #fff;
    left: 0;
    border-top-left-radius: 32rpx;
    border-top-right-radius: 32rpx;
    .contentTop{
      width: 100%;
      box-sizing: border-box;
      padding: 0 32rpx;
      height: 40px;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 32rpx;
      //.nameTop{
      //
      //}
      //.timeBox{
      //
      //  display: flex;
      //  align-items: center;
      //  justify-content: flex-end;
      //}
    }

    .content{
      width: calc(100% - 64rpx);
      height: calc(100vh - 380px);
      margin-left: 32rpx;
      overflow-y: scroll;
      .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;
          }
        }
      }
      .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;
              }
            }

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

          }
        }
      }
    }
    .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;
            }
          }
        }
      }
    }
  }
}
</style>
