<template>
  <scroll-view class="main" scroll-y="true">
<!--    <div style="position: fixed;right: 0;top: 20%;z-index:99999999999">-->
<!--      <commercial-type :have="4"/>-->
<!--    </div>-->
    <header-top ref="headerTop" :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :analyseInfo="analyseInfo" :topBg="topBg" :page="page" :backType="backType"
                :serverpartName="serviceInfo.SERVERPART_NAME" :spregionTypeName="serviceInfo.SPREGIONTYPE_NAME" :serviceInfo="serviceInfo"
                :topLeftBg="topLeftBg" :topLeftColor="topLeftColor" :iconObj="iconObj" :haveIconObj="haveIconObj" :detailBoxBg="detailBoxBg"
                :haveFun="haveFun" :serviceTypeObj="serviceTypeObj" :serviceInfoObj="serviceInfoObj" :pageType="pageType" :pageIndex="5"/>
    <div class="charts">
      <div class="chartsItem" >
        <view class="top">
          <p class="title">品牌指数</p>
<!--          <view class="btnBox">-->
<!--            <view :class="selectTypeNumber===1?'btnItem selectItem':'btnItem'" @click="handleSelectType(1)">盈足</view>-->
<!--            <view :class="selectTypeNumber===2?'btnItem selectItem':'btnItem'" @click="handleSelectType(2)">不盈足</view>-->
<!--          </view>-->
        </view>
        <div >
          <div class="labelList">
            <div :class="item[5]?'labelItem labelItemSelect':'labelItem labelItemUnSelect'"  v-for="(item,index) in brandLabelList" :key="index" @click="changeLabel(item)">
              <image class="icon" :src="item[4]"></image>
              <p class="name">{{item[0]}}<text class="number">({{item[1]}})</text></p>
            </div>
          </div>
          <band-number v-if="brandInfoList.length>0" :data="brandInfoList"/>
        </div>
        <no-data v-if="!brandInfoList.length"/>
      </div>

      <div class="chartsItem" style="margin-top: 32px">
        <div class="top">
          <p class="title">业态占比</p>
          <div class="time">
            <div class="select">
              <picker mode="date" fields="month" :value="single" :start="startDate" :end="endData"  @change="bindDateChange" >
                <view class="time">
                  <view class="uni-input"  style="background: transparent;padding: 0;height:100%">{{ single }}</view>
                  <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/arrow_bottom.svg"></image>
                </view>
              </picker>
            </div>
          </div>
        </div>
        <div >
          <filling-degree  :data="fillDegreeList" @handleChangeBandLevel="handleChangeBandLevel" :isClick="isClick"/>
          <analyse :analyseInfo="{analysisins_type: 1502,analysisins_format: 2000}" />
        </div>
      </div>
      <!--            <div class="chartsItem" style="margin-top: 32px">-->
      <!--                <p class="title">品牌消费水平<text class="unit"></text></p>-->
      <!--                <div v-if="bandLevelList.length>0">-->
      <!--                    <band-level :data="bandLevelList"/>-->
      <!--                    <analyse :analyseInfo="{analysisins_type: 1503,analysisins_format: 2000}" />-->
      <!--                </div>-->
      <!--                <no-data v-else/>-->
      <!--            </div>-->
      <!--            <div class="chartsItem" style="margin-top: 32px">-->
      <!--                <p class="title">业态消费水平<text class="unit"></text></p>-->
      <!--                <div v-if="consumLevelList.series.length>0">-->
      <!--                    <consumption-level :data="consumLevelList" />-->
      <!--                    <analyse :analyseInfo="{analysisins_type: 1504,analysisins_format: 2000}" />-->
      <!--                </div>-->
      <!--                <no-data v-else/>-->
      <!--            </div>-->
    </div>
  </scroll-view>
</template>

<script>
import request from '@/util/index.js'
import headerTop from "./components/headerTop.vue";
import analyse from "./components/analyse.vue";
import FillingDegree from "./components/format/fillingDegree.vue";
import BandLevel from "./components/bussiness/bandLevel.vue";
import ConsumptionLevel from "./components/format/consumLevel.vue";
import BandNumber from "./components/format/bandNumber.vue";
import NoData from "./components/noData.vue";
import {getFieldEnum} from "../../../util/dateTime/index";
import SliderPage from "./components/sliderPage.vue";

export default {
  name: "businessPortrait",
  components: {
    SliderPage,
    NoData, BandNumber, ConsumptionLevel, BandLevel, FillingDegree, analyse, headerTop},
  data() {
    return {
      topBg:'linear-gradient(180deg, #C6C1F0 0%, #CECBF3 100%);',//顶部组件的悬浮背景色
      labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
      title:'业态品牌',//页面标题
      bgColor: '180deg, #459FFF 0%, #473AFF 100%',
      bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/formatPortraitBIBg.svg',//背景图片路径
      page:'/pages/commercialBI/formatPortrait',

      pageType:4000,
      detailBoxBg:'linear-gradient(136deg, #F7F3FF 0%, #FFFFFF 100%);',
      topLeftBg:'linear-gradient(180deg, rgba(69, 159, 255, 0.2) 0%, rgba(71, 58, 255, 0.2) 100%)',// 类别背景
      topLeftColor:'#473DFF',// 类别文字颜色
      iconObj:{
        car:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carFormat.svg',
        charge:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/chargeFormat.svg',
        bady:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/badyFormat.svg',
        guestRoom:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/guestFormat.svg'
      },
      haveIconObj:{
        have:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/haveFormat.svg',
        noHave:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/noHaveFormat.svg'
      },


      time: '',//跳转携带的时间
      menu: {},//手机配置信息
      fillDegreeList:[],//业态充盈度
      bandLevelList:[],//品牌消费水平
      consumLevelList:[],//业态消费水平
      brandLabelList:[],//品牌指数标签列表
      brandLabelListNoChange:[],//把第一次进来请求到的标签列表存起来
      brandInfoList:[],//品牌指数列表
      brandInfoListNoChange:[],//把第一次请求到的全部品牌指数列表存起来
      serviceInfo:{}, //当前服务区信息
      backType:'',//返回的页面类型
      analyseInfo:{
        analysisins_type: 1501 // 传给headTop组件的
      },
      selectKey:'',//有数据的话
      str:'',
      isClick:true,//图表是否能点击
      single:'',//显示时间
      thisMonth:'',//几月
      endData:'', // 结束时间
      haveFun:{},
      startDate:'',// 开始时间
      serviceTypeObj:{},// 服务区类型对象
      serviceInfoObj:{},
      selectTypeNumber:0
    }
  },
  props:{
    selectIndex:{
      type:Number,
      default:0
    }
  },
  watch:{
    selectIndex:{
      handler(value){
        console.log('byssiness',value)
        if (value===5){
          this.handleGetPageData()
        }
      },
      immediate:true
    }
  },
  onLoad(option) {
    // if (option){
    //   if (option.serviceInfo){
    //     this.serviceInfo = JSON.parse(option.serviceInfo)
    //   }
    //   this.backType = option.type
    //   //跳转的时候带上时间
    //   this.time = option.time
    // }
    // this.endData = uni.getStorageSync('lastDay')
    // this.startDate = '2023-01-01'
    // // 服务区类型枚举
    // this.handleServiceType()
  },
  onShow(){
    // let storeTime = uni.getStorageSync('lastDay')
    // if (storeTime){
    //   this.time = storeTime
    // }
    // this.single = this.$util.getThisMonthHave(this.time)
    // const date = new Date(this.single)
    // let m = date.getMonth() + 1
    // if (m<10){
    //   m = '0' + m
    // }
    // this.thisMonth = m
    // let storeServiceInfo = uni.getStorageSync('currentService')
    // if (storeServiceInfo){
    //   this.serviceInfo = storeServiceInfo
    // }
    // //  获取手机参数对页面进行适配
    // let systemInfo = uni.getSystemInfoSync()
    // // 把获取到的手机参数保存
    // uni.setStorageSync('phoneInfo', systemInfo)
    // this.statusBarHeight = Number(systemInfo.statusBarHeight)
    // this.menu = uni.getMenuButtonBoundingClientRect()
    // if (!storeServiceInfo){
    //   this.nearestService()
    // }
    // //业态充盈度
    // this.getFillDegreeList()
    // // //品牌消费水平
    // // this.getBandLevelList()
    // // //业态消费水平
    // // this.getConsumLevelList()
    // //品牌指数列表
    // this.getBrandInfoList()
    // //   服务区基本信息
    // this.getServiceInfo()
    // this.handleChangeCurrent()
  },
  onUnload() {
    this.$util.addUserBehavior()
  },
  methods:{
    // 盈足不盈足
    handleSelectType(val){
      if (val===this.selectTypeNumber){
        this.selectTypeNumber = 0
      }else{
        this.selectTypeNumber = val
      }
    },
    // 拿到页面数据
    handleGetPageData(){
      this.endData = uni.getStorageSync('lastDay')
      this.startDate = '2023-01-01'
      // 服务区类型枚举
      this.handleServiceType()
      let storeTime = uni.getStorageSync('lastDay')
      if (storeTime){
        this.time = storeTime
      }
      this.single = this.$util.getThisMonthHave(this.time)
      const date = new Date(this.single)
      let m = date.getMonth() + 1
      if (m<10){
        m = '0' + m
      }
      this.thisMonth = m
      let storeServiceInfo = uni.getStorageSync('currentService')
      if (storeServiceInfo){
        this.serviceInfo = storeServiceInfo
      }
      //  获取手机参数对页面进行适配
      let systemInfo = uni.getSystemInfoSync()
      // 把获取到的手机参数保存
      uni.setStorageSync('phoneInfo', systemInfo)
      this.statusBarHeight = Number(systemInfo.statusBarHeight)
      this.menu = uni.getMenuButtonBoundingClientRect()
      if (!storeServiceInfo){
        this.nearestService()
      }
      //业态充盈度
      this.getFillDegreeList()
      // //品牌消费水平
      // this.getBandLevelList()
      // //业态消费水平
      // this.getConsumLevelList()
      //品牌指数列表
      this.getBrandInfoList()
      //   服务区基本信息
      this.getServiceInfo()
      this.handleChangeCurrent()
    },
    handleChangeCurrent(){
      this.$refs.headerTop.handleChangeCurrent()
    },
    // 枚举服务区类型 SERVERPART_TYPE
    async handleServiceType(){
      const data = await getFieldEnum({ FieldExplainField: 'SERVERPART_TYPE' });
      console.log('data',data)
      let obj = {}
      data.forEach(item=>{
        obj[Number(item.value)] = item.label
      })
      console.log('obj',obj)
      this.serviceTypeObj = obj
    },
    bindDateChange(e){
      this.fillDegreeList = []
      this.brandInfoList = []
      const date = new Date(e.detail.value)
      let storeTime = uni.getStorageSync('lastDay')
      const nowDate = new Date(storeTime)
      let nowMonth = nowDate.getMonth() + 1

      this.single = e.detail.value
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let nowY = nowDate.getFullYear()
      let nowM = nowDate.getMonth() + 1
      if (y === nowY && m === nowM){
        this.time = storeTime
      }else{
        let d = this.$util.getThisMonthDay(e.detail.value)
        if (m<10){
          m = '0' + m
        }
        this.time = `${y}-${m}-${d}`
      }


      // let d
      // if (nowMonth === m){
      //   let nowYear = nowDate.getFullYear()
      //   let nowMonth = nowDate.getMonth() +1
      //   if (nowMonth<10){
      //     nowMonth = '0'+ nowMonth
      //   }
      //   let nowDay = nowDate.getDate() - 1
      //   if (nowDay<10){
      //     nowDay = '0'+ nowDay
      //   }
      //   this.time = `${nowYear}-${nowMonth}-${nowDay}`
      //   d = nowDay
      // }else{
      //   d = this.$util.getThisMonthDay(e.detail.value)
      //   this.time = e.detail.value + '-' + d
      // }
      // if (m<10){
      //   m = '0' + m
      // }
      this.thisMonth = m
      this.endTime = storeTime
      this.onRefresh()
      console.log('this.time',this.time)
    },
    onRefresh(){
      //业态充盈度
      this.getFillDegreeList()
      //品牌指数列表
      this.getBrandInfoList()
      //   服务区基本信息
      this.getServiceInfo()
    },
    //获取服务区基本信息
    async getServiceInfo(){
      let req = {
        ServerpartId:this.serviceInfo.Serverpart_ID
      }
      const total = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo',req)
      this.serviceInfoObj = total.Result_Data
      if (total.Result_Data){
        this.haveFun = {
          car:total.Result_Data.HASPILOTLOUNGE,
          charge:total.Result_Data.HASCHARGE ,
          bady:total.Result_Data.HASMOTHER ,
          gusetHome:total.Result_Data.HASGUESTROOM
        }
      }else{
        this.haveFun = {}
      }

    },
    async changeLabel(item){
      console.log('item',item)
      let list = this.brandLabelList
      list.forEach(selectItem=>{
        selectItem[5] = false
      })
      list.forEach(selectItem=>{
        if (item[3] === selectItem[3]){
          selectItem[5] = true
        }else{
          selectItem[5] = false
        }
      })
      this.brandLabelList = list
      let req = {
        ProvinceCode:'340000',
        Serverpart_ID:this.serviceInfo.Serverpart_ID || null,
        Statistics_Date:this.time,
        BusinessTradeIds:item[3],
      }
      let totalData = await request.$webGet('CommercialApi/BaseInfo/GetBrandAnalysis',req)
      this.brandInfoList =totalData.Result_Data.ShopBrandList
      this.$forceUpdate()
      // 如果要多选 就下面注释的这段
      // let str = ''
      // list.forEach(selectItem=>{
      //    if (item[3] === selectItem[3]){
      //      if (selectItem[4]){
      //        selectItem[4] = false
      //      }else{
      //        selectItem[4] = true
      //      }
      //    }
      // })
      // this.brandLabelList = list
      // let req
      // let str1 = ''
      // let str2 = ''
      // // if(item[2] === '1000'){
      //   this.brandLabelList.forEach(selectItem=>{
      //     if (selectItem[2] === '1000'){
      //       if (selectItem[4]){
      //         if (str1 === ''){
      //           str1 = selectItem[3]
      //         }else{
      //           str1+=',' + selectItem[3]
      //         }
      //       }
      //     }else if(selectItem[2] === '2000'){
      //       if (selectItem[4]){
      //         if (str2 === ''){
      //           str2 = selectItem[3]
      //         }else{
      //           str2+=',' + selectItem[3]
      //         }
      //       }
      //     }
      //   })
      // // }else if(item[2] === '2000'){
      // //   this.brandLabelList.forEach(selectItem=>{
      // //     if (selectItem[2] === '2000'){
      // //       if (selectItem[4]){
      // //         if (str2 === ''){
      // //           str2 = selectItem[3]
      // //         }else{
      // //           str2+=',' + selectItem[3]
      // //         }
      // //       }
      // //     }
      // //   })
      // // }
      // if (str1 && !str2){
      //   req = {
      //     ProvinceCode:'340000',
      //     Serverpart_ID:this.serviceInfo.Serverpart_ID,
      //     Statistics_Date:this.time,
      //     BusinessTradeIds:str1,
      //   }
      // }else if(!str1 && str2){
      //   req = {
      //     ProvinceCode:'340000',
      //     Serverpart_ID:this.serviceInfo.Serverpart_ID,
      //     Statistics_Date:this.time,
      //     BrandType:str2,
      //   }
      // }else if(str1 && str2){
      //   req = {
      //     ProvinceCode:'340000',
      //     Serverpart_ID:this.serviceInfo.Serverpart_ID,
      //     Statistics_Date:this.time,
      //     BusinessTradeIds:str1,
      //     BrandType:str2,
      //   }
      // }
    },
    // 业态充盈的改变事件
    async handleChangeBandLevel(key){
      uni.showLoading({
        title: '加载中...'
      })
      let req
      if (key===false){
        req = {
          ProvinceCode:'340000',
          Serverpart_ID:this.serviceInfo.Serverpart_ID,
          Statistics_Date:this.time
        }
        this.selectKey = ''
      }else{
        req = {
          ProvinceCode:'340000',
          Serverpart_ID:this.serviceInfo.Serverpart_ID,
          Statistics_Date:this.time,
          BusinessTradeIds:key
        }
        this.selectKey = key
      }
      let totalData = await request.$webGet('CommercialApi/BaseInfo/GetBrandAnalysis',req)
      if (totalData.Result_Data){
        this.brandLabelList = totalData.Result_Data.BrandTag
        this.brandInfoList =totalData.Result_Data.ShopBrandList
        uni.hideLoading()
      }

    },
    async nearestService(){
      let seat = uni.getStorageSync('seatInfo');
      let req = {
        longitude:seat.longitude,
        Province_Code:'340000',
        latitude:seat.latitude,
      }
      const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList',req)
      let res = {
        SERVERPART_NAME:data.Result_Data.List[0].SERVERPART_NAME,//服务区
        SPREGIONTYPE_NAME:data.Result_Data.List[0].SPREGIONTYPE_NAME,//片区
        Serverpart_ID:data.Result_Data.List[0].SERVERPART_ID,
        longitude:data.Result_Data.List[0].SERVERPART_X,
        latitude:data.Result_Data.List[0].SERVERPART_Y,
      }
      uni.setStorageSync('currentService',res)
    },
    async getFillDegreeList(){
      let req
      if (this.serviceInfo.SERVERPART_NAME==='安徽驿达'){
        req = {
          ProvinceCode:'340000',
          StatisticsDate:this.time,
          BusinessTradeIds:-1
        }
      }else{
        req = {
          ProvinceCode:'340000',
          StatisticsDate:this.time,
          serverpartId:this.serviceInfo.Serverpart_ID,
          BusinessTradeIds:-1
        }
      }
      const data = await request.$webGet('CommercialApi/Revenue/GetBusinessTradeRevenue',req)
      let res = []
      let all = 0
      data.Result_Data.BusinessTradeRank.forEach((item,index)=>{
        if (index<=10){
          res.push({name:`${item.name} ${item.value}%`,value:Number(item.value),key:item.key})
          all+=Number(item.value)
        }else if(index===11){
          res.push({name:`其他${(100-all).toFixed(2)}%`,value:Number((100 - all).toFixed(2)),key:item.key})
        }
      })
      let result= {
        series: [
          {
            data:res
          }
        ]
      };
      let obj = {
        result:result,
        Abundant:data.Result_Data.Abundant//是否盈足
      }
      // let res = {
      //     series: [
      //         {
      //             data: [{"name":"商超","value":27.6},
      //                 {"name":"水果饮品","value":20.7},
      //                 {"name":"餐饮","value":15.5},
      //                 {"name":"小吃","value":11.9},
      //                 {"name":"地方特产","value":8.4},
      //                 {"name":"连锁品牌","value":7.2},
      //                 {"name":"粽子","value":5.6},
      //                 {"name":"箱包工艺","value":3.1}]
      //         }
      //     ]
      // }
      this.fillDegreeList = obj
    },
    async getBandLevelList(){

      let req = {
        ProvinceCode:'340000',
        StatisticsDate:this.time,
        ServerpartId:this.serviceInfo.Serverpart_ID,
        ShowWholeBrand:false
      }
      let res =[]
      let totalData = await request.$webGet('CommercialApi/Revenue/GetBusinessBrandLevel',req)
      totalData.Result_Data.legend.forEach(item=>{
        res.push({name:item,small:0,normal:0,big:0})
      })
      res.forEach((item,index)=>{
        totalData.Result_Data.ColumnList.forEach((subItem,subIndex)=>{
          if (subItem.name==='低消费'){
            item.small = subItem.data[index]
          }else if(subItem.name==='普通消费'){
            item.normal = subItem.data[index]
          }else if(subItem.name==='高消费'){
            item.big = subItem.data[index]
          }
        })
      })
      // let res=[{name:'五芳斋',big:'14.8',normal:'41.7',small:'43.5'},
      //     {name:'驿佰购',big:'44.1',normal:'31.7',small:'24.2'},
      //     {name:'老娘舅',big:'15.2',normal:'70.1',small:'14.5'},
      //     {name:'吉祥馄饨',big:'25.2',normal:'39.9',small:'34.7'}]
      this.bandLevelList = res
    },
    async getConsumLevelList(){

      let req = {
        ProvinceCode:'340000',
        StatisticsDate:this.time,
        ServerpartId:this.serviceInfo.Serverpart_ID,
        ShowWholeTrade:false
      }
      let res = {
        categories:[],
        series:[]
      }
      let totalData = await request.$webGet('CommercialApi/Revenue/GetBusinessTradeLevel',req)
      res.categories = totalData.Result_Data.legend
      totalData.Result_Data.ColumnList.forEach(item=>{
        res.series.push({name:item.name,data:item.data})
      })
      // let res = {
      //     categories:["商超","餐饮","水果饮品","小吃","连锁品牌"],
      //     series: [
      //         {
      //             name: "低消费",
      //             textColor: "#FFFFFF",
      //             data: [18,27,21,24,6]
      //         },
      //       {
      //         name: "普通消费",
      //         textColor: "#FFFFFF",
      //         data: [18,27,21,24,6]
      //       },
      //       {
      //         name: "高消费",
      //         textColor: "#FFFFFF",
      //         data: [64,46,58,52,88]
      //       },
      //     ]
      // }
      this.consumLevelList = res
    },
    async getBrandInfoList(){
      let req
      if (this.serviceInfo.SERVERPART_NAME==='安徽驿达'){
        req = {
          ProvinceCode:'340000',
          Statistics_Date:this.time
        }
      }else{
        req = {
          ProvinceCode:'340000',
          Serverpart_ID:this.serviceInfo.Serverpart_ID,
          Statistics_Date:this.time
        }
      }
      let totalData = await request.$webGet('CommercialApi/BaseInfo/GetBrandAnalysis',req)
        this.brandLabelList = totalData && totalData.Result_Data && totalData.Result_Data.BrandTag?totalData.Result_Data.BrandTag:''
        this.brandLabelListNoChange = totalData && totalData.Result_Data && totalData.Result_Data.BrandTag?totalData.Result_Data.BrandTag:''
        this.brandInfoList = totalData && totalData.Result_Data && totalData.Result_Data.ShopBrandList?totalData.Result_Data.ShopBrandList:''
        this.brandInfoListNoChange = totalData && totalData.Result_Data && totalData.Result_Data.ShopBrandList?totalData.Result_Data.ShopBrandList:''
      console.log('this.brandInfoList',this.brandInfoList)

      // let res = [{icon:'',name:'老娘舅',company:'老娘舅餐饮股份有限公司',type:0,time:'2019.03-2022.03',label:["中式快餐","30-40岁男性"],info:[9,8,8]},
      //     {icon:'',name:'老乡鸡',company:'老乡鸡餐饮股份有限公司',type:1,time:'2019.03-2022.03',label:["中式快餐","30-40岁男性"],info:[9,9,9]},
      //     {icon:'',name:'永和大王',company:'永和大王餐饮股份有限公司',type:2,time:'2019.03-2022.03',label:["中式快餐","30-40岁男性"],info:[8,8,8]}]

    }
  }
}
</script>

<style scoped lang="scss">
.main {
  width: 100vw;
  height: 100vh;
  .charts{
    width: 100%;
    box-sizing: border-box;
    padding: 28px 16px 24px;
    background: #fff;
    .chartsItem{
      .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title{
          font-size: 17px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #160002;
          line-height: 24px;
          .unit{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #786B6C;
            line-height: 20px;
            margin-left: 4px;
          }
        }
        .time{
          margin-bottom: 4px;
          .select{
            margin-left: 8px;
            display: inline-block;
            .time {
              display: flex;
              align-items: center;
              margin-right: 4px;
              .day {
                font-size: 32rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #782717;
                line-height: 44rpx;
                margin-right: 4px;
              }
              .uni-input {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ae664e;
                line-height: 36rpx;
              }
              .icon {
                width: 24px;
                height: 16px;
              }
            }
          }
        }
        .btnBox{
          display: flex;
          align-items: center;
          .btnItem{
            border-radius: 4px;
            padding:2px 6px;
            margin-right: 6px;
            margin-bottom: 6px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            border:1px solid #ccc;
            background: #fff
          }
          .selectItem{
            background: rgba(202, 208, 218, 0.5);
            border:1px solid #ccc;
          }
        }
      }
      .title{
        font-size: 17px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #160002;
        line-height: 24px;
        .unit{
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #786B6C;
          line-height: 20px;
          margin-left: 4px;
        }
      }
      .labelList{
        display: flex;
        align-items: center;
        flex-flow: wrap;
        margin-top: 12px;
        .labelItem{
          border-radius: 4px;
          padding:2px 6px;
          margin-right: 6px;
          margin-bottom: 6px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          .icon{
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }
          .name{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #160002;
            line-height: 20px;
            .number{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #A69E9F;
              line-height: 20px;
              margin-left: 4px;
            }
          }
        }
        .labelItemSelect{
          border:1px solid #ccc;
          background: rgba(202, 208, 218, 0.5)
        }
        .labelItemUnSelect{
          border:1px solid #ccc;
          background: rgba(237, 239, 244, 0.2)

        }
      }
    }
  }
}
</style>
