<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import QuickCalendarDate from '@/components/DateRange/src/components/QuickCalendarDate.vue'
import { VueDraggable } from 'vue-draggable-plus'
import PieChart from './components/PieChart.vue'
import SellerChart from './components/SellerChart.vue'
import BarChart from './components/BarChart.vue'
import RecentStatus from './components/RecentStatus.vue'
import ScoringSystem from './components/ScoringSystem.vue'
import TopMap from './components/TopMap.vue'
import { ElMessageBox } from 'element-plus'
const value = ref('All')
const activeName = ref('first')
const SaveVisible = ref(false)
// 可拖拽模块的列表
interface ManagementItem {
  title: string
  switchValue: boolean
  text: string
  id: number
  title1: string
  title2: string
}
const Management = ref<ManagementItem[]>([])
const BookingSearch = ref()
const checkboxGroup1 = ref(['All'])
const changeCheckboxGroup2 = ref('ETD')
const shipper = ref(['All', 'Air', 'Sea', 'Road'])
const shipper_two = ref(['ETD', 'ETA'])
const DashDate = ref(['', ''])
const changeCheckboxGroup1 = (val: any) => {
  if (val.length == 3) {
    checkboxGroup1.value = ['All']
  }
  if (val.length == 0) {
    checkboxGroup1.value = ['All']
  } else if (val.indexOf('All') != -1) {
    if (val.indexOf('All') == 1 && val.length == 2) {
      checkboxGroup1.value = ['All']
    } else {
      checkboxGroup1.value.splice(val.indexOf('All'), 1)
    }
  }
}

const changeCancel = (id: any) => {
  Management.value[id - 1].switchValue = false
}

//RecentStatusList
const RecentStatusList = ref()
const pageInfo = ref({ pageNo: 1, pageSize: 10, total: 10000 })
const isShowtitle1 = ref(true)
// 点击tab
const handleTabClick = (tab: any) => {
  if (tab.props.name == 'first') {
    isShowtitle1.value = true
  } else {
    isShowtitle1.value = false
  }
}
// 获取首页数据
let dashboardObj: any = {}
const GetDashboardData = (value: any, is_customer: any) => {
  $api
    .GetDashboardData({
      cp: pageInfo.value.pageNo,
      ps: pageInfo.value.pageSize,
      rc: -1,
      is_customer: is_customer,
      ...value
    })
    .then((res: any) => {
      if (res.code === 200) {
        pageInfo.value.total = Number(res.data.rc)
        Management.value = res.data.Management
        RecentStatusList.value = res.data.searchData
      }
    })
}
// 获取表单数据
const getTableData = () => {
  let is_customer: any = ''
  if (Object.keys(dashboardObj).length === 0) {
    is_customer = 'yes'
  } else {
    is_customer = 'no'
  }
  $api
    .GetDashboardData({
      cp: pageInfo.value.pageNo,
      ps: pageInfo.value.pageSize,
      rc: pageInfo.value.total,
      is_customer: is_customer,
      ...dashboardObj
    })
    .then((res: any) => {
      if (res.code === 200) {
        Management.value = res.data.Management
        RecentStatusList.value = res.data.searchData
      }
    })
}
const DateChange = (value: any) => {
  dashboardObj.date_start = value[0]
  dashboardObj.date_end = value[1]
  dashboardObj.date_type = changeCheckboxGroup2.value
  GetDashboardData(dashboardObj, 'no')
}
// 获取ETD/ETA 图表数据
const ETDobj = reactive({
  ETD_Title: '',
  ETDList: [],
  ETD_Radius: []
})
const GetETDEcharts = () => {
  $api
    .GetETDEcharts({
      b_date: '',
      e_date: ''
    })
    .then((res: any) => {
      if (res.code === 200) {
        ETDobj.ETD_Title = `{a|${res.data.ETD_Title}}`
        ETDobj.ETDList = res.data.ETDList
        ETDobj.ETD_Radius = res.data.ETD_Radius
      }
    })
}
// 获取KPI Departure图表数据
const KPIobj = reactive({
  ETD_Title: '',
  ETDList: [],
  ETD_Radius: []
})
const GetKPIEcharts = () => {
  $api
    .GetKPIEcharts({
      r_type: 'atd_r4'
    })
    .then((res: any) => {
      if (res.code === 200) {
        KPIobj.ETD_Title = `{a|${res.data.title1}}{b|${res.data.title2})}`
        KPIobj.ETDList = res.data.ETDList
        KPIobj.ETD_Radius = res.data.ETD_Radius
      }
    })
}
// 获取KPI Arrival图表数据
const Arrivalobj = reactive({
  ETD_Title: '',
  ETDList: [],
  ETD_Radius: []
})
const GetKPIArrivalEcharts = () => {
  $api
    .GetKPIEcharts({
      r_type: 'ata_r3'
    })
    .then((res: any) => {
      if (res.code === 200) {
        Arrivalobj.ETD_Title = `{a|${res.data.title1}}{b|${res.data.title2})}`
        Arrivalobj.ETDList = res.data.ETDList
        Arrivalobj.ETD_Radius = res.data.ETD_Radius
      }
    })
}
// 获取Pending Departure图表数据
const Pendingobj = reactive({
  ETD_Title: '',
  ETDList: [],
  ETD_Radius: []
})
const GetPendingEcharts = () => {
  $api
    .GetPendingEcharts({
      r_type: 'r4'
    })
    .then((res: any) => {
      if (res.code === 200) {
        Pendingobj.ETD_Title = `{a|${res.data.title1}}{b|${res.data.title2})}`
        Pendingobj.ETDList = res.data.ETDList
        Pendingobj.ETD_Radius = res.data.ETD_Radius
      }
    })
}
// 获取Pending Arrival图表数据
const PendingArrivalobj = reactive({
  ETD_Title: '',
  ETDList: [],
  ETD_Radius: []
})
const GetPendingArrivalEcharts = () => {
  $api
    .GetPendingEcharts({
      r_type: 'r3'
    })
    .then((res: any) => {
      if (res.code === 200) {
        PendingArrivalobj.ETD_Title = `{a|${res.data.title1}}{b|${res.data.title2})}`
        PendingArrivalobj.ETDList = res.data.ETDList
        PendingArrivalobj.ETD_Radius = res.data.ETD_Radius
      }
    })
}
// 获取ContainerCount
const containerObj = reactive({
  bar_title: '',
  barList: [],
  barSeries: [{ name: '' }],
  Max: 0,
  interval: 0
})
const GetContainerCountEcharts = (val: any) => {
  $api
    .GetContainerCountEcharts({
      b_date: '',
      e_date: '',
      ...val
    })
    .then((res: any) => {
      if (res.code === 200) {
        containerObj.bar_title = res.data.ContainerCount_Title
        containerObj.barList = res.data.ContainerCountList
        containerObj.barSeries = res.data.ContainerCounSeries
        containerObj.Max = res.data.Max
        containerObj.interval = res.data.interval
      }
    })
}
//获取CO2 Origin
const EmissionObj = reactive({
  bar_title: '',
  barList: [],
  barSeries: [],
  Max: 0,
  interval: 0
})
const GetCo2EmissionEcharts = () => {
  $api.GetCo2EmissionEcharts({}).then((res: any) => {
    if (res.code === 200) {
      EmissionObj.bar_title = res.data.ContainerCount_Title
      EmissionObj.barList = res.data.ContainerCountList
      EmissionObj.barSeries = res.data.ContainerCounSeries
      EmissionObj.Max = res.data.Max
      EmissionObj.interval = res.data.interval
    }
  })
}
//获取CO2 Destination
const DestinationObj = reactive({
  bar_title: '',
  barList: [],
  barSeries: [],
  Max: 0,
  interval: 0
})
const GetCo2DestinationEcharts = () => {
  $api.GetCo2DestinationEcharts({}).then((res: any) => {
    if (res.code === 200) {
      DestinationObj.bar_title = res.data.ContainerCount_Title
      DestinationObj.barList = res.data.ContainerCountList
      DestinationObj.barSeries = res.data.ContainerCounSeries
      DestinationObj.Max = res.data.Max
      DestinationObj.interval = res.data.interval
    }
  })
}
//获取Top10 Origin/Destination
const Top10Obj = reactive({
  OriginData: [],
  DestinationData: []
})
const Top1OInterval = reactive({
  Max: 0,
  interval: 0
})
const GetTop10ODEcharts = () => {
  $api.GetTop10ODEcharts({}).then((res: any) => {
    if (res.code === 200) {
      Top10Obj.DestinationData = res.data.seller_data_list_destination
      Top10Obj.OriginData = res.data.seller_data_list_origin
      Top1OInterval.Max = res.data.Max
      Top1OInterval.interval = res.data.interval
    }
  })
}
onMounted(() => {
  GetDashboardData(dashboardObj, 'yes')
  GetETDEcharts()
  GetKPIEcharts()
  GetKPIArrivalEcharts()
  GetContainerCountEcharts(container_type)
  GetCo2EmissionEcharts()
  GetCo2DestinationEcharts()
  GetTop10ODEcharts()
  GetPendingEcharts()
  GetPendingArrivalEcharts()
})
let container_type: any = {
  container_type: 'All'
}
const changeType = (val: any) => {
  container_type.container_type = val
  GetContainerCountEcharts(container_type)
}

// Save Layout
const SaveLayout = () => {
  SaveVisible.value = false
  Management.value.forEach((item: any, index: any) => {
    item.id = index + 1
  })
  $api
    .SaveLayout({
      management: Management.value
    })
    .then((res: any) => {
      if (res.code == 200) {
        ElMessageBox.alert(res.data.msg, {
          confirmButtonText: 'OK'
        })
      }
    })
}
//Save Filters
const SaveFilters = () => {
  SaveVisible.value = false
}
</script>
<template>
  <div class="dashboard">
    <!-- 评分 -->
    <ScoringSystem></ScoringSystem>
    <!-- Title -->
    <div class="Title">
      <div>Dashboard</div>
      <div>
        <el-popover trigger="click" width="400">
          <template #reference>
            <el-button class="el-button--default">
              <span class="iconfont_icon">
                <svg class="iconfont" aria-hidden="true">
                  <use xlink:href="#icon-icon_view__management_b"></use>
                </svg>
              </span>
              View Management
            </el-button>
          </template>
          <div class="Management">
            <div class="title">View Management</div>
            <div class="management_content" v-for="(item, index) in Management" :key="index">
              <div class="management_flex">
                <div class="content_title">{{ item.title }}</div>
                <div><el-switch v-model="item.switchValue" /></div>
              </div>
              <div class="content_text">{{ item.text }}</div>
            </div>
            <el-divider />
            <div class="tips">
              <span class="iconfont_icon">
                <svg class="iconfont iconfont_tips" aria-hidden="true">
                  <use xlink:href="#icon-icon_info_b"></use>
                </svg>
              </span>
              <div class="tips_text">
                Please remember to click the save button in order to keep the new dashboard layout
                and widgets.
              </div>
            </div>
          </div>
        </el-popover>
        <el-popover width="142" :visible="SaveVisible">
          <template #reference>
            <el-button class="el-button--default" @click="SaveVisible = !SaveVisible">
              <span class="iconfont_icon">
                <svg class="iconfont" aria-hidden="true">
                  <use xlink:href="#icon-icon_save_b"></use>
                </svg>
              </span>
              Save
              <span class="iconfont_icon">
                <svg class="iconfont" aria-hidden="true">
                  <use xlink:href="#icon-icon_dropdown_b"></use>
                </svg>
              </span>
            </el-button>
          </template>
          <div class="Save_filters" @click="SaveFilters">
            <span class="iconfont_icon iconfont_icon_save">
              <svg class="iconfont" aria-hidden="true">
                <use xlink:href="#icon-icon_save_b"></use>
              </svg>
            </span>
            <div>Save Filters</div>
          </div>
          <div class="Save_filters" @click="SaveLayout">
            <span class="iconfont_icon iconfont_icon_save">
              <svg class="iconfont" aria-hidden="true">
                <use xlink:href="#icon-icon_save_b"></use>
              </svg>
            </span>
            <div>Save Layout</div>
          </div>
        </el-popover>
      </div>
    </div>
    <!-- 筛选 -->
    <div class="filters">
      <div style="display: flex">
        <div class="tips_filter">
          <el-checkbox-group @change="changeCheckboxGroup1" v-model="checkboxGroup1" size="large">
            <el-checkbox-button v-for="item in shipper" :key="item" :value="item">
              {{ item }}
            </el-checkbox-button>
          </el-checkbox-group>
        </div>
        <div class="tips_filter">
          <el-radio-group v-model="changeCheckboxGroup2">
            <el-radio-button v-for="item in shipper_two" :key="item" :value="item" :label="item">
            </el-radio-button>
          </el-radio-group>
        </div>
        <div class="tips_filter">
          <QuickCalendarDate @DateChange="DateChange" :Date="DashDate"></QuickCalendarDate>
        </div>
      </div>
      <div class="filters_right">
        <el-input placeholder="Customer" v-model="BookingSearch">
          <template #prefix>
            <span class="iconfont_icon">
              <svg class="iconfont" aria-hidden="true">
                <use xlink:href="#icon-icon_search_b"></use>
              </svg>
            </span>
          </template>
        </el-input>
      </div>
    </div>
    <!-- 图表 -->
    <div class="echarts">
      <VueDraggable
        style="display: flex; flex-wrap: wrap; gap: 16px"
        ref="infoContentRef"
        ghost-class="ghost-class"
        :forceFallback="true"
        fallback-class="fallback-class"
        v-model="Management"
        handle=".handle-draggable"
      >
        <template v-for="item in Management" :key="item">
          <div v-if="item.id === 1 && item.switchValue" class="filters_left">
            <!-- KPI -->
            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
              <template #header>
                <div class="Title_flex">
                  {{ item.title }}
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="item.text"
                    placement="bottom-start"
                  >
                    <span class="iconfont_icon iconfont_icon_tip">
                      <svg class="iconfont" aria-hidden="true">
                        <use xlink:href="#icon-icon_info_b"></use>
                      </svg>
                    </span>
                  </el-tooltip>
                </div>
              </template>
              <template #content>
                <div class="KPI_Pending">
                  <div class="kpi">
                    <PieChart ref="pie_chart" :PieData="KPIobj" style="height: 300px"></PieChart>
                  </div>
                  <div class="kpi">
                    <PieChart
                      ref="pie_chart"
                      :PieData="Arrivalobj"
                      style="height: 300px"
                    ></PieChart>
                  </div>
                </div>
              </template>
            </VBox_Dashboard>
          </div>
          <div v-else-if="item.id === 2 && item.switchValue" class="filters_left">
            <!-- Pending -->
            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
              <template #header>
                <div class="Title_flex">
                  {{ item.title }}
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="item.text"
                    placement="bottom"
                  >
                    <span class="iconfont_icon iconfont_icon_tip">
                      <svg class="iconfont" aria-hidden="true">
                        <use xlink:href="#icon-icon_info_b"></use>
                      </svg>
                    </span>
                  </el-tooltip>
                </div>
              </template>
              <template #content>
                <div class="KPI_Pending">
                  <div class="kpi">
                    <PieChart
                      ref="pie_chart"
                      :PieData="Pendingobj"
                      style="height: 300px"
                    ></PieChart>
                  </div>
                  <div class="kpi">
                    <PieChart
                      ref="pie_chart"
                      :PieData="PendingArrivalobj"
                      style="height: 300px"
                    ></PieChart>
                  </div>
                </div>
              </template>
            </VBox_Dashboard>
          </div>
          <div
            v-else-if="item.id === 3 && item.switchValue && RecentStatusList.length != 0"
            class="KPI_Pending"
          >
            <!-- Recent Status -->
            <VBox_Dashboard @changeCancel="changeCancel(item.id)" style="width: 100%">
              <template #header>
                <div class="Title_flex">
                  {{ item.title }}
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="item.text"
                    placement="bottom-start"
                  >
                    <span class="iconfont_icon iconfont_icon_tip">
                      <svg class="iconfont" aria-hidden="true">
                        <use xlink:href="#icon-icon_info_b"></use>
                      </svg>
                    </span>
                  </el-tooltip>
                </div>
              </template>
              <template #content>
                <RecentStatus :RecentStatusList="RecentStatusList"></RecentStatus>
                <div class="pagination">
                  <span>Total {{ pageInfo.total }}</span>
                  <el-pagination
                    v-model:current-page="pageInfo.pageNo"
                    v-model:page-size="pageInfo.pageSize"
                    :page-sizes="[10, 50, 100, 200]"
                    layout="prev, pager, next"
                    :pager-count="3"
                    :total="pageInfo.total"
                    @size-change="getTableData"
                    @current-change="getTableData"
                  />
                </div>
              </template>
            </VBox_Dashboard>
          </div>
          <!-- ETD to ETA -->
          <div v-else-if="item.id === 4 && item.switchValue" class="filters_left">
            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
              <template #header>
                <div class="Title_flex">
                  {{ item.title }}
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="item.text"
                    placement="bottom-start"
                  >
                    <span class="iconfont_icon iconfont_icon_tip">
                      <svg class="iconfont" aria-hidden="true">
                        <use xlink:href="#icon-icon_info_b"></use>
                      </svg>
                    </span>
                  </el-tooltip>
                </div>
              </template>
              <template #content>
                <PieChart ref="pie_chart" :PieData="ETDobj" style="height: 300px"></PieChart>
              </template>
            </VBox_Dashboard>
          </div>
          <!-- Container Count -->
          <div v-else-if="item.id === 5 && item.switchValue" class="filters_left">
            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
              <template #header>
                <div class="Title_flex" style="justify-content: space-between">
                  <div class="Title_flex">
                    {{ item.title }}
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      :content="item.text"
                      placement="bottom-start"
                    >
                      <span class="iconfont_icon iconfont_icon_tip">
                        <svg class="iconfont" aria-hidden="true">
                          <use xlink:href="#icon-icon_info_b"></use>
                        </svg>
                      </span>
                    </el-tooltip>
                  </div>
                  <div style="margin-right: 50px">
                    <span style="font-weight: 400; font-size: 14px; margin-right: 4px">Type</span>
                    <el-select
                      v-model="value"
                      placeholder="Select"
                      style="width: 100px"
                      @change="changeType"
                    >
                      <el-option
                        v-for="item in containerObj.barSeries"
                        :key="item.name"
                        :label="item.name"
                        :value="item.name"
                      />
                    </el-select>
                  </div>
                </div>
              </template>
              <template #content>
                <BarChart
                  ref="seller_chart"
                  :BarData="containerObj"
                  style="height: 300px"
                  :barHeight="{ height: '300px' }"
                ></BarChart>
              </template>
            </VBox_Dashboard>
          </div>
          <!-- Top10 Origin/Top 10 Destination -->
          <div v-else-if="item.id === 6 && item.switchValue" class="KPI_Pending">
            <VBox_Dashboard @changeCancel="changeCancel(item.id)" style="width: 100%">
              <template #header>
                <div class="Title_flex" style="align-items: start">
                  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
                    <el-tab-pane :label="item.title1" name="first"></el-tab-pane>
                    <el-tab-pane :label="item.title2" name="second"></el-tab-pane>
                  </el-tabs>
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="item.text"
                    placement="bottom-start"
                  >
                    <span class="iconfont_icon iconfont_icon_tip">
                      <svg class="iconfont" aria-hidden="true" style="vertical-align: 1px">
                        <use xlink:href="#icon-icon_info_b"></use>
                      </svg>
                    </span>
                  </el-tooltip>
                </div>
              </template>
              <template v-if="isShowtitle1" #content>
                <div class="KPI_Pending">
                  <div class="seller_chart">
                    <SellerChart
                      ref="seller_chart"
                      :SellerData="Top10Obj.OriginData"
                      :Interval="Top1OInterval"
                      style="height: 272px"
                    ></SellerChart>
                  </div>
                  <div class="map">
                    <TopMap></TopMap>
                  </div>
                </div>
              </template>
              <template v-else #content2>
                <div class="KPI_Pending">
                  <div class="seller_chart">
                    <SellerChart
                      ref="seller_chart"
                      :SellerData="Top10Obj.DestinationData"
                      :Interval="Top1OInterval"
                      style="height: 272px"
                    ></SellerChart>
                  </div>
                  <div class="map">
                    <TopMap></TopMap>
                  </div>
                </div>
              </template>
            </VBox_Dashboard>
          </div>
          <!-- CO2e Emission by Origin (Top 10) -->
          <div v-else-if="item.id === 7 && item.switchValue" class="filters_left">
            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
              <template #header>
                <div class="Title_flex">
                  {{ item.title }}
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="item.text"
                    placement="bottom-start"
                  >
                    <span class="iconfont_icon iconfont_icon_tip">
                      <svg class="iconfont" aria-hidden="true">
                        <use xlink:href="#icon-icon_info_b"></use>
                      </svg>
                    </span>
                  </el-tooltip>
                </div>
              </template>
              <template #content>
                <BarChart
                  ref="seller_chart"
                  :BarData="EmissionObj"
                  style="height: 250px"
                  :barHeight="{ height: '250px' }"
                ></BarChart>
              </template>
            </VBox_Dashboard>
          </div>
          <!-- CO2e Emission by Destination (Top 10) -->
          <div v-else-if="item.id === 8 && item.switchValue" class="filters_left">
            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
              <template #header>
                <div class="Title_flex">
                  {{ item.title }}
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="item.text"
                    placement="bottom-start"
                  >
                    <span class="iconfont_icon iconfont_icon_tip">
                      <svg class="iconfont" aria-hidden="true">
                        <use xlink:href="#icon-icon_info_b"></use>
                      </svg>
                    </span>
                  </el-tooltip>
                </div>
              </template>
              <template #content>
                <BarChart
                  ref="seller_chart"
                  :BarData="DestinationObj"
                  style="height: 250px"
                  :barHeight="{ height: '250px' }"
                ></BarChart>
              </template>
            </VBox_Dashboard>
          </div>
        </template>
      </VueDraggable>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.Title {
  display: flex;
  height: 68px;
  font-size: var(--font-size-6);
  font-weight: 700;
  padding: 0 23.32px;
  align-items: center;
  justify-content: space-between;
}
.iconfont {
  vertical-align: -2px;
}
.Management {
  max-height: 800px;
  overflow-y: scroll;
}
.title {
  font-weight: 700;
  font-size: var(--font-size-5);
  background-color: var(--color-header-bg);
  height: 48px;
  display: flex;
  align-items: center;
  padding-left: 16px;
}
.management_content {
  width: 368px;
  min-height: 54px;
  margin: 10px auto;
  background-color: var(--color-header-bg);
  border-radius: var(--border-radius-6);
  padding: 8px 16px;
}
.management_flex {
  display: flex;
  height: 20px;
  justify-content: space-between;
  align-items: center;
}
.content_title {
  font-weight: 700;
  font-size: var(--font-size-3);
}
.content_text {
  color: var(--color-neutral-2);
}
.tips {
  display: flex;
  justify-content: center;
}
.tips_text {
  width: 278.43px;
  text-align: center;
  font-size: var(--font-size-2);
  color: var(--color-neutral-2);
}
.el-divider--horizontal {
  margin: 8px 0;
}
.Save_filters {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  font-size: var(--font-size-3);
  widows: 126px;
  margin: 8px 0;
  cursor: pointer;
}
.iconfont_icon_save {
  margin-right: 16px;
}
.Save_filters:hover {
  border-color: var(--color-btn-default-bg-hover);
  background-color: var(--color-btn-default-bg-hover);
  fill: var(--color-theme);
  div {
    color: var(--color-theme);
  }
}
:deep(.el-checkbox-button__inner) {
  color: var(--tag-info-text-color);
  font-size: var(--font-size-3);
  font-weight: 400;
  padding: 0;
  width: 61px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  margin-bottom: 8px;
}
:deep(.el-checkbox-button__inner:hover) {
  color: var(--color-theme);
  background-color: var(--color-btn-default-bg-hover);
  border-color: var(--color-btn-default-bg-hover);
}
:deep(.el-checkbox-button.is-focus .el-checkbox-button__inner) {
  border-color: transparent;
}
:deep(.el-checkbox-button:first-child .el-checkbox-button__inner) {
  border-left: 1px solid var(--color-border);
  border-top-left-radius: var(--border-radius-6);
  border-bottom-left-radius: var(--border-radius-6);
}
:deep(.el-checkbox-button:last-child .el-checkbox-button__inner) {
  border-top-right-radius: var(--border-radius-6);
  border-bottom-right-radius: var(--border-radius-6);
}
:deep(.el-checkbox-button.is-checked .el-checkbox-button__inner) {
  color: #ffffff;
  background-color: var(--color-theme);
  border-color: var(--color-theme);
  box-shadow: none;
  font-weight: 700;
}
:deep(.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner) {
  border-left-color: var(--color-theme);
}
:deep(.el-checkbox-button.is-focus .el-checkbox-button__inner) {
  border-color: var(--color-border);
}
.filters {
  display: flex;
  padding: 0 23.32px;
  align-items: center;
  justify-content: space-between;
}
.KPI_Pending {
  display: flex;
  width: 100%;
}
.filters_left {
  width: 49%;
  border-radius: var(--border-radius-6);
}
.KPI_title {
  border-bottom: 1px solid var(--color-border);
  height: 48px;
  line-height: 48px;
  align-items: center;
  justify-content: space-between;
  display: flex;
  padding-left: 16px;
  font-weight: 700;
  font-size: var(--font-size-5);
}
.tips_filter {
  margin-right: 8px;
}
.filters_right {
  width: 251px;
  height: 32px;
  margin-bottom: 8px;
}
:deep(.ETD_title) {
  margin-bottom: 0 !important;
}
:deep(:where(.css-dev-only-do-not-override-19iuou).ant-picker-range) {
  height: 32px;
}
.echarts {
  padding: 0 23.32px;
}
.kpi {
  width: 50%;
  border-right: 1px solid var(--color-border);
}
.kpi:last-child {
  border-right: none;
}
.ghost-class {
  opacity: 0;
}
.fallback-class {
  opacity: 1 !important;
  background-color: #fff;
  cursor: move !important;
  box-shadow: 4px 4px 32px 0px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-border);
  padding: 4px 8px;
}
.container-type {
  font-size: 14px;
  font-weight: 400;
  margin-right: 4px;
}
.seller_chart {
  width: 30%;
  border-right: 1px solid var(--color-border);
}
.map {
  width: 70%;
}
.Title_flex {
  display: flex;
  align-items: center;
}
.iconfont_icon_tip {
  margin-left: 8px;
}
.dashboard {
  z-index: 2014;
  position: relative;
  background-color: white;
  padding-bottom: 20px;
}
</style>