<template>
  <div>
    <div class="total222">
      <a-tabs v-model:activeKey="activeKey" @change="changeTab">
        <a-tab-pane key="1">
          <template #tab>
            <span> 测站信息 </span>
          </template>
          <div style="display:flex;flex-direction: column;">
            <div>
            <div class="map-dialog-title">
              <img src="../../assets/images/weatheHome/icon-title.png" />
              基本信息
            </div>
            <div>
              <a-row style="min-height: 100px; padding: 20px">
                <a-col :span="8" v-for="(item, index) in detailInfo?.basic_info" :key="index + 1">
                  <div style="display: flex">
                    <a-row style="width: 100%; height: 50px">
                      <a-col :span="8"
                        ><div
                          style="
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            text-align: center;
                            width: 100%;
                            height: 100%;
                            background-color: #032448;
                            border: 1px solid #014a9b;
                          "
                          >{{ Object.keys(item)[0] }}</div
                        ></a-col
                      >
                      <a-col :span="16"
                        ><div
                          style="
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            text-align: center;
                            width: 100%;
                            height: 100%;
                            border: 1px solid #014a9b;
                          "
                          >{{ Object.values(item)[0] }}</div
                        ></a-col
                      >
                    </a-row>
                  </div>
                </a-col>
              </a-row>
            </div>
          </div>
          <div style="flex:1">
            <div class="map-dialog-title mg-10">
              <img src="../../assets/images/weatheHome/icon-title.png" />
              监测信息
              <div class="map-dialog-tabp-list" v-if="detailInfo.st_type != 6">
                <!-- <div class="active-tabp">
                  杨村温度
                </div> -->
                <div
                  style="font-size: 14px; color: #bed2ff"
                  v-for="(item, index) in detailInfo.sensor"
                  :key="item.senid"
                  @click="setTabColor(item, index + 1)"
                  >{{ item.sensor_name }}</div
                >
              </div>
            </div>
            <div class="tabp-conetnt">
                <div class="tabp-conetnt-left" v-if="detailInfo.st_type == 6">
                  <a-collapse v-model:activeKey="activeMenu.activeKey" :bordered="false">
                    <template #expandIcon="{ isActive }">
                      <img
                        class="left-collapse-icon"
                        :style="{ transform: `rotate(${isActive ? '0' : '-90'}deg)`, marginTop: '-12px' }"
                        src="../../assets/images/weatheHome/icon-bottom.png"
                      />
                    </template>
                    <a-collapse-panel :key="index + 1" :header="ke" :style="activeMenu.customStyle" v-for="(item, ke, index) in tanshuiList">
                      <ul class="collapse-ul">
                        <li :class="''" v-for="(it, index2) in item.value" :key="it.senid" @click="setTabColor2(it, index, index2)">{{
                          it.sensor_name
                        }}</li>
                      </ul>
                    </a-collapse-panel>
                    <!-- <a-collapse-panel key="2" header="4m 灌木层" :style="activeMenu.customStyle">
                      <ul class="collapse-ul">
                        <li>温度</li>
                        <li>湿度</li>
                        <li class="active">土壤热通量</li>
                      </ul>
                    </a-collapse-panel> -->
                  </a-collapse>
                </div>
                <div class="tabp-conetnt-right">
                  <!-- <div class="tabp-right-top">
                    <div>PID：<span>4223456</span></div>
                    <div>感器名称：<span>传感器1</span></div>
                    <div>入库点号：<span>4223456</span></div>
                    <div>基值：<span>4223456</span></div>
                    <div>最大值：<span>4223456</span></div>
                    <div>最小值：<span>4223456</span></div>
                    <div>精度：<span>4223456</span></div>
                  </div> -->
                  <div class="tabp-right-query">
                    <!-- <div style="margin-right: 10px">
                      <span class="active">近一周</span>
                      <span>近一月</span>
                      <span>近三月</span>
                      <span>近半年</span>
                    </div> -->
                    <a-radio-group v-model:value="value1" button-style="solid" style="margin-left: 30px; margin-right: 20px" @change="handleChange">
                      <a-radio-button value="24">近24h</a-radio-button>
                      <a-radio-button value="0.5">近一周</a-radio-button>
                      <a-radio-button value="1">近一月</a-radio-button>
                      <a-radio-button value="2">近三月</a-radio-button>
                      <a-radio-button value="3">近半年</a-radio-button>
                    </a-radio-group>
                    <div>
                      <a-range-picker
                        :disabled-date="disabledDate"
                        v-model:value="searchTime"
                        valueFormat="YYYY-MM-DD HH:mm:ss"
                        format="YYYY-MM-DD HH:mm"
                        :placeholder="['开始时间', '结束时间']"
                      />
                    </div>
                    <div>
                      <a-button type="primary" @click="search(senid, sensor_name, dchar)">开始查询</a-button>
                    </div>
                  </div>
                  <div class="tabp-right-query-echarts" v-show="!showNodata" style="flex:1">
                    <div id="query-echarts" style="width: 100%; height: 500px"> </div>
                  </div>
                  <div v-show="showNodata" style="width: 100%; height: 310px; text-align: center">
                    <img class="none-data" src="../../assets/images/weatheHome/none-data.png" />
                  </div>
                </div>
              </div>
          </div>
          </div>
          
          
        </a-tab-pane>
        <a-tab-pane key="2">
          <template #tab>
            <span> 图片 </span>
          </template>
            <div class="tabp-conetnt">
              <div class="tabp-conetnt-left">
                <a-collapse v-model:activeKey="activeMenu.activeKey" :bordered="false">
                  <template #expandIcon="{ isActive }">
                    <img
                      class="left-collapse-icon"
                      :style="{ transform: `rotate(${isActive ? '0' : '-90'}deg)`, marginTop: '-12px' }"
                      src="../../assets/images/weatheHome/icon-bottom.png"
                    />
                  </template>
                  <a-collapse-panel :key="index+1" v-for="(item,key,index) in imgtree"  :header="key" :style="activeMenu.customStyle">
                    <ul class="collapse-ul" >
                      <li v-for="(it,index2) in item" :key="item.id"  @click="setTabColor3(it, index, index2)">{{ it.img_name }}</li>
                    </ul>
                  </a-collapse-panel>
                  <!-- <a-collapse-panel key="2" header="监控布置图" :style="activeMenu.customStyle">
                    <ul class="collapse-ul">
                      <li>图片1</li>
                      <li>图片2</li>
                      <li class="active">图片3</li>
                    </ul>
                  </a-collapse-panel> -->
                </a-collapse>
              </div>
              <div class="tabp-conetnt-right">
                <a-carousel arrows style="width:100%;position: absolute;top:0;" :beforeChange="setcolor" ref="varousel">
                  <template #prevArrow>
                    <div class="custom-slick-arrow" style="z-index: 9999; left: -30px">
                      <left-circle-outlined />
                    </div>
                  </template>
                  <template #nextArrow>
                    <div class="custom-slick-arrow" style="right: -30px">
                      <right-circle-outlined />
                    </div>
                  </template>
                  <div v-for="(item,index) in imgList"><img class="carousel-img" :src="VITE_GLOB_BASE_IMG+item.img_url" :key="index+1"/></div>
                  <!-- <div>
                    <img class="carousel-img" src="../../assets/images/weatheHome/test-img.png" />
                  </div>
                  <div><img class="carousel-img" src="../../assets/images/weatheHome/test-img.png" /></div>
                  <div><img class="carousel-img" src="../../assets/images/weatheHome/test-img.png" /></div> -->
                </a-carousel>
                <div class="carousel-title">
                  <div style="margin-right: 50px;">{{ imgname }}</div>
                  <div>{{imgindex}} / {{ imgList.length }}</div>
                </div>
              </div>
            </div>
        </a-tab-pane>
        <a-tab-pane key="3">
          <template #tab>
            <span> 视频监控 </span>
          </template>
          <div>
            <div class="tabp-conetnt">
              <div class="tabp-conetnt-left">
                <ul class="collapse-video-ul">
                  <li>视频监控名称1</li>
                  <li>视频监控名称2</li>
                  <li class="video-active">图片3</li>
                </ul>
              </div>
              <div class="tabp-conetnt-right">
                <img style="width: 100%" class="carousel-img" src="../../assets/images/weatheHome/test-img.png" />
              </div>
            </div>
          </div>
        </a-tab-pane>
        <template #renderTabBar="{ DefaultTabBar, ...props }">
          <component :is="DefaultTabBar" v-bind="props" :style="{ zIndex: 1, textAlign: 'center' }" />
        </template>
      </a-tabs>
    </div>
  </div>
</template>
<script setup>
import { reactive, getCurrentInstance, onMounted, ref, watch, toRef, nextTick } from 'vue';
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { getMonitorInfo } from '/@/api/swHome/index';
import moment from 'moment';
import $ from 'jquery';
import eventBus from '/@/utils/eventBus';
import { getAppEnvConfig } from '/@/utils/env';

const {VITE_GLOB_BASE_IMG} =getAppEnvConfig()
eventBus.on('progressHeight', (e) => {
  if(e>1000&&e<1200){
    $('#query-echarts').css({height:'600px'})
  }else if(e>1200){
    $('#query-echarts').css({height:'700px'})
  }else{
    $('#query-echarts').css({height:'500px'})
  }
  console.log(e,76)
  chart.dispose();
    setTimeout(()=>{
      chart = echarts.init(document.getElementById('query-echarts'));
    echarts1();
    },400)
    
});

const props = defineProps({
  detailInfo: Object,
  title:  String
});
const tanshuiList = ref({});
const senid = ref();
const sensor_name = ref();
const dchar = ref();
// 图片展示
const imgList=ref([])
const imgtree=ref({})
const imgname=ref('')
const imgindex=ref(1)
watch(
  () => props.detailInfo,
  (newV) => {
    senid.value = newV.sensor[0].senid;
    sensor_name.value = newV.sensor[0].sensor_name;
    dchar.value = newV.sensor[0].dchar;
    imgList.value=[]
    imgtree.value=[]
    if(newV.pic_annex.length>0){
      let arr=newV.pic_annex
      arr.forEach(i=>{
        let arr=i.img_url.split('/')
        i.type=arr[arr.length-2]
        i.img_name=arr[arr.length-1]
      })
      imgList.value=arr
      let obj={}
      arr.forEach((i,index)=>{
        i.id=index+1
        if (obj.hasOwnProperty(i.type)) {
          obj[i.type].push(i);
        } else {
          obj[i.type] = [];  
          obj[i.type].push(i);
        }
      })
      imgtree.value=obj
    }
    if (newV.st_type == 6) {
      let obj = {};
      newV.sensor?.forEach((i) => {
        if (obj.hasOwnProperty(i.ts_layer)) {
          obj[i.ts_layer].value.push(i);
        } else {
          obj[i.ts_layer] = {};
          obj[i.ts_layer].id = null;
          obj[i.ts_layer].value = [];
          obj[i.ts_layer].value.push(i);
         
          if(i.ts_layer.includes('m')){
            obj[i.ts_layer].id=Number(i.ts_layer.split('m')[0]) 
          }else{
            obj[i.ts_layer].id=0
          }
        }
      });
      // console.log(obj, 89);
      let sortedObjKeys = Object.keys(obj).sort((a, b) => {
      return obj[b].id - obj[a].id
    })
    let arr={}
    sortedObjKeys.forEach(j=>{
      arr[j]=obj[j]
    })
      tanshuiList.value = arr;
      // console.log(sortedObjKeys,{...arr}, 89);
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
const varousel=ref('')
const nowTime = ref('');
onMounted(() => {
  $(`.map-dialog-tabp-list div:nth-child(1)`).css({
    background: 'linear-gradient(0deg, #00f7ff 0%, #007ff6 100%)',
    '-webkit-background-clip': 'text',
    '-webkit-text-fill-color': 'transparent',
    'background-clip': 'text',
    'text-fill-color': 'transparent',
  });
  nowTime.value = moment().format('YYYY-MM-DD HH:mm:ss');
  searchTime.value = [moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')];
  search(senid.value, sensor_name.value, dchar.value);
  // 
  console.log(varousel.value);
});
const xdata = ref([]);
const ydata = ref([]);
const showNodata = ref(false);
// id,名字,单位
const search = (id, name, dw) => {
  senid.value = id;
  sensor_name.value = name;
  dchar.value = dw;
  xdata.value = [];
  ydata.value = [];
  getMonitorInfo({ senid: senid.value, start_time: searchTime.value[0], end_time: searchTime.value[1] }).then((res) => {
    if (res.code == 200 && res.data.length > 0) {
      showNodata.value = false;
      res.data.forEach((item) => {
        xdata.value.push(item.time);
        ydata.value.push(item.factv);
      });
    } else {
      showNodata.value = true;
    }
    // alert(props.title)
    // props.title.split('（')[0]+
    tableTitle.value=name+'过程线'+'('+ moment(searchTime.value[0]).format('MM月DD日HH时')+'-' +moment(searchTime.value[1]).format('MM月DD日HH时')+')'
    echarts1();
  });
};

const disabledDate = (current) => {
  return current > moment().valueOf();
};
const changeTab=()=>{
  
}
const setcolor=(from, to)=>{
  $(`.ant-collapse .ant-collapse-item li`).css({ background: 'transparent' });
  // console.log(imgList.value,2233)
  imgname.value=imgList.value[to].img_name
  imgindex.value=to+1
}
const setTabColor = (item, index) => {
  // console.log(item,87)
  senid.value = item.senid;
  sensor_name.value = item.sensor_name;
  dchar.value = item.dchar;
  $('.map-dialog-tabp-list div').css({ background: 'transparent', color: '#BED2FF', '-webkit-text-fill-color': '#BED2FF' });
  $(`.map-dialog-tabp-list div:nth-child(${index})`).css({
    background: 'linear-gradient(0deg, #00f7ff 0%, #007ff6 100%)',
    '-webkit-background-clip': 'text',
    '-webkit-text-fill-color': 'transparent',
    'background-clip': 'text',
    'text-fill-color': 'transparent',
  });
  // console.log(senid.value,sensor_name.value,dchar.value)
  search(senid.value, sensor_name.value, dchar.value);
};
const setTabColor2 = (item, index, index2) => {
  senid.value = item.senid;
  sensor_name.value = item.sensor_name;
  dchar.value = item.dchar;
  $(`.ant-collapse .ant-collapse-item li`).css({ background: 'transparent' });
  $(`.ant-collapse .ant-collapse-item:nth-child(${index + 1}) li:nth-child(${index2 + 1})`).css({ background: 'rgba(0, 94, 182, 0.24)' });
  // console.log(senid.value,sensor_name.value,dchar.value)
  search(senid.value, sensor_name.value, dchar.value);
};
const setTabColor3 = (item, index, index2) => {
    imgname.value=item.img_name
  $(`.ant-collapse .ant-collapse-item li`).css({ background: 'transparent' });
  $(`.ant-collapse .ant-collapse-item:nth-child(${index + 1}) li:nth-child(${index2 + 1})`).css({ background: 'rgba(0, 94, 182, 0.24)' });
  // console.log(senid.value,sensor_name.value,dchar.value)
  varousel.value.goTo(item.id-1)
};
const handleChange = () => {
  searchTime.value = [];
  // console.log(value1.value)
  if (value1.value == 0.5) {
    searchTime.value = [moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')];
  } else if (value1.value == 1) {
    searchTime.value = [moment().subtract(30, 'days').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')];
  } else if (value1.value == 2) {
    searchTime.value = [moment().subtract(3, 'month').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')];
  } else if (value1.value == 3) {
    searchTime.value = [moment().subtract(6, 'month').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')];
  } else if (value1.value == 24) {
    searchTime.value = [moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')];
  }
};

const value1 = ref('24');
const searchTime = ref([]);
const activeKey=ref('1');
// 下拉菜单
let activeMenu = reactive({
  activeKey: '1',
  customStyle: 'background:transparent;',
});
// 图表标题
const tableTitle=ref('')
// 引入图表插件
const { proxy } = getCurrentInstance();
const echarts = proxy.$echarts;
function flowFn(max, min){
  let maxValue = Math.ceil(max);
  let minValue = Math.floor(min);
  let interval = 0;
  console.log((max - min) / 5);
  if ((max - min) / 5 <= 1) {
    interval = 1;
    minValue = Math.floor(minValue);
    maxValue = Math.ceil(maxValue);
    if(maxValue - minValue == 1){
        minValue = minValue - 2
        maxValue  = maxValue + 2
    }
    if(maxValue - minValue == 2){
        minValue  = minValue - 2
        maxValue  = maxValue + 1
    }

    if(maxValue - minValue == 3){
        minValue  = minValue - 1
        maxValue  = maxValue + 1
    }

    if(maxValue - minValue == 4){
        minValue  = minValue - 1
    }
  } else {
    // 获取余数
    minValue = minValue - (5 - ((maxValue - minValue) % 5));
    interval = (maxValue - minValue) / 5;
  }
  return {
    interval: interval,
    maxValue: maxValue,
    minValue: minValue,
  };
}
function waterLevel(max, min) {
  let maxValue = Math.ceil(max);
  let minValue = Math.floor(min);
  let interval = 0;
  console.log((max - min) / 5);
  if ((max - min) / 5 <= 0.2) {
    interval = 0.2;
    maxValue = Math.floor(maxValue);
    maxValue = Math.ceil(maxValue);
  } else if ((max - min) / 5 <= 0.5) {
    interval = 0.5;
    maxValue = Math.floor(maxValue);
    maxValue = Math.ceil(maxValue);
  } else if ((max - min) / 5 <= 1) {
    interval = 0.5;
    maxValue = Math.floor(maxValue);
    maxValue = Math.ceil(maxValue);
  } else {
    // 获取余数
    minValue = minValue - (5 - ((maxValue - minValue) % 5));
    interval = (maxValue - minValue) / 5;
  }
  return {
    interval: interval,
    maxValue: maxValue,
    minValue: minValue,
  };
}
function echarts1() {
  

  // const chart = echarts.init(document.getElementById('query-echarts'));
  let max=Math.max(...ydata.value)
  let min=Math.min(...ydata.value)
  let liuliang2 = {}
  // 判断是否是雨量，还是水位，还是流量
  if(tableTitle.value.indexOf("雨量") != -1){
    liuliang2 = {
      interval: null,
      maxValue: null,
      minValue: null,
    }
  }
  if(tableTitle.value.indexOf("水位") != -1){
    liuliang2 = waterLevel(max, min);
  }
  if(tableTitle.value.indexOf("流量") != -1){
    liuliang2 = flowFn(max, min);
  }
  
  
  var option;
  option = {
    title:{
      text:tableTitle.value,
      x:'center',
      textStyle:{
        color:'#fff',
        fontSize:16
      }
    },
    tooltip: {
      show:true,
      trigger: 'axis',
      formatter(params) {
        var relVal = params[0].name;
        for (var i = 0, l = params.length; i < l; i++) {
            console.log('tooltip数据值',params[i].value)
            //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
            relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value)
        }
        return relVal;
      },
    },
    dataZoom:[
      {
    type:"inside"         //详细配置可见echarts官网
    },
      {
    type:"inside"         //详细配置可见echarts官网
    },
  ],
  toolbox: {
      show: true,
      feature: {
        saveAsImage: { show: true ,
          title: '保存图片',
          name:tableTitle.value,
          iconStyle:{
            borderColor:'#fff',
          },
          backgroundColor: "#021D33"
          
        },  // 保存图表
      },
},
   
    // legend: {
    //   // data: ['test1', 'test2', 'test3'],
    //   textStyle: {
    //     fontSize: 14, //字体大小
    //     color: '#ffffff', //字体颜色
    //   },
    // },
    grid: {
      top: '12%',
      left: '3%',
      right: '4%',
      bottom: '5%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: xdata.value,
      axisLabel: {
        //x轴文字的配置
        color: 'green',
        show: true,
        textStyle: {
          color: '#fff',
        },
        formatter: function (val) {
          var strs = val.split(''); //字符串数组
          var str = '';
          for (var i = 0, s; (s = strs[i++]); ) {
            //遍历字符串数组
            if (i > 5 && i < 17) {
              str += s;
            }

            if (!(i % 10)) str += '\n'; //按需要求余
          }
          return str;
        },
      },
    },
    yAxis: {
      name: dchar.value,
      nameTextStyle: {
        color: '#fff',
      },
      // scale: true,
      type: 'value',
      axisLabel: {
        //x轴文字的配置
        show: true,
        textStyle: {
          color: '#fff',
        },
        formatter:function(value){
          return value+"";
      }
      },
      splitLine: {
        //网格线
        lineStyle: {
          type: 'dotted', //设置网格线类型 dotted：虚线 solid:实线
          width: 1, //y轴线的宽度
          color: '#484849',
        },
        show: true, //隐藏或显示
      },
      interval: liuliang2.interval, // 步长
      min: liuliang2.minValue,
      max: liuliang2.maxValue,
    },
    series: [
      {
        name: sensor_name.value,
        type:sensor_name.value.includes('雨量')?'bar': 'line',
        stack: 'Total',
        smooth: true,
        data: ydata.value,
      },
    ],
  };
  option && chart.setOption(option);
}
var chart =null
onMounted(() => {
  chart= echarts.init(document.getElementById('query-echarts'));
});
</script>

<style lang="less" scoped>
// 修改组件样式
::v-deep(.total222 .ant-tabs-nav .ant-tabs-tab-active) {
  // background: url('../../assets/images/sjx1.png') no-repeat 42px 9px;
  background: url('../../assets/images/weatheHome/active-bar1.png') no-repeat;
  // width: 45px;
  background-size: 100%;
  height: 40px;
  width: 169px;
  color: #c9d1d9;
}
::v-deep(.total222 .ant-tabs-nav > div > div:nth-child(2).ant-tabs-tab-active) {
  // background: url('../../assets/images/sjx1.png') no-repeat 42px 9px;
  // background: url('../../../assets/images/tab.png') no-repeat;
  // width: 45px;
  // background-position: 6px 3px;
  background-size: 100% 100%;
  height: 42px;
  // line-height: 42px;
  // margin-left: -6px;
}
// ::v-deep(.total222 .ant-tabs-nav > div > div:nth-child(2).ant-tabs-tab-active span) {
//   position: relative;
//   // top: 10px !important;
// }
.total222 {
  margin-top: 20px;
}
::v-deep(.total222 .ant-tabs-nav .ant-tabs-tab) {
  // background-position: 6px 3px;
  background-size: 100% 100%;
  height: 40px;
  // line-height: 42px;
  padding: 12px 0px 12px 0px;
  margin: 0;
  width: 165px;
}
::v-deep(.total222 .ant-tabs-nav .ant-tabs-tab span) {
  position: relative;
  top: -4px;
  color: #377dff;
}
::v-deep(.total222 .ant-tabs-nav .ant-tabs-tab-active span) {
  color: #c9d1d9 !important;
}
::v-deep(.ant-tabs-top-bar) {
  margin-bottom: 0px !important;
}
::v-deep(.ant-tabs-ink-bar) {
  visibility: hidden;
}
::v-deep(.ant-collapse-borderless) {
  background-color: transparent !important;
}
::v-deep(.ant-collapse-borderless > .ant-collapse-item) {
  border: 0px !important;
}

::v-deep(
    .ant-tabs-top > .ant-tabs-nav::before,
    .ant-tabs-bottom > .ant-tabs-nav::before,
    .ant-tabs-top > div > .ant-tabs-nav::before,
    .ant-tabs-bottom > div > .ant-tabs-nav::before
  ) {
  border-bottom: 0px;
}
::v-deep(.ant-tabs) {
  color: #fff;
}
::v-deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
  color: #ffe75c;
}
::v-deep(.ant-tabs-tab) {
  // font-size: 18px;
  // font-weight: bold;
  font-size: 16px;
  font-weight: normal !important;
}
::v-deep(.ant-tabs-bar) {
  border-bottom: 0px solid #303030 !important;
}

::v-deep(.ant-tabs-nav) {
  background: url('../../assets/images/weatheHome/bar-bg1.png') no-repeat;
  background-size: 100%;
  width: 505px !important;
  height: 48px !important;
  padding-top: 3px;
  margin: 0 auto;
}
// 修改组件样式结束
.map-dialog-title {
  font-size: 16px;
  color: #d8e5ff;
  position: relative;
  img {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -3px;
  }
}
.map-dialog-table {
  ul {
    border: 1px solid #014a9b;
    margin: 10px 20px;
    li {
      display: flex;
      border-top: 1px solid #014a9b;
      line-height: 50px;
      text-align: center;
      color: #bed2ff;
      font-size: 14px;
      div {
        border-left: 1px solid #014a9b;
      }
      div:nth-child(1) {
        border-left: 0px solid #014a9b;
      }
      div:nth-child(1),
      div:nth-child(3),
      div:nth-child(5) {
        width: 10%;
        background: rgba(0, 50, 105, 0.3);
      }
      div:nth-child(2),
      div:nth-child(4),
      div:nth-child(6) {
        width: 20%;
      }
    }
    li:nth-child(1) {
      border-top: 0px solid #014a9b;
    }
  }
}
.mg-10 {
  margin-top: 20px;
}
.map-dialog-tabp-list {
  position: absolute;
  display: flex;
  left: 100px;
  color: #fff;
  top: 0px;
  & > div {
    // width: 189px;
    margin-left: 30px;
    margin-top: 3px;
    cursor: pointer;
    text-align: center;
    flex-shrink: 0;
  }
  .active-tabp {
    font-size: 14px;
    background: linear-gradient(0deg, #00f7ff 0%, #007ff6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    position: relative;
    img {
      width: 100%;
      position: absolute;
      // bottom: -100px;
    }
  }
}
.tabp-conetnt {
  height: 56vh;
  margin-top: 20px;
  display: flex;
  .tabp-conetnt-left {
    width: 20%;
    height: 100%;
    margin-left: 20px;
    // padding: 20px;
    background: linear-gradient(180deg, #022d5d 0%, rgba(0, 35, 74, 0.91) 100%);
    overflow: auto;
    ::v-deep(.ant-collapse) {
      border: none;
    }
    ::v-deep(.ant-collapse-header) {
      background: linear-gradient(90deg, rgba(0, 124, 240, 0.24) 0%, rgba(216, 216, 216, 0) 100%);
      color: #fff;
      font-size: 14px;
    }
  }
  .tabp-conetnt-right {
    height: 100%;
    font-size: 14px;
    margin-left: 40px;
    margin-right: 40px;
    flex: 1;
    position: relative;
    overflow: visible;
  }
}
.tabp-right-top {
  width: 100%;
  display: flex;
  color: #bed2ff;
  justify-content: space-between;
  span {
    color: #ffffff;
  }
}
.collapse-ul {
  li {
    margin-bottom: 10px;
    padding-left: 20px;
    color: #bed2ff;
    cursor: pointer;
  }
  .liactive {
    background: rgba(0, 94, 182, 0.24);
  }
}
.tabp-right-query {
  // height: 100%;
  margin-top: 10px;
  display: flex;
  & > div:nth-child(1) {
    border: 1px solid #00346e;
    span {
      border-left: 1px solid #00346e;
      display: inline-block;
      padding: 5px 10px;
      cursor: pointer;
    }
    span:nth-child(1) {
      border-left: 0px solid #00346e;
    }
    .active {
      background-color: rgb(38, 99, 255);
    }
  }
  & > div:nth-child(3) {
    margin-left: 20px;
  }
  ::v-deep(.ant-radio-button-wrapper) {
    border: none;
  }
  ::v-deep(.ant-input) {
    border: 1px solid #00346e !important;
  }
}
::v-deep .tabp-right-query .ant-input {
  height: 37px;
}
::v-deep .tabp-right-query .ant-btn {
  height: 37px;
}
// 轮播样式开始
.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 750px;
  // line-height: 800px;
  background: transparent;
  overflow: hidden;
  color: #fff;
}

.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 1;
}
.ant-carousel :deep(.custom-slick-arrow:before) {
  display: none;
}
.ant-carousel :deep(.custom-slick-arrow:hover) {
  opacity: 0.5;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
}
::v-deep .ant-carousel .slick-dots li.slick-active button {
  background-color: #fff !important;
}
::v-deep .ant-carousel .slick-dots li button {
  background-color: #fff !important;
}
::v-deep .ant-carousel .slick-next:hover {
  // background-color: #000 !important;
  color: #fff !important;
}
::v-deep .ant-carousel .slick-prev:hover {
  color: #fff !important;
}
.carousel-img {
  width: 100%;
  // height: 100%;
}
.carousel-title {
  position: absolute;
  left: 20px;
  bottom: 0px;
  z-index: 9999;
  color: #bed2ff;
  display: flex;
  justify-content: space-between;
}
// 轮播样式结束
.collapse-video-ul {
  li {
    text-align: center;
    line-height: 32px;
    margin-top: 10px;
  }
  .video-active {
    background: linear-gradient(90deg, rgba(100, 255, 255, 0.29) 0%, rgba(100, 255, 255, 0) 100%);
  }
}
#query-echarts{
  margin-top: 16px;
}
.none-data{
  margin: 20px auto;
}
</style>
